*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
    }

    body{
      background:#ffffff;
      overflow-x:hidden;
      margin-top:65px;
    }

    html{
      scroll-behavior:smooth;
    }

    :root{
      --green:#00D62F;
      --blue:#0A2EFF;
      --white:#ffffff;
      --dark:#101828;
      --gray:#F4F7FB;
    }

    /* NAVBAR */

    .bc-navbar{
      width:100%;
      padding:16px 8%;
      position:fixed;
      top:0;
      left:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      z-index:1000;
      background:rgba(255,255,255,0.95);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(0,0,0,0.1);
      box-shadow:0 2px 10px rgba(0,0,0,0.05);
      min-height:65px;
    }

    .bc-logo{
      display:flex;
      align-items:center;
      position:absolute;
      top:-35px;
      left:8%;
      z-index:101;
    }

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

    .bc-logo a{
      display:flex;
      align-items:center;
    }

    .bc-menu-toggle{
      display:none;
      background:none;
      border:none;
      font-size:24px;
      color:var(--dark);
      cursor:pointer;
      transition:0.3s;
    }

    .bc-menu-toggle:hover{
      color:var(--green);
    }

    .bc-links{
      display:flex;
      gap:30px;
      align-items:center;
      flex:8;
      justify-content:center;
    }

    .bc-links a{
      text-decoration:none;
      color:var(--dark);
      font-weight:500;
      font-size:14px;
      transition:0.3s;
      position:relative;
      white-space:nowrap;
    }

    .bc-links a:hover{
      color:var(--blue);
    }

    .bc-links a::after{
      content:'';
      width:0;
      height:2px;
      background:var(--blue);
      position:absolute;
      left:0;
      bottom:-5px;
      transition:0.4s;
      border-radius:30px;
    }

    .bc-links a:hover::after{
      width:100%;
    }

    .bc-btn{
      background:var(--green);
      color:white;
      padding:10px 24px;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      font-size:14px;
      transition:0.4s;
      box-shadow:0 5px 20px rgba(0,214,47,0.2);
      border:none;
      cursor:pointer;
      white-space:nowrap;
    }

    .bc-btn:hover{
      transform:translateY(-2px);
      background:var(--blue);
      box-shadow:0 8px 25px rgba(10,46,255,0.3);
    }

    

    
    /* HERO SECTION */

    .bc-hero{
      width:100%;
      min-height:88vh;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:120px 8% 80px;
      background:linear-gradient(135deg, #ffffff 38%, rgba(10,46,255,0.06) 100%);
      position:relative;
      overflow:hidden;
    }

    .bc-hero-text{
      width:52%;
      animation:fadeLeft 1s ease;
    }

    .bc-small-title{
      background:rgba(10,46,255,0.1);
      color:var(--blue);
      display:inline-block;
      padding:10px 22px;
      border-radius:40px;
      font-size:13px;
      font-weight:700;
      margin-bottom:20px;
      letter-spacing:0.5px;
    }

    .bc-hero-text h1{
      font-size:52px;
      line-height:1.05;
      color:var(--dark);
      margin-bottom:22px;
      font-weight:800;
    }

    .bc-hero-text h1 span{
      color:var(--blue);
    }

    .bc-hero-text p{
      font-size:17px;
      line-height:1.8;
      color:#4f586d;
      margin-bottom:28px;
      width:100%;
      max-width:640px;
    }

    .bc-hero-stats{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      margin-bottom:32px;
    }

    .bc-hero-stat{
      background:rgba(10,46,255,0.08);
      border:1px solid rgba(10,46,255,0.18);
      padding:16px 18px;
      border-radius:22px;
      min-width:150px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .bc-hero-stat strong{
      font-size:24px;
      color:var(--dark);
    }

    .bc-hero-stat span{
      color:#4f586d;
      font-size:13px;
    }

    .bc-hero-buttons{
      display:flex;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }

    .bc-second-btn{
      text-decoration:none;
      padding:14px 30px;
      border:2px solid var(--blue);
      border-radius:40px;
      color:var(--blue);
      font-weight:600;
      transition:0.4s;
    }

    .bc-second-btn:hover{
      background:var(--blue);
      color:white;
      transform:translateY(-4px);
    }

    .bc-hero-image{
      width:45%;
      position:relative;
      animation:fadeRight 1s ease;
    }

    .bc-hero-image img{
      width:100%;
      border-radius:40px;
      object-fit:cover;
      position:relative;
      z-index:2;
    }

    .bc-circle{
      width:500px;
      height:500px;
      background:var(--blue);
      border-radius:50%;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      opacity:0.1;
      z-index:1;
    }

    .bc-floating-card{
      position:absolute;
      background:white;
      padding:18px 24px;
      border-radius:20px;
      box-shadow:0 15px 40px rgba(0,0,0,0.08);
      z-index:3;
    }

    .bc-card-1{
      top:40px;
      left:-30px;
    }

    .bc-card-2{
      bottom:30px;
      right:-30px;
    }

    .bc-floating-card h4{
      color:var(--blue);
      margin-bottom:5px;
    }

    .bc-floating-card p{
      color:#666;
      font-size:14px;
    }

    .bc-info-section,
    .bc-why-section,
    .bc-before-after,
    .bc-testimonials,
    .bc-gallery,
    .bc-team,
    .bc-contact{
      padding:100px 8%;
    }

    .bc-info-grid,
    .bc-why-grid,
    .bc-before-after-grid,
    .bc-testimonial-grid,
    .bc-gallery-grid,
    .bc-team-grid,
    .bc-contact-content{
      display:grid;
      gap:30px;
    }

    .bc-info-grid,
    .bc-contact-content{
      grid-template-columns:1.2fr 0.8fr;
      align-items:center;
    }

    .bc-info-text p,
    .bc-info-card p,
    .bc-why-item p,
    .bc-testimonial-card p,
    .bc-contact-form p{
      color:#525f7f;
      line-height:1.8;
    }

    .bc-info-card,
    .bc-why-item,
    .bc-before-after-card,
    .bc-testimonial-card,
    .bc-team-card,
    .bc-gallery-card,
    .bc-contact-box{
      background:white;
      border-radius:28px;
      border:1px solid rgba(15,23,42,0.06);
      box-shadow:0 22px 45px rgba(15,23,42,0.06);
      overflow:hidden;
    }

    .bc-info-card{
      padding:35px;
    }

    .bc-info-card h3,
    .bc-why-item h4,
    .bc-testimonial-card h4,
    .bc-team-card h4{
      color:var(--dark);
      margin-bottom:16px;
    }

    .bc-info-card ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:14px;
    }

    .bc-info-list{
      list-style:none;
      padding:0;
      margin:20px 0;
      display:grid;
      gap:12px;
    }

    .bc-info-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#4f586d;
      font-size:15px;
      line-height:1.6;
    }

    .bc-info-list li i{
      color:var(--blue);
      margin-top:4px;
    }

    .bc-info-card li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#4f586d;
      font-size:15px;
    }

    .bc-info-card li i{
      color:var(--green);
      margin-top:4px;
    }

    .bc-why-grid{
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }

    .bc-why-item{
      padding:30px;
      min-height:220px;
    }

    .bc-why-item i{
      font-size:24px;
      color:var(--blue);
      margin-bottom:18px;
    }

    .bc-before-after-grid,
    .bc-gallery-grid,
    .bc-team-grid{
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }

    .bc-before-after-card img,
    .bc-gallery-card img,
    .bc-team-card img{
      width:100%;
      display:block;
      object-fit:cover;
      height:260px;
    }

    .bc-before-after-card{
      padding:20px;
    }

    .bc-before-after-card h4{
      margin-top:18px;
      margin-bottom:10px;
    }

    .bc-testimonial-card{
      padding:30px;
      min-height:255px;
    }

    .bc-testimonial-card i{
      color:var(--green);
      font-size:22px;
      margin-bottom:18px;
    }

    .bc-gallery-card{
      overflow:hidden;
      border-radius:24px;
    }

    .bc-team-card{
      padding:0;
    }

    .bc-team-card .bc-team-info{
      padding:24px;
    }

    .bc-team-card h4{
      margin-top:18px;
      margin-bottom:8px;
    }

    .bc-team-card span{
      color:#6b7280;
      font-size:14px;
    }

    .bc-contact-content{
      grid-template-columns:1.1fr 0.9fr;
    }

    .bc-contact-box{
      padding:35px;
    }

    .bc-contact-box h3{
      font-size:32px;
      margin-bottom:20px;
    }

    .bc-contact-form{
      display:grid;
      gap:18px;
    }

    .bc-contact-form input,
    .bc-contact-form textarea{
      width:100%;
      border:1px solid rgba(15,23,42,0.1);
      border-radius:18px;
      padding:16px 18px;
      font-size:15px;
      resize:none;
    }

    .bc-contact-form textarea{
      min-height:150px;
    }

    .bc-contact-form button{
      max-width:220px;
      padding:16px 26px;
      border-radius:40px;
      border:none;
      background:var(--green);
      color:white;
      font-weight:700;
      cursor:pointer;
      transition:0.3s;
    }

    .bc-contact-form button:hover{
      background:var(--blue);
    }

    .bc-section-title h2{
      font-size:42px;
      margin-bottom:18px;
    }

    .bc-section-title p{
      font-size:16px;
      max-width:700px;
    }

    .bc-about-text h2{
      font-size:46px;
      margin-bottom:20px;
    }

    .bc-about-text p{
      font-size:16px;
      margin-bottom:22px;
    }

    .bc-about-text span{
      color:var(--blue);
    }

    .bc-section-title span{
      color:var(--blue);
    }

    /* SERVICES */

    .bc-services{
      padding:120px 8%;
      background:var(--gray);
    }

    .bc-section-title{
      text-align:center;
      margin-bottom:70px;
    }

    .bc-section-title h2{
      font-size:55px;
      color:var(--dark);
      margin-bottom:15px;
    }

    .bc-section-title span{
      color:var(--blue);
    }

    .bc-section-title p{
      color:#666;
      font-size:17px;
    }

    .bc-service-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    .bc-service-card{
      background:white;
      padding:45px 35px;
      border-radius:30px;
      transition:0.5s;
      position:relative;
      overflow:hidden;
    }

    .bc-service-card:hover{
      transform:translateY(-12px);
      box-shadow:0 20px 50px rgba(0,0,0,0.08);
    }

    .bc-service-card i{
      width:80px;
      height:80px;
      background:rgba(10,46,255,0.1);
      color:var(--blue);
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:20px;
      font-size:30px;
      margin-bottom:30px;
    }

    .bc-service-card h3{
      font-size:26px;
      margin-bottom:15px;
      color:var(--dark);
    }

    .bc-service-card p{
      color:#666;
      line-height:1.8;
    }

    /* ABOUT */

    .bc-about{
      padding:120px 8%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:80px;
    }

    .bc-about-image{
      width:48%;
    }

    .bc-about-image img{
      width:100%;
      border-radius:35px;
    }

    .bc-about-text{
      width:50%;
    }

    .bc-about-text h2{
      font-size:46px;
      margin-bottom:24px;
      color:var(--dark);
      line-height:1.15;
    }

    .bc-about-text span{
      color:var(--blue);
    }

    .bc-about-text p{
      color:#525f7f;
      line-height:1.8;
      margin-bottom:20px;
      font-size:16px;
    }

    .bc-checks{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:20px;
      margin-top:30px;
    }

    .bc-checks div{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--dark);
      font-weight:600;
    }

    .bc-checks i{
      color:var(--blue);
    }

    /* ANIMATIONS AUXILIAIRES */

    .fade-section,
    .fade-item {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .fade-section.is-visible,
    .fade-item.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-1 {
      transition-delay: 0.12s;
    }

    .fade-2 {
      transition-delay: 0.18s;
    }

    .fade-3 {
      transition-delay: 0.24s;
    }

    .fade-4 {
      transition-delay: 0.30s;
    }

    .bc-adv-section{
      padding:120px 8%;
      background:#ffffff;
    }

    .bc-adv-content{
      display:grid;
      grid-template-columns:minmax(280px,1fr) minmax(320px,1fr);
      align-items:center;
      gap:40px;
      margin-top:40px;
    }

    .bc-adv-text h3{
      font-size:38px;
      line-height:1.1;
      margin-bottom:20px;
      color:var(--dark);
    }

    .bc-adv-text p{
      color:#555;
      line-height:1.8;
      margin-bottom:18px;
    }

    .bc-video-box{
      width:100%;
      aspect-ratio:16/9;
      border-radius:30px;
      overflow:hidden;
      box-shadow:0 22px 60px rgba(0,0,0,0.12);
      background:#000;
    }

    .bc-video-box iframe,
    .bc-video-box video{
      width:100%;
      height:100%;
      border:none;
    }

    /* FOOTER */

    .bc-footer{
      background:var(--dark);
      padding:80px 8% 40px;
      color:white;
    }

    .bc-footer-top{
      display:flex;
      justify-content:space-between;
      gap:40px;
      flex-wrap:wrap;
      margin-bottom:50px;
    }

    .bc-footer-logo img{
      width:180px;
      margin-bottom:20px;
    }

    .bc-footer-logo p{
      max-width:400px;
      line-height:1.8;
      color:#ccc;
    }

    .bc-footer-links h4{
      margin-bottom:20px;
      font-size:22px;
    }

    .bc-footer-links a{
      display:block;
      margin-bottom:14px;
      text-decoration:none;
      color:#ccc;
      transition:0.3s;
    }

    .bc-footer-links a:hover{
      color:var(--blue);
      padding-left:5px;
    }

    .bc-copy{
      text-align:center;
      border-top:1px solid rgba(255,255,255,0.1);
      padding-top:30px;
      color:#aaa;
    }

    /* ANIMATIONS */

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

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

    /* RESPONSIVE */

    @media(max-width:991px){

      .bc-navbar{
        padding:12px 5%;
      }

      .bc-logo{
        position:static;
        top:auto;
        left:auto;
        margin:0;
        order:1;
      }

      .bc-logo img{
        width:150px;
      }

      .bc-menu-toggle{
        display:block;
        order:2;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        padding:0;
        line-height:1;
      }

      .bc-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        padding:20px 5%;
        gap:15px;
        display:none;
        box-shadow:0 10px 30px rgba(0,0,0,0.1);
        border-bottom:1px solid rgba(0,0,0,0.1);
        z-index:999;
      }

      .bc-links.active{
        display:flex;
      }

      .bc-links a{
        font-size:16px;
        padding:10px 0;
        border-bottom:1px solid rgba(0,0,0,0.05);
      }

      .bc-links a:last-child{
        border-bottom:none;
      }

      .bc-btn{
        order:3;
        margin-left:auto;
        align-self:center;
        padding:10px 20px;
        font-size:13px;
      }

      .bc-hero{
        flex-direction:column;
        text-align:center;
        gap:70px;
        padding-top:140px;
      }

      .bc-hero-text,
      .bc-hero-image,
      .bc-about-image,
      .bc-about-text{
        width:100%;
      }

      .bc-hero-text p{
        width:100%;
      }

      .bc-hero-buttons{
        justify-content:center;
      }

      .bc-about{
        flex-direction:column;
      }

      .bc-adv-content{
        grid-template-columns:1fr;
      }

      .bc-info-grid,
      .bc-contact-content,
      .bc-before-after-grid,
      .bc-gallery-grid,
      .bc-team-grid,
      .bc-testimonial-grid{
        grid-template-columns:1fr;
      }

      .bc-adv-text h3{
        font-size:32px;
      }

      .bc-hero-text h1,
      .bc-about-text h2,
      .bc-section-title h2{
        font-size:42px;
      }

    }

    .whatsapp-float{
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 65px;
       height: 65px;
       background: #25D366;
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
        text-decoration: none;
        font-size: 34px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        transition: all .3s ease;

    }
    .whatsapp-float:hover{
      transform: translateY(-5px) scale(1.08);
    }



    .services-section {
      max-width: 1180px;
      margin: 40px auto 60px;
      padding: 0 24px;
      background: #fff;
      border-radius: 32px;
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    .services-header {
      padding: 52px 32px 24px;
      text-align: center;
    }

    .services-header span {
      display: inline-block;
      margin-bottom: 16px;
      color: var(--green);
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 0.85rem;
    }

    .services-header h2 {
      margin: 0 auto;
      font-size: clamp(2rem, 3vw, 2.8rem);
      line-height: 1.05;
      max-width: 760px;
      color: var(--dark);
    }

    .services-header p {
      margin: 18px auto 0;
      max-width: 720px;
      color: #4b5563;
      font-size: 1rem;
      line-height: 1.8;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
      padding: 32px;
    }

    .service-card {
      background: #fff;
      border-radius: 24px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 60px rgba(15, 23, 42, 0.12);
    }

    .service-front {
      padding: 26px;
      background: linear-gradient(135deg, rgba(10,46,255,0.95), rgba(0,214,47,0.92));
      color: #fff;
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
    }

    .service-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(255,255,255,0.16);
      font-size: 1.2rem;
    }

    .service-front h3 {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.2;
    }

    .service-back {
      padding: 24px 26px 30px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .service-back p {
      margin: 0;
      color: #4b5563;
      line-height: 1.8;
      font-size: 0.97rem;
    }

    .service-back a {
      margin-top: auto;
      align-self: flex-start;
      color: var(--blue);
      font-weight: 600;
    }

    footer {
      padding: 24px 20px 34px;
      text-align: center;
      background: #fff;
      color: #4b5563;
      font-size: 0.95rem;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    @media (max-width: 720px) {
      .bc-navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .bc-links {
        justify-content: center;
      }
    }


    
    body { background: #f7fafc; }
    .product-page { padding: 160px 8% 80px; max-width: 1320px; margin: 0 auto; }
    .product-hero { padding: 100px 8% 80px; min-height: 80vh; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; background: linear-gradient(135deg, #f6fcfb 0%, #f2f7ff 100%); position: relative; overflow: hidden; }
    .product-hero::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(10,46,255,0.18), transparent 60%); top: -80px; right: -80px; z-index: 0; }
    .product-hero .hero-content { position: relative; z-index: 1; }
    .product-hero .bc-small-title { margin-bottom: 18px; color: var(--blue); letter-spacing: 1px; }
    .product-hero h1 { font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1.02; color: var(--dark); }
    .product-hero p { max-width: 680px; margin-bottom: 32px; color: #4f586d; }
    .product-feature-list { display: grid; gap: 18px; margin-top: 36px; }
    .product-feature-item { display: flex; align-items: flex-start; gap: 16px; background: white; border-radius: 28px; border: 1px solid rgba(15,23,42,0.08); padding: 24px; box-shadow: 0 20px 50px rgba(15,23,42,0.06); }
    .product-feature-item span { min-width: 48px; height: 48px; border-radius: 16px; background: rgba(10,46,255,0.12); display: grid; place-items: center; color: var(--blue); font-size: 18px; font-weight: 700; }
    .product-feature-item h3 { margin: 0 0 8px; font-size: 18px; }
    .product-feature-item p { margin: 0; color: #5a647d; line-height: 1.8; }
    .product-hero-image { position: relative; min-height: 560px; display: grid; place-items: center; }
    .product-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; }
    .mosaic-item { border-radius: 32px; overflow: hidden; position: relative; min-height: 240px; box-shadow: 0 22px 50px rgba(15,23,42,0.08); }
    .mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mosaic-badge { position: absolute; bottom: 24px; left: 24px; right: 24px; padding: 18px 22px; border-radius: 28px; background: rgba(255,255,255,0.92); border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 14px 30px rgba(15,23,42,0.08); }
    .mosaic-badge h3 { margin: 0 0 8px; font-size: 1.3rem; }
    .mosaic-badge p { margin: 0; color: #4f586d; }
    .product-intro { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
    .intro-card { background: white; border-radius: 32px; padding: 36px; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 18px 45px rgba(15,23,42,0.05); }
    .intro-card h2 { font-size: 2.2rem; margin-bottom: 18px; }
    .intro-card p { color: #5a647d; line-height: 1.8; }
    .product-controls { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
    .search-group { display: flex; max-width: 640px; width: 100%; gap: 12px; }
    .search-group input { flex: 1; border: 1px solid rgba(15,23,42,0.12); border-radius: 22px; padding: 16px 20px; font-size: 15px; background: white; color: #101828; outline: none; transition: border-color 0.3s ease; }
    .search-group input:focus { border-color: var(--blue); }
    .search-group button { background: var(--green); color: white; border: none; border-radius: 22px; padding: 16px 24px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 25px rgba(0,214,47,0.18); }
    .product-tagline { display: flex; gap: 12px; flex-wrap: wrap; }
    .product-tagline span { background: rgba(10,46,255,0.1); color: var(--blue); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; }
    .product-filters { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
    .filter-pill { padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(15,23,42,0.08); background: white; color: #15213c; cursor: pointer; transition: 0.3s; font-weight: 600; }
    .filter-pill.active, .filter-pill:hover { border-color: var(--blue); background: rgba(10,46,255,0.08); color: var(--dark); }
    .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 28px; }
    .product-card { background: white; border-radius: 28px; overflow: hidden; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 18px 50px rgba(15,23,42,0.06); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .product-card:hover { transform: translateY(-6px); box-shadow: 0 28px 80px rgba(15,23,42,0.12); }
    .product-card-top { padding: 24px; display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
    .product-image { width: 120px; height: 120px; border-radius: 24px; overflow: hidden; background: #f3f7fb; box-shadow: 0 18px 32px rgba(0,0,0,0.08); }
    .product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .product-info { flex: 1; }
    .product-info h3 { font-size: 20px; margin-bottom: 10px; }
    .product-info p { color: #6b7280; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
    .product-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: #64748b; }
    .product-meta span { display: inline-flex; align-items: center; gap: 8px; background: rgba(15,23,42,0.05); border-radius: 999px; padding: 8px 12px; }
    .product-price { padding: 0 24px; font-size: 24px; font-weight: 700; color: var(--dark); margin-top: auto; }
    .product-actions { display: flex; gap: 14px; padding: 24px; align-items: center; justify-content: space-between; }
    .product-actions button { border: none; border-radius: 24px; padding: 14px 24px; font-weight: 600; cursor: pointer; transition: 0.3s; }
    .product-actions .add-btn { background: var(--green); color: white; box-shadow: 0 12px 24px rgba(0,214,47,0.18); }
    .product-actions .details-btn { background: rgba(15,23,42,0.05); color: var(--dark); }
    .product-actions .add-btn:hover { transform: translateY(-2px); }
    .product-actions .details-btn:hover { background: rgba(15,23,42,0.1); }
    .cart-summary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
    .cart-summary button { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: white; border: none; border-radius: 999px; padding: 14px 22px; cursor: pointer; font-weight: 700; box-shadow: 0 14px 30px rgba(10,46,255,0.2); }
    .cart-summary strong { color: var(--dark); font-size: 14px; }
    .cart-drawer { position: fixed; top: 0; right: -100%; width: 380px; max-width: 100%; height: 100vh; background: #ffffff; box-shadow: -20px 0 70px rgba(15,23,42,0.16); transition: right 0.35s ease; z-index: 1005; display: flex; flex-direction: column; }
    .cart-drawer.open { right: 0; }
    .cart-header { padding: 28px 28px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(15,23,42,0.08); }
    .cart-header h2 { font-size: 22px; }
    .cart-header button { border: none; background: transparent; color: #64748b; font-size: 20px; cursor: pointer; }
    .cart-body { padding: 24px; overflow-y: auto; flex: 1; display: grid; gap: 18px; }
    .cart-item { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid rgba(15,23,42,0.08); border-radius: 24px; }
    .cart-item .item-thumb { width: 62px; height: 62px; border-radius: 20px; overflow: hidden; background: rgba(243,246,255,0.8); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04); }
    .cart-item .item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .item-details h4 { font-size: 16px; margin-bottom: 6px; }
    .item-details p { font-size: 14px; color: #64748b; margin-bottom: 8px; }
    .item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .qty-control { display: inline-flex; align-items: center; gap: 8px; background: rgba(15,23,42,0.05); border-radius: 999px; padding: 8px 10px; }
    .qty-control button { border: none; background: transparent; color: var(--dark); cursor: pointer; font-size: 16px; line-height: 1; width: 28px; height: 28px; }
    .cart-summary-total { padding: 24px; border-top: 1px solid rgba(15,23,42,0.08); }
    .cart-summary-total p { color: #64748b; margin-bottom: 10px; }
    .cart-summary-total strong { display: block; font-size: 28px; margin-bottom: 16px; }
    .checkout-btn { width: 100%; background: var(--green); color: white; border: none; border-radius: 24px; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 18px 40px rgba(0,214,47,0.2); }
    .cart-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 1000; }
    .cart-backdrop.active { opacity: 1; pointer-events: all; }
    .product-steps { margin-top: 70px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
    .step-card { background: linear-gradient(145deg, #ffffff, #f5f9ff); border: 1px solid rgba(15,23,42,0.08); border-radius: 28px; padding: 28px; box-shadow: 0 22px 45px rgba(15,23,42,0.05); }
    .step-card h3 { font-size: 20px; margin-bottom: 16px; }
    .step-card p { color: #5a647d; line-height: 1.8; }
    .shop-highlight { display: block; margin-top: 40px; background: #ffffff; border-radius: 32px; border: 1px solid rgba(15,23,42,0.08); padding: 42px; text-align: center; box-shadow: 0 18px 45px rgba(15,23,42,0.05); }
    .shop-highlight h2 { font-size: 2.4rem; margin-bottom: 18px; }
    .shop-highlight p { color: #64748b; margin-bottom: 24px; max-width: 680px; margin-left: auto; margin-right: auto; }
    .shop-highlight .bc-btn { border-radius: 999px; padding: 16px 32px; }

    @media (max-width: 1100px) { .product-hero { grid-template-columns: 1fr; padding: 80px 6% 60px; } .product-hero-image { min-height: 420px; } }
    @media (max-width: 860px) { .product-page { padding: 140px 6% 70px; } .product-intro { grid-template-columns: 1fr; } .product-controls { flex-direction: column; align-items: stretch; } }
    @media (max-width: 680px) { .product-hero { padding: 64px 5% 40px; } .product-hero h1 { font-size: 2.8rem; } .product-card { border-radius: 24px; } .product-actions { flex-direction: column; align-items: stretch; } .product-actions button { width: 100%; } .cart-drawer { width: 100%; } }



    /* CONTACT PAGE SPECIFIC STYLES */
    
    .contact-hero {
      background: linear-gradient(135deg, #ffffff 38%, rgba(10,46,255,0.06) 100%);
      padding: 160px 8% 100px;
      text-align: center;
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-hero h1 {
      font-size: 60px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 20px;
      line-height: 1.2;
    }

    .contact-hero h1 span {
      color: var(--blue);
    }

    .contact-hero p {
      font-size: 18px;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.8;
    }

    .contact-container {
      padding: 100px 8%;
    }

    .contact-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-bottom: 100px;
    }

    .contact-info-card {
      background: white;
      padding: 50px 40px;
      border-radius: 25px;
      text-align: center;
      box-shadow: 0 10px 35px rgba(0,0,0,0.08);
      transition: 0.3s;
    }

    .contact-info-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }

    .contact-info-card i {
      font-size: 50px;
      color: var(--blue);
      margin-bottom: 25px;
    }

    .contact-info-card h3 {
      font-size: 24px;
      color: var(--dark);
      margin-bottom: 15px;
      font-weight: 700;
    }

    .contact-info-card p {
      color: #555;
      line-height: 1.7;
      font-size: 16px;
    }

    .contact-info-card a {
      color: var(--blue);
      text-decoration: none;
      font-weight: 600;
      display: inline-block;
      margin-top: 10px;
      transition: 0.3s;
    }

    .contact-info-card a:hover {
      color: var(--blue);
    }

    .contact-form-section {
      background: linear-gradient(135deg, rgba(0,214,47,0.05) 0%, rgba(10,46,255,0.05) 100%);
      padding: 80px 8%;
      border-radius: 40px;
      margin-top: 80px;
      position: relative;
      overflow: hidden;
    }

    .contact-form-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(0,214,47,0.1) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-form-section::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(10,46,255,0.08) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

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

    .contact-form-text h2 {
      font-size: 45px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 25px;
      line-height: 1.2;
    }

    .contact-form-text h2 span {
      color: var(--green);
    }

    .contact-form-text p {
      font-size: 16px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .contact-form-text ul {
      list-style: none;
      padding: 0;
      margin: 30px 0 40px 0;
    }

    .contact-form-text li {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      font-size: 16px;
      color: #555;
    }

    .contact-form-text li i {
      color: var(--green);
      font-size: 20px;
    }

    .social-section {
      margin-top: 40px;
      padding-top: 30px;
      border-top: 2px solid rgba(0,214,47,0.2);
    }

    .social-section h4 {
      font-size: 16px;
      color: var(--dark);
      margin-bottom: 20px;
      font-weight: 700;
    }

    .social-links {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .social-links a {
      width: 50px;
      height: 50px;
      background: white;
      color: var(--green);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 20px;
      transition: 0.3s;
      box-shadow: 0 5px 15px rgba(0,214,47,0.1);
    }

    .social-links a:hover {
      background: var(--green);
      color: white;
      transform: translateY(-5px);
    }

    .contact-form {
      display: grid;
      gap: 18px;
      background: white;
      padding: 40px;
      border-radius: 25px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .form-row.full {
      grid-template-columns: 1fr;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width: 100%;
      padding: 14px 18px;
      border: 2px solid rgba(0,214,47,0.15);
      border-radius: 12px;
      font-size: 15px;
      font-family: 'Poppins', sans-serif;
      transition: 0.3s;
      background: rgba(0,214,47,0.02);
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(0,0,0,0.4);
    }

    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus {
      outline: none;
      border-color: var(--green);
      background: rgba(0,214,47,0.05);
      box-shadow: 0 0 0 4px rgba(0,214,47,0.1);
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 140px;
    }

    .form-button-group {
      display: flex;
      gap: 15px;
      margin-top: 10px;
    }

    .contact-form button {
      background: linear-gradient(135deg, var(--green) 0%, #00b825 100%);
      color: white;
      padding: 14px 32px;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .contact-form button:hover {
      background: linear-gradient(135deg, #00b825 0%, var(--green) 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,214,47,0.3);
    }

    .map-section {
      padding: 80px 8%;
    }

    .map-section h2 {
      text-align: center;
      font-size: 45px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 50px;
    }

    .map-section h2 span {
      color: var(--green);
    }

    .map-container {
      width: 100%;
      height: 500px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    }

    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    /* RESPONSE SECTION */
    .response-time {
      padding: 60px 8%;
      background: linear-gradient(135deg, rgba(0,214,47,0.08) 0%, rgba(10,46,255,0.08) 100%);
      border-radius: 30px;
      margin-top: 80px;
      text-align: center;
    }

    .response-time h3 {
      font-size: 32px;
      color: var(--dark);
      margin-bottom: 20px;
      font-weight: 800;
    }

    .response-time p {
      font-size: 18px;
      color: #555;
      line-height: 1.8;
    }

    /* RESPONSIVE */

    @media(max-width: 991px) {
      
      .contact-hero {
        padding: 120px 5% 60px;
      }

      .contact-hero h1 {
        font-size: 42px;
      }

      .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .contact-form-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .contact-form-text h2 {
        font-size: 36px;
      }

      .contact-container {
        padding: 60px 5%;
      }

      .contact-form-section {
        padding: 60px 5%;
      }

      .map-section {
        padding: 60px 5%;
      }

      .map-container {
        height: 300px;
      }
    }


     .about-section-text ul {
      list-style: none;
      padding: 0;
      margin: 30px 0;
    }

    .about-section-text li {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      font-size: 16px;
      color: #555;
    }

    .about-section-text li i {
      color: var(--blue);
      font-size: 20px;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-top: 80px;
      padding: 80px 8%;
      background: var(--gray);
    }

    .value-card {
      background: white;
      padding: 40px 30px;
      border-radius: 25px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      transition: 0.3s;
    }

    .value-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }

    .value-card i {
      font-size: 50px;
      color: var(--green);
      margin-bottom: 20px;
    }

    .value-card h3 {
      font-size: 24px;
      color: var(--dark);
      margin-bottom: 15px;
      font-weight: 700;
    }

    .value-card p {
      color: #555;
      line-height: 1.7;
      font-size: 15px;
    }

    .team-members {
      padding: 100px 8%;
    }

    .team-members h2 {
      text-align: center;
      font-size: 50px;
      color: var(--dark);
      margin-bottom: 20px;
      font-weight: 800;
    }

    .team-members h2 span {
      color: var(--green);
    }

    .team-description {
      text-align: center;
      font-size: 18px;
      color: #555;
      max-width: 700px;
      margin: 0 auto 60px;
      line-height: 1.8;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
    }

    .team-member {
      background: white;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 10px 35px rgba(0,0,0,0.08);
      transition: 0.3s;
    }

    .team-member:hover {
      transform: translateY(-15px);
    }

    .team-member img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .team-member-info {
      padding: 30px;
      text-align: center;
    }

    .team-member-info h3 {
      font-size: 22px;
      color: var(--dark);
      margin-bottom: 8px;
      font-weight: 700;
    }

    .team-member-info p {
      color: var(--green);
      font-weight: 600;
      margin-bottom: 15px;
    }

    .team-member-info span {
      color: #555;
      font-size: 14px;
      display: block;
      line-height: 1.6;
    }

    .team-member-social {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 15px;
    }

    .team-member-social a {
      width: 40px;
      height: 40px;
      background: rgba(0,214,47,0.1);
      color: var(--green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
      text-decoration: none;
    }

    .team-member-social a:hover {
      background: var(--green);
      color: white;
    }
 /* ABOUT PAGE SPECIFIC STYLES */
    
    .about-hero {
      background: linear-gradient(135deg, #ffffff 38%, rgba(10,46,255,0.06) 100%);
      padding: 160px 8% 100px;
      text-align: center;
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-hero h1 {
      font-size: 60px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 20px;
      line-height: 1.2;
    }

    .about-hero h1 span {
      color: var(--blue);
    }

    .about-hero p {
      font-size: 18px;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.8;
    }

    .about-content {
      padding: 100px 8%;
    }

    .about-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 120px;
    }

    .about-section:nth-child(even) {
      grid-template-columns: 1fr 1fr;
      direction: rtl;
    }

    .about-section:nth-child(even) > * {
      direction: ltr;
    }

    .about-section-image img {
      width: 100%;
      border-radius: 30px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    }

    .about-section-text h2 {
      font-size: 45px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 25px;
      line-height: 1.2;
    }

    .about-section-text h2 span {
      color: var(--blue);
    }

    .about-section-text p {
      font-size: 16px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 20px;
    }

    /* RESPONSIVE */

    @media(max-width: 991px) {
      
      .about-hero {
        padding: 120px 5% 60px;
      }

      .about-hero h1 {
        font-size: 42px;
      }

      .about-section {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .about-section:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
      }

      .about-section-text h2 {
        font-size: 36px;
      }

      .values-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 60px 5%;
      }

      .team-grid {
        grid-template-columns: 1fr;
      }

      .about-content {
        padding: 60px 5%;
      }

      .team-members {
        padding: 60px 5%;
      }
    }
/*======================================
EVENT PAGE
======================================*/

.events-page{

    width:100%;
    background:#fff;

}

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

.events-heading{

    max-width:900px;

    margin:auto;

    padding:120px 30px 80px;

    text-align:center;

}

.events-heading span{

    color:#12046A;

    letter-spacing:4px;

    font-weight:600;

}

.events-heading h1{

    font-size:60px;

    color:#111;

    margin:25px 0;

    line-height:1.1;

}

.events-heading p{

    color:#666;

    font-size:20px;

    line-height:1.8;

}

/*======================================
FEATURED EVENT
======================================*/

.featured-event{

    position:relative;

    width:90%;

    max-width:1400px;

    margin:80px auto;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.featured-event img{

    width:100%;

    height:650px;

    object-fit:cover;

    display:block;

}

.featured-overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:70px;

    color:#fff;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.88)

    );

}

.featured-overlay span{

    color:#c8c8ff;

    font-weight:600;

}

.featured-overlay h2{

    font-size:52px;

    margin:15px 0;

}

.featured-overlay p{

    max-width:700px;

    line-height:1.8;

    margin-bottom:35px;

}

.featured-overlay a{

    display:inline-block;

    padding:16px 35px;

    background:#12046A;

    color:#fff;

    text-decoration:none;

    border-radius:40px;

    transition:.4s;

}

.featured-overlay a:hover{

    background:#2D1BB8;

}

/*======================================
GALLERY
======================================*/

.event-gallery{

    width:90%;

    max-width:1400px;

    margin:100px auto;

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}

.event-gallery img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;

}

.event-gallery img:hover{

    transform:translateY(-10px);

}

/*======================================
CTA
======================================*/

.event-cta{

    width:90%;

    max-width:1400px;

    margin:120px auto;

    padding:100px;

    text-align:center;

    background:#12046A;

    color:#fff;

    border-radius:30px;

}

.event-cta h2{

    font-size:48px;

    margin-bottom:25px;

}

.event-cta p{

    font-size:18px;

    margin-bottom:40px;

}

.event-cta a{

    display:inline-block;

    padding:16px 40px;

    background:#fff;

    color:#12046A;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

}

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

@media(max-width:991px){

.event-gallery{

grid-template-columns:1fr;

}

.featured-event img{

height:450px;

}

.featured-overlay{

padding:35px;

}

.events-heading h1{

font-size:42px;

}

.featured-overlay h2{

font-size:36px;

}

.event-cta{

padding:60px 30px;

}

.event-cta h2{

font-size:34px;

}

}



/*======================================
NOS RÉALISATIONS
======================================*/

.realisations{

    padding:120px 8%;

    background:#ffffff;

}

.realisations-header{

    max-width:850px;

    margin:auto auto 70px;

    text-align:center;

}

.realisations-header span{

    color:#12046A;

    font-weight:600;

    letter-spacing:4px;

}

.realisations-header h2{

    margin:20px 0;

    font-size:56px;

    color:#111;

}

.realisations-header p{

    font-size:18px;

    color:#666;

    line-height:1.9;

}

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

.photo-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

/*======================================
PHOTOS
======================================*/

.photo-item{

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.photo-item img{

    width:100%;

    height:420px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.photo-item:hover img{

    transform:scale(1.05);

}

/*======================================
VIDEOS
======================================*/

.video-item{

    grid-column:1 / -1;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.video-item video{

    width:100%;

    height:650px;

    object-fit:cover;

    display:block;

}

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

@media(max-width:991px){

.photo-grid{

grid-template-columns:1fr;

}

.video-item{

grid-column:auto;

}

.video-item video{

height:420px;

}

.photo-item img{

height:320px;

}

.realisations-header h2{

font-size:40px;

}

}




 /* GALLERY PAGE SPECIFIC STYLES */


 

    .gallery-hero {
      background: linear-gradient(135deg, #ffffff 38%, rgba(10,46,255,0.06) 100%);
      padding: 160px 8% 100px;
      text-align: center;
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-hero h1 {
      font-size: 60px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 20px;
      line-height: 1.2;
    }

    .gallery-hero h1 span {
      color: var(--blue);
    }

    .gallery-hero p {
      font-size: 18px;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.8;
    }

    .gallery-section {
      padding: 100px 8%;
    }

    .gallery-filters {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 60px;
      flex-wrap: wrap;
    }

    .gallery-filter-btn {
      background: white;
      color: var(--dark);
      border: 2px solid rgba(0,214,47,0.3);
      padding: 12px 30px;
      border-radius: 40px;
      cursor: pointer;
      font-weight: 600;
      transition: 0.3s;
      font-size: 15px;
    }

    .gallery-filter-btn:hover,
    .gallery-filter-btn.active {
      background: var(--green);
      color: white;
      border-color: var(--green);
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      margin-bottom: 80px;
    }

    .gallery-item {
      position: relative;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 10px 35px rgba(0,0,0,0.1);
      transition: 0.3s;
      height: 400px;
      cursor: pointer;
    }

    .gallery-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.5s;
    }

    .gallery-item:hover img {
      transform: scale(1.1);
    }

    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,214,47,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      opacity: 0;
      transition: 0.3s;
      flex-direction: column;
    }

    .gallery-item:hover .gallery-overlay {
      opacity: 1;
    }

    .gallery-overlay h3 {
      color: white;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }

    .gallery-overlay p {
      color: rgba(255,255,255,0.9);
      text-align: center;
      font-size: 14px;
    }

    .gallery-icons {
      display: flex;
      gap: 15px;
    }

    .gallery-icons a {
      width: 45px;
      height: 45px;
      background: white;
      color: var(--green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: 0.3s;
      font-size: 18px;
    }

    .gallery-icons a:hover {
      background: var(--blue);
      color: white;
      transform: scale(1.1);
    }

    .gallery-categories {
      background: var(--gray);
      padding: 80px 8%;
      border-radius: 30px;
      margin-bottom: 80px;
    }

    .gallery-categories h2 {
      text-align: center;
      font-size: 45px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 60px;
    }

    .gallery-categories h2 span {
      color: var(--green);
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
    }

    .category-card {
      background: white;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      transition: 0.3s;
    }

    .category-card:hover {
      transform: translateY(-10px);
    }

    .category-card-image {
      width: 100%;
      height: 250px;
      overflow: hidden;
    }

    .category-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.3s;
    }

    .category-card:hover .category-card-image img {
      transform: scale(1.1);
    }

    .category-card-content {
      padding: 30px;
      text-align: center;
    }

    .category-card-content h3 {
      font-size: 22px;
      color: var(--dark);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .category-card-content p {
      color: #555;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .category-card-content a {
      display: inline-block;
      background: var(--green);
      color: white;
      padding: 10px 20px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
      font-size: 14px;
    }

    .category-card-content a:hover {
      background: var(--blue);
    }

    .stats-section {
      background: linear-gradient(135deg, rgba(0,214,47,0.1) 0%, rgba(10,46,255,0.1) 100%);
      padding: 60px 8%;
      border-radius: 30px;
      text-align: center;
      margin-bottom: 80px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-top: 40px;
    }

    .stat-item h4 {
      font-size: 45px;
      color: var(--green);
      font-weight: 800;
      margin-bottom: 10px;
    }

    .stat-item p {
      font-size: 16px;
      color: var(--dark);
      font-weight: 600;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.9);
      animation: fadeIn 0.3s;
    }

    .modal.show {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      max-width: 90%;
      max-height: 90%;
      position: relative;
    }

    .modal-content img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .close-modal {
      position: absolute;
      right: -50px;
      top: 0;
      color: white;
      font-size: 40px;
      cursor: pointer;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
    }

    .close-modal:hover {
      color: var(--green);
      transform: scale(1.2);
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* RESPONSIVE */

    @media(max-width: 991px) {
      
      .gallery-hero {
        padding: 120px 5% 60px;
      }

      .gallery-hero h1 {
        font-size: 42px;
      }

      .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
      }

      .gallery-item {
        height: 300px;
      }

      .gallery-filters {
        gap: 10px;
      }

      .gallery-filter-btn {
        padding: 10px 20px;
        font-size: 14px;
      }

      .gallery-section {
        padding: 60px 5%;
      }

      .gallery-categories {
        padding: 60px 5%;
      }

      .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .close-modal {
        right: -40px;
        width: 40px;
        height: 40px;
        font-size: 30px;
      }
    }