/* HERO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hero-section {
   position: relative;
   width: 100%;
   overflow: hidden;
}

.hero-swiper, .hero-slide {
   position: relative;
   width: 100%;
   height: 720px;
}

.hero-swiper, .hero-slide { overflow: hidden; }
.hero-slide { background: var(--clr-primary-deep); }

.hero-image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}


/* LEFT OVERLAY
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hero-left-overlay {
   position: absolute;
   inset: 0 auto 0 0;
   width: 54%;
   background: linear-gradient(110deg, rgba(4, 39, 59, .90) 0%, rgba(5, 53, 72, .87) 65%, rgba(5, 54, 72, .82) 100%);
   clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
   transform: translateX(-100%);
   pointer-events: none;
   z-index: 1;
}

.hero-left-pattern {
   position: absolute;
   top: 0;
   left: 0;
   width: 46%;
   height: 100%;
   opacity: 0;
   background:
      linear-gradient(125deg, transparent 0 16%, rgba(255, 255, 255, .035) 16% 31%, transparent 31% 48%, rgba(255, 255, 255, .025) 48% 65%, transparent 65%),
      linear-gradient(125deg, transparent 0 8%, rgba(140, 110, 43, .65) 8.1% 8.25%, transparent 8.35%);
   transform: translateX(-60px);
   pointer-events: none;
   z-index: 2;
}

.swiper-slide-active .hero-left-overlay { animation: heroOverlayIn .9s cubic-bezier(.22, .61, .36, 1) .65s forwards; }
.swiper-slide-active .hero-left-pattern { animation: heroPatternIn .7s ease 1.15s forwards; }

@keyframes heroOverlayIn {
   from { transform: translateX(-100%); }
   to { transform: translateX(0); }
}

@keyframes heroPatternIn {
   from { opacity: 0; transform: translateX(-60px); }
   to { opacity: 1; transform: translateX(0); }
}


/* HERO CONTENT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hero-container {
   position: relative;
   width: 100%;
   max-width: none;
   height: 100%;
   padding-left: clamp(70px, 9vw, 160px);
   padding-right: clamp(20px, 4vw, 48px);
   z-index: 4;
}

.hero-content {
   width: min(560px, 42%);
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding-top: var(--header-height);
   color: var(--clr-white);
   opacity: 0;
   transform: translateX(-30px);
}

.swiper-slide-active .hero-content { animation: heroContentIn .7s ease 1.3s forwards; }

@keyframes heroContentIn {
   from { opacity: 0; transform: translateX(-30px); }
   to { opacity: 1; transform: translateX(0); }
}

.hero-eyebrow {
   margin-bottom: 18px;
   color: #D7B85B;
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .13em;
   line-height: 1.4;
}

.hero-title {
   margin-bottom: 22px;
   color: var(--clr-white);
   font-size: clamp(3.5rem, 4.3vw, 5.2rem);
   font-weight: 700;
   line-height: .96;
}

.hero-title span { color: #D8A936; }

.hero-description {
   max-width: 540px;
   margin-bottom: 28px;
   color: rgba(255, 255, 255, .88);
   font-size: .95rem;
   line-height: 1.75;
}

.hero-btn { min-width: 170px; min-height: 54px; }


/* SWIPER PAGINATION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hero-pagination { bottom: 24px !important; z-index: 10; }

.hero-pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   opacity: .55;
   background: var(--clr-white);
   transition: width .25s ease, opacity .25s ease, background-color .25s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
   width: 26px;
   border-radius: 10px;
   opacity: 1;
   background: var(--clr-secondary-light);
}


/* LARGE DESKTOP
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (min-width: 1400px) {
   .hero-swiper, .hero-slide { height: 760px; }
   .hero-left-overlay { width: 56%; }
   .hero-left-pattern { width: 48%; }
   .hero-content { width: min(600px, 44%); }
}


/* DESKTOP / SMALL LAPTOP
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 1399.98px) and (min-width: 1200px) {
   .hero-left-overlay { width: 58%; }
   .hero-left-pattern { width: 50%; }
   .hero-content { width: min(590px, 45%); }
}


/* 992 TO 1199
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 1199.98px) and (min-width: 992px) {
   .hero-swiper, .hero-slide { height: 690px; }
   .hero-image { object-position: 58% center; }
   .hero-left-overlay { width: 62%; clip-path: polygon(0 0, 73% 0, 100% 50%, 73% 100%, 0 100%); }
   .hero-left-pattern { width: 54%; }
   .hero-container { padding-left: 56px; padding-right: 24px; }
   .hero-content { width: min(560px, 49%); padding-top: var(--header-height); }
   .hero-title { font-size: 3.4rem; }
   .hero-description { max-width: 500px; font-size: .9rem; }
}


/* TABLET
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 991.98px) {
   .hero-swiper, .hero-slide { height: 680px; }
   .hero-image { object-position: 58% center; }
   .hero-left-overlay { width: 72%; clip-path: polygon(0 0, 73% 0, 100% 50%, 73% 100%, 0 100%); }
   .hero-left-pattern { width: 62%; }
   .hero-container { padding-left: 50px; padding-right: 24px; }
   .hero-content { width: min(600px, 60%); padding-top: var(--header-height); }
   .hero-title { font-size: 3.5rem; }
   .hero-description { max-width: 500px; font-size: .9rem; }
}


/* MOBILE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 767.98px) {
   .hero-swiper, .hero-slide { height: 620px; }
   .hero-image { object-position: 62% center; }

   .hero-left-overlay {
      width: 100%;
      background: linear-gradient(90deg, rgba(4, 39, 59, .90) 0%, rgba(5, 53, 72, .78) 55%, rgba(5, 53, 72, .24) 100%);
      clip-path: none;
   }

   .hero-left-pattern { width: 100%; }
   .hero-container { padding-left: 24px; padding-right: 24px; }

   .hero-content {
      width: 82%;
      justify-content: center;
      padding-top: 70px;
   }

   .hero-eyebrow { margin-bottom: 14px; font-size: .65rem; }
   .hero-title { margin-bottom: 18px; font-size: 3rem; }

   .hero-description {
      margin-bottom: 24px;
      font-size: .85rem;
      line-height: 1.65;
   }
}


/* SMALL MOBILE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 575.98px) {
   .hero-swiper, .hero-slide { height: 600px; }
   .hero-container { padding-left: 16px; padding-right: 16px; }
   .hero-content { width: 92%; }
   .hero-title { font-size: 2.65rem; }
}


/* INTRO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-intro { padding: 110px 0; overflow: hidden; }

.intro-visual {
   position: relative;
   max-width: 560px;
   min-height: 560px;
   margin-right: 20px;
}

.intro-image { overflow: hidden; border-radius: 8px; }

.intro-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.intro-image:hover img { transform: scale(1.04); }

.intro-image-main {
   width: 62%;
   height: 510px;
   border-left: 4px solid var(--clr-secondary);
}

.intro-image-secondary {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 45%;
   height: 390px;
   border: 8px solid var(--clr-white);
}

.intro-content > p:not(.section-eyebrow) { max-width: 640px; color: var(--clr-text); }

.intro-features {
   display: grid;
   gap: 14px;
   margin: 28px 0;
}


/* CORE SERVICES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.home-services {
   padding: 90px 0 100px;
   overflow: hidden;
   background: var(--clr-light);
}

.services-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 38px;
}

.services-heading .section-title {
   margin-bottom: 0;
}

.services-nav {
   display: flex;
   gap: 9px;
}

.services-prev,
.services-next {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-primary-deep);
   background: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: 6px;
   font-size: .8rem;
   transition: var(--transition);
}

.services-prev:hover,
.services-next:hover {
   color: var(--clr-white);
   background: var(--clr-secondary);
   border-color: var(--clr-secondary);
}

.services-swiper {
   overflow: visible;
}

.services-swiper .swiper-slide {
   height: auto;
}


/* Service Card */

.service-card {
   height: 100%;
   overflow: hidden;
   background: var(--clr-white);
   border-radius: 8px;
   box-shadow: 0 8px 25px rgba(14, 32, 87, .07);
   transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 30px rgba(14, 32, 87, .12);
}


/* Service Image */

.service-card-image {
   width: 100%;
   aspect-ratio: 300 / 250;
   display: block;
   overflow: hidden;
}

.service-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .6s ease;
}

.service-card:hover .service-card-image img {
   transform: scale(1.04);
}


/* Curved Body */

.service-card-body {
   position: relative;
   padding: 36px 18px 22px;
   background: var(--clr-white);
}

.service-card-body::before {
   content: '';
   position: absolute;
   top: -28px;
   left: -10%;
   width: 120%;
   height: 42px;
   background: var(--clr-white);
   border-top: 2px solid var(--clr-secondary);
   border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}


/* Service Icon */

.service-card-icon {
   position: absolute;
   top: -48px;
   left: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--clr-secondary);
   background: var(--clr-white);
   border: 2px solid var(--clr-secondary);
   border-radius: 50%;
   transform: translateX(-50%);
   transition: var(--transition);
   z-index: 2;
}

.service-card:hover .service-card-icon {
   color: var(--clr-white);
   background: var(--clr-secondary);
}


/* Service Link */

.service-card-link {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: var(--clr-secondary);
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
}

.service-card-link i {
   font-size: .65rem;
   transition: transform .25s ease;
}

.service-card-link:hover {
   color: var(--clr-primary);
}

.service-card-link:hover i {
   transform: translateX(4px);
}


/* CORE SERVICES RESPONSIVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 991.98px) {
   .home-services { padding: 80px 0 90px; }
}

@media (max-width: 767.98px) {
   .services-heading { align-items: center; }
}

@media (max-width: 575.98px) {
   .home-services { padding: 70px 0 80px; }

   .services-heading {
      align-items: flex-end;
      gap: 15px;
      margin-bottom: 30px;
   }

   .services-heading .section-title br { display: none; }
   .services-prev, .services-next { width: 38px; height: 38px; }
   .service-card-body { padding-left: 16px; padding-right: 16px; }
}


/* OPERATION BADGE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.operation-badge {
   position: absolute;
   left: -28px;
   bottom: 15px;
   width: 140px;
   height: 140px;
   padding: 15px;
   color: var(--clr-white);
   background: var(--clr-secondary);
   border: 6px solid var(--clr-white);
   border-radius: 50%;
   box-shadow: 0 8px 25px rgba(14, 32, 87, .12);
}

.operation-badge h5,
.operation-badge p {
   color: var(--clr-white);
}

@media (max-width: 575.98px) {
   .operation-badge {
      left: -15px;
      width: 120px;
      height: 120px;
   }
}