* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; } 
body { 
    overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Bebas Neue', sans-serif; }
 a { 
    font-family: 'Montserrat', sans-serif; } 
 p { 
    font-family: 'Montserrat', sans-serif; } 

 /* NAVBAR */
 .navbar { position:fixed; 
   width: 100%; 
   height:clamp(60px, 5vw, 100px);
   background-color:gray; 
   display:flex;
   flex-wrap: nowrap; 
   justify-content: space-between; 
   align-items: center; 
   padding:1.25rem clamp(1.25rem, 5vw, 5rem);
   white-space: nowrap; 
   z-index: 10; } 
   
  .logo img { 
   height: clamp(30px, 4vw, 50px);
   width: auto; } 
     
  .nav { 
   display: flex;      
   flex-wrap: nowrap;
   overflow-x: auto; } 
        
  .nav a {
    text-decoration:none; 
    color: black;
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.50rem);
    padding: 0.625rem 1.25rem; 
    display: inline-flex; 
    flex-wrap: nowrap; 
    flex: 0 1 auto; 
    min-width: 0;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; } 
              
    .nav a:hover {
      background-color: #929191; 
      border-radius: 5px; } 
    .cta { 
      background-color: #C8A95A; 
      border-radius: 5px; 
      padding: 0.625rem; } 

    /* HOME PAGE */
    .hero-section {  
      position: relative; 
      width: 100%; 
      overflow: hidden; } 
    .hero-content { 
      width: 100%; 
      height: 100%; 
      position: relative; } 
    .hero-content h1 { 
      font-size: clamp(3rem, 2rem + 3vw, 5rem); 
      position: absolute; 
      top: 50%; left: 50%; 
      white-space: nowrap; 
      transform: translate(-50%, -50%); 
      color: #C8A95A; 
      text-shadow: 5px 5px 5px rgb(0, 0, 0); }
    .hero-content img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; } 
    .hero-content a{ 
      position: absolute;
      display: inline-flex;
      justify-content: center; 
      align-items: center; 
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #C8A95A; 
      color: black; 
      padding: 0.5rem 1rem;
      text-decoration: none; 
      font-size:clamp(1.25rem, 1rem + 1.5vw, 2rem);
      flex-wrap: nowrap; 
      white-space: nowrap; } 
    .hero-content a:hover { 
      background-color: #929191; 
      border-radius: 5px; }

      /*homepage our services section */
    .our-services h1{ 
      padding: 4rem 3rem;
      text-align: center; 
      font-size: clamp(1.75rem, 1.5rem + 1.5vw, 5rem);
      word-spacing: 5px; } 
    .card-container { 
      display: flex;
      gap: 50px;
      justify-content: center; 
      align-items: center; 
      width: 80%;
      padding: clamp(2rem, 4vw, 5rem);
      border: #555 solid 1px; 
      margin: 0 auto; 
      flex-direction: column; } 
    .service-box { 
      display: flex; 
      gap: 10px; 
      justify-content: center; }
    .service-1-card, .service-2-card, .service-3-card { 
      background: white; 
      padding: 5px; 
      border: 1px solid #ddd; 
      width: 80%; 
      max-width: 80%; 
      margin: 5px; } 
    .service-1-card img, .service-2-card img, .service-3-card img { 
      height: 200px; 
      max-height:500px; 
      width: auto; 
      margin: 0 auto 20px; 
      display: block; 
      padding: 20px; }
    .service-1-card h3, .service-2-card h3, .service-3-card h3 { 
      font-size: clamp(1.5625rem, 1.25rem + 1.25vw, 3.125rem); 
      margin-bottom: 10px; 
      text-align: center; } 
    .service-1-card p, .service-2-card p, .service-3-card p{ 
      font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); 
      color: #555; 
      text-align: center; 
      padding: 20px; } 
    .view-all-services-cta { 
      margin-top: 30px; 
      padding: 12px 25px; 
      background-color: #C8A95A; 
      color: black; 
      text-decoration: none; 
      border-radius: 4px; 
      display: inline-block; 
      text-align: center; 
      font-size: clamp(1.25rem, 1.25rem + 1.5vw, 2rem); } 
    .view-all-services-cta:hover { 
      background-color: #929191; }

    /*homepage our work section */
    .our-work h1 { 
      padding: 1.25rem 1.25rem; 
      text-align: center; 
      font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3.75rem); 
      word-spacing: 0.3125rem; } 
    .our-work-container{
      display: flex; 
      gap: 50px; 
      justify-content: center; 
      align-items: center; 
      width: 90%; 
      padding: clamp(20px, 4vw, 50px); 
      flex-direction: column; 
      position: relative; 
      margin: 0 auto; }
     .our-work-container h1 { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      text-align: center; 
      font-size: clamp(1.875rem, 1.5rem + 1.5vw, 5rem);
      text-shadow: 5px 5px 5px rgb(0, 0, 0); 
      color: #C8A95A; 
      white-space: nowrap; } 
      .our-work-container img{ 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        border-radius: 10px; }
     /*homepage reviews section */ 
      .reviews h1 { 
       padding: 1.25rem 1.25rem; 
       text-align: center; 
       font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3.75rem); 
       word-spacing: 0.3125rem; } 
      .reviews-container { 
        display: flex; 
        gap: 50px; 
        justify-content: center; 
        align-items: center; 
        width: 80%; 
        padding: clamp(2rem, 4vw, 5rem); 
        position: relative; 
        margin: 0 auto; 
        border:1px solid #555;
        flex-direction: column;
      } 
      .review-box {
        display: flex; 
        gap: 20px; 
        justify-content: center; }
      .review-card-1, .review-card-2, .review-card-3 {  
        background: white; 
        padding: 30px; 
        border: 1px solid #ddd;
        width: 80%; 
        max-width: 600px;
         }
       .review-card-1 h3, .review-card-2 h3, .review-card-3 h3 { 
        font-size: clamp(1.5625rem, 1.25rem + 1.25vw, 3.125rem);
        margin-bottom: 10px; 
        text-align: center; } 
       .review-card-1 p, .review-card-2 p, .review-card-3 p { 
        font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); 
        color: #555; 
        text-align: center; 
        padding: 2px;
         line-height: 1.5; }
      .view-reviews-cta { 
        margin-top: 30px; 
        padding: clamp(10px, 1.5vw, 20px) clamp(20px, 3vw, 40px);
        color: black; 
        border-radius: 4px; 
        display: inline-block; 
        text-align: center; 
        font-size: clamp(1.25rem, 1.25rem + 1.5vw, 2.5rem); 
        width: 100%;              
        text-align: center;}

      /*homepage book now section */
      .our-work-btn {
        position: absolute; 
        bottom: 20%; left: 50%; 
        transform: translateX(-50%); 
        padding: 12px 25px; 
        background-color: #C8A95A; 
        color: black; 
        text-decoration: none; 
        border-radius: 4px; 
        display: inline-block; 
        text-align: center; 
        margin-top: 0; 
        font-size: clamp(1.25rem, 1.25rem + 1.5vw, 2.5rem); }
      .booknow-container { 
        display: flex; 
        gap: 50px; 
        justify-content: center; 
        align-items: center; 
        width: 90%; 
        padding: clamp(1.25rem, 2.5vw, 3.125rem); 
        flex-direction: column; 
        position: relative; 
        margin: 0 auto; } 
      .booknow-container h1 {
         position: absolute; 
         top: 50%; 
         left: 50%; 
         transform: translate(-50%, -50%); 
         text-align: center; 
         font-size: clamp(1.875rem, 1.5rem + 1.5vw, 5rem); 
         text-shadow: 5px 5px 5px rgb(0, 0, 0); 
         color: #C8A95A; 
         white-space: nowrap; } 
      .booknow-container img {
         width: 100%;
         height: 100%; 
         object-fit: cover; }
      .booknow-btn { 
        position: absolute;
        bottom: 20%; 
        left: 50%; 
        transform: translateX(-50%);
        padding: 12px 25px; 
        background-color: #C8A95A; 
        color:black;
        text-decoration: none;
        border-radius: 4px; 
        display: inline-block;
        text-align: center; 
        word-spacing: 5px; 
        font-size: clamp(20px, 1.5vw, 40px); } 

       /*homepage short story section */ 
      .short-story { 
       display: flex; 
       gap: 50px; 
       justify-content: center;
       align-items: center; 
       width: 90%;
       padding: clamp(1.25rem, 2.5vw, 3.125rem);
       flex-direction: column; 
       position: relative;
       margin: 0 auto;
       background-color: #555;
       margin-bottom: 50px; } 
      .short-story h1 { font-size: clamp(1.5625rem, 1.25rem + 1.25vw, 3.125rem); color: #C8A95A; padding: 20px; } 
      .short-story p { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); color: #000000; text-align: center; padding: 10px; }

      /* FOOTER */
      .footer { background: #555; padding: 40px 20px; margin-top: 20px; } 
      .footer-container { max-width: 2000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
      
      /*Footer LEFT */ 
      .footer-logo img {height: clamp(30px, 4vw, 40px); color:#000000;} 
      .footer-logo p { font-size: clamp(1.25rem, 1.5vw, 1.875rem); color:#000000; margin-top: 5px; }
                    
      /*Footer CENTER */ 
      .footer-contact { text-align:justify } 
      .footer-contact h3 { margin-bottom: 10px; letter-spacing: 2px; font-size: clamp(1.25rem, 1.5vw, 1.5625rem); } 
      .footer-contact p {font-size: clamp(1.25rem, 1.5vw, 1.5625rem); margin: 5px 0; } 
      
      /* Footer SOCIAL ICONS */ 
    .socials {margin-top: 10px; display: flex; gap: 15px; } 
    .socials a { display: inline-block; transition: transform 0.2s ease; } 
    .socials a:hover { transform: scale(1.1); } 
    .socials img { width: 20px; height: 20px; object-fit: contain; } 
                              
    /*Footer RIGHT */ 
    .footer-right { display: flex; flex-direction: column; gap: 8px; } 
    .footer-right a { text-decoration: none; color:#000000; font-size: clamp(1.25rem, 1.5vw, 1.5625rem); } 
    .footer-right a:hover { color: #C8A95A; } 
                                 
    /* Footer BOOK BUTTON */ 
    .footer-book {background: #C8A95A; color: black; padding: 5px 10px; border-radius: 3px; width: fit-content; } 
    .footer-bottom { width: 100%; margin-top: 20px; text-align: center;color:#000000; font-size: clamp(1.25rem, 1.5vw, 1.25rem); }
                                   
    /*Footer DIVIDERS */ 
    .divider { width: 2px; height: 150px; background: #C8A95A; }
    .footer-container { flex-direction: column; align-items: flex-start; gap: 20px; } 
    .divider { width: 100%; height: 1px; }
    .footer-right { width: 100%; flex-direction: row; flex-wrap: wrap; } 
                                     
    /*SERVICES PAGE */ 
    .service-card-container { width: 100%; max-width: 2000px; padding: clamp(20px, 4vw, 50px); border: #555 solid 1px; margin: 0 auto; } 
    .service-box-services { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 100px; width: 100%; justify-items: center; } 
    .service-1, .service-2, .service-3, .service-4, .service-5, .service-6, .service-7, .service-8, .service-9 {background: white; padding: 30px; border: 1px solid #ddd; width: 100%; } 
    .service-1 h3, .service-2 h3, .service-3 h3, .service-4 h3, .service-5 h3, .service-6 h3, .service-7 h3, .service-8 h3, .service-9 h3 { font-size: clamp(1.875rem, 1.25rem + 1.25vw, 2.5rem); margin-bottom: 10px; text-align: center; letter-spacing: 2px; } 
    .service-1 h3 span, .service-2 h3 span, .service-3 h3 span, .service-4 h3 span, .service-5 h3 span, .service-6 h3 span, .service-7 h3 span, .service-8 h3 span, .service-9 h3 span {display: inline-block; margin-left: 8px; font-size: clamp(1.875rem, 1.25rem + 1.25vw, 2.8125rem); color: #C8A95A; }
    .service-1 p, .service-2 p, .service-3 p, .service-4 p, .service-5 p, .service-6 p, .service-7 p, .service-8 p, .service-9 p {font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); color: #555; text-align: center; padding: 10px; } 
    .service-box-services .book-services-cta { grid-column: 1 / -1; justify-self: center; margin-top: 30px; } 
    .book-services-cta {padding: clamp(0.75rem, 1.25vw, 1.25rem) clamp(1.25rem, 1.875vw, 2.5rem); background-color: #C8A95A; color: black; text-decoration: none; border-radius: 4px; display: inline-flex; justify-content: center; align-items: center; font-size: clamp(1.25rem, 1.25vw, 2.5rem); }
    .book-services-cta:hover { background-color: #929191; } 
    .our-work-btn, .booknow-btn { position: absolute; left: 50%; transform: translateX(-50%); margin-top: 0; }
    
    /* GALLERY PAGE */
    .photo-1 h3, .photo-2 h3, .photo-3 h3, .photo-4 h3, .photo-5 h3, .photo-6 h3, .photo-7 h3, .photo-8 h3, .photo-9 h3 {font-size: clamp(30px, 2vw, 40px); text-align: center; padding: 10px; }
    .photo-1 img, .photo-2 img , .photo-3 img, .photo-4 img, .photo-5 img, .photo-6 img, .photo-7 img, .photo-8 img, .photo-9 img {height: clamp(200px, 20vw, 500px); width: clamp(200px, 20vw, 400px); max-height:300px; margin: 0 auto; display: block; border-radius: 10px; } 
       
    /*about page */ 
    .about-info-section, .core-values-section { background: #555; color:#C8A95A; padding: clamp(40px, 5vw, 80px) 20px; margin-top: 10px; text-align: center; } 
    .about-info-grid { max-width: 1100px; margin: 0 auto; align-items: center; gap: 40px; } 
    .about-info-text { flex: 1; } 
    .about-info-text h1, .core-values-inner h1 { font-size: clamp(1.875rem, 1.25rem + 1.25vw, 3.125rem); color: #C8A95A; margin-bottom: 20px; text-align: center; } 
    .about-info-text p { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.75; color:#000000; margin-bottom: 16px; } 
    .core-values-inner { margin: 0 auto; }
    .values-grid { display: grid; gap: 20px; margin-top: 30px; }
    .value-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 24px; } 
    .value-card h3 { color:#000000; margin-bottom: 10px; font-size: clamp(1.875rem, 1.25rem + 1.25vw, 2.5rem); text-align:center;  }
    .value-card p { color:#000000; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.7; }
    
     @media screen and (max-width: 1100px){ 
      /* NAVBAR */
     .navbar { flex-wrap: nowrap; justify-content: space-between; height: 50px; } 
     .navbar a { font-size: clamp(12px, 2vw, 16px); padding: 4px 8px; }
     .logo img { height: clamp(30px, 4vw, 50px); }
     .hero-section { min-height: auto; height: auto; overflow: hidden; } 
     .hero-content img { width: 100%; height: auto; }
     .hero-content h1 { font-size: clamp(30px, 4vw, 50px); top: 40%; } 
     .hero-content a { font-size: clamp(16px, 3vw, 25px); padding: 8px 10px; top: 60%; }

     .card-container { max-width: 100%; padding: 20px; gap: 20px; }
     .service-box { flex-wrap: nowrap; gap: 30px; justify-content: center; }
      
     /*homepage reviews section */
     .review-box {gap: 4px; grid-template-columns: repeat(2, minmax(250px, 1fr));}
     .reviews h1 { font-size: clamp(25px, 3vw, 40px); padding: 30px 20px; }
     .reviews-container { display: grid; gap: 30px; justify-content: center; }
     .review-card-1, .review-card-2, .review-card-3 { width: 100%; max-width: 400px; margin: 10px; }
     .review-card-1 h3, .review-card-2 h3, .review-card-3 h3 { font-size: clamp(20px, 2vw, 30px); } 
     .review-card-1 p, .review-card-2 p, .review-card-3 p { font-size: clamp(18px, 2vw, 25px); line-height: 2; }
    /*homepage book now section */
     .our-work-btn, .booknow-btn, .view-reviews-cta { font-size: clamp(16px, 3vw, 25px); padding: 8px 12px; }
     .service-1-card, .service-2-card, .service-3-card { width: 100%; max-width: 300px; margin: 1px; }
     .service-1-card img, .service-2-card img, .service-3-card img { height: auto; max-height: 100px; width: auto; max-width: 100%; padding: 5px; }
     .our-work-container, .booknow-container, .short-story { width: 100%; max-width: 1000px; padding: 10px; gap: 30px; } 
     .our-work-container img, .booknow-container img { width: 100%; height: auto; max-height: 400px; } 
     .short-story { padding: 20px; max-width: 1200px; }
     .service-box-services { grid-template-columns: repeat(2, minmax(250px, 1fr)); } 
     .photo-1 h3, .photo-2 h3, .photo-3 h3, .photo-4 h3, .photo-5 h3, .photo-6 h3, .photo-7 h3, .photo-8 h3, .photo-9 h3 { font-size: clamp(25px, 2vw, 40px); }}
           
    @media screen and (max-width: 700px) {
      /* NAVBAR */
    .navbar { flex-wrap: nowrap; justify-content: space-between; gap: 1px; padding:5px; height: 40px; }
    .nav { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 5px; overflow-x: visible; } 
    .nav a { font-size: clamp(11px, 2.5vw, 16px); padding: 5px 2px; white-space: nowrap; }
    .logo img { height: clamp(20px, 3vw, 30px); } 
    .hero-section { height: auto; } 
    .hero-content img { width: 100%; height: auto; }
    .hero-content h1, .hero-content a { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }
    .hero-content h1 { width: 90%; white-space: normal; padding: 20px 15px 10px; font-size: clamp(22px, 3vw, 30px); top: 30%; }
    .hero-content a { width: auto; max-width: 180px; margin: 20px auto; top: 50%; font-size: clamp(14px, 2vw, 20px); padding: 4px 8px; } 

    /*homepage our services section */
    .our-services h1,.our-work h1, .booknow-container h1, .short-story h1, .our-work-container h1, .about-info-text h1 ,.core-values-inner h1 {white-space:nowrap; font-size: clamp(22px,2vw,25px); padding: 20px 10px; text-align: center; }
    .service-1-card img, .service-2-card img,.service-3-card img{ height: auto; max-height: 80px; width: auto; max-width: 100%; padding: 8px; } 
    .service-1-card h3, .service-2-card h3, .service-3-card h3 { font-size: clamp(20px, 2vw, 22px); } 
    .service-1-card p, .service-2-card p, .service-3-card p { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; } 
    .our-work-btn, .booknow-btn, .view-all-services-cta , .book-services-cta { font-size: clamp(16px, 3vw, 18px); padding: 4px 6px; } 

    /*homepage Reviews section */
    .review-box { flex-direction: column; gap: 20px; }
    .review-box { grid-template-columns: 1fr; }
    .reviews h1 { font-size: clamp(22px, 3vw, 25px); padding: 20px 10px; }
    .reviews-container { gap: 20px; }
    .review-card-1, .review-card-2, .review-card-3 { width: 100%; max-width: 400px; margin: 0 auto; }
    .review-card-1 h3, .review-card-2 h3, .review-card-3 h3 { font-size: clamp(20px, 2vw, 30px); } 
    .review-card-1 p, .review-card-2 p, .review-card-3 p { font-size: clamp(18px, 2vw, 25px); line-height: 2;}

    /*Footer */
    .footer-logo img{ height: clamp(20px, 3vw, 30px); } 
    .footer p { font-size: clamp(12px,2vw,15px); } 
    .footer-contact h3 { font-size: clamp(12px, 3vw, 15px); } 
    .footer-right a { font-size: clamp(12px, 2vw, 15px); } 
    .card-container, .our-work-container, .booknow-container, .short-story, .service-card-container { padding: 10px; }
    .short-story { padding-left: 20px; padding-right: 20px; } 

    /*services page and Gallery Page */
    .service-box { flex-direction: column; gap: 20px; } 
    .service-box-services { grid-template-columns: 1fr; } 
    .service-card-container { padding: 20px; } 
    .service-1, .service-2, .service-3, .service-4, .service-5, .service-6, .service-7, .service-8, .service-9 { padding: 20px; } 
    .service-1 h3, .service-2 h3, .service-3 h3, .service-4 h3, .service-5 h3, .service-6 h3, .service-7 h3, .service-8 h3, .service-9 h3 { font-size: clamp(18px, 2vw, 22px); } 
    .service-1 p, .service-2 p, .service-3 p, .service-4 p, .service-5 p, .service-6 p, .service-7 p, .service-8 p, .service-9 p { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; } 
    .service-1 h3 span, .service-2 h3 span, .service-3 h3 span, .service-4 h3 span, .service-5 h3 span, .service-6 h3 span, .service-7 h3 span, .service-8 h3 span, .service-9 h3 span { font-size: clamp(18px, 2vw, 22px); }
    .photo-1 h3, .photo-2 h3, .photo-3 h3, .photo-4 h3, .photo-5 h3, .photo-6 h3, .photo-7 h3, .photo-8 h3, .photo-9 h3 { font-size: clamp(18px, 2vw, 22px); }

    /*about page */
    .about-info-grid { flex-direction: column; gap: 20px; } 
    .about-info-text { margin-left: 20px; margin-right: 20px; } 
    .about-info-text h1 { font-size: clamp(22px, 3vw, 25px); }
    .about-info-text p{ font-size: clamp(16px, 2vw, 18px); } 
    .core-values-inner { max-width: 100%; padding: 20px; }
    .value-card h3 { font-size: clamp(20px, 2vw, 22px); }
    .value-card p { font-size: clamp(16px, 2vw, 18px); }
     
  @media screen and (max-width: 700px) {
    .service-box-services { grid-template-columns: 1fr;  } }}