/* Import CSS files in order */
@import url("reset.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

:root{

    --header-height: 12rem;

}

footer {background-color: var(--secondary-color-light);}
.footer-content{padding: calc(var(--xl) + var(--md)) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--md);}
.footer-logo{display: flex; align-items: center; justify-content: flex-start;}
.footer-logo a{display: block;}
.footer-logo img{display: block; max-width: 26.2rem;}
.footer-logo:not(:last-child){margin-bottom: var(--xl);}
.social-media{display: flex; align-items: center; justify-content: flex-start; gap: .5rem 2.4rem;}
.social-media a{transition: var(--transition);}
.social-media a svg{width: 3rem;}
.social-media a svg path{fill: var(--text-color); transition: var(--transition);}
.social-media a:hover svg path{fill: var(--primary-color);}
.footer-headding{text-transform: uppercase; color: var(--primary-color); font-weight: 600; white-space: nowrap;}
.footer-headding:not(:last-child){margin-bottom: var(--gutter);}
.footer-links-grid{display: flex; flex-wrap: wrap; gap: var(--md) var(--xl);}
.footer-links-grid ul li{margin-bottom: var(--gutter-half);}
.footer-links-grid ul li{display: flex; align-items: center;}
.footer-links-grid ul li a{display: block; line-height: 1.3; color: var(--text-color); white-space: nowrap; transition: var(--transition);}
.footer-links-grid ul li a:hover{color: var(--primary-color);}
@media(width < 1500px){
    .footer-links-grid{gap: var(--md);}
}
@media(width < 1400px){
    .footer-content {padding: var(--xl) 0;}
    .footer-logo:not(:last-child){margin-bottom: var(--md);}
}
@media(width < 992px){
    .footer-content{grid-template-columns: 1fr; padding: var(--md) 0;}
}
@media(width < 768px){
    .footer-logo:not(:last-child){margin-bottom: var(--sm);}
    .footer-logo img{max-width: 20rem;}
    .social-media{gap: .5rem 1rem;}
    .footer-headding:not(:last-child){margin-bottom: var(--gutter-half);}
    .footer-links-grid{flex-direction: column; gap: var(--sm);}
    .footer-links-grid ul li a{white-space: wrap;}
}
.copyright{padding: var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gutter-half) var(--gutter);}
.copyright:not(:first-child){border-top: .1rem dashed var(--text-color);}
.footer-links{display: flex; align-items: center; flex-wrap: wrap; gap: var(--gutter-half) var(--gutter);}
.footer-links a{color: var(--text-color); white-space: nowrap; line-height: 1; transition: var(--transition);}
.footer-links a:hover{color: var(--primary-color);}

/* Hero Section */
.hero-section{position: relative; isolation: isolate; background: url(../images/hero-bg.png) center center no-repeat; background-size: cover; min-height: 100dvh; padding: calc(var(--header-height) + var(--xl)) 0 var(--xl); display: flex; align-items: center;}
.hero-section::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; content: ""; background-color: rgba(var(--secondary-color-rgb), 0.8);}
.hero-content h1:not(:last-child){margin-bottom: var(--lg);}
@media(width < 1200px){
    .hero-content h1:not(:last-child){margin-bottom: var(--md);}
}
@media(width < 992px){
    .hero-content h1:not(:last-child){margin-bottom: var(--sm);}
}
@media(width < 768px){
    .hero-content h1:not(:last-child){margin-bottom: var(--gutter);}
}

/* Chat Button */
.chat-btn{position: fixed; right: var(--gutter); bottom:var(--gutter); z-index: 999;}
.btn.btn-primary.chat-btn{background-color: var(--primary-dark-color);}
.btn.btn-primary.chat-btn:hover{background-color: var(--primary-color);}
@media(width < 768px){
    .chat-btn{right: var(--gutter-half); bottom: var(--gutter-half);}
    .chat-btn > :last-child{display: none; }
}

/* Header */
header.position-fixed{position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; padding: var(--gutter-half) 0; height: var(--header-height); display: flex; align-items: center; transition: var(--transition);}
header.header-scrolled{background-color: var(--secondary-color-light); box-shadow: 0 0.1rem 0.3rem rgba(var(--text-color-rgb), 0.2);}
header .container{display: flex; align-items: center; justify-content: space-between;}
header .logo{display: flex; align-items: center; flex: 1 0 0%;}
header .logo a, header .logo a img{display: block;}
header .logo a img{max-width: 25.6rem;}
.header-content{display: flex; align-items: center; gap: calc(var(--sm) / 2);}
nav > ul > li > a{display: flex; align-items: center; gap: 0 var(--gutter-half); color: var(--text-color); line-height: 1; white-space: nowrap; transition: var(--transition); padding: 1rem calc(var(--sm) / 2);}
nav > ul > li > a > svg{display: block; transition: var(--transition);}
nav > ul > li{position: relative;}
nav > ul > li > ul{min-width: 100%;}
nav > ul > li > ul > li > a{color: var(--text-color); transition: var(--transition); display: flex; align-items: center; gap: 0 var(--gutter-half); padding: 1rem calc(var(--sm) / 2);}
header.header-scrolled nav > ul > li > ul{background-color: var(--secondary-color-light);}
@media(width  < 1500px){
    header{--header-height: 10rem;}
    header .logo a img{max-width: 20rem;}
    nav > ul > li > a, nav > ul > li > ul > li > a{padding: 1rem;}
    .header-content{gap: 1rem;}
}
@media(width  < 1400px){
    header{--header-height: 9rem;}
    nav ul li a, header .btn{font-size: var(--fs);}
    nav > ul > li > a{gap: 0 1rem;}
    nav > ul > li > a > svg{width: 1.1rem;}
}
@media(width  > 1199px){
    nav > ul{display: flex; align-items: center;}
    nav > ul > li > ul{position: absolute; left: 0; top: 100%; z-index: 9999;}
    nav > ul > li > ul{opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none;display: block !important; }
    nav > ul > li:hover > ul{opacity: 1 !important; visibility: visible !important; pointer-events: all !important;}
    nav > ul > li:hover > a svg{transform: rotate(-180deg);}
}
@media(width < 1200px){
    header{background-color: var(--secondary-color-light);}
    header .logo{position: relative; z-index: 99999;}
    nav{position: absolute; left: 0; top: 100%; width: 100%; height: calc(100dvh - var(--header-height)); background-color: var(--secondary-color-light); overflow-y: auto; opacity: 0; visibility: hidden; transition: var(--transition);}
    nav.active{opacity: 1; visibility: visible;}
    nav > ul{width: 100%;}
    nav > ul > li{border-top: .1rem solid var(--secondary-color);}
    nav > ul > li.dropdown > a > .dropdown-toggle > svg{transition: var(--transition);}
    nav > ul > li.dropdown.active > a > .dropdown-toggle > svg{transform: rotate(-180deg);}
    nav > ul > li.dropdown > a{pointer-events: none;}
    nav > ul > li.dropdown > a > :last-child{pointer-events: auto;}
    nav > ul > li > a{padding: var(--gutter-half) var(--gutter); display: flex; align-items: center; justify-content: space-between; position: relative;}
    nav > ul > li > a > :last-child{display: grid; place-items: center; height: 100%; aspect-ratio: 1; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: var(--primary-color);}
    nav > ul > li > ul{padding: 0 var(--gutter-half);} 
    nav > ul > li > ul > li > a{padding: 1rem var(--gutter);}
    nav > ul > li > ul{display: none;}
}
/* Page Header */
@media(width > 1199px){
    header.page-header:not(.header-scrolled) ul li a {color: var(--secondary-color);}
    header.page-header:not(.header-scrolled) ul li a .dropdown-toggle svg path{fill: var(--secondary-color);}
}

/* Section */
.section{padding: var(--xl) 0;}
.section-block:not(:last-child), .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--xl);}
@media(width < 1200px){
    .section{padding: var(--lg) 0;}
    .section-block:not(:last-child), .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--lg);}
}
@media(width < 992px){
    .section{padding: var(--md) 0;}
    .section-block:not(:last-child), .section-header:not(:last-child), .section-content:not(:last-child){margin-bottom: var(--md);}
}

/* Article Grid */
.article-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter) calc(var(--xl) + var(--sm));}
@media(width < 1500px){
    .article-grid{gap: var(--gutter) var(--md);}
}
@media(width < 1300px){
    .article-grid{gap: var(--gutter) var(--sm);}
}
@media(width < 992px){
    .article-grid{grid-template-columns: 1fr;}
    .article-grid figure{max-width: 50rem;}
}

/* Article */
article h2:not(:last-child), article h4:not(:last-child){margin-bottom: var(--gutter);}
article p:not(:last-child){margin-bottom: var(--gutter-half);}
article .btn:not(:first-child){margin-top: var(--gutter);}

/* Servide Slider */
.service-slider .swiper-slide{width: auto;}
.service-slide{width: 35rem; aspect-ratio: 1/1.25; background-color: var(--light-grey); display: flex; flex-direction: column; position: relative;}
.service-slide::before, .service-slide::after{position: absolute; pointer-events: none; width: 3rem; aspect-ratio: 1; content: ""; background-color: var(--secondary-color-light);}
.service-slide::before{left: 0; bottom: 0;}
.service-slide::after{right: 0; top: 0;}
.service-slide figure{flex: 1 0 0%; display: flex; align-items: center; justify-content: center; padding: var(--gutter);}
.service-slide figure img{max-width: 80%; max-height: 80%;}
.service-slide p{padding: var(--gutter-half) var(--gutter); font-weight: 600;}
.service-slide figure img{display: block; max-width: 100%; max-height: 100%;}
.service-slide-search-link{position: absolute; width: 4rem; aspect-ratio: 1; display: grid; place-items: center; position: absolute; right: 0; bottom: 0;}
@media(width < 1300px){
   .service-slide{width: 30rem;}
}
@media(width < 992px){
   .service-slide{width: 25rem;}
}

.map iframe{width: 100%; height: 30rem; border: none;}

.section-header.bordered:not(:last-child){padding-bottom: var(--md); border-bottom: .1rem dashed var(--light-grey);}
.news-slider .swiper-slide{width: auto;}
.news-slide{width: 40rem;}
.news-slide > :not(:last-child), .news-slide-content > :not(:last-child){margin-bottom: var(--gutter);}
.news-slide-header{display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--gutter);}
.news-slide-header span{border: .1rem solid var(--primary-color); color: var(--primary-color); text-transform: uppercase; line-height: 1; padding: 1rem;}
.news-slide-header p{white-space: nowrap;}
.news-slide-content a{color: var(--text-color); transition: var(--transition);}
.news-slide-content a:hover{color: var(--primary-color);}

.career-section{background: url(../images/bg-1.jpg) center center no-repeat; background-size: cover; position: relative; isolation: isolate; min-height: 90dvh; display: flex; align-items: center;}
.career-section::before, .career-section::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1;}
.career-section::before{background: url(../images/bg-1.jpg) center center no-repeat; background-size: cover; opacity: 80%;}
.career-section::after{background-color: rgba(var(--secondary-color-rgb), 0.77); mix-blend-mode: multiply;}

.partners-slider .swiper-slide{width: auto;}
.partners-slide{aspect-ratio: 1; width: 40rem;}
.partners-slide::before, .partners-slide::after{background-color: var(--secondary-color);}
.partners-slide .service-slide-search-link svg path{fill: var(--secondary-color);}
@media(width < 1300px){
   .partners-slide{width: 30rem;}
}
@media(width < 992px){
   .partners-slide{width: 25rem;}
}

/* Page Hero Section */
.page-hero-section{padding: calc(var(--header-height) + var(--gutter)) 0; background-color: var(--light-grey); min-height: calc(100dvh - (var(--btn-height) + (var(--gutter) * 2))); display: flex; align-items: flex-end;}
.page-hero-section.page-hero-sm-section{min-height: 50dvh; padding-bottom: var(--lg);}
.page-hero-content{display: flex; gap: var(--gutter); align-items: center;}
.page-hero-content > :first-child{flex: 1 0 0%;}
.page-hero-image{background-color: var(--secondary-color); position: relative;}
.page-hero-image::before, .page-hero-image::after{position: absolute; width: 18%; aspect-ratio: 1; content: ""; z-index: 10; background-color: var(--light-grey);}
.page-hero-image::before{ left: 0; bottom: 0;}
.page-hero-image::after{right: 0; top: 0;}
.page-hero-image figure{width: 40rem; aspect-ratio: 1; position: relative;}
.page-hero-image figure img{margin: 0 auto;}
.page-hero-image figure::before, .page-hero-image figure::after{position: absolute; width: 12%; aspect-ratio: 1; content: ""; z-index: 11; background-color: var(--primary-color);}
.page-hero-image figure::before{ left: 6%; bottom: 6%;}
.page-hero-image figure::after{right: 6%; top: 6%;}
@media(width < 1200px){
    .page-hero-section{padding-bottom: var(--xl);}
   .page-hero-image figure{width: 30rem;}
}
@media(width < 768px){
    .page-hero-section{padding-bottom: var(--md);}
    .page-hero-content{flex-direction: column; align-items: flex-start;}
}

.profile-grid{display: grid; gap: var(--gutter); justify-content: space-between;}
.profile-card{max-width: 40rem;}
.profile-card h5:not(:last-child){margin-bottom: var(--gutter-half);}
.profile-card figure:not(:last-child){margin-bottom: var(--gutter);}
.profile-card figure{aspect-ratio: 1/ 1.1; background-color: var(--primary-color); display: flex; align-items: flex-end; justify-content: center; position: relative;}
.profile-card figure::before, .profile-card figure::after{position: absolute; width: 3rem; aspect-ratio: 1; content: ""; z-index: 10; background-color: var(--secondary-color);}
.profile-card figure::before{ left: 0; bottom: 0;}
.profile-card figure::after{right: 0; top: 0;}
.profile-card figure img{margin: 0 auto; max-width: 100%; display: block;}
@media(width > 991px){
    .profile-grid{grid-template-columns: repeat(3, 1fr);}
}
@media(min-width : 768px) and (max-width : 991px){
    .profile-grid > :first-child{grid-column: span 3;}
}

.partners-profile{display: flex; gap: var(--gutter); justify-content: space-between; padding: var(--md) 0; border-bottom: .1rem dashed var(--light-purple);}
.partners-profile-content{max-width: 40vw;}

.article-auto-grid{display: flex; gap: var(--md) var(--xl);}
.article-auto-grid > * {flex: 1 0 0%; max-width: 53.6rem;}
@media(width < 992px){
    .article-auto-grid{flex-direction: column; gap: var(--md);}
    .article-auto-grid > * {max-width: 100%;}
}

.form-section{position: relative;}
.form-section h3{position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); color: var(--primary-color); text-align: center; margin-bottom: var(--md);}
.contact-form{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter-half);}
.contact-form li .form-control{height: 6rem; width: 100%; border: 0; font-family: var(--font-family); background: none; border-bottom: .1rem solid var(--light-grey); color: var(--light-grey); opacity: 1; padding: 1rem 0;}
.contact-form li textarea.form-control{height: 15rem; resize: none;}
.contact-form li .form-control:focus::placeholder{opacity: 0;}
@media(width < 1200px){
    .form-section h3{position: static; transform: none;}
}
@media(width > 767px){
    .contact-form li.span-2{grid-column: span 2;}
}
@media(width < 768px){
    .contact-form{ grid-template-columns: 1fr;}
}

.page-banner figure{aspect-ratio: 2.9/1;}
.page-banner figure img{object-fit: cover; width: 100%; height: 100%;}

.button-group{display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;}
.post-btns .btn{background-color: rgba(var(--primary-color-rgb), 25%); cursor: pointer;}
.post-btns .btn.active{background-color: var(--primary-color);}
.post-btns .btn:not(.active):hover{background-color: var(--light-grey); color: var(--secondary-color);}

.posts .posts-block:not(:last-child){border-bottom: .1rem dashed var(--light-grey);}
.posts .posts-block:first-child{padding-top: 0;}
.posts .posts-block:last-child{padding-bottom: 0;}
.posts-block{padding: var(--lg) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--md) var(--gutter-half);}
.posts-block .news-slide{width: auto;}
@media(width < 1199px){
    .posts-block{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 768px){
    .posts-block{grid-template-columns: 1fr;}
}

.location-map{aspect-ratio: 2.9/1;}
.location-map iframe{border: 0; width: 100%; height: 100%;}

.login-page{padding: calc(var(--header-height) + var(--gutter)) 0; min-height: 100dvh; display: flex; align-items: center;}
.login-form{width: 100%; max-width: 58rem;}
.login-form ul li:not(:last-child){margin-bottom: 1rem;}
.login-form input{width: 100%; height: 5.5rem; border: 0; border-radius: 5rem; padding: 0 var(--gutter); font-family: var(--font-family);}
.login-form input::placeholder{opacity: 1; color: #C1C1C1;}
.login-form input:focus::placeholder{opacity: 0;}
.login-form button{cursor: pointer;}

/* GSAP HEadding Reeveal */
.reveal-text{position: relative; overflow: hidden;}