/* Index Hero */

.carousel-item-elements {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* top: 0; */
    width: -webkit-fill-available;
    padding-left: 25.33%;
    padding-right: 25.33%;
    /* padding-top: 18.33%; */
    /* bottom: 0; */
    /* padding-bottom: 13.33%; */
    top: 50%;
    transform: translateY(-50%);
}

.carousel-item-inside img {
    width: -webkit-fill-available;
}

.blue-title {
    font-family: var(--fontWorkSans);
    color: rgba(41, 143, 194, 1);
    font-size: 44px;
    font-weight: 700;
}

.white-title {
    font-family: var(--fontWorkSans);
    color: #FFF;
    /* font-size: 90px; */
    font-size: clamp(2.5rem, 1.875rem + 3.125vw, 5.625rem);
    font-weight: 700;
    line-height: 86.667%;
}

.custom-btn.with-arrow {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    align-items: center;
    max-width: 230px;
    margin-bottom: 100px;
    margin-top: 20px;
}

.custom-fill {
    fill: #e07e3c; 
    transition: fill 0.3s ease; 
  }
  
  .custom-btn.with-arrow:hover .custom-fill {
    fill: #298fc2; 
}

  
.arrow_button svg {
    background: #FFF;
    padding: 5px;
    border-radius: 100%;
}

.carousel-item-elements p {
    color: #FFF;
    font-family: var(--fontInter);
}

.carousel-item-elements p.main-description {
    margin-bottom: 16px;
    max-width: 565px;
    /* line-height: 125%; */
    line-height: 26px;
}

.carousel-item-elements p.sub-title {
    font-weight: 700;
    max-width: 565px;
}

#indexHeroBanner.owl-carousel .owl-item img {
    height: 100vh;
    /* height: 80vh; */
    object-fit: cover;
}

@media (max-width: 767px) {
    #indexHeroBanner .custom-btn.with-arrow {
        margin-bottom: 50px;
    }
}

/* Owl Dots */

/* .owl-nav {
    display: flex;
    position: absolute;
    bottom: 100px;
    width: -webkit-fill-available;
    justify-content: flex-end;
} */

/* .owl-nav .owl-prev,
.owl-nav .owl-next {
    border: 1px solid #FFF;
    border-radius: 10px;
    padding: 15px;
} */

.owl-dots {
    text-align: center;
    margin-top: 25px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    padding: 16px !important;
    border: 1px solid #FFF;
    border-radius: 10px;
    font-size: 48px;
    color: #FFF;
    width: 100vw;
    max-width: 50px;
}
  
.owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    border-radius: 50%;
    background: rgba(204, 204, 204, 1) !important;
    cursor: pointer;
    transition: background 0.3s ease;
}

.owl-dot.active {
    background: rgba(98, 96, 107, 1) !important; /* active dot color */
}

.owl-dot:hover {
    background: #666 !important;
}


/* Featured  */
.indexFeatured a {
    text-decoration: none;
}

.indexFeatured  .section-main h2 {
    font-family: var(--fontWorkSans);
    font-size: 48px;
    font-weight: 700;
    color: rgba(37, 40, 42, 1);
    text-align: center;
    margin-bottom: 20px;
}

.indexFeatured  .section-main p {
    font-family: var(--fontInter);
    font-size: 16px;
    color: rgba(37, 40, 42, 1);
    text-align: center;
    margin-bottom: 40px;
    line-height: 26px;
}

.featured-item {
    padding: 25px;
    background: #FFF;
    border: solid 1px rgba(204, 204, 204, 1);
    height: 100vh;
    max-height: 300px;
}

.featured-item p {
    font-family: var(--fontWorkSans);
    font-size: 13px;
    text-align: center;
    color: #000;
}

#indexFeatured.owl-carousel .owl-item img {
    transform: scale(0.6);
    transform-origin: center center;
}

/* Clients */
.indexClients {
    padding-top: 0;
}

.indexClients a {
    text-decoration: none;
}

.indexClients .section-main h2 {
    font-family: var(--fontWorkSans);
    font-size: 48px;
    font-weight: 700;
    color: rgba(37, 40, 42, 1);
    text-align: center;
    margin-bottom: 40px;
}

.indexClients .featured-item {
    padding: 25px;
    background: #FFF;
    border: solid 1px rgba(204, 204, 204, 1);
    height: 100vh;
    max-height: 360px;
    border-radius: 10px;
    max-height: 450px;
}

#indexClients.owl-carousel .owl-item img {
    transform: scale(0.6);
    transform-origin: center center;
}

.indexClients .featured-item p {
    font-family: var(--fontInter);
    font-size: 16px;
    color: rgba(37, 40, 42, 1);
    margin-bottom: 50px;
    line-height: 26px;
}

.indexClients .featured-item p.name {
    font-family: var(--fontWorkSans);
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
}

.indexClients .featured-item p.role {
    text-align: center;
}

/* .indexClients .section-ratings {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    flex-wrap: wrap;
    column-gap: 5%;
    row-gap: 30px;
} */

.indexClients .section-ratings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5%;
    row-gap: 30px;
    margin-top: 50px;

    @media (max-width: 1199px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 767px) {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.indexClients .section-ratings img {
    display: flex;
    width: 100%;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    max-width: 263px;
    position: relative;
    margin: 0 auto;
}

.indexClients .section-ratings img:hover {
    filter: unset;
}

@media (min-width: 1441px) {
    .indexClients .featured-item {
        max-height: 420px;
    }
}

@media (max-width: 380px) {
    .indexClients .section-ratings img {
        transform: scale(.8);
    }
}

/* Explore */
section.indexExplore {
    background: #FFF;
}

.indexExplore .custom-btn.with-arrow {
    max-width: 160px;
    margin-bottom: 0;
}

section.indexExplore .explore-contents {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.explore-section {
    display: flex;
    justify-content: space-between;
}

.explore-section.reversed {
    flex-direction: row-reverse;
}

/* .explore-section .content-left,
.explore-section .content-right {
    width: 45%;
} */

.explore-section .content-left {
    width: 41%;
}

.explore-section .content-right{
    width: 49%;
}

.explore-section.reversed .content-right {
    width: 46%;
}

.explore-section.reversed .content-left {
    width: 44%;
}

.explore-section .content-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.explore-section .content-right img {
    width: -webkit-fill-available;
    object-fit: contain;
}

.explore-section:not(.reversed) .content-right {
    display: flex;
    justify-content: flex-end;
}
  
span.small_blue {
    font-family: var(--fontWorkSans);
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--blueMain);
    margin-bottom: 20px;
}

.explore-section .content-left h2 {
    font-family: var(--fontWorkSans);
    font-size: 48px;
    line-height: 48px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.explore-section .content-left p {
    font-family: var(--fontInter);
    font-size: 16px;
    line-height: 26px;
    color: rgba(99, 102, 107, 1);
}

/* Request */
section.indexRequest {
    background: url(../../assets/images/index_request_bg.jpg) no-repeat center center / auto;
    color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

section.indexRequest .top-content {
    border-bottom: 1px solid #FFF;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

section.indexRequest .top-content h1 {
    font-family: var(--fontWorkSans);
    font-size: 54px;
    line-height: 60px;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: center;
    max-width: 1116px;
}

section.indexRequest .top-content p.subtitle {
    font-family: var(--fontInter);
    font-size: 16px;
    /* line-height: 150%; */
    line-height: 26px;
    margin-bottom: 40px;
    text-align: center;
}

section.indexRequest .top-content a.custom-btn {
    text-decoration: none;
    font-size: 16px;
    padding: 17px 40px;
    text-align: center;
}

.bottom-content svg {
    margin-bottom: 30px;
}

.bottom-content p.description {
    font-family: var(--fontWorkSans);
    /* font-size: 30px; */
    /* line-height: 40px; */
    margin-bottom: 40px;
    font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
    line-height: 133.333%;
}

.bottom-content p.name {
    font-family: var(--fontInter);
    font-size: 23px;
    line-height: 34.5px;
    font-weight: 700;
}

.bottom-content p.role {
    font-family: var(--fontInter);
    font-size: 16px;
    line-height: 150%
}

/* Blogs */
section.indexBlogs {
    background: #FFF;
}

.blogs-content h2 {
    font-family: var(--fontWorkSans);
    font-size: 48px;
    line-height: 48px;
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
    max-width: 558px;
}

.blogs-content {
    display: flex;
    justify-content: center;
}



.blog-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 40px;
}
  
@media (min-width: 1813px) {
    .blog-entries {
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    }
}
  
.blog-entry img {
    border-radius: 10px;
    margin-bottom: 20px;
    width: -webkit-fill-available;
}

a.blog_title {
    text-decoration: none;
}

a.blog_title h3 {
    font-family: var(--fontWorkSans);
    font-size: 18px;
    line-height: 26px;
    color:var(--blueMain);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 30px;
}

a.read_more {
    font-family: var(--fontWorkSans);
    font-size: 18px;
    line-height: 26px;
    color:var(--orangeMain);
    font-weight: 700;
    text-decoration: none;
}

.home div#paginationContainer {
    display: none;
}

/* Contact */
section.indexContact {
    background: url(../../assets/images/footer-bg-new.jpg) no-repeat center center / auto;
    color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 0;
}

.contact-contents {
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
    border-bottom: 1px solid #FFF;
}

/* .contact-contents .content-left,
.contact-contents .content-right {
    width: 45%;
} */

.contact-contents .content-left {
    width: 40%;
}

.contact-contents .content-right {
    width: 55%;
}

.contact-contents .content-left h2 {
    font-family: var(--fontWorkSans);
    font-size: 48px;
    /* font-size: 2.8125vw; */
    line-height: 60px;
    font-weight: 700;
    margin-bottom: 40px;

}

.contact-contents .content-left p {
    font-family: var(--fontInter);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    width: -webkit-fill-available !important;
    border-radius: 5px !important;
    padding: 12px !important;
    border: none !important;
    margin-bottom: 30px !important;
}

input.wpcf7-form-control.wpcf7-text {
    width: -webkit-fill-available !important;
    border-radius: 5px !important;
    padding: 12px !important;
    border: none !important;
    margin-bottom: 30px !important;
}

input.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-number {
    width: -webkit-fill-available !important;
    border-radius: 5px !important;
    padding: 12px !important;
    border: none !important;
    margin-bottom: 30px !important;
}

select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
    width: -webkit-fill-available !important;
    padding: 12px !important;
    border: none !important;
    margin-bottom: 30px !important;
    border-radius: 5px !important; 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="21" height="51" viewBox="0 0 21 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.3872 24.5013L11.106 32.7713C10.9646 32.9127 10.7972 32.9834 10.6038 32.9834C10.4103 32.9834 10.2429 32.9127 10.1015 32.7713L1.82027 24.5013C1.6789 24.3599 1.60822 24.1906 1.60822 23.9934C1.60822 23.7963 1.6789 23.627 1.82027 23.4856L3.67295 21.6441C3.81432 21.5027 3.98173 21.4321 4.17518 21.4321C4.36863 21.4321 4.53604 21.5027 4.67741 21.6441L10.6038 27.5705L16.5301 21.6441C16.6715 21.5027 16.8389 21.4321 17.0323 21.4321C17.2258 21.4321 17.3932 21.5027 17.5346 21.6441L19.3872 23.4856C19.5286 23.627 19.5993 23.7963 19.5993 23.9934C19.5993 24.1906 19.5286 24.3599 19.3872 24.5013Z" fill="%236B6B6B"/></svg>');    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

textarea {
    width: -webkit-fill-available !important;
    border-radius: 5px !important;
    padding: 12px !important;
    border: none !important;
    resize: none;
    margin-bottom: 30px !important;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.custom-btn {
    background-color: var(--orangeMain) !important;
    padding: 13px 53px !important;
    border-radius: 50px !important;
    color: #FFF !important;
    font-weight: 600 !important;
    transition: background 0.3s ease !important;
    font-family: var(--fontInter) !important;
    font-size: 16px !important;
    border: none !important;
    /* width: 100vw !important; */
    /* max-width: 170px !important; */
    width: -webkit-fill-available !important;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.custom-btn:hover {
    background-color: #223B75 !important;
    border: none !important;
}

form label {
    /* font-weight: 700; */
    font-weight: 400;
    margin-bottom: 10px;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border-color: rgba(255, 255, 255, 0.0) !important;
}

.wpcf7-not-valid-tip {
    top: -25px;
    position: relative;
    margin-bottom: 0 !important;
}

/* Hero Owl Controls */
section.indexHero {
    max-height: 100vh;
}

section.indexHero .carousel-controls {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -100px;
    margin: 0 17.22%;
    margin: 0 8.22%;
    z-index: 1;
}


/* Hero Owl Dots */

/* section.indexHero .custom-dots {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    position: relative;
    top: -100px;
    z-index: 1;
    margin: 0 17.22% !important;
  } */

section.indexHero .custom-dots {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}
  

section.indexHero .custom-dots .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(255 255 255);
    border: 7px solid rgb(0 0 0 / 85%);
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0;
}

section.indexHero .custom-dots .dot:hover {
    opacity: 50%;
}
  
section.indexHero .custom-dots .dot.active {
    border: 7px solid rgba(251, 251, 251, 1);
    background-color: transparent; 
  }
  
  

/* Hero Owl Arrows */

/* section.indexHero .custom-nav {
    display: flex;
    gap: 10px;
    position: relative;
    top: -130px;
    z-index: 1;
    justify-content: flex-end;
    margin: 0 17.22% !important;
} */
  
  section.indexHero .custom-nav {
    display: flex;
    gap: 10px;
  }

  section.indexHero .nav-btn {
    position: relative;
    width: auto;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.0);
    border: 1px solid #FFF;
    border-radius: 10px;
    padding: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  
  /* The arrow icon */

  section.indexHero .nav-btn .arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  
  /* The animated tail */
  section.indexHero .nav-btn .tail {
    display: inline-block;
    height: 2px;
    width: 0;
    background-color: white;
    transition: width 0.3s ease;
  }
  
  /* Hover effect: tail grows */
  section.indexHero .nav-btn:hover .tail {
    width: 40px;
    position: relative;
  }

  section.indexHero .nav-btn.prev:hover .tail {
    right: 18px;
  }

  section.indexHero .nav-btn.next:hover .tail {
    left: 18px;
  }
  
  /* Order fix for .next */
  section.indexHero .nav-btn.next {
    flex-direction: row-reverse;
  }

  section.indexHero .nav-btn:hover {
    background: var(--blueMain);
    border: none;
  }
  
  /* Responsive Styling */

@media (max-width: 1199px) {
    #indexHeroBanner.owl-carousel .owl-item img {
        height: 80vh;
    }

    section.indexHero .carousel-item-elements {
        padding-left: 19.22% !important;
        padding-right: 19.22% !important;
    }

    .indexClients .section-ratings {
        justify-content: center;
        column-gap: 30px;
    }

    .blog-entries {
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    }
}


@media (max-width: 991px) {
    #indexFeatured.owl-carousel .owl-item img {
        transform: unset;
        transform-origin: unset;
    }

    #indexFeatured.owl-carousel .owl-item img {
        width: max-content;
        position: relative;
        margin: auto;
        margin-bottom: 20px;
    }

    .explore-section .content-left,
    .explore-section .content-right,
    .explore-section.reversed .content-left,
    .explore-section.reversed .content-right {
        width: 100%;
    }

    .explore-section .content-left img,
    .explore-section .content-right img {
        margin-bottom: 30px;
    }

    .explore-section,
    .explore-section.reversed {
        flex-direction: column-reverse;
    }

    
    .contact-contents {
        flex-direction: column;
    }

    .contact-contents .content-left,
    .contact-contents .content-right {
        width: 100%;
    }

    .contact-contents .content-left h2 {
        /* font-size: 5.45vw; */
        font-size: 48px;
    }

    .blog-entries {
        grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
    }

    /* .footer-lower {
        flex-direction: column;
    }

    .footer-lower .content-left {
        max-width: 100%;
    }

    .content-right {
        gap: 100px;
    }

    .navigate_links {
        gap: 100px;
        flex-wrap: unset;
    } */

    /* .footer_our_offices {
        max-width: 100%;
    } */
}


@media (max-width: 767px) {
    section.indexHero .carousel-item-elements {
        padding-left: 8.22% !important;
        padding-right: 8.22% !important;
    }

    #indexHeroBanner.owl-carousel .owl-item img {
        height: 100vh;
    }

    section.indexExplore .explore-contents {
        gap: 70px;
    }


    .blog-entries {
        grid-template-columns: repeat(auto-fit, minmax(328px, 1fr));
    }

/* 
    .footer_logos {
        justify-content: center;
    }

    .navigate_links {
        gap: 20px;
        flex-direction: column;
    }

    .content-right {
        gap: 20px;
        flex-direction: column;
    }

    .footer_our_offices {
        max-width: 100%;
    }

    .footer-end {
        text-align: center;
    } */
}
@media (max-width: 575px) {

    /* .navLinks a {
        width: 175px;
    } */

    .white-title {
        font-size: 12.65vw;
    }

    .blue-title {
        font-size: 5.65vw;
    }

    /* .indexFeatured .section-main h2,
    .indexClients .section-main h2,
    .explore-section .content-left h2 {
        font-size: 8.35vw; 
    } */

}

@media (max-width: 440px) {
    .blog-entries {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    section.indexRequest .top-content h1 {
        font-size: 9.39vw;
    }

    .indexFeatured .section-main h2,
    .indexClients .section-main h2,
    .explore-section .content-left h2 {
        font-size: 8.35vw; 
    }

    .contact-contents .content-left h2 {
        font-size: 10.45vw;
        line-height: 37px;
    }
}


/* Homepage QA  */

@media (max-width: 1199px) {
    /* .home h2 {
        font-size: 8.35vw !important;
    } */

    #indexHeroBanner a.custom-btn.with-arrow {
        margin-bottom: 70px;
    }
}

@media (max-height: 600px) {

    #indexHeroBanner a.custom-btn.with-arrow {
        margin-bottom: 35px;
    }

    section.indexHero .carousel-controls {
        top: -65px;
    }
}

.explore-section .content-left p,
.explore-section .content-right p {
    margin-bottom: 0;
}

#indexHeroBanner.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    /* avoids jumpcut */
    animation: expandImage 15s ease-in-out infinite alternate; 
    /* animation: expandImage 15s ease-in-out forwards infinite; */
  }
  
  @keyframes expandImage {
    from {
      width: 100%;
    }
    to {
      width: 120vw;
    }
  }
  

/* Iphone 14 Pro Max Landscape */

@media (max-height: 430px) {
    /* .white-title {
        font-size: 35px;
    } */

    /* .blue-title {
        font-size: 30px;
    } */

    /* #indexHeroBanner a.custom-btn.with-arrow {
        margin-bottom: 15px;
    } */

    #indexHeroBanner.owl-carousel .owl-item img {
        height: 100vh;
    }
}

