:root{
    --td:#0B2B2B; --tm:#155E5E; --tr:#1A7A7A; --tb:#219898;
    --tl:#A8D8D8; --tp:#E4F4F4;
    --g:#C9A84C; --gl:#E2C47A; --gp:#F7EDD3;
    --w:#FFFFFF; --ow:#F9FAFA;
    --tx:#0B2B2B; --tx2:#2D5555; --tx3:#6B9090;
    --fd:'Playfair Display',serif; --fb:'DM Sans',sans-serif;
  }
  /* ================= HERO ================= */
  .hero{
    min-height:80vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(140deg,#0B2B2B 0%,#0C3A3A 40%,#114848 70%,#0B2B2B 100%);
  }
  .menu-toggle{
    display:none;
    font-size:24px;
    color:white;
    cursor:pointer;
  }
  /* CIRCLES */
  .hero::before{
    content:'';
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    border:1px solid rgba(201,168,76,0.1);
    top:-150px;
    right:-100px;
  }
  
  .hero::after{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    border:1px solid rgba(26,122,122,0.2);
    top:50px;
    right:50px;
  }
  
  /* CONTENT */
  .hero-content{
    z-index:2;
    max-width:700px;
    padding:0 80px;
    animation:fadeUp 1.2s ease;
  }
  
  .hero-label{
    color:var(--g);
    font-size:11px;
    letter-spacing:4px;
    margin-bottom:20px;
  }
  
  .hero h1{
    font-family:'Playfair Display',serif;
    font-size:90px;
    line-height:0.95;
    color:white;
  }
  
  .hero h1 span{
    color:var(--g);
  }
  
  .hero-sub{
    font-size:20px;
    color:#219898;
    margin:20px 0;
    font-style:italic;
  }
  
  .hero p{
    color:rgba(255,255,255,0.6);
    margin-bottom:30px;
  }
  
  .hero-btn{
    padding:14px 35px;
    background:var(--gold);
    color:var(--dark);
    text-decoration:none;
    font-size:12px;
    letter-spacing:2px;
    transition:0.3s;
  }
  
  .hero-btn:hover{
    background:#E2C47A;
    transform:translateY(-3px);
  }
  
  /* IMAGE */
  .hero-img{
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:40%;
  }
  
  .hero-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.6;
  }
  
  .hero-img::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to right,#0B2B2B 0%,transparent 100%);
  }
  
  /* ANIMATION */
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(40px);}
    to{opacity:1;transform:none;}
  }
  
  /* FILTER */
  .filter {
    text-align: center;
    margin: 40px 0 20px;
  }
  
  .filter button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 20px;
    background: #eee;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .filter .active,
  .filter button:hover {
    background: #0b4a4a;
    color: #fff;
  }
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 15px;
    padding: 20px 40px 60px;
  
    /* IMPORTANT */
    grid-auto-flow: dense;
  }
  /* IMAGES */
  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: 0.4s;
  }
  
  .gallery img:hover {
    transform: scale(1.05);
  }
  
  /* DIFFERENT SIZES (COLLAGE LOOK) */
  .gallery .item:nth-child(1) {
    grid-row: span 2;
  }
  
  .gallery .item:nth-child(4) {
    grid-column: span 2;
  }
  
  .gallery .item:nth-child(7) {
    grid-row: span 2;
  }
  
  /* PROMO BOX */
  .promo-box {
    background: #0b4a4a;
    color: #fff;
    height: 100%;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .promo-box h2{}
  .promo-box button {
    margin-top: 15px;
    padding: 10px;
    background: #c89b3c;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  
  /* RESPONSIVE */
  @media (max-width: 900px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* RESPONSIVE */
  @media (max-width: 900px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* CTA STRIP */
  .cta-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#155E5E;
    padding: 50px;
    gap: 30px;
  }
  
  .cta-left h2 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
  }
  .cta-left span{
    color: #c89b3c;
  }
  .cta-left p{
    color:white;
    margin-left: 20px;
  }
  .features {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .features span{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--tp);border:1px solid rgba(26,122,122,.25);display:flex;align-items:center;justify-content:center;color:var(--tr);font-size:14px;margin-top:2px;}
    .leads{
      display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid rgba(26,122,122,.12);transition:padding-left .3s;color:white;font-size: 18px;
    }
  
  .cta-right {
    background: #062f2f;
    color: #fff;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
  }
  
  .cta-right button {
    margin-top: 10px;
    padding: 10px 20px;
    background: #c89b3c;
    border: none;
    color: #fff;
    cursor: pointer;
  }
  
  /* NEWS */
  /* ── TRUST ── */
  .trust{background:var(--tm);padding:16px 0;overflow:hidden;}
  .tt{display:flex;animation:mq 22s linear infinite;white-space:nowrap;}
  @keyframes mq{to{transform:translateX(-50%)}}
  .ti{display:inline-flex;align-items:center;gap:10px;padding:0 40px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.8);}
  .tg{color:var(--g);}
  
  .news {
    padding: 40px;
    text-align: center;
  }
  .news h2{
    color: var(--td);
  }
  .news-slider {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
  }
  
  .news-slider img {
    height: 100px;
    opacity: 0.7;
    transition: 0.3s;
  }
  
  .news-slider img:hover {
    opacity: 1;
  }
  
  /* =========================
     RESPONSIVE DESIGN
  ========================= */
  
  /* TABLETS */
  @media (max-width: 900px){
  
    /* HERO */
    .hero{
      min-height:auto;
      padding:80px 0;
      flex-direction:column;
      justify-content:center;
    }
  
    .hero-content{
      max-width:100%;
      padding:0 40px;
      text-align:center;
    }
  
    .hero h1{
      font-size:60px;
    }
  
    .hero-sub{
      font-size:18px;
    }
  
    .hero-img{
      position:relative;
      width:100%;
      height:350px;
      margin-top:40px;
    }
  
    .hero-img::before{
      background:linear-gradient(to top,#0B2B2B 0%,transparent 100%);
    }
  
    /* GALLERY */
    .gallery{
      grid-template-columns:repeat(2,1fr);
      padding:20px;
      gap:12px;
    }
  
    .gallery .item:nth-child(4){
      grid-column:span 1;
    }
  
    .gallery .item:nth-child(1),
    .gallery .item:nth-child(7){
      grid-row:span 1;
    }
  
    .promo-box{
      padding:20px;
      text-align:center;
    }
  
    .promo-img img{
      margin:0 auto 20px !important;
      display:block;
    }
  
    /* CTA */
    .cta-strip{
      flex-direction:column;
      text-align:center;
      padding:40px 25px;
    }
  
    .features{
      grid-template-columns:1fr;
    }
  
    .leads{
      justify-content:center;
      font-size:16px;
    }
  
    .cta-right{
      width:100%;
      max-width:400px;
    }
  
    /* NEWS */
    .news{
      padding:30px 20px;
    }
  
    .news-slider{
      gap:20px;
    }
  
    .news-slider img{
      height:70px;
    }
  
  }
  
  
  /* MOBILE */
  @media (max-width: 768px){
  
    /* HERO */
    .hero{
      padding:60px 0 0;
    }
  
    .hero-content{
      padding:0 20px;
    }
  
    .hero-label{
      font-size:10px;
      letter-spacing:3px;
    }
  
    .hero h1{
      font-size:48px;
      line-height:1;
    }
  
    .hero-sub{
      font-size:16px;
    }
  
    .hero p{
      font-size:14px;
    }
  
    .hero-img{
      height:280px;
    }
  
    /* GALLERY */
    .gallery{
      grid-template-columns:1fr;
      padding:15px;
    }
  
    .gallery img{
      height:280px;
    }
  
    .promo-box{
      min-height:320px;
    }
  
    .promo-box h2{
      font-size:24px;
    }
  
    .promo-box p{
      font-size:14px;
    }
  
    /* CTA */
    .cafe-icon img{
      width:120px !important;
      height:120px !important;
    }
  
    .cta-left h2{
      font-size:28px;
      line-height:1.2;
    }
  
    .cta-left p{
      margin-left:0;
      font-size:14px;
    }
  
    .leads{
      font-size:15px;
      gap:10px;
    }
  
    .cta-right{
      padding:20px;
    }
  
    .cta-right h3{
      font-size:20px;
    }
  
    /* TRUST */
    .ti{
      padding:0 20px;
      font-size:9px;
    }
  
    /* NEWS */
    .news h2{
      font-size:28px;
    }
  
    .news-slider{
      justify-content:center;
    }
  
    .news-slider img{
      height:55px;
    }
  
  }
  
  
  /* SMALL MOBILE */
  @media (max-width: 480px){
  
  .hero-content{padding:120px 24px 60px;}.hero-img{display:none;}
    .gallery img{
      height:240px;
    }
  
    .promo-box h2{
      font-size:20px;
    }
  
    .promo-box button,
    .cta-right button{
      width:100%;
    }
  
    .cta-left h2{
      font-size:22px;
    }
  
    .leads{
      font-size:14px;
      text-align:left;
      margin-top: -30px;
    }
  
    .news-slider img{
      height:45px;
    }
  
  }