.page-content aside h1,
.content li,
.portfolio-container p{
 animation-name:main-focus;
 animation-duration:1s;
 animation-timing-function:linear;
}

@keyframes main-focus{
 0%{transform:translateX(-3px)}
 100%{transform:translateX(0px)}

}

.values .working-method,
.services h2,
.testimonials .intro{
 /* animation properties */
 animation-name:vision-method;
 animation-duration:2s;
 animation-timing-function:linear;
}

@keyframes vision-method{
 0%{transform:scale(0.95)}
 100%{transform:scale(1)}
}

.page-content main,
.services-container main{
 animation-name:main-appear;
 animation-duration:1s;
 animation-timing-function:linear;
}

@keyframes main-appear{
 0%{visibility:hidden;transform:translateX(100px)}
 100%{transform:translateX(0px)}
}

.educate-section{
 animation-name:education-topic;
 animation-duration:1s;
 animation-timing-function:linear;
}

@keyframes education-topic{
 0%{transform:translateY(-300px)}
 100%{transform:translateY(0px)}
}
:root{
 /* Font Sizes (Desktop) */
 --h1-size:2.5rem;
 --h2-size:1.6rem;
 --h3-size:1.4rem;
 --h4-size:1.2rem;

 /* Line Heights (Desktop) */
 --h1-line-height:1.2;
 --h2-line-height:1.3;
 --h3-line-height:1.3;
 --h4-line-height:1.4;

 /* =========================
 Core accents (keep)
 ========================= */

 --blue:#1C568B;/* primary structure */
 --mediumblue:#00507A;/* hover / emphasis */

 --orange:#EB5B23;/* controlled accent */
 --darkorange:#EB5B23;

 /* =========================
 De-emphasise / restrict
 ========================= */

 --red:#D62828;/* avoid for branding */
 --redlight:#D62828;/* errors only */

 /* =========================
 Neutrals (good as-is)
 ========================= */

 --black:#161515;/* headings only */
 --grey:#495057;/* body text */
 --darkgrey:#495057;

 --lightgrey:#F5F5F5;/* panels / sections */
 --white:#F6F2DF;/* background (warm white) */

 /* =========================
 Legacy light blues
 ========================= */

 --lightblue:var(--blue);
 --lightblue2:#99D4D6;
 --lightblue3:#98BEFC;

 --p-size:1.2rem;
 --section-padding:2.5rem;

 --nav-font-family:var(--engaging-font-family);
 --nav-font-size:var(--h4-size);
 --nav-line-height:var(--h4-line-height);
 --nav-margin-bottom:var(--paragraph-margin-bottom);
 --nav-color:var(--text-color);

 --title-font-family:var(--engaging-font-family);
 --title-font-size:2em;
 --title-font-weight:300;
 --title-line-height:var(--h4-line-height);
 --title-margin-bottom:var(--h4-margin-bottom);
 --title-color:var(--heading-color);

 --cta-padding:0.7em;
 --cta-bg:var(--cta-secondary);
 --cta-bg-hover:var(--cta-secondary-hover);
 --cta-color:var(--white);
 --cta-font-size:var(--h4-size);
 --cta-width:var(--button-width);
 --cta-radius:3px;
 --cta-font-weight:bold;

 --input-border-color:var(--grey);
 --input-border-radius:3px;

 --heading-color:#333;
 --text-color:var(--grey);
 --clear-font-family:'Inter',sans-serif;
 --engaging-font-family:"Tenor Sans",sans-serif;
 --cta-primary:var(--blue);
 --cta-primary-hover:var(--mediumblue);
 --cta-secondary:var(--orange);
 --cta-secondary-hover:var(--orange);

 --megamenu-background-color:#fff;

 /* Layout Tokens */
 --standard-gap:2rem;
 --header-height:150px;
 --usp-height:55px;

 /* Font Sizes (Desktop) */
 --li-size:1.2rem;
 --section-title-size:2rem;

 /* Line Heights (Desktop) */
 --p-line-height:1.8;
 --li-line-height:1.6;
 --section-title-line-height:1.3;

 /* Spacing */
 --sub-section-padding:1.5rem;
 --card-padding:1.2rem;
 --card-margin:1.2rem 0.3rem;
 --icon-margin:0.3rem;
 --list-margin-left:1rem;

 /* Vertical Rhythm */
 --heading-margin-bottom:1.5rem;
 --paragraph-margin-bottom:1.2rem;
 --list-margin-bottom:1.2rem;
 --h1-margin-bottom:1.5rem;
 --h2-margin-bottom:1.4rem;
 --h3-margin-bottom:1.3rem;
 --h4-margin-bottom:1.2rem;
 --button-padding:1rem 2rem;
 --button-width:200px;

 /* Widgets styling */
 --small-size:0.9rem;
 --text-font-family:var(--clear-font-family);
 --text-font-size:1.3em;
 --text-line-height:var(--p-line-height);
 --text-margin-bottom:var(--paragraph-margin-bottom);

 /* Widget usp */
 --re-usp-bg:#1C568B;
 --re-usp-text-color:#F6F2DF;

 --col-gap:3em;

 --highlight-text-font-family:var(--engaging-font-family);
 --highlight-text-spacing:1px;
 --highlight-text-size:1.5rem;
}

@media (max-width:1200px){
:root{
 --megamenu-background-color:var(--white);
}
}

@media (max-width:768px){
:root{
 /* Font Sizes (Mobile) */
 --h1-size:1.9rem;
 --h2-size:1.4rem;
 --h3-size:1.3rem;
 --h4-size:1.2rem;

 /* Line Heights (Mobile) */
 --h1-line-height:1.3;
 --h2-line-height:1.35;
 --h3-line-height:1.4;
 --h4-line-height:1.5;

 /* Adjust layout if needed */
 --header-height:100px;
 --usp-height:50px;
 --standard-gap:1.5rem;

 /* Font Sizes (Mobile) */
 --p-size:1rem;
 --li-size:1rem;
 --section-title-size:1.6rem;

 /* Line Heights (Mobile) */
 --p-line-height:1.5;
 --li-line-height:1.5;
 --section-title-line-height:1.3;

 /* Adjusted Section Padding */
 --section-padding:1rem 10px;
 --sub-section-padding:1rem;
 --paragraph-margin-bottom:1rem;
 --list-margin-bottom:1rem;
 --h1-margin-bottom:1.5rem;
 --h2-margin-bottom:1.5rem;
 --h3-margin-bottom:1.5rem;
 --h4-margin-bottom:1.5rem;
 --button-padding:1rem 2rem;
 --card-margin:1.2rem;
 --icon-margin:0.3rem;
 --list-margin-left:1rem;

 --megamenu-background-color:var(--white);
 --title-font-size:var(--h2-size);
 --text-font-size:var(--p-size);

 --highlight-text-size:1.2rem;

 --nav-font-size:1.1em;
 --cta-font-size:1.1em;
}
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 color:var(--grey);
 font-family:"Tenor Sans",sans-serif;
}

body{
 font-family:sans-serif;
 color:#343040;
 font-size:var(--p-size);
 display:grid;
}

h1{
 font-size:var(--h1-size);
 font-weight:normal;
}

h2{
 font-size:var(--h2-size);
 font-weight:normal;
}

h3{
 font-size:var(--h3-size);
 font-weight:normal;
}

h4{
 font-size:var(--h4-size);
 font-weight:normal;
}

h5{
 font-size:var(--h5-size);
 font-weight:normal;
}

.light-box{
 background:var(--lightgrey);
 position:relative;
 display:flex;
 padding:20px;
 margin:10px 0;
 gap:1rem;
 line-height:1.5;
}

.light-box .content{
 line-height:1.5;
}

.light-box .ethos{
 color:var(--orange);
 font-size:1.1rem;
 letter-spacing:0;
 line-height:1.2;
}

.light-box .illustration{
 /* Placeholder for illustration styles */
}

.light-box h4{
 font-size:1.6rem;
 line-height:1.1;
 margin-top:2rem;
 margin-bottom:1rem;
}

.light-box h5{
 font-size:1.3rem;
 line-height:1.2;
 margin:1.2rem 0;
}

.light-box p{
 line-height:1.7rem;
}

.light-box ul{
 margin:20px;
}

.light-box ul li{
 line-height:1.8rem;
}

.dark-box{
 margin:10px 0 20px;
 background:var(--darkgrey);
 gap:1rem;
 position:relative;
 display:flex;
 padding:20px;
}

.dark-box ul{
 margin:1rem;
}

.dark-box ul li,
.dark-box h4,
.dark-box p,
.dark-box strong{
 color:var(--white);
}

.dark-box ul li{
 line-height:1.8rem;
}


.page-content{
 margin-top:250px;
 /*padding:0 var(--section-padding);*/
}

strong{
 font-weight:bold;
}
logo{
 margin-right:auto;
 overflow:hidden;
 max-width:100%;
}
@media (min-width:600px){
 logo{
 height:135px;
}
}

@media (max-width:600px){
 logo{
 height:75px;
}
}

.logo{
 max-width:100%;
 height:auto;
}

@media (max-width:600px){
 .logo{
 max-width:200px;
}
}


header{
 margin-top:var(--usp-height);
 grid-column:1 / -1;
 display:flex;
 gap:12px;
 padding:10px 40px 10px 0;
 flex-shrink:0;
 position:fixed;
 background:#fff;
 z-index:1111;
 width:100%;
}

header .call-us,header .call-us a{
 color:var(--orange);
 font-size:1.2rem;
}

header .call-us{
 position:absolute;
 right:40px;
 top:20px;
 font-size:1.1rem;
}

.key-area,.ethos{
 font-size:1.4rem;
 font-weight:400;
 margin-bottom:1rem;
 font-family:"Tenor Sans",sans-serif;
 margin-top:20px;
}

.key-area,.key-area strong,.key-area a{
 font-weight:bolder;
 color:var(--orange);
}
.testimonials{
 display:grid;
 grid-template-columns:1fr 4fr 1fr;
 background:linear-gradient(90deg,#ffffff 0%,var(--lightgrey) 70%,#ffffff 95%);
}

.testimonials .author{
 border-radius:3px;
 padding:10px 5px 5px;
 margin:2rem 0 2rem 4rem;
 text-align:center;
}

.testimonials .author img{
 border-radius:5px;
}

.testimonials .intro{
 color:var(--black);
 font-size:1.1rem;
 line-height:2;
 font-weight:normal;
 padding:2rem 5rem 1rem 6rem;
 text-align:center;
 height:100px;
 margin-top:2rem;
}

.testimonials .detail{
 grid-column:1 / -1;
 grid-row:2;
 color:var(--darkgrey);
 font-size:1rem;
 line-height:1.4;
 font-weight:normal;
 padding:1rem 4rem;
}

.page-content{
 display:grid;
 height:100vh;
 gap:2rem;
 padding:0 var(--section-padding);
}

.page-wide-content{
 height:100vh;
 gap:2rem;
 padding:0 var(--section-padding);
}

@media (min-width:600px){
 .page-content,
 .page-wide-content{
 margin-top:calc(145px + var(--usp-height));
}
 .page-content{
 grid-template-columns:40% 1fr;
}
}

@media (max-width:600px){
 .page-content,
 .page-wide-content{
 margin-top:calc(100px + var(--usp-height));
}
 .page-content{
 grid-template-columns:1fr;
}
}

/* MAIN CONTENT */
.page-content main .hero-title{
 padding:1rem;
}

.page-content main h1{
 color:var(--black);
 margin-bottom:3rem;
}

.page-content main h2{
 color:var(--black);
 margin-bottom:2rem;
 line-height:2rem;
}

.page-content main .zero-to-one{
 margin-top:1.5rem;
 padding:1.5rem;
 background-color:#f9f9f9;/* Light grey background */
 border-left:4px solid var(--orange);/* Accent border */
 border-radius:6px;
 box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.page-content main .zero-to-one h2{
 margin-top:0;
 font-size:1.5rem;
 color:#333;
}

.page-content main .zero-to-one ul{
 list-style:none;
 padding-left:0;
 margin:1rem 0 0 0;
}

.page-content main .zero-to-one li{
 margin-bottom:1rem;
 font-size:var(--p-size);
 line-height:1.6;
 color:#555;
}

.page-content main .zero-to-one li strong{
 display:block;
 color:#000;
 margin-bottom:0.25rem;
}


.page-content main .button{
 display:block;
 background:var(--black);
 width:300px;
 margin-right:25px;
 border:1px solid;
 color:white;
 font-weight:bold;
 text-transform:uppercase;
 padding:15px 40px;
 cursor:pointer;
 text-decoration:none;
 line-height:1.5rem;
}

.page-content main a.button:hover{
 border:1px solid var(--orange);
}

/* ASIDE CONTENT */
.page-content aside{
 padding:30px 9%;
 background:var(--lightblue);
 border-radius:4px;
}

.page-content aside .subscription-content h1{
 color:var(--black);
}

.page-content aside h1{
 color:var(--white);
 padding-bottom:1.8rem;
 margin-bottom:1.8rem;
 margin-top:3rem;
 border-bottom:1px solid;
}

.page-content aside h2{
 color:var(--white);
}

.page-content aside ul{
 list-style-type:none;
}

.page-content aside strong{
 color:var(--white);
 font-weight:bold;
}

.page-content aside .content ul li{
 background-size:30px;
 padding-left:40px;
 padding-top:3px;
 margin:20px 0;
 line-height:1.5rem;
 color:var(--white);
}

.page-content aside .lead-not-working{
 background:url('../images/face-1-sad-black.png') no-repeat left top;
 background-size:50px;
 padding-left:100px;
 height:50px;
}

.page-content aside .wordpress-solution{
 background:url('../images/face-2-happy-black.png') no-repeat left top;
 background-size:50px;
 padding-left:100px;
}

.page-content aside .wordpress-solution b{
 display:block;
 margin-bottom:0.7rem;
}

.page-content aside b{
 font-weight:bolder;
}

.page-content aside .video-container{
 position:relative;
 width:100%;
 max-width:560px;
}

.page-content aside .video-container iframe{
 width:100%;
 height:100%;
 min-height:250px;
}

.page-content aside .wordpress-solution a.button{
 display:block;
 margin-top:20px;
 background:var(--darkorange);
 width:230px;
 margin-right:25px;
 border:1px solid;
 color:white;
 font-weight:bold;
 text-transform:uppercase;
 padding:15px 50px;
 cursor:pointer;
 text-decoration:none;
}

.page-content aside .wordpress-solution a.button:hover{
 color:white;
}

.page-content aside .key-find{
 font-family:"Tenor Sans",sans-serif;
 background-image:url(../images/box-2-black.png);
 background-size:300px;
 width:300px;
 height:200px;
 padding:53px 50px;
 font-size:1.6rem;
 line-height:2rem;
 color:var(--orange);
 font-weight:500;
}

.page-content aside p{
 margin-bottom:30px;
 line-height:1.6;
}

.page-content aside .button{
 background:none;
 padding:10px 30px;
 width:150px;
 margin-right:25px;
 border:1px solid;
 color:var(--black);
 cursor:pointer;
 text-decoration:none;
}

.page-content aside a.button:hover{
 border:1px solid var(--orange);
 color:var(--orange);
}

/* EDUCATE SECTION */
.page-content .educate-section{
 display:flex;
 grid-column:1 / -1;
 z-index:3;
 gap:20px;
 margin:50px 0 0;
 font-size:1.1rem;
 line-height:1.6;
}

.page-content .educate-section dd{
 border-radius:1rem;
 padding:15px;
 width:24%;
 position:relative;
 background:linear-gradient(20deg,#f5f5f5,#e0e0e0);
}

.page-content .educate-section dd h3{
 font-size:1.6rem;
}

.page-content .educate-section dd p{
 margin-bottom:90px;
}

.page-content .educate-section dd button{
 display:block;
 width:70%;
 padding:10px;
 margin:0 auto;
 background:var(--darkorange);
 border:1px solid var(--darkorange);
 color:var(--white);
 font-size:1.3rem;
 position:absolute;
 left:15%;
 bottom:10px;
 border-radius:5px;
 cursor:pointer;
 font-weight:bold;
}


.subscription-hero{
 background:linear-gradient(135deg,#f5f5f5,#e0e0e0);
 padding:4rem 2rem;
 text-align:center;
 border-radius:8px;
 margin:2rem 0;
}

.subscription-content h1{
 font-size:2.5rem;
 margin-bottom:1rem;
 color:#333;
}

.subscription-content p{
 font-size:1.2rem;
 margin-bottom:2rem;
 color:#555;
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
}

.cta-button{
 display:inline-flex;
 align-items:center;
 font-size:var(--cta-font-size);
 gap:var(--cta-gap);
 padding:var(--cta-padding);
 background:var(--cta-bg);
 font-weight:var(--cta-font-weight);
 color:var(--cta-color);
 text-decoration:none;
 border-radius:var(--cta-radius);
 transition:background .15s ease;
 border:none;
 cursor:pointer;
}

.cta-button:hover{
 background-color:#e65c00;
}

.credibility{
 font-size:1rem;
 color:#6b7280;
 margin-top:14px;
 margin-bottom:18px;
 padding-left:12px;
 border-left:3px solid #d1d5db;
 max-width:600px;
 line-height:1.5;
}

.credibility{
 animation:fadeIn 0.8s ease;
}

@keyframes fadeIn{
 from{
 opacity:0;
 transform:translateY(4px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}

banner-widget{
 display:block;
 min-height:425px;
}

.subscription-content ul{
 list-style:none;
 padding:0;
 margin:1.5rem 0;
}

.subscription-content li
{
 margin-bottom:0.6rem;
 line-height:1.4;
 font-size:0.95rem;
 color:#444;
 padding-left:12px;
 border-left:2px solid #d0d7e2;
}
nav{
 display:flex;
 gap:30px;
 margin-top:20px;
 justify-content:right;
}

nav .fallback{
 /*transform:translateX(-1000%);
 transition:transform 0.25s ease;*/
 position:absolute;
 left:-10000px;
}

header nav li{
 list-style:none;
}

header nav ul{
 display:flex;
 gap:50px;
}

nav{
 position:relative;
}
nav button{
 visibility:hidden;
}

.drawer{
 position:fixed;
 top:0;
 right:0;
 max-height:700px;
 width:90%;
 background:white;
 z-index:1001;
 transform:translateX(100%);
 transition:transform 0.3s ease;
 overflow-y:auto;
 border-radius:12px;
}
nav.active .drawer{
 transform:translateX(-8px);
}

@media (max-width:900px){
 nav{
 position:absolute;
 top:20px;
 right:40px;
}
 nav button{
 position:absolute;
 top:10px;
 z-index:1111111;
 background:none;
 border:none;
 cursor:pointer;
}
 nav button.open{
 visibility:visible;
 width:30px;
 color:white;
}

 nav{
 visibility:hidden;
 width:30px;
}

 nav.active button.open{
 visibility:hidden;
}

 nav.active button.close{
 visibility:visible;
 width:30px;
 top:13px;
 right:40px;
}
 nav.active{
 position:absolute;
 visibility:visible;
 right:0;
 top:30px;
}
 nav.active a{
 width:100%;
 float:right;
}
 nav.active{
 flex-direction:column;
 gap:15px !important;
 width:50%;
 background:#fff;
 position:absolute;
 z-index:99;
 padding:20px;
 right:0;
}
 nav{
 margin-top:0 !important;
}
 header nav ul{
 flex-direction:column;
 margin-left:3rem;
}
}
.contact-form-frame{
 border:2px solid #ccc;
 padding:24px;
 margin:0 auto;
 background:#fff;
 border-radius:8px;
 box-shadow:0 0 10px rgba(0,0,0,0.1);
}


.comment-form h4{
 margin-bottom:2rem;
}

.comment-form p{
 line-height:1.5rem;
 font-size:1.1rem;
 margin-bottom:2rem;
 width:70%;
}

.float-label-field{
 border:none;
 outline:none;
 position:relative;
 margin:0 0 20px 0;
 padding:0;
 box-sizing:border-box;
}

.float-label-field input,.float-label-field textarea{
 outline:none;
 width:100%;
 font-size:18px;
 padding:10px;
 margin-top:4px;
 border:1px solid #bbb;
 border-radius:4px;
}

.float-label-field label{
 opacity:0.5;
 position:absolute;
 top:5px;
 left:5px;
 transition:all 0.2s ease;
 font-size:18px;
 margin-top:12px;
 font-weight:bold;
}

.float-label-field.focus label{
 color:var(--orange);
}
.float-label-field.focus input,.float-label-field.focus textarea{
 border-bottom:solid 1px var(--orange);
}
.float-label-field.float label{
 opacity:1;
 top:-8px;
 font-size:60%;
 transition:all 0.2s ease;
 font-weight:bold;
}
.success{
 color:green;
 margin-bottom:1rem;

}
.error{
 color:red;
}

.wp-block-code{
 color:#f8f8f2;
 background:none;
 text-shadow:0 1px rgba(0,0,0,0.3);
 font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
 text-align:left;
 white-space:pre;
 word-spacing:normal;
 word-break:normal;
 word-wrap:normal;
 line-height:1.5;
 -moz-tab-size:4;
 tab-size:4;
 -webkit-hyphens:none;
 -moz-hyphens:none;
 -ms-hyphens:none;
 hyphens:none;
}

td code{
 padding:7px 4px 7px 2px;
}

.wp-block-navigation .current-menu-item a{
 text-decoration:underline !important;
}

#map{
 height:100%
}

.placeholder-block{
 padding:20px;
 font-size:1.4rem;
 background:var(--grey);
}
.portfolio-container main{
 background:linear-gradient(90deg,#ffffff 0%,var(--lightgrey) 70%,#ffffff 95%);
 height:100vh;
}

.portfolio-container main h1,
.portfolio-container main h2{
 color:var(--black);
}

.portfolio-container main h1{
 margin-bottom:1rem;
}

.portfolio-container main h2{
 line-height:1.3;
 font-size:1.5rem;
}

.portfolio-container main .featured-work{
 display:grid;
 gap:2rem;
 margin-top:2rem;
}

.portfolio-container .project{
 background:#fff;
 border:1px solid #eee;
 border-radius:12px;
 transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.portfolio-container .project:hover{
 transform:translateY(-4px);
 box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.portfolio-container .project img{
 border-radius:8px;
 display:block;
 margin-bottom:0.75rem;
}

.portfolio-container .project p{
 font-size:0.95rem;
 color:#333;
 line-height:1.5;
 margin-bottom:0.5rem;
}

.portfolio-container .project a{
 color:#0a66c2;
 font-weight:bold;
 text-decoration:none;
}

.portfolio-container .project a:hover{
 text-decoration:underline;
}

.project-frame{
 display:flex;
 flex-direction:column;
 align-items:center;
 border:2px solid #ddd;
 border-radius:8px;
 padding:16px;
 margin:24px auto;
 max-width:800px;
 box-shadow:0 0 8px rgba(0,0,0,0.1);
}

.image-frame{
 border:1px solid #ccc;
 padding:8px;
 background:#f9f9f9;
 margin-bottom:12px;
}

.image-frame{
 aspect-ratio:1100 / 520;
}


.image-frame img{
 max-width:100%;
 display:block;
 margin:0 auto;
}

.content-frame{
 width:100%;
 border-top:1px dashed #bbb;
 padding-top:12px;
}

.excerpt{
 font-size:1rem;
 margin-bottom:8px;
}

.links a{
 margin-right:12px;
 text-decoration:none;
 color:#0070f3;
}


.portfolio-container main .img{
 /* Placeholder for .img styles if needed */
}

.portfolio-container main .call-to-action{
 display:flex;
 align-items:center;
 gap:10rem;
}

.portfolio-container main .call-to-action .key-take{
 font-family:"Tenor Sans",sans-serif;
 background-image:url(../images/box-2-black.png);
 background-size:300px;
 width:300px;
 height:200px;
 padding:48px 40px;
 font-size:1.6rem;
 line-height:2rem;
 color:var(--orange);
 font-weight:500;
}

.portfolio-container main .call-to-action a.button{
 margin-top:20px;
 background:var(--orange);
 width:230px;
 margin-right:25px;
 border:1px solid;
 color:white;
 font-weight:bold;
 text-transform:uppercase;
 padding:15px 50px;
 cursor:pointer;
 text-decoration:none;
 height:50px;
}



.services-container{
 display:grid;
 grid-template-columns:1fr 30%;
 padding:0 var(--section-padding);;
}

/* MAIN STYLES */
.services-container main .hero-title{
 padding:4rem;
}

.services-container main h1{
 color:var(--black);
 padding-bottom:1.8rem;
 margin-bottom:1.8rem;
}

.services-container main h2{
 color:var(--black);
 font-size:1.4rem;
 margin-bottom:3rem;
}

.services-container main p{
 line-height:1.7;
}

.services-container main strong{
 font-weight:bold;
}

.services-container main button{
 background:var(--black);
 width:230px;
 margin-right:25px;
 border:1px solid;
 color:white;
 font-weight:bold;
 text-transform:uppercase;
 padding:15px 50px;
}

/* ASIDE STYLES */
.services-container aside{
 margin:0 3rem;
 padding:0 var(--section-padding);
}

/* SECTION STYLES */
.services-container section{
 grid-column:1 / -1;
 grid-row:2;
 padding:2rem;
 position:relative;
 display:flex;
}

.services-container section ul{
 width:45%;
 margin:0 3%;
}

.services-container section li{
 font-size:1.3rem;
 line-height:2;
 font-weight:bold;
}


/* Tag Cloud Styling */
.tag-cloud{
 h3{
 text-align:left;
 color:var(--white);
 padding-bottom:1.8rem;
 margin-bottom:1.8rem;
 margin-top:3rem;
 border-bottom:1px solid;
}
 text-align:center;
 padding:20px;
}

.tag-cloud p{
 color:var(--white);
}

.tag-cloud a{
 display:inline-block;
 margin:5px;
 color:#333;
 padding:5px 7px;
 text-decoration:none;
 border-radius:5px;
 font-weight:bold;
 font-size:14px;
 transition:all 0.3s ease-in-out;
}

.tag-cloud a:hover{
 background-color:#333;
 color:#fff;
 transform:scale(1.1);
}

.tag-cloud a:nth-child(odd){
 background-color:#e0e0e0;
}

.tag-cloud a:nth-child(even){
 background-color:#d0d0d0;
}

.reactedge-usp .usp-slider-bar.dark,
.reactedge-usp .usp-static-bar.dark,
.reactedge-usp .usp-slider-bar.light,
.reactedge-usp .usp-static-bar.light{
 background:#1C568B;
}

.usp{
 position:fixed;
 width:100%;
 justify-content:space-between;
 background:var(--blue);
 color:var(--white);
 z-index:10;
 padding:0;
 top:0;
}

.reactedge-usp [data-usp-slide]{
 color:#F6F2DF;
}

usp-widget{
 display:block;
}
@media (max-width:600px){
 *{
 margin:0;
 padding:0;
}

 body{
 grid-template-columns:1fr;
}

 header nav ul{
 flex-direction:column;
}

 header{
 padding:10px 0px 10px 0;
}

 .values main .working-method{
 font-size:1.1em;
 padding:3rem 3rem 3rem;
}

 .values main .business-mantra{
 font-size:1.2rem;
 line-height:1.4;
 padding:2rem 3rem;
}

 .portfolio-container main{
 padding:2rem;
}

 .portfolio-container main h2{
 line-height:1.3;
}

 .portfolio-container main .img{
 width:30%;
}

 .portfolio-container .call-to-action{
 gap:0 !important;
 flex-direction:column;
}

 .portfolio-container main .featured-work{
 grid-template-columns:1fr;
}


 .educate-section{
 grid-template-columns:1fr !important;
}

 .page-content{
 padding-left:0;
}

 .page-content main img{

}

 .page-content main .hero-title{
 padding:1rem 0 0 1rem;
}

 .page-content main .button{
 padding:15px 20px;
}

 .page-content aside{
 background:var(--lightblue);
 padding:60px 4%;
}

 .page-content aside .call-to-action{
 display:flex;
}

 .services-container{
 grid-template-columns:100%;
}

 .services-container main{
 margin-bottom:2rem;
 width:100% !important;
}

 .services-container aside{
 grid-row:2;
 margin:0 !important;
}

 .services-container section{
 grid-row:3;
 height:300px;
 display:flex;
 flex-direction:column;
 justify-content:flex-start;
 flex-wrap:wrap;
}

 .services-container section ul{
 box-sizing:border-box;
 width:50%;
 margin-left:1rem;
}

 .services-container section li{
 font-size:1rem !important;
}

 .testimonials{
 grid-template-columns:1fr 4fr 1fr;
}

 .testimonials .author{
 margin:2rem 0 1rem;
}

 .testimonials .intro{
 font-size:13px;
 padding:1rem 10px;
}

 .testimonials .detail{
 line-height:1.5;
 padding:1rem 1rem;
}

 header .ethos{
 margin-right:0;
 width:300px;
}

 header .call-us{
 display:none;
}

 .dark-box,
 .light-box{
 display:flex;
 flex-direction:column;
}
}

@media (max-width:300px){
 .values main .working-method{
 font-size:1rem;
 text-align:left;
 padding-bottom:1rem;
}

 .values main .business-mantra{
 text-align:left;
 font-size:1.1rem;
 padding:2rem 2.5rem 0 1.5rem;
}
}

@media (max-width:1500px){
 body{
 width:100%;
 margin:0;
}

 .home aside{
 padding-left:2em;
}
}

@media (min-width:900px){
 .portfolio-container main .featured-work{
 grid-template-columns:1fr 1fr;
}

 .portfolio-container main{
 padding:2rem;
}
}

@media (max-width:900px){
 body{
 width:100%;
 margin:0;
 padding:5px 0px;
}

 padding:0 var(--section-padding);


 logo{
 margin-left:5px;
}

 .values main{
 background:var(--lightblue);
}

 .values main .working-method{
 font-size:1.2rem;
 line-height:1.32;
 padding:3rem 5rem 4rem !important;
}

 .values main .business-mantra{
 font-size:1.4rem;
 line-height:1.4;
 font-weight:normal;
 padding:4rem 3rem !important;
}

 .portfolio-container main{
 padding:0rem;
}

 .portfolio-container main h2{
 line-height:1.3;
}

 .portfolio-container main .featured-work{
 max-width:1200px;
 display:flex;
 flex-direction:column;
 grid-template-columns:1fr;
}

 .portfolio-container main .img{
 /* Empty .img style placeholder */
}

 .page-content{
 grid-template-columns:1fr;
 height:auto;
}

 .page-content main .button{
 padding:15px 40px;
}

 .page-content aside{
 grid-row:2;
 padding:10px 4%;
 margin:10px 0 !important;
}

 .page-content aside .call-to-action{
 display:flex;
}

 .services-container{
 grid-template-columns:1fr !important;
}

 .services-container main{
 padding-left:10px;
}

 .services-container main .hero-title{
 padding:3rem;
}

 .services-container main h1{
 padding-bottom:1.4rem;
 margin-bottom:1.4rem;
}

 .services-container aside{
 margin:0 1rem;
 grid-row:2;
 grid-column:1 !important;
}

 .services-container section{
 grid-row:3 !important;
 grid-column:1 !important;
}

 .services-container section li{
 font-size:1.1rem;
}

 .educate-section{
 display:grid !important;
 grid-template-columns:1fr 1fr;
}

 .educate-section dd{
 width:100% !important;
}

 header .ethos{
 font-size:1rem;
 margin-right:auto;
 width:250px;
}
}