:root {
      --gold: #C9962E;
      --gold-light: #E8C97A;
      --dark: #111111;
      --dark2: #1a1a1a;
      --cream: #FDF6E3;
      --cream2: #F5E9C8;
      --text-light: #ccc;
      --white: #ffffff;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Jost', sans-serif;
      background: var(--white);
      color: var(--dark);
      overflow-x: hidden;
    }

    h1,h2,h3,h4 { font-family: 'Cormorant Garamond', serif; }

   
    /* ========== HERO SWIPER ========== */
    .hero-swiper {
      width: 100%;
      /* height: 100vh; */
      /* min-height: 500px; */
      margin-bottom: -1px;
    }
    

    .hero-swiper .swiper-slide {
      position: relative;
      overflow: hidden;
    }
      .hero-swiper .swiper-slide::after{
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        /* background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 73.68%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.00) 77.72%, rgba(0, 0, 0, 0.69) 82.57%, #000 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 70.02%, #110D08 100%);
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 73.68%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.00) 77.72%, rgba(0, 0, 0, 0.69) 82.57%, #000 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 70.02%, #110D08 100%); */
      }
    .hero-slide-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
     
      /* filter: brightness(0.55); */
    }

    .hero-dots {
          width: auto !important;
    position: absolute;
    right: 24px !important;
    top: 60% !important;
    transform: translateY(-50%);
    bottom: unset !important;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    gap: 16px;
    z-index: 10;
    left: unset !important;
    }

    .swiper-pagination-bullet {
      width: 18px !important;
      height: 18px !important;
      background:transparent;
      opacity: 1 !important;
      border-radius: 50% !important;
     
      position: relative;
    }
 

     .swiper-pagination-bullet::after{
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
        background: #fff;
        border-radius: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      opacity: 1;

    }
    .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
        background: #0085B2;
    }

    .swiper-pagination-bullet-active {

     border: 1.6px solid rgba(115, 255, 250, 0.50);

    }

    /* ========== ABOUT SECTION ========== */
    .about-sec {
      background: #110D08;
      padding: 80px 0;
    }

    .about-tag {
      color: var(--gold);
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .about-title {
      color: #F1D0A4;
font-size: 25px;
       font-family: Afacad-Medium;
     
      line-height: 1.15;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .about-divider {
      width: 50px;
      height: 2px;
      background: var(--gold);
      margin: 24px 0;
    }

    .about-text {
      
      color: #FFF;
      font-family: LeagueSpartan-Light;
       font-size: 16px;

      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 22.5px */
      letter-spacing: 0.75px;
    }

    /* ========== SERVICES SECTION ========== */
    .services-sec {
      background: var(--white);
      padding: 0;
      overflow: hidden;
    }

    .services-left {
      background: var(--cream2);
      padding: 70px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    
      height: 100%;
          border-top-left-radius: 70px;
              border-top-right-radius: 70px;
    }

    .services-label {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
    }

    .services-title {
     
     
      color: #000;
font-family: Afacad-Medium;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 39px */
text-transform: uppercase;
    }

    .services-desc {

      color: #483C2D;
     font-family: LeagueSpartan-Light;
    font-size: 16px;

font-style: normal;
font-weight: 400;
line-height: 150%; /* 22.5px */
    }

    .services-right {
    
      position: relative;
      height: 100%;
    }

    .service-card {
      position: relative;
      overflow: hidden;
  
      cursor: pointer;
    }

    .service-card > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
        filter: brightness(0.9);

      transition: transform 0.5s ease, filter 0.5s ease;
    }

    .service-card:hover > img {
      transform: scale(1.08);
      filter: brightness(0.7);
    }

    .service-card-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 100%;
      padding: 24px 16px;
      text-align: center;
      color: var(--white);
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.71) 0%, rgba(0, 0, 0, 0.71) 100%);
          display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    }
    .service-card-overlay  img{
     
    }

    .service-card-icon {
     
      min-height: 61px;
      display: flex;
      align-items: center;
      justify-content: center;
       margin-bottom: 8px;
    }

    .service-card-title {
         font-family: LeagueSpartan-SemiBold;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

   

    /* ========== FEATURES SECTION ========== */
    .features-sec {
      padding: 34px 0;
      border: 1px solid #BABABA;
      border-radius: 7px;

    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
     
    }
 

  

    .feature-check {
      color: var(--gold);
      font-size: 16px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .feature-item p {

      margin: 0;



color: #3A3A3A;

     font-family: LeagueSpartan-Regular;
    font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 19.6px */
    }

    .features-desc {
  
     
     
      padding-left: 20px;
      color: #484848;
    font-family: LeagueSpartan-Regular;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 25.5px */


    }

    /* ========== WORKS SECTION ========== */
    .works-sec {
      background: var(--dark);
      padding: 80px 0;
    }

    .works-grid {
  
    }

    .work-item {
      overflow: hidden;
      position: relative;
      aspect-ratio: 4/3;
    }

    .work-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      display: block;
      
    }
  .work-item .item-box,.work-item-big .item-box{
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    
  }
  .work-item .item-box{
    height: 100%;
  }
    .work-item .item-box a::after,.work-item-big .item-box a::after{
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 69.09%, #242424 100%);
    }

    .work-item:hover img { transform: scale(1.06); }

    .works-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-left: 40px;
      padding-bottom: 20px;
    }

    .works-label {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
    }

    .works-title {
      


    
      letter-spacing: 1px;

      color: #F1D0A4;

text-shadow: 0 0.645px 1.29px rgba(119, 119, 119, 0.25);
    font-family: Afacad-Medium;
font-size: 30px;
font-style: normal;
/* font-weight: 600; */
line-height: 30px;
text-transform: uppercase;
    margin-bottom: 20px;
    }

    .works-desc {
 color: #FFF;
    font-family: LeagueSpartan-ExtraLight;
font-size: 16px;
font-style: normal;
font-weight: 200;
line-height: 143%; /* 20.02px */
margin-bottom: 30px;
    }
.left-content-box{
  padding: 29px 10px 35px 10px;
}
    .btn-gold {


background: linear-gradient(90deg, #009EDA 0%, #0071AF 100%);
      
      border: none;
      padding: 4px 11px 2px;


      border-radius: 50px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.3s;
      color: #FFF;
    font-family: LeagueSpartan-Regular;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 19.2px */
    }

    

    /* works right image */
    .work-item-big {
      overflow: hidden;
      position: relative;
    }
    .work-item-big img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .work-item-big:hover img { transform: scale(1.05); }
    .works-grid {
      
    }
    .works-grid .work-item {
      aspect-ratio: unset;
    }

    /* ========== CLIENTS ========== */
    .clients-sec {
      background: var(--white);
      padding: 50px 0;
      border-top: 1px solid #eee;
    }

    .clients-swiper .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
    }

    .client-logo {
      max-height: 40px;
      filter: grayscale(1) opacity(0.5);
      transition: filter 0.3s;
      object-fit: contain;
    }

    .client-logo:hover { filter: grayscale(0) opacity(1); }

    /* Fake client logos as SVG text */
    .client-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 700;
      color: #999;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: color 0.3s;
    }

    .clients-swiper .swiper-slide:hover .client-name { color: var(--gold); }

   
    @media(min-width:768px){
      .left-content-box {
    padding: 32px 10px 51px 40px;
}
.service-card-icon{
  margin-bottom: 24px;
}
    }
    /* ========== RESPONSIVE ========== */
    @media (max-width: 991px) {
     

      .services-left { padding: 40px 24px; min-height: auto;     border-top-left-radius: 44px;border-top-right-radius: 44px;}
      .services-right {  }

      .works-right { padding-left: 0; padding-top: 40px; }

     
    }

    @media (max-width: 767px) {
      .hero-swiper { height: 70vh; }

      .services-right {  }
     

   
      .about-sec { padding: 50px 0; }
      .works-sec { padding: 50px 0; }
    }




     @media(min-width:1200px){
      .services-left{
          min-height: 420px;
      }
      .services-right  .service-card:last-child{
            border-bottom-right-radius: 70px;
      }
      .services-left{
        border-top-right-radius: 0px;
      }
    }