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

    html, body{
      font-family:'Montserrat',sans-serif;
      background:#fff;
      overflow-x: hidden;
      width: 100%;
    }

    a{
      text-decoration:none;
    }

    /* ================= HEADER ================= */

    header{
      width:100%;
      background:#fff;
      position:absolute;
      top:0;
      left:0;
      z-index:1000;
      box-shadow:0 2px 12px rgba(0,0,0,0.05);
      transition: top 0.4s ease-in-out;
    }

    .nav-up {
      top: -100% !important;
    }

    /* ================= NAVBAR ================= */

    .navbar{
      max-width:1250px;
      margin:auto;
      padding:18px 25px 22px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }

    /* ================= LOGO ================= */

    .logo{
      text-align:center;
      margin-bottom:22px;
    }

    .logo img{
      width:200px;
      object-fit:contain;
    }

    /* ================= MENU ================= */

    .nav-menu{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:32px;
      flex-wrap:wrap;
    }

    .nav-menu a{
      color:#7a7a7a;
      font-size:14px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.5px;
      transition:0.3s;
    }

    .nav-menu a:hover{
      color:#3f3fa8;
    }

    .nav-menu .active{
      color:#3f3fa8;
    }

    /* ================= CART ================= */

    .cart-box{
      display:flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      position:relative;
    }

    .cart-box i{
      font-size:24px;
      color:#666;
      transition:0.3s;
    }

    .cart-box:hover i{
      color:#f58220;
    }

    .cart-count{
      background:#f58220;
      color:#fff;
      width:22px;
      height:22px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:700;
      position:absolute;
      top:-10px;
      right:-12px;
    }

    /* ================= DEMO HERO ================= */

    .hero{
      margin-top:170px;
      height:100vh;
      background:url('https://images.unsplash.com/photo-1518611012118-fd3c8b8fdfb4?q=80&w=2000&auto=format&fit=crop')
      center center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.25);
    }

    .hero h1{
      position:relative;
      z-index:2;
      color:#fff;
      font-size:58px;
      text-align:center;
      letter-spacing:3px;
      max-width:900px;
      line-height:1.3;
    }

    /* ================= RESPONSIVE ================= */

    @media(max-width:992px){

      .nav-menu{
        gap:24px;
      }

      .logo img{
        width:230px;
      }

      .hero{
        margin-top:200px;
      }

      .hero h1{
        font-size:42px;
        padding:0 20px;
      }

    }

    @media(max-width:768px){

      .navbar{
        padding:18px 15px;
      }

      .logo img{
        width:200px;
      }

      .nav-menu{
        gap:18px;
      }

      .nav-menu a{
        font-size:12px;
      }

      .cart-box i{
        font-size:20px;
      }

      .hero{
        margin-top:230px;
        height:80vh;
      }

      .hero h1{
        font-size:28px;
      }

    }
    /* ================= HERO ================= */

    .hero{
      position:relative;
      width:100%;
      height:680px;
      background:url('../image/1.1.jpg') center center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;

      /* IMPORTANT */
      margin-top:130px;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.18);
    }

    .hero h2{
      position:relative;
      z-index:2;
      color:#fff;
      font-size:58px;
      text-align:center;
      max-width:1000px;
      line-height:1.2;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:2px;
    }

    /* ================= STRIP ================= */

    .intro-strip{
      background:#fff;
      text-align:center;
      padding:18px 20px 0;
    }

    .intro-strip h3{
      color:#f58220;
      text-transform:uppercase;
      font-size:22px;
      line-height:1.4;
      letter-spacing:3px;
      font-weight:700;
    }

    .orange-strip{
      background:#f58220;
      width: 100%;
      height: 70px;
       color:#212b77;
      text-align:center;
      padding:10px;
      font-size:25px;
      line-height:1.9;
      text-transform:uppercase;
      letter-spacing:2px;
      font-weight:700;
      margin-top:18px;
    }

    /* ================= COMMON ================= */

    .container{
      width:100%;
      max-width:1150px;
     margin-top: -85px;
      padding:90px 25px;
      margin: 0 auto;
      
    }

    .section-title{
      text-align:center;
       color:#212b77;
      font-size:25px;
      letter-spacing:4px;
      margin-bottom:30px;
      font-weight:700;
      text-transform:uppercase;
    }

    .text-center{
      text-align:center;
    }

    .description{
      max-width:980px;
      margin:0 auto 45px;
      text-align:center;
      line-height:2;
      font-size:15px;
      color:#666;
    }

    /* ================= IMAGE GRID ================= */

    .three-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
      margin-top:35px;
    }

    .three-grid img{
      height:240px;
      object-fit:cover;
    }

    .two-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:28px;
      margin-top:35px;
    }

    .two-grid img{
      height:320px;
      object-fit:cover;
    }

    .btn{
      display:inline-block;
      margin-top:40px;
      border:1px solid #0b1663;
       color:#0b1663;
      padding:14px 34px;
      font-size:13px;
      letter-spacing:2px;
      text-transform:uppercase;
      transition:.3s;
      background:#fff;
    }

    .btn:hover{
      background:#4d53c4;
      color:#fff;
    }

    /* ================= CONCEPT ================= */

.container1{
      width:100%;
      max-width:1150px;
     margin-top: -85px;
      padding:90px 25px;
      margin: 0 auto;
}

.section-title1{
      text-align:center;
            color:#f58220;
      font-size:32px;
      letter-spacing:4px;
      margin-bottom:30px;
      font-weight:300;
      text-transform:uppercase;
    }

    .text-center{
      text-align:center;
    }

    .concept-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:40px;
      margin-top:60px;
    }

    .concept-box{
      text-align:center;
    }

    .concept-icon{
      font-size:55px;
      margin-bottom:15px;
    }

    .concept-box h4{
      font-size:18px;
      color:#555;
      font-weight:500;
    }
.icon4{
    height: 80px;
    width: 80px;
}
    .concept-text{
      max-width:900px;
      margin:55px auto 0;
      text-align:center;
      line-height:2;
      color:#666;
    }


.container2{
    color: #f58220;
    margin-top: 100px;
   margin-bottom: 25px;
    
    font-size: 20px;
}


    /* ================= BENEFITS ================= */
    /* .container3{
        width:100%;
      max-width:1150px;
     margin-top: -85px;
      padding:90px 25px;
      margin-left: auto;  
    }

    .section-title3{
      text-align:center;
            color:#f58220;
      font-size:32px;
      letter-spacing:4px;
      margin-bottom:30px;
      font-weight:300;
      text-transform:uppercase;
    }

    .benefit_h4{
        font-size: 20px;
        color: #f58220;
        margin-left: auto;
    }
    .benefit_h41{
        font-size: 20px;
        color: #f58220;
        margin-right: 310px;
    }

    .text-center{
      text-align:center;
    }

    .benefits{
      background:#eceaf7;
      padding:110px 0;
    }

    .benefits .section-title{
      font-size:58px;
      letter-spacing:10px;
      margin-bottom:90px;
    }

    .benefits-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:90px 70px;
    }

    .benefit-item{
      text-align:center;
    }

    .benefit-icon{
      width:120px;
      height:120px;
      border-radius:50%;
    
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .benefit-icon img{
      width:100px;
      height:100px;
      object-fit:contain;
      margin-left: auto;
    } */

    /* .benefit-icon.purple{
      background:#cdc7e6;
      height: 70px;
      width: 70px;
    } */

    /* .benefit-icon.orange{
      background:#f7dfcb;
    }

    .benefit-item h3{
      color:#373c97;
      font-size:24px;
      letter-spacing:6px;
      font-weight:400;
      margin-bottom:20px;
      text-transform:uppercase;
    }

    .orange-text{
      color:#f58220 !important;
    }

    .benefit-item p{
      font-size:16px;
      line-height:1.8;
      color:#333;
      max-width:520px;
      margin:auto;
    } */

    /* ================= PLACE ================= */

       .container4{
        width:100%;
      max-width:1150px;
     
      padding:90px 25px;
      margin: 0 auto;  
    }

    .section-title4{
      text-align:center;
            color:#f58220;
      font-size:32px;
      letter-spacing:4px;
      margin-bottom:30px;
      font-weight:300;
      text-transform:uppercase;
    }



    .place-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:35px;
      margin-top:45px;
    }

    .place-card img{
      height:400px;
      object-fit:cover;
    }

    .place-card p{
      text-align:center;
      margin-top:14px;
      line-height:1.8;
      font-size:14px;
    }

    /* ================= CONTACT ================= */

     .container5{
        width:100%;
      max-width:1150px;
     
      padding:90px 25px;
      margin: 0 auto;  
    }


    .contact-section{
      background:#f5f5f5;
      padding:90px 0 110px;
    }

    .contact-title{
      text-align:center;
      color:#f58220;
      font-size:42px;
      letter-spacing:8px;
      margin-top: -130px;
      font-weight:300;
      margin-bottom:70px;
    }

    .contact-wrapper{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:80px;
      align-items:center;
    }

    .contact-map iframe{
      width:100%;
      height:500px;
      border:none;
    }

    .contact-content{
      text-align:center;
    }

    .contact-content h3{
      font-size:22px;
      font-weight:700;
      color:#000;
      margin-bottom:35px;
    }

   
   
    .social-block{
      margin-bottom:50px;
    }

    .social-title{
      font-size:18px;
      color:#333;
      margin-bottom:25px;
    }

    .social-icons{
      display:flex;
      justify-content:center;
      gap:30px;
    }

    .social-icons img{
      width:45px;
      height:45px;
      object-fit:contain;
    }

   
  .social-icons a {
  color: #f58220;
  font-size: 28px;
}

.social-icons a:hover {
  color: #2f318f;
  transform: scale(1.2);
}



    .question{
      font-size:22px;
      color:#333;
      margin-bottom:15px;
    }

    .phone{
      font-size:20px;
      color:#333;
      margin-bottom:35px;
      line-height:1.8;
    }

    .phone span{
      color:#f58220;
    }

    .email{
      font-size:22px;
      color:#333;
    }

    /* ================= FOOTER ================= */

    footer{
      margin-top:0;
      background:#ece8f6;
    }

    .footer-top{
      max-width:1150px;
      margin:auto;
      padding:40px 25px;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:30px;
    }

    .footer-links{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px 50px;
    }

    .footer-links a{
      color:#666;
      font-size:14px;
    }

    .socials{
      display:flex;
      gap:18px;
      font-size:28px;
      align-items:center;
    }

    .socials a{
      color:#333;
    }

    .footer-bottom{
      background:#f58220;
      text-align:center;
      color:#fff;
      padding:18px;
      font-size:13px;
      letter-spacing:1px;
    }

    /* ================= RESPONSIVE ================= */

    @media(max-width:992px){

      .hero{
        height:520px;
        margin-top:120px;
      }

      .hero h2{
        font-size:40px;
        padding:0 20px;
      }

      .three-grid,
      .two-grid,
      .concept-grid,
      .benefits-grid,
      .place-grid,
      .contact-wrapper{
        grid-template-columns:1fr;
      }

      .section-title,
      .benefits .section-title,
      .contact-title{
        font-size:34px;
      }

      .contact-content h3{
        font-size:38px;
      }

    }

    @media(max-width:600px){

      .navbar{
        padding:12px 15px;
      }

      nav{
        gap:15px;
      }

      nav a{
        font-size:11px;
      }

      .hero{
        height:420px;
        margin-top:115px;
      }

      .hero h2{
        font-size:28px;
      }

      .logo img{
        width:170px;
      }

      .container{
        padding:70px 20px;
      }

      .benefit-item h3{
        font-size:18px;
        letter-spacing:3px;
      }

      .contact-content h3{
        font-size:28px;
      }

      .contact-map iframe{
        height:350px;
      }

    }

    .spanboald{
      font-weight: 700;
      color: black;
    }

/* ================= GLOBAL RESPONSIVE FIXES FOR ALL PAGES ================= */
@media (max-width: 1024px) {
  /* Reset all containers */
  .container, .container1, .container3, .container4, .container5,
  .container-about, .planning-container, .tech-container, .faq-container, .blog-container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /* Reset layout grids */
  .three-grid, .two-grid, .concept-grid, .benefits-grid, .place-grid, 
  .contact-wrapper, .forfaits-grid, .atelier-grid, .private-grid, 
  .team-grid, .features-grid, .grid-2, .blog-grid, .faq-grid, .atelier-list {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 30px !important;
  }

  /* Reset specific widths and margins */
  .forfait-card, .blog-card, .about-img img, .virtual iframe, 
  .atelier-item, .studio-para-box1, .studio-para-box2, .studio-para-box3, .studio-para-box4,
  .contact-map, .contact-map iframe, iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
  }
  
  .contact-map iframe, .faq-bottom iframe {
    min-height: 350px !important;
  }

  /* Remove negative or excessive margins */
  .contact-title, .tech-section.alt, .para, .about-intro p, .features-grid p {
    margin-top: 30px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  /* Image resets */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  .about-img img {
    margin: 20px auto !important;
  }

  /* Benefits Zig-Zag Reset */
  .benefit-item, .benefit-item1 {
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
  }
  .benefit-img, .benefit-img1 {
    margin: 0 auto 20px !important;
  }
  .benefit-item h3, .benefit-item1 h3, .benefit-item p, .benefit-item1 p {
    text-align: center !important;
  }

  /* FAQ Layout reset */
  .faq-bottom {
    grid-template-columns: 1fr !important;
  }
  .faq-item .faq-question {
    font-size: 14px !important;
    padding: 15px !important;
  }

  /* Hero adjustments */
  .hero-box {
    right: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 90% !important;
    padding: 20px !important;
  }

  /* Technique Page Adjustments */
  .studio-text-grid {
    grid-template-columns: 1fr !important;
  }
  .studio-para1, .studio-para2, .studio-para3, .studio-para4 {
    text-align: center !important;
  }
  .atelier-image-section {
    flex-direction: column !important;
  }
  .atelier-image1, .atelier-image2, .atelier-image3 {
    width: 100% !important;
  }
  
  /* Navigation Menu */
  .nav-menu {
    display: none !important; /* Hide by default on mobile */
    gap: 15px !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }
  .nav-menu.active-mobile {
    display: flex !important;
  }
  .nav-menu a {
    font-size: 14px !important;
    padding: 10px !important;
  }
  .logo img {
    margin-bottom: 20px !important;
  }
  
  /* Mobile controls (hamburger + cart) */
  .mobile-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
  }
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    color: #666 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
  }
  .menu-toggle i {
    font-size: 20px !important;
    margin-right: 8px !important;
  }
  .desktop-cart {
    display: none !important;
  }
  
  /* Make header relative on mobile so it doesn't overlap content when it wraps */
  header {
    position: relative !important;
    padding-bottom: 10px !important;
  }
  /* Remove the margin-top from hero sections that offset the fixed header */
  .hero, .contact-title, .tech-section, .forfaits-section, .blog, .container-about, .faq-title {
    margin-top: 0 !important;
  }
  
  /* Reset strips that have fixed heights and might wrap */
  .orange-strip, .weekend {
    height: auto !important;
    padding: 15px !important;
    font-size: 16px !important;
  }
  
  .intro-strip h3 {
    font-size: 18px !important;
  }
  
  /* Reset font sizes for titles to fit screen */
  .hero h1, .hero h2 {
    font-size: 32px !important;
  }
  
  /* Increase FAQ answer max-height since text wraps more on mobile */
  .faq-item.active .faq-answer {
    max-height: 1000px !important;
  }
}