:root{
    --black:#000000;
    --second-black:#171717;
    --text:#525252;
    --grey:#EFEFEF;
	--blue:#154166;
	--red:#ED145B;
    --blue-grey:#F0F1F2;

    --gradient-red:
    linear-gradient(
        95.03deg,
        #ED145B 0%,
        #D63066 102.51%
    );

    --gradient-grey:#F0F1F2;

    --container:1400px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: "open-sans",sans-serif;
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition: 0.6s;
}
h1,h2,h3,h4,h5,h6{
    font-family: "Inter", sans-serif;
}
h1{
    color:#000;
    font-size:72px;
    line-height: 84px;
    letter-spacing: -2%;
    margin-bottom:30px;
}

h2{
    color:#000;
    font-size:43px;
    line-height: 56px;
    letter-spacing: -2%;
    margin-bottom:30px;
}

h3{
    color:#000;
    font-size:34px;
    line-height: 44px;
    letter-spacing: -2%;
    margin-bottom:30px;
}

.title{
    font-size:72px;
    line-height: 84px;
    font-weight: 600;
}

h4{
    color:#000;
    font-size:18px;
    line-height: 24px;
    letter-spacing: 0%;
    margin-bottom:0px;
}
h1 span,
h1 em,
h2 span,
h2 em,
h3 span,
h3 em,
h4 span,
h4 em{
    font-family: "ivypresto-display",serif;
    font-style: italic;
    font-weight: 400;
}

p{
    font-size:14px;
    line-height: 20px;
    font-weight: 400;
}

.mono-text{
    font-size:16px;
    line-height: 24px;
    font-weight: 400;
    font-family: "space-mono",mono;
    text-align: center;
    margin-bottom: 35px;
}

img{
    max-width: 100%;
}

.container{
    max-width: 1400px;
    margin:auto;
    width: 90%;
}

.second-container{
    max-width: 600px;
}

.padding-100{
    padding: 100px 0;
}

.flex-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-title h2{
    margin: 0px;
}

/* HEADER */

.site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    padding:30px 0;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-weight:700;
    color:#000;
}

nav .menu {
    display: flex;
    background: #fff;
    list-style: none;
    gap: 20px;
    justify-content: right;
    align-items: center;
    padding: 10px;
    border-radius: 25px;
    position: relative;
}

nav a{
    color:#000;
    font-size:14px;
	line-height:20px;
    font-weight:300;
    display: inline-block;
    padding: 10px 15px;
}
nav a:hover{
	color:var(--red);
}

.main-nav li{
    border: 0px;
    background-color: transparent !important;
}

.main-nav li.tag-link > a{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-around;
}
.main-nav li.tag-link > a .white-arrow{
    width: 25px;
    border: 1px solid #041B2F ;
    transition: 0.2s;
}


.main-nav li.tag-link > a .white-arrow svg path{
    stroke:#041B2F ;
    transition: 0.2s;
}


.main-nav li.tag-link > a:hover .white-arrow{
    border: 1px solid #fff ;
}
.main-nav li.tag-link > a:hover .white-arrow svg path{
    stroke:#fff ;
}

.ext-box-link{
    width: 100%;
}

.menu-category-logo{
    height: 24px;
    width: 24px;
}

.main-nav .sub-menu{
    position: absolute;
    display: grid;
    width: 650px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0px 0;
    transition: 0.6s;
    max-height: 0px;
    overflow: hidden;
    list-style: none;
    right: 0;
}
.main-nav li:hover .sub-menu{
    max-height: 10000px;
    padding: 25px 0;
}

.main-nav .sub-menu a{
    width: 100%;
    display: block;
    padding: 15px;
    background: #fff;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600px;
}

.text-box-link{ 
    width: 100%;
}


.main-nav .sub-menu a:hover{
    background:var(--gradient-red) !important;
    color: #fff;
}
.main-nav .sub-menu a:hover span{ opacity:1;}

.dark-item a{
    background:#041B2F !important;
    color: #fff;
}

.highlight-link > a,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 25px;
    border-radius:20px;
    background:var(--gradient-red);
    color:#fff;
    font-weight:600;
    text-align: center;
}

.highlight-link > a:hover,
.btn:hover{
    background:var(--blue);
	color:#fff !important;
	
}

.btn-white{
    background: #fff !important;
    color: var(--second-black);
}
.btn-white:hover{
    color: var(--blue-grey) !important;
    background: var(--second-black) !important;
}

.read-more{
    display: flex;
    gap: 10px;
    color: #000;
    border-bottom: 1px solid #ccc;
    padding: 5px 0px;
    align-items: center;
}

.read-more:hover{
    color: var(--red);
    border-color: var(--red);
}

.read-more:hover svg path{
    stroke: var(--red);
}

/* HERO */

.hero{
    padding:180px 0 120px;
    background-image:url(../img/hero-background.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:60px;
    align-items:end;
}

.hero p{
    font-size:18px;
    line-height: 24px;
    font-weight: 600;
    max-width: 500px;
	color:#000;
    
}

.hero-section p{
    font-size:14px;
    line-height: 20px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top: 50px;
    align-items: center;
    justify-content: flex-start;
}

.hero-page{
    padding: 200px 0 50px;
    background-image: url(../img/hero-background.jpg);
    text-align: center;
	
	background-size: cover;
}

.hero-page h1{
    text-align: center;
}

.hero-section{
    padding: 350px 0px 50px;
    position: relative;
    overflow: hidden;
    border: 0px !important;
}
.hero-section:before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    z-index: 1;
    background: linear-gradient(360deg, rgba(4, 27, 47, 0.8) 0%, rgba(13, 86, 149, 0) 100%);
    
}
.hero-section.tag-blue:before{
    background: linear-gradient(180deg, rgba(39, 170, 225, 0) 0%, rgba(2, 18, 116, 0.9) 100.07%);
}

.hero-section.tag-purple:before{
    background: linear-gradient(360deg, rgba(47, 4, 33, 0.9) 0%, rgba(149, 106, 13, 0) 100%);

}

.hero-section.tag-green:before{
    background: linear-gradient(180deg, rgba(141, 198, 63, 0) 0%, rgba(0, 45, 24, 0.9) 99.93%);

}


.hero-section.tag-pink:before{
    background: linear-gradient(180deg, rgba(244, 143, 175, 0) 0%, rgba(84, 0, 82, 0.9) 90%);

}

.hero-section.tag-yellow:before{
    background: linear-gradient(180deg, rgba(251, 176, 64, 0) 0%, rgba(120, 30, 0, 0.9) 99.93%);

}


.hero-section .hero-grid{
    display: flex;
    justify-content: space-between;

}

.hero-section h1,
.hero-section p,
.hero-section .read-more{
    color: #fff;
}

.hero-section .read-more svg path{
	stroke:#fff;
}

.hero-section .read-more:hover svg path{
	stroke:var(--red);
}

.hero-section .container{
    position: relative;
    z-index: 2;
}

.hero-section .excerpt{
    max-width: 500px;
}

.hero-section .hero-buttons{
    margin-top: 25px !important;
}

.hero-section .bg-img{
    height: 100%;
	width:100%;
    object-fit: cover;
    object-position: center;
}


/* LOGOS */

.logos{
    background-color: var(--grey);
    padding:50px 0;
}



.logos-list{
    margin-top: 35px;
}

.logos-list img{
	    height: 32px;
    margin: auto;
    display: block;
}

.line-gradient{
    display: block;
    height: 8px;
    width: 100%;
    margin: 0px 0px 0px;
    background: linear-gradient(90deg, #8CC63F 0%, #187EC2 25%, #FBA937 50%, #A42887 75%, #E11862 100%);

}

/* INTRO */

.intro{
    padding:80px 0 80px;
    background-color: var(--grey);
}

.intro-grid{
    display:flex;
    gap:100px;
    align-items: flex-start;
}

.second-intro .intro-grid{
        align-items: center;
        gap: 40px;
}

.section-label{
    display:inline-block;
    background:var(--gradient-red);
    color:#fff;
    padding:8px 20px;
    border-radius:100px;
    font-size:12px;
    font-weight: 700;
    text-transform:uppercase;
    font-family: "space-mono",mono;
    letter-spacing:2px;
    margin-bottom:20px;
}
.intro .page-thumbnail{
    max-width: 400px;
    width: 100%;
}
.intro .page-thumbnail img{
    max-width: 400px;
    border-radius: 50px;
    margin: 0;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    height: auto;
}

.second-intro .page-content{
    order: 2;
}

.second-intro  .page-content p{
   max-width: 400px;
}

.second-intro  .page-thumbnail{
	    max-width: 600px;
	
}


.second-intro  .page-thumbnail img{
	 margin:auto; 
    border-radius: 20px;
	width:auto;
}

.flex-box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

.flex-box .btn{
    min-width: 200px;
}
/* TEAM */
.team-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 50px 0 0;
    gap: 50px;
}

.team-photo{
    position: relative;
}

.team-photo img{
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
	border-radius:20px;
}

.team-photo .second-photo{
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.6s ease;
    z-index: 1;
}


.team-member:hover .second-photo{ opacity: 1;}

.team-data{
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
}

.team-data h3{
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 10px !important;
}
.team-data p{
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}


/* Values */

.values-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    background-image: url(../img/hero-background.jpg);
	background-size: cover;
}


.values-section .container{
    display: flex;
    gap: 100px;
}

.values-left {
    width: 220px;
    flex-shrink: 0;
}


.values-right {
    flex: 1;
}

.value-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 15px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.value-row:last-child {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.value-row span {
    font-family:"ivypresto-display",serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
}



/* GROUPS */

.groups{
    background:var(--gradient-grey);
    padding:80px 0;
    text-align:center;
    min-height: 1230px;
}


.group-grid{
    display: flex;
    margin: 40px auto 40px;
    width: 90%;
    min-height: 330px;
    text-align: center;
    max-width: 1000px;
    position: relative;
	flex-wrap: wrap;
    justify-content: center;
}

.group-card{
    background: #fff;
    border-radius: 20px;
    padding: 25px 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    width: 260px;
    min-height: 320px;
    align-items: center;
    
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    margin: 20px;
    position: absolute;
    
}


.groups:hover .group-card{
    position: relative;
    transform: translate(0, 0);
    top: 0px !important;
    left: auto !important;
    transform: rotate(0deg) !important ;
	transition:2.8s;
}

.groups:hover .group-card:hover{
    background: var(--gradient-red)  !important;
    transform: scale(1.1)  rotate(0deg) !important;
}


.group-card h4{
    text-align: center;
    transition: 0.6s;
    width: 100%;
}
.group-card p{
    max-height: 0px;
    overflow: hidden;
    transition: 2s;
	color:#fff;
}

.group-card-text{
	    height: 293px;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: end;
}

.bg-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}


.group-card:hover h4{
    color: #fff;
    text-align: left !important;
}
.group-card:hover p{
    min-height: 100px;
    max-height: 1000px;
    color: #fff;
    text-align: left;
    padding: 15px 0 0;
}

.group-card .white-arrow{
    float: right;
    opacity: 0;
    transition: 2.8s;
    margin-right: 50px;
}
.group-card:hover .white-arrow{
    opacity: 1;
    margin-right: 0px;
}

/* CASE STUDIES */

.case-studies{
    padding:120px 0;
    background-color: #fff;
}



.case-card{
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.case-content{
    padding:25px;
}

/* MAP */

.global{
    padding:120px 0 0px;
    text-align:center;
    background: linear-gradient(180deg, rgba(239, 239, 239, 0.94) 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
    background: url(../img/All-together.png);
    background-size: cover;
    background-position: center;
}

.bottom-bg-img{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
}

.map-wrapper {
    position: relative;
    display: block;
}

.map-wrapper img{
   	position: sticky;
    z-index: 0;
     max-height: 440px; 
    top: 25px;
    display: block;
    left: 5%;
    float: left;
	
}

.map-wrapper ul{
    padding-top: 100px;
    overflow: scroll;
    position: relative;
	z-index:1;
    padding-bottom: 100px;

}

.map-wrapper ul li{
        list-style: none;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    padding: 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
    min-width: 200px;
    position: relative;
    z-index: 0;
    transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    max-width: 500px;
    margin-left: auto;
    margin-right: 5%;

}


.project-card{
    display:block;
    width: 90%;
    margin: auto;
}

.project-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 0.6s;
}

.project-card:hover  .project-image img{
    transform: scale(1.3);
} 

.project-date {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ffffff;
    color: var(--text) ;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 4px;
    z-index: 2;
    font-family: "space-mono",mono;
    opacity: 0;
}

.project-content {
    padding-top: 18px;
}

.project-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px; 
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    background: #fafafa;
    border: 1px solid #ccc;
    font-family: "space-mono",mono;
    color: var(--text);
}

.tag-pink {
    color: #ec3f7c;
    border: 1px solid #ec3f7c;
    background: #FDE7EE;


}

.tag-blue {
    color: #1e88e5;
    border: 1px solid #1e88e5;
    background: #E9F6FC;


}

.tag-green {
    color: #2e9f4b;
    border: 1px solid #2e9f4b;
    background: #E5F4EC;


}
.tag-yellow {
    color: #F7941D;
    border: 1px solid #F7941D;
    background: #FEF4E8;

}
.tag-purple {
    color: rgba(146, 39, 143, 1);
    border: 1px solid rgba(146, 39, 143, 1);
    background: #F4E9F3;


}

.project-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: #1a1a1a;
}

.project-location {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--second-black) ;
    margin-bottom: 16px;
}

.project-description {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--text);
}

/* CTA */

.cta{
    padding:120px 0;
    text-align:center;
    background-image: url(../img/hero-background.jpg);
    position: relative;
	background-size: cover;
}

.cta h2{
    color:#000;
    font-size:43px;
	line-height: 56px;
    margin-bottom:30px;
}

.list-services{
    padding: 10px;
    background-color: #fff;
    border-radius: 50px;
    margin-top: 35px;
}

.logos-list-no-slider{
	display:grid;
	grid-template-columns:repeat(5,1fr)
}

.list-services .logos-list{
    margin: 0px;
}
.cta .line-gradient{
    position: absolute;
    top: 0;
    left: 0;
}


.logos-list-no-slider img{
	margin:auto;
}

/* SLIDERS */
.slick-prev, .slick-next{
    top:0%;
    right: 0% !important;
    display: block;
    width: 30px;
    height: 20px;
    transform: none; 
    position: relative;
}


.slick-prev:before{
    content: " " !important;
    background: url(../img/left-arrow.svg);
    display: block;
    width: 30px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.slick-next:before{
    content: " " !important;
    background: url(../img/arrow-right.svg);
    display: block;
    width: 30px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.control{
    display: flex;
    gap: 20px;
    align-items: center;
}

.slick-slider .slick-prev,
.slick-slider .slick-next{
    display: none !important;
}

/* FOOTER */

.footer{
    background-color:rgba(239, 239, 239, 1);
    padding:50px 0;
    border-top:1px solid #eee;
}

.footer .container{
    background-color: #fff;
    padding: 25px;
    border-radius: 25px;
    background-image: url(../img/large-grey-ring.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
	max-width:2000px;
	width:96%;
    
}

.footer-grid{
    display:flex;
    align-items: flex-start;
    gap:50px;
    justify-content: space-between;
}

.footer-data-box{
	    max-width: 500px;
}

.footer-data-nav{

    margin-bottom: 35px;
}

.footer-data-nav > ul{
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.footer-data-nav > ul li{
    display: block;
    border: 0px;
    background: 0px;
}

.footer-data-nav > ul li img{
    display: none;
}

.footer-data-nav > ul li a{
    color:#000;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1.5px;
    margin-bottom:20px;
    font-family: "space-mono",mono;
    text-transform: uppercase;
    font-weight: 700;
}

.footer-data-nav > ul ul li a{ 
    font-weight: 300; 
    font-size: 13px; 
	line-height:20px;
    font-family: "Inter", sans-serif;
	text-transform: none;
	color: #00000099;

}
.footer-data-nav > ul ul li a .white-arrow{
	display:none;
}

.footer-data-nav > ul li a:hover{
    color: rgba(237, 20, 91, 1);
}

.footer ul{
    list-style:none;
}

.footer li{
    margin-bottom:10px;
}

.footer a{
    color:var(--text);
}

.copy-foot{
    display: grid;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    grid-template-columns: repeat(3, 1fr);
}

.copyright{
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    font-family: "open-sans",sans-serif;
    text-align: center;
}

.social-media{
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer .line-gradient{
    height: 3px;
    border-radius: 15px;
}

.nav-copy ul{
    display: flex;
    gap: 20px;
}

.nav-copy ul a{
    color:#000;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 2px;
    margin-bottom:20px;
    font-family: "space-mono",mono;
    text-transform: uppercase;
    font-weight: 700;
}
.nav-copy ul a:hover{
    color: rgba(237, 20, 91, 1);
}

/* Main */
main ul{
	padding-left:25px;
}
main p,
main li{
    margin-bottom: 20px;
	font-size:14px !important;
	line-height: 27px;
}



/* Services list */
.services-grid{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.service-card{
    position:relative;
    width:calc((100% - 32px) / 3);
    min-height:180px;
    padding:25px;
    background:#fff;
    border-radius:12px;
    box-sizing:border-box;
    display:flex;
    align-items:flex-end;
}

.service-card h3{
    margin:0;
    font-size:18px;
    font-weight:700;
    line-height:24px;
}

.service-icon{
    position:absolute;
    top:32px;
    left:32px;
    width:42px;
    height:42px;
}

.service-icon svg{
    width:100%;
    height:100%;
}

.service-icon circle,
.service-icon path{
    stroke:#b0b0b0;
    stroke-width:2;
    fill:none;
}

.service-card:last-child:nth-child(3n+1){
    width:100%;
}

.service-card:nth-last-child(2):nth-child(3n+1),
.service-card:last-child:nth-child(3n+2){
    width:calc((100% - 16px) / 2);
}

/* SINGLE */
.project-feature{
    position:relative;
    overflow:hidden;
    min-height:650px;
    border-radius:0;
}

.project-feature__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.project-feature__overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.15) 100%
    );
}

.project-feature__content{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:60px;
}

.project-feature__title h1{
    color:#fff;
    margin:0;
    font-weight:700;
}

.project-feature__meta{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:80px;
    justify-content:end;
}

.project-meta-item span{
    display:block;
    margin-bottom:8px;
    color:#d8d8d8;
    font-size:12px;
    letter-spacing:3px;
    font-weight:500;
}

.project-meta-item p{
    color:#fff;
    margin:0;
    font-size:20px;
}

.project-tags-item{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.single-title-flex{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tap-header{
    padding: 50px 0 25px;
    color: #fff;
}

.tab-content{
    list-style: none;
    display: flex;
    gap: 20px;
}

.tab-content a{
    display: inline-block;
    padding: 5px 10px ;
    color: var(--black);
    border-bottom: 1px solid #fff;
}

.tab-content a:hover{
    border-bottom: 1px solid var(--black);
}

.blog-section{
    padding: 50px 0;
    background: rgba(239, 239, 239, 1);

    
}

.blog-section h3{
    max-width: 700px;
}

.content-info{
    width: 100%;
    padding-left: calc(100% - 900px);
}

/* Contact */
.contact-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: url(../img/hero-background.jpg)
}

.contact-cta__container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}



.contact-cta__image {
    flex-shrink: 0;
}

.contact-cta__image img {
    display: block;
    width: 330px;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
}


.contact-section {
    padding: 100px 0;
} 

.contact-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 80px;
}

.contact-info {
    display: flex;
    flex-direction: column;
}

.contact-block {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.contact-block:last-child {
    border-bottom: none;
}

.contact-block h3 {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 36px;
}

.contact-block p {
    margin: 0 0 15px;
}

.contact-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-block li {
    margin-bottom: 12px;
}

.contact-block a {
    text-decoration: none;
    color: var(--black);
}
.contact-block a:hover {
    color: var(--red);
}


/* FORM */

.contact-form-wrapper {
    width: 100%;
}

.cf7-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.cf7-full {
    grid-column: 1 / -1;
}

.cf7-field label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 28px;
}

.cf7-field input,
.cf7-field textarea,
.cf7-field select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfcfcf;
    background: transparent;
    padding: 0 0 14px;
    font-size: 18px;
    line-height: 24px;
    outline: none;
}

.cf7-field textarea {
    resize: vertical;
    height: 39px;
    font-size: 18px;
    line-height: 24px;
}

.cf7-field input::placeholder,
.cf7-field textarea::placeholder {
    color: #b5b5b5;
}

.cf7-submit {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.cf7-submit .wpcf7-submit {
    background: #f11963;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}

.cf7-submit .wpcf7-submit:hover {
    transform: translateY(-2px);
}

/* Remove default CF7 wrappers */
.wpcf7-form p {
    margin: 0;
}

.wpcf7-spinner {
    position: absolute;
}

.wpcf7-not-valid-tip {
    margin-top: 10px;
    font-size: 12px;
}


.testimonial-section{
    background-color: rgba(239, 239, 239, 1);
    padding-bottom: 50px;
}

.testimonial-section .container{
    display: flex;
    text-align: center;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.testimonial-section img{
    width: 280px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
	border-radius:20px;
}

/* Projrcts */
.projects-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    padding: 50px 0;

}

.projects-grid .project-card{
    width: 100%;
}

.fdry-pagination{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    border-top: 1px solid #ccc;
}

.page-numbers{
    color: #9AA1A7;
    
}
.page-numbers a{
    font-size: 14px;
    line-height: 21px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0px 5px;
    display: inline-block;
    padding: 15px;
}
.page-numbers .current{
    font-size: 14px;
    line-height: 21px;
    border-radius: 10px;
    margin: 0px 5px;
    display: inline-block;
    background-color: #9AA1A7;
    color: var(--second-black);
    padding: 15px;
}

.term-list{
    padding: 50px 0 25px;
    background-color: #fff;
    box-shadow: 0px 1px 8px 0px #00000012;

}

.term-list ul{
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.term-list ul li a{
    display: flex;
    gap: 10px;
    background: transparent;
    border: 0px;
    color: var(--second-black) ;
    padding: 10px;
    border-bottom: 1px solid  #fff ;
    font-size: 14px;
}

.term-list ul li a div{
    opacity: 0.5;
}

.term-list ul li a:hover{
    border-bottom: 1px solid  var(--second-black) ;
}


.term-list ul li a:hover div{
    opacity: 1;
}

.category-item img{
    width: 24px;
}

.category-item.current a{
    border-bottom: 1px solid  var(--second-black) ;
}

.category-item.current a div{
    opacity: 1;

}


.box-post-slide {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 50px;
}

.box-post-slide h2{
    color:#fff;
    margin-bottom: 10px;
}

.case-prev,
.case-next{

    background:none;
    border:none;

    color:#fff;

    font-size:40px;

    cursor:pointer;

}

.case-navigation{
    display: flex;
    align-items: center;
    gap: 20px;
}

.case-progress{
    position: relative;
    width: 360px;
    margin-top: -5px;
}

.slick-dots{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.slick-dots li button:before{
	opacity:1 !important;
	
}
.slick-dots li button{
	opacity:0.5 !important;
	
}
.slick-dots li.slick-active button{
	opacity:1 !important;
	
}
.slick-dots li,
.slick-dots li button,
.slick-dots li button:before{
    width: 100%;
}
.slick-dots li button:before{ 
    color: #fff;
    height: 2px;
    background-color: #fff;
    content:  " ";
}

.white-arrow{
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #fff;
    width: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.white-arrow svg path{
    stroke:#fff;
}

.fadeIn{
    animation-delay: 1s;
    animation-name:fadeIn;
	opacity:0;
	animation-fill-mode: forwards;
} 

@keyframes fadeIn{from{opacity:0}to{opacity:1}}


/* MOBILE */

@media(max-width:992px){

    .hero-grid,
    .intro-grid{
        grid-template-columns:1fr;
        display: grid !important;
        gap: 40px;
    }

    .groups .group-card {
        position: relative;
        transform: translate(0, 0);
        top: 0px !important;
        left: auto !important;
        transform: rotate(0deg) !important;
    }


    .footer .container{
        padding: 25px 0;
    }

    .footer-grid{
        flex-direction: column;
        padding: 25px ;
    }

    .team-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 25px 0;
        gap: 50px;
    }



    .service-card,
    .service-card:last-child:nth-child(3n+1),
    .service-card:nth-last-child(2):nth-child(3n+1),
    .service-card:last-child:nth-child(3n+2){
        width:calc((100% - 16px) / 2);
    }

    .project-feature{
        min-height:700px;
    }

    .project-feature__content{
        padding:40px;
    }

    .project-feature__meta{
        grid-template-columns:1fr;
        gap:25px;
        justify-content:start;
    }

    .contact-cta {
        padding: 80px 0;
    }

    .contact-cta__container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .contact-cta__content {
        max-width: 100%;
    }

    .contact-cta__image img {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .cf7-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cf7-full {
        grid-column: auto;
    }

    .cf7-field input,
    .cf7-field textarea,
    .cf7-field select {
        font-size: 22px;
    }

    .cf7-submit {
        justify-content: flex-start;
    }

    .content-info{
        width: 100%;
        padding-left: 0px;
    }

    .second-intro .page-content {
        order: 0;
        text-align: center;
    }
    .second-intro .btn{
        margin: auto;
    }
    .section-label{
        margin: 0 auto 25px;
        display: block;
        text-align: center;
        max-width: fit-content;
    }
    .service-card{
        text-align: left;
    }

    .history-content{
        opacity: 1 !important;
    }
}

@media(max-width:767px){

    h1{
        font-size: 52px;
        line-height: 74px;
    }
    h2 {
        font-size: 33px;
        line-height: 46px;
    }

    .title {
        font-size: 52px;
        line-height: 74px;
        font-weight: 600;
    }

    

    .group-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .hero{
        padding-top:140px;
    }

    

    .map-wrapper{
        flex-direction: column;
    }
    .map-wrapper ul{
        margin: 0px auto;
    }

    .map-wrapper ul li{
        text-align: center;
    }

   
    .values-section .container{ 
        flex-direction: column;
        gap: 50px;
    }

    .values-left {
        width: 100%;
    }

    .value-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-card,
    .service-card:last-child:nth-child(3n+1),
    .service-card:nth-last-child(2):nth-child(3n+1),
    .service-card:last-child:nth-child(3n+2){
        width:100%;
    }

    .project-feature{
        min-height:600px;
    }

    .project-feature__title h1{
        font-size:42px;
    }

    .footer ul{
        flex-direction: column;
        gap: 10px;
    }

    .copy-foot{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }
    .social-media{justify-content: center;}

    .slick-prev, .slick-next{
        right: 16% !important;
    }

    .term-list ul{
        flex-direction: column;
        align-items: start;
    }

    .box-post-slide{
        flex-direction: column;
    }

    .projects-grid{
        grid-template-columns: repeat(1, 1fr);

    }
	
	.logos-list-no-slider{
		display:grid;
		grid-template-columns:repeat(2,1fr)
	}

    .team-list{

		grid-template-columns:repeat(1,1fr);
    }

    .flex-title{
        flex-direction: column;
        gap: 15px;
    }

    .intro{

    padding: 40px 0 40px;
    }

    .case-studies{
        padding: 40px 0 40px;

    }
   
}


@media(max-width:467px){
	
	.logos-list-no-slider{
		display:grid;
		grid-template-columns:repeat(1,1fr)
	}
}

/* =========================
   MOBILE MENU
========================= */
.menu-toggle {
    width: 40px;
    height: 30px;
    position: absolute;
    top: 40px;
    right: 20px;
    z-index: 1100;
    background: none;
    border: none;
    cursor: pointer;
	display:none;
  }
  
  .menu-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 3px;
    transition: 0.35s ease;
  }
  
  .menu-toggle span:nth-child(1) { top: 0; }
  .menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .menu-toggle span:nth-child(3) { bottom: 0; }
  
  /* transform into X */
  body.menu-open .menu-toggle span:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;
  }
  
  body.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  
  body.menu-open .menu-toggle span:nth-child(3) {
    transform: rotate(-45deg);
    top: 50%;
  }

@media (max-width: 992px) {

   
    .menu-toggle {
        display: block;
      }
    /* stack main menu */
    .main-nav > ul#menu-primary {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      max-height: 0px;
      background: #fff;
      width: 100%;
      padding: 15px;
      overflow: hidden;
      display: flex;
      transition: 0.6s;
      padding: 0px;
      width: 90%;
      position: absolute;
      top: 92px;
      right: 5%;
    }
  
    /* show when active (you toggle this with JS) */
    .main-nav.active > ul#menu-primary {
        max-height: 200vh;
    }
  
    .main-nav li {
      width: 100%;
      padding: 10px;
    }

    .main-nav li a{
        padding: 15px;
    }
  
    .main-nav a {
      padding: 12px 0;
      width: 100%;
      justify-content: space-between;
    }
  
    /* dropdown becomes static */
    .main-nav .sub-menu {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      padding-left: 15px;
      display: none;
      width: 100%;
    }
  
    /* open submenu on active class */
    .main-nav li.open > .sub-menu {
      display: block; 
      padding: 0px 0px 25px;
    }
  
    /* optional: highlight link */
    .highlight-link a {
      font-weight: bold;
    }

    .main-nav li.tag-link > a{
        justify-content: left;

    }

    .main-nav .sub-menu a{
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
        background-color: #fafafa;
    }
  }



/*
 * case-study-card
 * 
 **/

.case-study-card{
    display:flex;
    gap:10px;
    align-items:center;
    background:#fff;
    border-radius:15px;
    padding:10px;
    text-decoration:none;
    color:#111;
    transition:.35s ease;

    max-width:100%;
}

.case-study-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.case-study-image{
    width:90px;
    height:90px;
    flex-shrink:0;
    overflow:hidden;
    border-radius:10px;
}

.case-study-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.case-study-card:hover img{
    transform:scale(1.08);
}

.case-study-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:105px;
}

.case-study-content h3{
    margin:0;
    font-size:16px;
    line-height:21px;
    font-weight:700;
    margin-top: 10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.case-study-link{
    margin-top:18px;
    font-family: "space-mono",mono;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    letter-spacing:2px;
	line-height:16px;
    font-weight:700;
	 margin-bottom: 10px;
}

.case-study-link svg{
    transition:.3s;
}

.case-study-card:hover .case-study-link svg{
    transform:translate(4px,-4px);
}

@media(max-width:640px){

    .case-study-card{
        gap:15px;
        padding:15px;
    }

    .case-study-image{
        width:95px;
        height:90px;
    }

    .case-study-content h3{
        font-size:1.35rem;
    }

    .case-study-link{
        font-size:.75rem;
    }

    .flex-box {
        flex-direction: column;
        margin: 0 auto 25px;
        max-width: 90%;
        justify-content: center;
        gap: 25px;
    }

    .logos-list-no-slider img{
        margin: 0 auto 15px;
        width: 150px;
    }

    .global{
        background-position: center bottom !important;
    }

    .intro .page-thumbnail img{
        width: 100% !important;
    }

}
  
.history-section{

    position:relative;
    padding:80px 0 0px 70px;
}

.history-section:before{

    content:"";
    position:absolute;
    left:40px;
    top:0;
    bottom:0;
    width:1px;
    background:#0000001A;
}

.history-slider .slick-slide{

    padding:0 18px;
}

.history-item{

    position:relative;
}

.history-header h3{
    margin:0;
    font-size:22px;
    line-height: 28px;
    font-weight:700;
}

.history-header span{
    font-weight: 300;
    display:block;
    margin-top:10px;
    font-size:14px;
    line-height: 23px;
}

.history-header p{
    margin-top:20px;
    font-size:14px;
    line-height: 23px;

}

.history-header .icon{
    height: 40px;
    width: 40px;
}

.history-line{

    margin:55px 0 50px;

    height:70px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    border-left:1px solid #ddd;
}

.history-line span{

    display:block;

    width:1px;
    height:65px;

    background:#ddd;
}

.history-content{
	opacity:0;
    max-width:310px;
	transition:1.8s;
}

.slick-active:hover .history-content{
	opacity:1;
}

.history-content img{
    display: inline-block;
    height: 45px;
    margin: 0px 5px 10px 0px;
}

.history-content p{
    margin:20px 0px;
    font-size:14px;
    line-height: 23px;
}

.split-title {
    overflow:hidden;
}

.split-title .line {
    overflow:hidden;
}

#challenge{
	padding-bottom:0px !important;
}

.label-boxes{
    padding: 40px 0 0;
}

.label-boxes .item-content{
    display: block;
    width: 90%;
    margin: auto;
}
.label-boxes .item-content p{
    margin: 10px 0;
}

.label-boxes .item-content img{
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
}