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

/* Variable */
:root{

    --header-height:12rem;
    --header-shrink-height:8rem;

}
@media(width < 1200px){
  :root{

    --header-height:var(--header-shrink-height);

  }
}

/* Body */
body{background-color: var(--body-color);}

/* Header */
header{height: var(--header-height); display: flex; align-items: center; position: relative; z-index: 9999; transition: var(--transition);}
header.position-fixed{position: fixed; left: 0; top: 0; width: 100%;}
.header-next{margin-top: var(--header-height);}
header.scrolled{background-color: var(--body-color); height: var(--header-shrink-height);}
header .header-content{display: flex; align-items: center;}
header nav{flex: 1 0 0%;}

img.logo-icon {height: 5rem;}
img.logo-img {height: 3rem;}

nav > ul > li > a{font-family: "Gilroy-Regular"; color: white; display: flex; align-items: center; white-space: nowrap; line-height: 1; gap: 0 1rem; flex: 1 0 0%;}
nav > ul > li > a svg{display: block; width: 1.2rem;}
nav > ul > li > a svg path{fill: white;}
.header-links-wrap{display: flex; align-items: center; gap: 0 2rem;}
.header-links{display: flex; align-items: center; justify-content: center; gap: 0 2rem;}
header .btn.btn-o{color: white;}
@media(width > 1199px){
    header .header-content{margin: 0 -2rem; position: relative;}
    header .header-content > *{position: relative; padding: 0 2rem;}
    header .header-content > :not(:last-child)::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: .1rem; height: 1.4rem; background-color: white; opacity: 30%; content: "";}
    nav{display: block !important;}
    nav > ul{display: flex; align-items: center; justify-content: center; gap: 1rem; justify-content: space-between;}
    nav > ul > li{display: flex; align-items: center; justify-content: center;}
    nav > ul > li > a{padding: 1rem 0;}
    nav > ul > li > a + span{margin-left: .5rem; pointer-events: none;}
}
@media(width < 1200px){
    header nav{position: absolute; left: 0; top: 100%; width: 100%; height: auto;}
    header .logo-wrap{margin-right: auto;}
    nav{background-color: var(--body-color); display: none;}
    nav > ul{border-top: .1rem solid rgba(255,255,255,30%);}
    nav > ul > li{border-bottom: .1rem solid rgba(255,255,255,30%);}
    nav > ul > li > a{height: 4rem; padding-left: var(--gutter);}
    nav > ul > li > a + span{margin-left: auto; display: grid; place-items: center; aspect-ratio: 1; height: 4rem;}
}
@media(width > 767px){
    header .logo img.logo-icon{display: none;}
    header .logo img.logo-img{display: block;}
}
@media(width < 768px){
    header .logo img{max-width: 6rem;}
    .header-links{gap: 0 1rem;}
    .header-links a svg{height: 1.8rem;}
    header .btn span{display: none;}
    header .logo img.logo-icon{display: block;}
    header .logo img.logo-img{display: none;}
}
@media(width < 576px){
    .header-links-wrap{gap: 0 1rem;}
}
nav > ul > li{position: relative;}
nav > ul > li > ul{min-width: 100%;}
nav > ul > li > ul > li:not(:last-child){border-bottom: .1rem solid rgba(0,0,0,20%);}
nav > ul > li > ul > li > a{height: 3.4rem; display: flex; align-items: center; font-family: inherit; font-size: 1.4rem; white-space: nowrap;}
@media(width > 1199px){
    nav > ul > li > ul{display: block !important; position: absolute; left: 0; top: 100%; background-color: white; border-radius: var(--btn-radius); transition: var(--transition); transform: translateY(.5rem); opacity: 0; visibility: hidden;}
    nav > ul > li > ul > li > a{color: black; padding: 0 1.5rem;}
    nav > ul > li:hover > ul{opacity: 1; visibility: visible; transform: translateY(0);}
    nav > ul > li > a > span{pointer-events: none;}
}
@media(width < 1200px){
    nav > ul > li > ul{display: none;}
    nav > ul > li > ul > li > a{color: white; padding: 0 calc(var(--gutter) + 1.5rem); height: 4rem;}
    nav > ul > li{position: relative;}
    nav > ul > li > a + span{position: absolute; right: 0; top: 0; cursor: pointer; background-color: white;}
    nav > ul > li > a + span svg path{fill: black;}
    nav > ul > li > a + span > svg{transition: var(--transition);}
    nav > ul > li.sub-menu-active > a + span > svg{transform: rotate(-180deg);}
}

/* Hero Slider */
.hero-slider-wrap{position: relative;}
.hero-slide{border-radius: 2rem; border: .1rem solid rgba(255,255,255,20%); background-color: var(--dark-grey); overflow: hidden; height: 50rem;}
.hero-slide > *{flex: 1 0 0%;}
.hero-slide figure{height: 100%; position: relative;}
.hero-slide figure img{width: 100%; height: auto; max-width: 100%; object-fit: cover;}
.hero-slide figure::before{position: absolute; left: 0; top: 0; width: 40%; height: 100%; content: ""; background: linear-gradient(to right, var(--dark-grey) 0%,transparent 100%); pointer-events: none;}
.hero-slide-content{width: 100%; max-width: 52rem; padding: var(--gutter) var(--gutter) var(--gutter) calc(var(--gutter) * 2);}
.hero-slide-content > :not(:last-child){margin-bottom: var(--gutter-half);}
.hero-slide-content .buttons{display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--gutter-half);}
.hero-slide-content .btn{max-width: 21.6rem;}
.hero-slide-content .btn.btn-o{color: white;}
.hero-slider-wrap .slider-control{position: absolute; top: 50%; z-index: 99;}
.hero-slider-wrap .slider-control.prev{left: 0; transform: translate(-150%, -50%);}
.hero-slider-wrap .slider-control.next{right: 0; transform: translate(150%, -50%);}
.hero-slider .swiper-slide{opacity: 0 !important;}
.hero-slider .swiper-slide.swiper-slide-active{opacity: 1 !important;}
@media(width < 1400px){
    .hero-slider-wrap .slider-control.prev{transform: translate(-50%, -50%);}
    .hero-slider-wrap .slider-control.next{transform: translate(50%, -50%);}
}
@media(width < 1200px){
    .hero-slide{height: auto;}
    .hero-slide-content{padding: var(--gutter);}
}
@media(width > 991px){
    .hero-slide{display: flex;}
    .hero-slide-image{order: 2;}
}
@media(width < 992px){
    .hero-slide-image figure{height: 50dvh; overflow: hidden;}
    .hero-slide-image figure img{object-fit: cover; width: 100%; height: 100%; object-position: top right;}
}

/* Section */
.section{padding: var(--md) 0;}

/* Section Header */
.section-header:not(:last-child){margin-bottom: var(--md);}
.section-header .container{display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter);}
.gradient-text{background: linear-gradient(to top, #FFAC4E, #FE4E66); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
@media(width < 992px){
  .section-header .container{flex-direction: column; align-items: flex-start;}
}

/* Post */
.posts {display: grid; gap: var(--gutter);}
.post{border-radius: 1rem; padding: var(--gutter); padding-top: 20rem; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; isolation: isolate; border: .1rem solid #736c7b; overflow: hidden;}
.post::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; border-radius: inherit; background: linear-gradient(to bottom, rgba(17,17,17,50%) 0%,rgba(17,17,17,1) 80%); }
.post.post-1{background-image: url('../images/post-bg-1.png');}
.post.post-2{background-image: url('../images/post-bg-2.png');}
.post.post-3{background-image: url('../images/post-bg-3.png');}
.post p{color: rgba(255,255,255,90%);}
@media(width > 991px){
    .posts {grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(2, 1fr);}
    .posts.posts-2 {grid-template-rows: repeat(1, 1fr);}
    .posts > :first-child { grid-area: 1 / 1 / 2 / 4; }
    .posts > :nth-child(2) { grid-area: 1 / 4 / 2 / 6; }
    .posts > :nth-child(3) { grid-area: 1 / 6 / 2 / 8; }
    .posts > :nth-child(4) { grid-area: 2 / 1 / 3 / 3; }
    .posts > :nth-child(5) { grid-area: 2 / 3 / 3 / 5; }
    .posts > :nth-child(6) { grid-area: 2 / 5 / 3 / 8; }
}
@media(width < 992px){
    .posts {grid-template-columns: repeat(2, 1fr);}
}
@media(width < 641px){
    .posts {grid-template-columns: 1fr;}
}

/* Card */
.card-slider-wrap{position: relative;}
.card-slider{overflow: hidden;}
.card-slider-wrap .slider-control{position: absolute; top: 50%; z-index: 99;}
.card-slider-wrap .slider-control.prev{left: 0; transform: translate(-50%, -50%);}
.card-slider-wrap .slider-control.next{right: 0; transform: translate(50%, -50%);}

/* Force uniform card heights */
.card-slider .swiper-wrapper{display: flex !important; align-items: stretch !important;}
.card-slider .swiper-slide{display: flex !important; height: 56rem !important;}
.card-slide{border-radius: 1.5rem; background-color: white; height: 56rem !important; position: relative !important; width: 100% !important;}
.card-slide-image{padding: .6rem; padding-bottom: 0; border-radius: .8rem; aspect-ratio: 1/1.3; overflow: hidden;}
.card-slide-image img{object-fit: cover; width: 100%; height: 100%; border-radius: inherit; object-position: top center;}
.card-slide-content{padding: 2rem !important; position: relative !important; height: calc(56rem - 30rem) !important; padding-bottom: 8rem !important;}
.card-slide-content .buttons{display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem;}
.card-slide-content h5{line-height: 1.3 !important; margin-bottom: 1.5rem !important; max-height: 8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.card-slide-content .card-slide-date-time{margin-bottom: 1.5rem !important;}
.card-slide-content > div:last-child{position: absolute !important; bottom: 7rem !important; left: 2rem !important; right: 2rem !important;}
.card-slide .btn.btn-o{color: var(--text-color);}

@media(width < 768px){
    .card-slider .swiper-slide{height: 52rem !important;}
    .card-slide{height: 52rem !important;}
    .card-slide-content{height: calc(52rem - 28rem) !important; padding-bottom: 8rem !important;}
    .card-slide-content h5{min-height: 9rem; max-height: 9rem;}
}

/* Thumbnail Slide */
.thumbnail-slider-wrap{position: relative;}
.thumbnail-slide{aspect-ratio: 1/1.1; border-radius: 1.5rem; overflow: hidden; position: relative;}
a.thumbnail-slide{display: block; text-decoration: none;}
.thumbnail-slide img{object-fit: cover; width: 100%; height: 100%; border-radius: inherit;}
.thumbnail-slider-wrap .slider-control{position: absolute; top: 50%; z-index: 99;}
.thumbnail-slider-wrap .slider-control.prev{left: 0; transform: translate(-50%, -50%);}
.thumbnail-slider-wrap .slider-control.next{right: 0; transform: translate(50%, -50%);}
.thumbnail-slide-content{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:linear-gradient(to bottom, rgba(2,3,4,0%) 0%, rgba(2,3,4,100%) 100%); content: "";}
.thumbnail-slide-content{display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 1rem 2.4rem;}

/* Tabs */
.tabs{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gutter-half);}
.tabs li{display: flex; flex: 1 0 0%; align-items: center;}
.tabs li > *{flex: 1 0 0%; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-align: center; font-family: "Gilroy-Bold"; color: white; padding: 2rem 0; border-radius: .4rem; border-bottom: .1rem solid rgba(255,255,255,25%);}
.tabs li > .active{border-bottom-width: .2rem; border-bottom-color: var(--primary);}

/* FAQ */
.faq li{border-radius: 1.5rem; padding: 4.6rem 6rem; border: .1rem solid rgba(255,255,255,10%); background-color: rgba(3,4,5,40%); transition: var(--transition);}
.faq li:not(:last-child){margin-bottom: var(--gutter);}
.faq li h6, .faq li p{color: white;}
.faq li p{font-size: 1.3rem; line-height: 1.8;}
.faq li h6{position: relative; padding-right: var(--gutter);}
.faq li h6::before, .faq li h6::after{position: absolute;}
.faq li h6::before{width: 1.6rem; height: .2rem; content: ""; background-color: white; right: 0; top: 50%; transform: translateY(-50%);}
.faq li h6::after{width: .2rem; height: 1.6rem; content: ""; background-color: white; right: .7rem; top: 50%; transform: translateY(-50%);}
.faq-section .container{max-width: calc(79.4rem + (var(--gutter)*2));}
.faq li.active{background-color: white;}
.faq li.active h6, .faq li.active p{color: var(--text-color);}
.faq li.active h6::after{display: none;}
.faq li.active h6::before, .faq li.active h6::after{background-color: var(--text-color);}
.faq li h6{cursor: pointer;}
@media(width < 768px){
    .faq li{padding: var(--gutter); border-radius: 1rem;}
    .faq li:not(:last-child){margin-bottom: var(--gutter-half);}
}
@media(width < 576px){
    .faq li{padding: var(--gutter) var(--gutter-half); }
}

.image{position: relative; transform: translateX(-25%);}
.image .image-info-box{padding: var(--gutter); background-color: #2B2C31; border-radius: 1rem; border: .1rem solid rgba(255,255,255,16%); display: flex; justify-content: center; white-space: nowrap;}
.image-info-box h2 span{font-size: calc(var(--h1) + .5rem);}
.image-info-content{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem var(--gutter-half);}
.image-info-content span{flex-shrink: 0;}
.image-info-content img{width: 3.5rem; display: block;}
.image-info-box-wrap{transform: translateY(-50%);}
@media(width < 1500px){
    .image{transform: none;}
}
@media(width < 768px){
    .image .image-info-box{padding: var(--gutter-half);}
}

footer{padding: var(--lg) 0;}
footer .container{max-width: calc(124rem + calc(var(--gutter) * 2));}
.footer-wrap{background-color: white; border-radius: 2rem;}
.footer-content{padding: 6rem; padding-bottom: 4rem;}
.copyright-wrap{padding: 0 6rem;}
.copyright{padding: 4rem 0; border-top: .2rem solid rgba(2,3,4,11%); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gutter-half);}
.copyright p a{color: var(--text-color); transition: var(--transition);}
.copyright p a:hover{color: var(--secondary);}
.footer-content{display: grid; grid-template-columns: auto auto auto auto; justify-content: space-between; gap: var(--gutter);}
.footer-links li{display: flex;}
.footer-links li:not(:last-child){margin-bottom: var(--gutter-half);}
.footer-links li a{font-size: var(--fs-sm); color: var(--text-color); line-height: 1; white-space: nowrap; transition: var(--transition);}
.footer-links li a:hover{color: var(--secondary);}
.social-media{display: flex; align-items: center; gap: 2rem;}
.social-media > *{width: 3.6rem; aspect-ratio: 1; border-radius: 100%; border: .1rem solid #020304; display: grid; place-items: center;}
.social-media *, .social-media * svg{transition: var(--transition);}
.social-media > :hover{background-color: #020304;}
.social-media > :hover svg path{fill: white;}
@media(width < 992px){
    .footer-content{grid-template-columns: repeat(2, 1fr);}
    footer{padding: var(--gutter) 0;}
}
@media(width < 768px){
    .footer-content{padding: var(--gutter);}
    .copyright-wrap{padding: 0 var(--gutter);}
    .copyright{padding: var(--gutter) 0; flex-direction: column;}
}
@media(width < 576px){
    .footer-content{grid-template-columns: 1fr;}
}

/* FORCE UNIFORM CARD HEIGHTS - OVERRIDE ALL OTHER STYLES */
.section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide {
    height: 70rem !important;
    display: flex !important;
}

.section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide {
    height: 70rem !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content {
    position: relative !important;
    padding-bottom: 8rem !important;
    height: 40rem !important;
}

.section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content h5 {
    max-height: 8rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
}

.section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content > div:last-child {
    position: absolute !important;
    bottom: 7rem !important;
    left: 2rem !important;
    right: 2rem !important;
}

@media(width < 768px){
    .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide {
        height: 65rem !important;
    }

    .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide {
        height: 65rem !important;
    }

    .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content {
        height: 37rem !important;
    }

    .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content h5 {
        max-height: 9rem !important;
    }
}

/* ULTIMATE CARD HEIGHT OVERRIDE - MAXIMUM SPECIFICITY */
html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide {
    height: 70rem !important;
    display: flex !important;
    min-height: 70rem !important;
}

html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide {
    height: 70rem !important;
    min-height: 70rem !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content {
    position: relative !important;
    padding-bottom: 8rem !important;
    height: 40rem !important;
    min-height: 40rem !important;
}

html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content h5 {
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
}

html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content > div:last-child {
    position: absolute !important;
    bottom: 7rem !important;
    left: 2rem !important;
    right: 2rem !important;
}

@media(width < 768px){
    html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide {
        height: 65rem !important;
        min-height: 65rem !important;
    }

    html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide {
        height: 65rem !important;
        min-height: 65rem !important;
    }

    html body .section .container .card-slider-wrap .card-slider .swiper-wrapper .swiper-slide .card-slide .card-slide-content {
        height: 37rem !important;
        min-height: 37rem !important;
    }
}

/* Card slide links styling */
.card-slide-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.card-slide-content h5 a {
    color: inherit;
    text-decoration: none;
}

.card-slide-content h5 a:hover {
    color: var(--primary-color);
    text-decoration: none;
}