/* {{{ HERO }}} */
.hero .container {max-width: 100%; padding: 0;}
.hero :where(.carousel-indicators,
            .carousel-control-prev,
            .carousel-control-next
            ) {z-index: 6;}
.hero .carousel-item {position: relative;}
.hero .carousel-item::before {position: absolute; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 20%); z-index: 5; content: '';}
.hero .carousel-item video {width: 100%; height: 100%; object-fit: cover;}
.hero .carousel-item .main {position: absolute; inset: 100px 0 0; width: 65%; height: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 6; margin: auto;}
.hero .main * {color: #fff;}
.hero .main > :first-child {font-size: var(--_fs-2xl); line-height: 1.3; margin-bottom: 30px;filter:drop-shadow(2px 4px 6px black)}
.hero .main p {font-size: var(--fs-sm, 20px); margin-bottom: 20px;filter:drop-shadow(2px 4px 6px black)}
#award-badge {position: fixed; top: 46px; right: 1.5%; z-index: 20; transition: .4s;}
body:has(header.stickybg) #award-badge {top: 126px; right: 1.5%;}


/* {{{ ABOUT }}} */
.about {padding-block: 50px;}
.about .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 50px;}
.about .image img {border-radius: 10px;}
.about .content h2 :first-child {color: var(--c-secondary);}
.about .content > :first-child {display: block; text-transform: uppercase; margin-bottom: 15px;}
.about .content > :nth-child(2) {font-size: var(--fs-lg, 32px); text-transform: uppercase; color: var(--c-primary); margin-bottom: 20px;}
.about .content > :nth-child(2) * {background: var(--c-gradient); background-clip: text;}
.about .content > :nth-child(2) *::selection {-webkit-text-fill-color: #fff}
.about .content p {margin-bottom: 20px;}
.about .content p a{display:contents}
.about .content .btn__primary {gap: 6px; font-size: var(--fs-xs, 14px); font-weight: 500; text-transform: uppercase;}

/* {{{ SYSTEM & SERVICES }}} */
:is(.system, .services) {padding-block: 20px 120px;}
:is(.system, .services) .title {text-align: center; margin-bottom: 40px;}
:is(.system, .services, .about) .title :first-child {font-size: var(--fs-lg, 32px); line-height: 1.3; text-transform: uppercase; color: var(--c-secondary);}
:is(.system, .services) .title :first-child * {color: var(--c-primary);}
:is(.system, .services) .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 24px;}
:is(.system, .services) .item {position: relative;}
:is(.system, .services) .item img {width: 100%; height: 298px; object-fit: cover; border-radius: 10px;}
:is(.system, .services) .item > :nth-child(2) {position: absolute; inset: 90% 0 0; width: 80%; height: fit-content; font-size: var(--fs-base, 16px); line-height: 1.3; text-align: center; background-color: #fff; padding: 10px 35px; border-radius: 10px; box-shadow: var(--shdw-lght); margin-inline: auto;    text-transform: capitalize}
:is(.system, .services) .item:hover > :nth-child(2) {box-shadow: var(--shdw-drk);}

/* {{{ CLIENTS }}} */
.clients {padding-block: 50px; position: relative; background-color: var(--c-primary); margin-inline: auto;}
.clients .container {max-width: 100%; padding: 0;}
.clients .title {text-align: center; margin-bottom: 30px;}
.clients .title :first-child {font-size: var(--fs-lg, 32px); line-height: 1.3; text-transform: uppercase; color: #fff;}
.clients .logo {height: 113px; background-color: #fff; border-radius: 10px; margin-left: 15px;}
.clients .logo img {width: 100%; height: 100%; object-fit: contain;}
.clients .slider {position: static; display: flex; align-items: center;}
.clients .slick-arrow {position: absolute; inset: 0 auto; z-index: 10; font-size: 0; width: fit-content; height: 100%; background: var(--_c-gradient-lght);  padding-inline: 30px; margin-block: auto;}
.clients .slick-arrow span {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--c-secondary); border-radius: 50%; margin-top: 72px;}
.clients .slick-arrow span:hover {background-color: #fff;}
.clients .slick-arrow span:hover img {filter: var(--flt-secondary);}
.clients .slick-prev {left: 0; background: linear-gradient(90deg, rgba(26,39,128,1) 0%, rgba(255,255,255,0) 100%);}
.clients .slick-next {right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(26,39,128,1) 100%);}
.clients *::selection {background-color: #fff; color: var(--c-primary);}

/* {{{ TESTIMONIALS }}} */
.testimonials {padding-block: 70px;}
.testimonials .title {margin-bottom: 30px;}
.testimonials .title :first-child {font-size: var(--fs-lg, 32px); line-height: 1.3; text-transform: uppercase; color: var(--c-secondary);}
.testimonials .title :first-child * {color: var(--c-primary);}
.testimonials .wrapper {display: grid; grid-template-columns: minmax(680px, 815px) minmax(250px, 415px); gap: 60px;}
.testimonials .slider-arrows {position: absolute; inset: 15px 15px auto auto; display: flex; align-items: center; gap: 30px; z-index: 5;}
.testimonials .reviews {position: relative; overflow: hidden; box-shadow: var(--shdw-nrml);}
.testimonials .review.active {position: relative; opacity: 1; transform: translateX(0);}
.testimonials .review.prev {transform: translateX(-100%);}
.testimonials .review.next {transform: translateX(100%);}
.testimonials .slider-arrows button:hover {filter: var(--flt-primary);}
.testimonials .review {position: absolute; display: flex; align-items: center; width: 100%; height: 100%; opacity: 0; transform: translateX(100%); border-radius: 0 4px 4px 0; transition: transform var(--transition), opacity var(--transition);}
.testimonials .review > img {height: 332px; object-fit: cover; border-radius: 10px 0 0 10px;}
.testimonials .review > div {height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 32px;}
.testimonials .review p {max-height: 176px; letter-spacing: 0.6px; line-height: 1.6; color: var(--c-neutral-drk);}
.testimonials .review div :last-child {font-size: calc(var(--fs-base) + 2px); font-weight: 700; text-transform: uppercase; color: var(--c-primary);}
.testimonials .stats {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px 30px;}
.testimonials .stats .item {width: 100%; text-align: center; background-color: var(--_c-primary-lght); padding: 20px; border-radius: 10px;}
.testimonials .stats .item:hover {background-color: var(--_c-primary-drk);}
.testimonials .stats .item * {display: block; width: fit-content; line-height: 1; margin-inline: auto;}
.testimonials .stats .item > :first-child {position: relative; font-size: var(--fs-xl, 42px); font-weight: 700; color: var(--c-primary); padding-bottom: 20px; margin-bottom: 20px;display:flex}
.testimonials .stats .item > :first-child::before {position: absolute; inset: auto 0 0; width: 100%; max-width: 40px; height: 1px; background-color: var(--c-secondary); margin-inline: auto; content: '';}
.testimonials .stats .item > :nth-child(2) {font-size: var(--fs-sm, 20px); font-weight: 500; line-height: 1.3; text-transform: uppercase; color: var(--c-neutral-drk);}
.testimonials .stats .item:hover * {color: #fff;}

/* {{{ CHOOSE }}} .choose {padding-block: 70px;} */

.choose .title {text-align: center; margin-bottom: 30px;}
.choose .title :first-child {font-size: var(--fs-lg, 32px); line-height: 1.3; text-transform: uppercase; color: var(--c-secondary);}
.choose .title :first-child * {color: var(--c-primary);}
.choose .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;    PADDING-BOTTOM: 50PX;}
.choose .item {text-align: center; padding: 10px 22px; border: 1px solid var(--c-primary); border-radius: 10px;}
.choose .item:hover {background-color: var(--_c-primary-lght); box-shadow: var(--shdw-lghtr);}
.choose .item img {margin-inline: auto; margin-bottom: 15px;}
.choose .item > :nth-child(2) {font-size: var(--fs-xs, 14px); font-weight: 600; line-height: 1.4; color: var(--c-primary);}

.about.content a {display: contents;}



/* ((( MEDIA QUERIES ))) */
@media only screen and (max-width: 1500px) {
    #award-badge {top: 94px; right: 7%;}
    #award-badge img {max-width: 66px;}
}

@media only screen and (max-width: 1400px) {
    /* Hero */
    .hero .carousel video {height: 100vh;}
    /* System & Services */
    :is(.system, .services) .item img {height: 260px;}
    /* Testimonials */
    .testimonials .wrapper {gap: 40px;}
}

@media only screen and (max-width: 1200px) {
    /* About */
    .about::before {right: 2%; width: 70px; height: 89px;}
    /* System & Services */
    :is(.system, .services) .item > :nth-child(2) {width: 90%; padding-inline: 15px;}
    /* Testimonials */
    .testimonials .wrapper {gap: 30px;}
    .testimonials .review > div {padding: 24px;}
}

@media only screen and (max-width: 991px) {
    body:has(header.stickybg) #award-badge {top: 109px;}
    /* About */
    .about {padding-block: 40px;}
    .about::before {right: 2%; width: 55px; height: 74px;}
    .about .wrapper {grid-template-columns: 1fr; place-items: center; gap: 20px;}
    .about .content {text-align: center;}
    .about .content .btn__primary {margin-inline: auto;} 
    /* System & Services */
    :is(.system, .services) {padding-bottom: 60px;}
    :is(.system, .services) .wrapper {grid-template-columns: repeat(3, 1fr); row-gap: 50px;}
    :is(.system, .services) .item > :nth-child(2) {top: auto; bottom: -8%;}
    /* Clients */
    .clients {padding-block: 40px;}
    /* Testimonials */
    .testimonials {padding-block: 50px;}
    .testimonials .wrapper {grid-template-columns: 1fr;}
    .testimonials .stats {flex-direction: row;}
    /* Choose */
    .choose {padding-block: 50px;}
    .choose .wrapper {grid-template-columns: repeat(3, 1fr);}
    /* Branches */
    .branches {padding-bottom: 40px;}
    .branches .wrapper::before {content: none;}
}

@media only screen and (max-width: 767px) {
    /* Hero */
    .hero .carousel-item .main {width: 100%; padding-inline: 15px;}
    .hero :where(.carousel-control-prev,
                .carousel-control-next
                ) {top: auto; bottom: 10%; height: fit-content; margin-block: auto;}
    /* System & Services */
    :is(.system, .services) .wrapper {grid-template-columns: repeat(2, 1fr);}
    :is(.system, .services) .item img {height: 320px;}
    /* Testimonials */
    .testimonials .container {position: relative; overflow: hidden;}
    .testimonials .reviews {position: static;}
    .testimonials .slider-arrows {top: 10px;}
    .testimonials .review > img {max-width: 220px;}
    .testimonials .review > div {gap: 12px; padding: 18px;}
    /* Choose */
    .choose .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* Branches */
    .branches video {height: 300px;}
}

@media only screen and (max-width: 575px) {
    #award-badge,
    body:has(header.stickybg) #award-badge {top: 104px; right: 1.5%;}
    #award-badge img {max-width: 50px;}
    /* About */
    .about {padding-block: 30px;}
    .about::before {right: 2%; width: 40px; height: 59px;}
    .about .content > :is(:first-child, :nth-child(2), p) {margin-bottom: 10px;}
    .about .content .btn__primary {margin-top: 15px;}
    /* System & Services */
    :is(.system, .services) {padding-block: 10px 40px;}
    :is(.system, .services) .title {margin-bottom: 20px;}
    :is(.system, .services) .wrapper {grid-template-columns: 1fr; place-items: center; gap: 40px;}
    :is(.system, .services) .item {width: 100%; max-width: 400px;}
    :is(.system, .services) .item img {height: 380px;}
    :is(.system, .services) .item > :nth-child(2) {bottom: -3%;}
    /* Clients */
    .clients {padding-block: 30px 70px;}
    .clients .title {margin-bottom: 20px;}
    .clients .slick-arrow {top: auto; bottom: 20px; height: fit-content; background: none; padding: 0;}
    .clients .slick-prev {left: 15px;}
    .clients .slick-next {right: 15px;}
    .clients .slick-arrow span {width: 28px; height: 28px; margin: 0;}
    .clients .slick-arrow img {width: 12px; height: 14px;}
    .clients .logo {margin-inline: 10px;}
    /* Testimonials */
    .testimonials {padding-block: 30px;}
    .testimonials .container {position: static;}
    .testimonials .title {text-align: center; margin-bottom: 20px;}
    .testimonials .wrapper {gap: 0;}
    .testimonials .reviews {position: relative;}
    .testimonials .slider-arrows {inset: auto 18px 23px auto;}
    .testimonials .review {flex-direction: column; gap: 12px; box-shadow: none;}
    .testimonials .review > div {height: auto;}
    .testimonials .review > img {border-radius: 10px;}
    .testimonials .review p {max-height: 100%; padding: 0;}
    .testimonials .stats {flex-direction: column; gap: 20px;}
    .testimonials .stats .item {padding: 15px;}
    .testimonials .stats .item > :first-child {padding-bottom: 12px; margin-bottom: 12px;}
    /* Choose */
    .choose {padding-block: 30px;}
    .choose .title {margin-bottom: 20px;}
    /* Branches */
    .branches {padding-bottom: 30px;}
    .branches video {height: 240px;display:flex}
}

@media only screen and (max-width: 475px) {
    /* Testimonials */
    .testimonials .wrapper {gap: 12px;}
    .testimonials .slider-arrows {bottom: 15px; gap: 20px;}
    .testimonials .review > div {padding: 10px;}
    /* Choose */
    .choose .wrapper {grid-template-columns: 1fr; gap: 15px; max-width: 300px; margin-inline: auto;}
    .choose .item {padding: 8px 16px;}
    /* Branches */
    .branches video {height: 175px;}
}

@media only screen and (max-width: 360px) {
    /* System & Services */
    :is(.system, .services) .item img {height: auto;}
    /* Branches */
    .branches video {height: auto;}
}
.whychoose-icon{
height:50px;
width:50px;
}