:root{
  --deep: #072F35;
  --deep-2: #0C3E44;
  --teal: #0E8A93;
  --teal-soft: #6FCBD1;
  --copper: #C9793C;
  --copper-soft: #E8B37E;
  --bg: #F2F8F8;
  --white: #FFFFFF;
  --ink: #12292B;
  --ink-soft: #52696B;

  --font-head: 'Cairo', sans-serif;
  --font-body: 'Tajawal', sans-serif;

  --wrap: 1180px;
  --radius-lg: 26px;
  --radius-md: 16px;
  --ease: cubic-bezier(.22,.85,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family: var(--font-head); margin:0; color: var(--deep);}
p{margin:0;}
button{ font-family: inherit; }

.wrap{ width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: 24px; }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ============================================
   Ambient layers
   ============================================ */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.025; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px;
  border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, rgba(14,138,147,.16), transparent 70%);
  transform: translate(-50%,-50%);
  transition: opacity .3s ease;
  opacity:0;
}
@media (hover:hover){ .cursor-glow.active{opacity:1;} }

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--font-head);
  font-weight:700;
  font-size: .98rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, color .3s ease;
  border: 2px solid transparent;
  white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-primary{
  background: linear-gradient(135deg, var(--copper), #b56a2e);
  color: var(--white);
  box-shadow: 0 14px 30px -12px rgba(201,121,60,.65);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(201,121,60,.75); }
.btn-outline{ border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform: translateY(-3px);}
.btn-ghost{ border-color: var(--deep); color: var(--deep); padding: 10px 20px; font-size:.9rem; }
.btn-ghost:hover{ background: var(--deep); color:#fff; }
.phone-ico{ width:16px; height:16px; display:inline-block; border-radius:50%; background: var(--deep); position:relative; }
.phone-ico::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:#fff; }

/* ============================================
   Header
   ============================================ */
.site-header{ position: fixed; inset-inline:0; top:0; z-index:500; padding: 20px 0; transition: padding .35s var(--ease), background .35s ease, box-shadow .35s ease; }
.site-header.scrolled{ padding: 12px 0; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -18px rgba(7,47,53,.35); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--teal), var(--deep));
  color:#fff;
}
.brand-mark svg{ width:24px; height:24px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; color:#fff; transition:color .35s ease; }
.site-header.scrolled .brand-text{ color: var(--deep); }
.brand-text strong{ font-family: var(--font-head); font-weight:900; font-size:1.15rem; }
.brand-text small{ font-size:.72rem; opacity:.75; }

.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{ font-family: var(--font-head); font-weight:700; font-size:.95rem; color: var(--white); position:relative; padding-bottom:4px; transition:color .3s ease; }
.site-header.scrolled .main-nav a{ color: var(--deep); }
.main-nav a::after{ content:''; position:absolute; right:0; bottom:0; width:0; height:2px; background: var(--copper); transition: width .3s var(--ease); }
.main-nav a:hover::after{ width:100%; }
.header-cta{ background:#fff; }
.site-header.scrolled .header-cta{ background: transparent; }
.burger{ display:none; }

@media (max-width: 940px){
  .main-nav{
    position:fixed; inset-inline:16px; top:80px; background:#fff; border-radius: var(--radius-md);
    flex-direction:column; align-items:flex-start; gap:0;
    box-shadow: 0 20px 50px -20px rgba(7,47,53,.4); padding: 10px 22px;
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .35s var(--ease), opacity .25s ease;
  }
  .main-nav.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .main-nav a{ color: var(--deep) !important; padding: 14px 0; width:100%; border-bottom:1px solid #eef2f5; }
  .main-nav a:last-child{ border-bottom:none; }
  .header-cta{ display:none; }
  .burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; }
  .burger span{ width:100%; height:2px; background:#fff; transition:.3s; }
  .site-header.scrolled .burger span{ background: var(--deep); }
}

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative; min-height: 100vh; display:flex; align-items:center;
  background: radial-gradient(circle at 80% 0%, #0F4B53 0%, var(--deep) 55%, #052024 100%);
  overflow:hidden; padding-top: 110px;
}
.hero-scene{ position:absolute; inset:0; z-index:0; }
.pipe-route{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.pipe-bg{ fill:none; stroke: rgba(255,255,255,.08); stroke-width:10; stroke-linecap:round; }
.pipe-flow{
  fill:none; stroke: var(--teal-soft); stroke-width:3; stroke-linecap:round;
  stroke-dasharray: 14 18;
  animation: flowMove 3.2s linear infinite;
}
@keyframes flowMove{ to{ stroke-dashoffset: -320; } }
.flame-badge{
  position:absolute; top:22%; inset-inline-end:10%;
  width:56px; height:56px; border-radius:50%;
  background: rgba(201,121,60,.14); color: var(--copper-soft);
  display:flex; align-items:center; justify-content:center;
  animation: flamePulse 2.4s ease-in-out infinite;
}
.flame-badge svg{ width:26px; height:26px; }
@keyframes flamePulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(201,121,60,.35); }
  50%{ transform: scale(1.08); box-shadow: 0 0 0 14px rgba(201,121,60,0); }
}
.rain{ position:absolute; inset:0; overflow:hidden; }
.rain span{ position:absolute; top:-10%; width:2px; height:50px; background: linear-gradient(180deg, transparent, var(--teal-soft), transparent); opacity:.4; animation: fall linear infinite; }
@keyframes fall{ to{ transform: translateY(115vh); } }
.bubbles span{ position:absolute; bottom:-40px; border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(255,255,255,.04)); animation: rise linear infinite; }
@keyframes rise{ to{ transform: translateY(-115vh) scale(1.15); opacity:0; } }

.hero-inner{ position:relative; z-index:2; padding-block: 50px 90px; }
.hero-kicker{ color: var(--copper-soft); font-family: var(--font-head); font-weight:700; font-size:1.05rem; margin-bottom:18px; opacity:0; transform: translateY(16px); animation: rise-in .8s var(--ease) .1s forwards; }
.hero-title{ color:#fff; font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight:900; line-height:1.3; max-width: 17ch; opacity:0; transform: translateY(20px); animation: rise-in .8s var(--ease) .25s forwards; }
.hero-title-accent{ background: linear-gradient(90deg, var(--teal-soft), var(--copper-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-desc{ color: rgba(255,255,255,.78); font-size:1.07rem; max-width:58ch; margin-top:22px; opacity:0; transform: translateY(20px); animation: rise-in .8s var(--ease) .4s forwards; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; opacity:0; transform: translateY(20px); animation: rise-in .8s var(--ease) .55s forwards; }
.hero-badges{ display:flex; align-items:center; gap:26px; margin-top:60px; flex-wrap:wrap; opacity:0; transform: translateY(20px); animation: rise-in .8s var(--ease) .7s forwards; }
.badge-item{ display:flex; flex-direction:column; gap:4px; }
.badge-num{ font-family: var(--font-head); font-weight:900; font-size:2rem; color:#fff; }
.badge-label{ color: rgba(255,255,255,.6); font-size:.85rem; }
.badge-sep{ width:1px; height:38px; background: rgba(255,255,255,.2); }
@keyframes rise-in{ to{ opacity:1; transform:none; } }

.wave-divider{ position:absolute; bottom:-2px; left:0; width:100%; height:90px; z-index:1; }
.wave-path{ fill: var(--white); animation: waveShift 12s ease-in-out infinite alternate; }
@keyframes waveShift{
  from{ d: path("M0,64 C 240,120 480,10 720,50 C 960,90 1200,20 1440,64 L1440,110 L0,110 Z"); }
  to{ d: path("M0,50 C 240,10 480,110 720,64 C 960,20 1200,90 1440,50 L1440,110 L0,110 Z"); }
}
.wave-flip{ transform: rotate(180deg); bottom:auto; top:-1px; }
.wave-flip .wave-path{ fill: var(--bg); }

/* ============================================
   Section head
   ============================================ */
.section-head{ max-width: 640px; margin-inline:auto; text-align:center; margin-bottom: 54px; }
.section-head h2{ font-size: clamp(1.65rem, 3.4vw, 2.35rem); font-weight:800; }
.section-head p{ color: var(--ink-soft); margin-top:14px; font-size:1.05rem; }
.section-head.light h2{ color:#fff; }
.section-head.light p{ color: rgba(255,255,255,.68); }

/* ============================================
   Services
   ============================================ */
.services{ background: var(--bg); padding: 70px 0 120px; position:relative; }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.service-card{
  background:#fff; border-radius: var(--radius-lg); padding: 34px 28px;
  border-top: 4px solid var(--teal);
  box-shadow: 0 20px 45px -30px rgba(7,47,53,.25);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  opacity:0; transform: translateY(28px);
}
.service-card.in-view{ opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.service-card:hover{ transform: translateY(-10px); box-shadow: 0 30px 60px -28px rgba(7,47,53,.35); }
.service-gas{ border-top-color: var(--copper); }
.service-icon{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: rgba(14,138,147,.1); color: var(--teal); margin-bottom:20px; transition: transform .4s var(--ease);
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.08); }
.service-icon svg{ width:30px; height:30px; }
.service-gas .service-icon{ background: rgba(201,121,60,.13); color: var(--copper); }
.service-card h3{ font-size:1.22rem; margin-bottom:10px; }
.service-card p{ color: var(--ink-soft); font-size:.95rem; }

/* ============================================
   Process
   ============================================ */
.process{ background: var(--deep); padding: 90px 0 110px; position:relative; overflow:hidden; }
.process-track{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:24px; margin-top:10px; }
.process-line{ position:absolute; top:16px; inset-inline:2%; height:2px; background: rgba(255,255,255,.14); z-index:0; }
.process-line-fill{ position:absolute; inset-inline-start:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, var(--teal-soft), var(--copper)); transition: width 1.4s var(--ease); }
.process-step{ position:relative; z-index:1; opacity:0; transform: translateY(24px); }
.process-step.in-view{ opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.step-num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background: var(--deep); border:2px solid var(--teal-soft); color:#fff; font-family: var(--font-head); font-weight:800; font-size:.85rem; margin-bottom:18px; }
.process-step h3{ color:#fff; font-size:1.1rem; margin-bottom:10px; }
.process-step p{ color: rgba(255,255,255,.62); font-size:.92rem; }

/* ============================================
   Why us
   ============================================ */
.why{ padding: 100px 0; }
.why-grid{ display:grid; grid-template-columns: .75fr 1.25fr; gap:60px; align-items:center; }
.why-visual{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.why-blob{ position:absolute; inset:8%; background: linear-gradient(135deg, var(--bg), #d9eeee); border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; animation: blobMove 9s ease-in-out infinite; }
@keyframes blobMove{ 0%,100%{ border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; } 50%{ border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; } }
.why-icon-mark{ position:relative; width:34%; color: var(--teal); filter: drop-shadow(0 20px 30px rgba(7,47,53,.2)); }
.why-content h2{ font-size: clamp(1.65rem,3.2vw,2.25rem); margin-bottom:34px; max-width:19ch; }
.why-list{ display:grid; grid-template-columns: 1fr 1fr; gap:26px; }
.why-item{ border-inline-start: 3px solid var(--teal); padding-inline-start: 18px; opacity:0; transform: translateY(18px); }
.why-item.in-view{ opacity:1; transform:none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.why-item:nth-child(2){ border-color: var(--copper); }
.why-item:nth-child(4){ border-color: var(--copper); }
.why-item h4{ font-size:1.02rem; margin-bottom:8px; }
.why-item p{ color: var(--ink-soft); font-size:.92rem; }

/* ============================================
   Service areas marquee
   ============================================ */
.areas{ background:#fff; padding: 90px 0 100px; }
.areas-marquee{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.areas-track{ display:flex; gap:16px; width:max-content; animation: marquee 22s linear infinite; }
.areas-track span{
  font-family: var(--font-head); font-weight:700; font-size:1.05rem;
  padding: 14px 28px; border-radius:100px; background: var(--bg); color: var(--deep);
  border:1px solid rgba(14,138,147,.18); white-space:nowrap;
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================
   FAQ
   ============================================ */
.faq{ background: var(--bg); padding: 90px 0 110px; }
.faq-list{ max-width: 760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:#fff; border-radius: var(--radius-md); box-shadow: 0 14px 34px -26px rgba(7,47,53,.3); overflow:hidden; }
.faq-q{
  width:100%; text-align:start; background:none; border:none; cursor:pointer;
  padding: 20px 24px; font-family: var(--font-head); font-weight:700; font-size:1rem; color: var(--deep);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-toggle{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--teal); flex-shrink:0; position:relative; transition: transform .35s var(--ease), background .3s ease; }
.faq-toggle::before,.faq-toggle::after{ content:''; position:absolute; background: var(--teal); top:50%; left:50%; transform:translate(-50%,-50%); transition: transform .3s ease, opacity .3s ease; }
.faq-toggle::before{ width:10px; height:2px; }
.faq-toggle::after{ width:2px; height:10px; }
.faq-item.open .faq-toggle{ background: var(--teal); transform: rotate(180deg); }
.faq-item.open .faq-toggle::before,.faq-item.open .faq-toggle::after{ background:#fff; }
.faq-item.open .faq-toggle::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a p{ padding: 0 24px 22px; color: var(--ink-soft); font-size:.95rem; }

/* ============================================
   Contact
   ============================================ */
.contact{ background: var(--deep); padding: 100px 0 90px; }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:20px; }
.contact-card{
  display:flex; align-items:center; gap:18px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 22px 24px;
  transition: transform .35s var(--ease), background .35s ease, border-color .35s ease;
}
.contact-card:hover{ transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(201,121,60,.5); }
.contact-avatar{ width:52px; height:52px; border-radius:50%; flex-shrink:0; background: linear-gradient(135deg, var(--teal), var(--deep)); color:#fff; display:flex; align-items:center; justify-content:center; }
.contact-avatar svg{ width:22px; height:22px; }
.contact-info h4{ color:#fff; font-size:1.02rem; }
.contact-number{ color: var(--copper-soft); font-family: var(--font-head); font-weight:700; letter-spacing:.5px; }
.contact-arrow{ margin-inline-start:auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); position:relative; }
.contact-arrow::after{ content:''; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-inline-start:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(135deg) translate(-1px,-1px); }
.contact-note{ text-align:center; margin-top:36px; }
.contact-note p{ color: rgba(255,255,255,.6); font-size:.95rem; }

/* ============================================
   Footer
   ============================================ */
.site-footer{ background: #052024; border-top:1px solid rgba(255,255,255,.08); padding: 46px 0 30px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.footer-brand strong{ font-family: var(--font-head); font-size:1.1rem; }
.footer-tag{ color: rgba(255,255,255,.55); font-size:.92rem; max-width:52ch; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color: rgba(255,255,255,.7); font-size:.9rem; transition:color .3s ease; }
.footer-links a:hover{ color: var(--copper-soft); }
.footer-copy{ color: rgba(255,255,255,.35); font-size:.8rem; margin-top:14px; }

/* ============================================
   Floating WhatsApp
   ============================================ */
.floating-whatsapp{
  position:fixed; bottom:26px; inset-inline-end:26px; z-index:400; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.7); animation: pulseWA 2.6s ease-in-out infinite;
}
.floating-whatsapp svg{ width:30px; height:30px; }
@keyframes pulseWA{
  0%,100%{ box-shadow: 0 14px 30px -8px rgba(37,211,102,.7); }
  50%{ box-shadow: 0 14px 30px -8px rgba(37,211,102,.35), 0 0 0 12px rgba(37,211,102,.12); }
}

a:focus-visible, button:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 980px){
  .services-grid{ grid-template-columns:1fr; }
  .process-track{ grid-template-columns:1fr 1fr; row-gap:44px; }
  .process-line{ display:none; }
  .why-grid{ grid-template-columns:1fr; }
  .why-visual{ max-width:260px; margin-inline:auto; }
  .why-list{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .hero-badges{ gap:16px; }
  .badge-sep{ display:none; }
  .process-track{ grid-template-columns:1fr; }
}
/* ================= GALLERY ================= */

.gallery-section {
    padding: 100px 7%;
    background: #f5fafa;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gallery-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(0, 145, 155, 0.06);
    top: -150px;
    right: -100px;
    pointer-events: none;
}

.gallery-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(220, 126, 43, 0.05);
    bottom: -150px;
    left: -100px;
    pointer-events: none;
}

.section-heading {
    max-width: 750px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 2;
}

.section-heading span {
    display: inline-block;
    color: #d47b2c;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-heading h2 {
    margin: 0 0 18px;
    color: #073f47;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
}

.section-heading p {
    margin: 0;
    color: #648086;
    font-size: 17px;
    line-height: 2;
}

/* Gallery Grid */

.gallery-grid {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
    z-index: 2;
}

.gallery-item {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 60, 70, 0.10);
    border: 1px solid rgba(0, 130, 140, 0.08);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.05);
}

/* Video */

.gallery-video {
    background: #063f47;
}

.gallery-video video {
    object-fit: cover;
}

/* Overlay */

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 40, 45, 0.22),
        transparent 45%
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
    opacity: 0;
}


/* ================= MOBILE ================= */

@media (max-width: 900px) {

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

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

    .gallery-item {
        height: 250px;
    }

}

@media (max-width: 600px) {

    .gallery-section {
        padding: 60px 18px;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2 {
        font-size: 30px;
        line-height: 1.4;
    }

    .section-heading p {
        font-size: 15px;
        line-height: 1.9;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-item {
        height: 240px;
        border-radius: 18px;
    }

}

/* ================= ABOUT SECTION ================= */

.about-section {
    position: relative;
    padding: 110px 7%;
    background: #ffffff;
    overflow: hidden;
}

.about-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: rgba(0, 145, 155, 0.055);
    top: -180px;
    left: -180px;
    pointer-events: none;
}

.about-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(212, 123, 44, 0.045);
    bottom: -170px;
    right: -130px;
    pointer-events: none;
}

.about-container {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}


/* ================= ABOUT CONTENT ================= */

.about-content {
    text-align: right;
}

.about-label {
    display: inline-block;
    color: #d47b2c;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 12px;
}

.about-content h2 {
    margin: 0 0 25px;
    color: #073f47;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.3;
    font-weight: 800;
}

.about-intro {
    color: #174e56;
    font-size: 20px;
    font-weight: 600;
    line-height: 2;
    margin-bottom: 18px;
}

.about-content > p:not(.about-intro) {
    color: #667f84;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 16px;
}


/* ================= ABOUT FEATURES ================= */

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px;
    background: #f5fafa;
    border-radius: 16px;
    border: 1px solid rgba(0, 130, 140, 0.08);
    transition: 0.3s ease;
}

.about-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 70, 80, 0.08);
}

.about-feature-icon {
    min-width: 48px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(0, 145, 155, 0.10);
    color: #008e9b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.about-feature h4 {
    margin: 0 0 4px;
    color: #073f47;
    font-size: 16px;
}

.about-feature p {
    margin: 0;
    color: #71878b;
    font-size: 13px;
    line-height: 1.6;
}


/* ================= ABOUT VISUAL ================= */

.about-visual {
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card-main {
    width: 390px;
    min-height: 430px;
    padding: 55px 40px;
    border-radius: 35px;
    background: linear-gradient(
        145deg,
        #073f47,
        #075b63
    );
    color: white;
    text-align: center;
    position: relative;
    z-index: 3;
    box-shadow: 0 30px 70px rgba(0, 55, 65, 0.25);
    overflow: hidden;
}

.about-card-main::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50%;
    top: -120px;
    right: -90px;
}

.about-card-main::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    bottom: -110px;
    left: -80px;
}

.about-icon-large {
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    border-radius: 25px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0a45d;
    font-size: 40px;
}

.about-card-main span {
    display: block;
    color: #f0a45d;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}

.about-card-main h3 {
    margin: 0 0 20px;
    font-size: 29px;
    line-height: 1.6;
    font-weight: 800;
}

.about-card-main p {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 2;
}


/* ================= DECORATIVE CIRCLES ================= */

.about-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.about-circle-one {
    width: 130px;
    height: 130px;
    background: rgba(212, 123, 44, 0.13);
    top: 20px;
    right: 10px;
}

.about-circle-two {
    width: 90px;
    height: 90px;
    background: rgba(0, 145, 155, 0.13);
    bottom: 35px;
    left: 20px;
}


/* ================= MINI CARD ================= */

.about-mini-card {
    position: absolute;
    z-index: 5;
    bottom: 35px;
    right: 0;
    background: white;
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 50, 60, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #073f47;
    font-size: 14px;
    font-weight: 700;
}

.about-mini-card i {
    color: #12a66a;
    font-size: 19px;
}


/* ================= ABOUT MOBILE ================= */

@media (max-width: 950px) {

    .about-section {
        padding: 80px 5%;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

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

    .about-features {
        text-align: right;
    }

    .about-visual {
        min-height: 470px;
    }

}

@media (max-width: 600px) {

    .about-section {
        padding: 65px 18px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .about-intro {
        font-size: 17px;
    }

    .about-content > p:not(.about-intro) {
        font-size: 15px;
    }

    .about-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-feature {
        text-align: right;
    }

    .about-visual {
        min-height: 410px;
    }

    .about-card-main {
        width: 100%;
        min-height: 380px;
        padding: 42px 25px;
        border-radius: 28px;
    }

    .about-card-main h3 {
        font-size: 24px;
    }

    .about-icon-large {
        width: 75px;
        height: 75px;
        font-size: 32px;
    }

    .about-mini-card {
        bottom: 15px;
        right: 5px;
        padding: 12px 15px;
        font-size: 12px;
    }

}