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

:root {
  --teal: #0f94b0;
  --teal-dark: #0d849c;
  --teal-light: #1294ae;
  --navy: #00153b;
  --text-gray: #6e768e;
  --badge-bg: #e5f2fa;
  --badge-border: #d4e8f2;
  --page-bg: #f8f9fc;
  --circle-bg: #edf4fa;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--page-bg);
  color: var(--navy);
  overflow-x: hidden;
}

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Background decorations */
.wave-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: min(33.2vw, 480px);
  height: auto;
  aspect-ratio: 480 / 200;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26vh;
  min-height: 190px;
  max-height: 300px;
  z-index: 0;
  pointer-events: none;
}

/* Header / Navigation */
.header {
  position: relative;
  z-index: 10;
  padding: 32px 80px 0;
}

.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 48px;
}

.nav-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-decoration: none;
  position: relative;
  padding-bottom: 8px;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--teal);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
}

/* Hero layout */
.hero {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 20px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 56px 80px 200px;
}

/* Left content */
.hero-content {
  max-width: 560px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  padding: 7px 20px 7px 14px;
  margin-bottom: 32px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.badge-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--teal);
}

.title {
  font-size: clamp(3.2rem, 5.8vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.title-gr {
  color: var(--teal);
}

.title-webtech {
  color: var(--navy);
}

.subtitle {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 24px;
}

.subtitle-dark {
  color: var(--navy);
}

.subtitle-teal {
  color: var(--teal);
}

.description {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-gray);
  max-width: 420px;
  margin-bottom: 36px;
}

/* Buttons */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  border: 2px solid var(--teal);
  box-shadow: 0 10px 28px rgba(15, 148, 176, 0.32);
}

.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.btn-secondary {
  background: #fff;
  color: var(--teal);
  border: 2px solid var(--teal);
}

.btn-secondary:hover {
  background: rgba(0, 184, 168, 0.06);
}

.btn-arrow {
  font-size: 14px;
  line-height: 1;
}

/* Right visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.visual-circle {
  position: absolute;
  width: 92%;
  max-width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 42%, #f3f7fb 0%, var(--circle-bg) 60%, #e2ebf3 100%);
  z-index: 1;
}

.dot-grid {
  position: absolute;
  top: 8%;
  right: 4%;
  width: 72px;
  height: 72px;
  background-image: radial-gradient(circle, #b8c4ce 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  z-index: 3;
  opacity: 0.7;
}

.chart-image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(26, 45, 90, 0.12));
}

/* Responsive */


@media (max-width: 640px) {
  .header {
    padding: 20px 20px 0;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 20px;
    background: #99D5ED;
  }

  .nav-link {
    font-size: 25px;
  }

  .hero {
    padding: 28px 20px 180px;
  }

  .cta-group {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}


/* WHY CHOOSE US */
.why-choose{
    padding:80px 80px 120px;
    text-align:center;
    position:relative;
    z-index:2;
}
.section-tag{
    display:inline-block;
    padding:8px 18px;
    background:#0f94b0;
    color:#ffffff;
    border-radius:30px;
    font-size:25px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:20px;
}
.why-choose h2{
    font-size:42px;
    color:#00153b;
    margin-bottom:20px;
}
.section-desc{
    max-width:750px;
    margin:0 auto 50px;
    color:#6e768e;
    line-height:1.8;
}
.choose-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}
.choose-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}
.choose-card h3{margin:15px 0 10px;}
.choose-card p{color:#6e768e;line-height:1.7;}
.icon{font-size:40px;}

@media(max-width:992px){
 .choose-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
 .why-choose{padding:60px 20px 100px;}
 .choose-grid{grid-template-columns:1fr;}
 .why-choose h2{font-size:30px;}
}


.company-overview,.process-section,.vision-mission,.cta-section{
padding:100px 80px;
text-align:center;
position:relative;
z-index:2;
}

.process-grid,.stats-grid,.vm-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
max-width:1200px;
margin:auto;
}

.process-card,.vm-card{
background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.process-card span{
font-size:42px;
font-weight:700;
color:#0f94b0;
display:block;
margin-bottom:15px;
}






.vm-grid{
grid-template-columns:repeat(2,1fr);
}

.cta-section{
padding-bottom:140px;
justify-items: center;
}

.cta-section p{
max-width:700px;
margin:20px auto 40px;
color:#6e768e;
}

@media(max-width:992px){
.process-grid,.stats-grid,.vm-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.company-overview,.process-section,.vision-mission,.cta-section,.stats-section{
padding:60px 20px;
}
.process-grid,.stats-grid,.vm-grid{
grid-template-columns:1fr;
}
}


/* ===== PREMIUM ANIMATIONS ===== */
body{
background:linear-gradient(180deg,#f8fbff 0%,#ffffff 40%,#f4fbfd 100%);
}

.floating-shape{
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:.25;
animation:float 8s ease-in-out infinite;
pointer-events:none;
}
.shape1{width:220px;height:220px;background:#0f94b0;top:120px;right:-60px;}
.shape2{width:160px;height:160px;background:#7de3ff;left:-50px;top:500px;animation-delay:2s;}
.shape3{width:180px;height:180px;background:#00153b;right:20%;top:900px;animation-delay:4s;}

@keyframes float{
50%{transform:translateY(-25px) translateX(10px);}
}

.hero-content{
animation:fadeUp 1s ease;
}
.hero-visual{
animation:zoomIn 1.2s ease;
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(50px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes zoomIn{
from{opacity:0;transform:scale(.85);}
to{opacity:1;transform:scale(1);}
}

.chart-image{
animation:levitate 5s ease-in-out infinite;
}
@keyframes levitate{
50%{transform:translateY(-18px);}
}

.choose-card,.process-card,.vm-card{
transition:.4s ease;
border:1px solid rgba(15,148,176,.08);
}
.choose-card:hover,.process-card:hover,.vm-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(15,148,176,.18);
}

.btn{
transition:.35s ease;
}
.btn:hover{
transform:translateY(-4px) scale(1.03);
}

.nav-link::before{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:#0f94b0;
transition:.3s;
}
.nav-link:hover::before{width:100%;}



/* ===== GR WEBTECH PREMIUM UPGRADE ===== */
:root{
--glass:rgba(255,255,255,.65);
--border:rgba(255,255,255,.45);
}

.hero{padding:40px 80px 80px!important;}
.why-choose{padding:70px 80px 80px!important;margin-top:-20px;}
.company-overview,.process-section,.vision-mission,.stats-section,.cta-section{
padding:80px 80px!important;
}

section{position:relative;}
section:not(:last-child)::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:120px;
height:1px;
background:linear-gradient(90deg,transparent,#0f94b0,transparent);
}

.badge{
backdrop-filter:blur(14px);
background:rgba(255,255,255,.75);
box-shadow:0 10px 30px rgba(15,148,176,.12);
}

.title{font-size:clamp(3.8rem,6vw,5.6rem);}
.subtitle{font-size:clamp(1.5rem,2.2vw,2rem);}
.description{font-size:16px;}

.visual-circle{
background:radial-gradient(circle,#fff 0%,#e8f9ff 45%,#d9f2fb 100%);
box-shadow:0 0 80px rgba(15,148,176,.25);
}

.chart-image{
filter:drop-shadow(0 25px 60px rgba(15,148,176,.35));
}

.hero::before{
content:'';
position:absolute;
width:400px;
height:400px;
right:5%;
top:0;
background:radial-gradient(circle,rgba(15,148,176,.18),transparent 70%);
border-radius:50%;
}

.choose-grid,.process-grid,.stats-grid,.vm-grid{
align-items:stretch;
}

.choose-card,.process-card,.vm-card{
height:100%;
background:var(--glass);
backdrop-filter:blur(18px);
border:1px solid rgba(15,148,176,.12);
border-radius:24px;
box-shadow:0 20px 45px rgba(0,21,59,.08);
}

.choose-card:hover,.process-card:hover,.vm-card:hover{
transform:translateY(-14px);
}

.icon{
width:80px;
height:80px;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
border-radius:20px;
background:linear-gradient(135deg,#c7f0f8,#56d6ee);
box-shadow:0 15px 35px rgba(15,148,176,.25);
}

.btn-primary{
background:linear-gradient(135deg,#0f94b0,#26c6da);
background-size:200% 200%;
animation:gradientMove 5s ease infinite;
}
@keyframes gradientMove{
50%{background-position:100% 50%;}
}

.section-tag{
box-shadow:0 10px 25px rgba(15,148,176,.15);
}

.cta-section{
background:linear-gradient(135deg,rgba(15,148,176,.06),rgba(255,255,255,.95));
border-radius:40px;
margin:0 40px 100px;
}


@media(max-width:768px){
.hero{padding:30px 20px 60px!important;}
.why-choose,.company-overview,.process-section,.vision-mission,.stats-section,.cta-section{
padding:70px 20px!important;
}
.cta-section{margin:0 10px 40px;}
}


.footer-wave{
position:relative;
margin-top:40px;
color:#fff;
overflow:hidden;
}
.footer-svg{
width:100%;
height:420px;
display:block;
}
.footer-content{
position:absolute;
top:150px;
left:50%;
transform:translateX(-50%);
width:min(1200px,90%);
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
z-index:2;
}
.footer-col h3{
font-size:32px;
margin-bottom:15px;
}
.footer-col h4{
margin-bottom:15px;
font-size:20px;
}
.footer-col p,
.footer-col li,
.footer-col a{
color:rgba(255,255,255,.85);
text-decoration:none;
line-height:1.9;
list-style:none;
}
.footer-bottom{
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
color:rgba(255,255,255,.8);
font-size:14px;
}
.footer-bottom h4{
    font-weight: 100;
}
.footer-bottom a{
    position:relative;
    bottom: 10px;
    left: -10%;
    text-decoration: none;
    color: rgb(233, 232, 232);

}
.footer-bottom a:hover{
    color: blue;
}

@media (max-width: 1024px) {
  .header {
    padding: 24px 32px 0;
  }

  .nav {
    gap: 24px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 36px 32px 200px;
    text-align: center;
  }

  .hero-content {
    max-width: none;
    margin: 0 auto;
  }

  .description {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-group {
    justify-content: center;
  }

  .hero-visual {
    min-height: 340px;
  }

  .wave-top-left {
    width: 55vw;
  }

.footer-bottom a{
 left: 0%;
 bottom: 5px; 
}
.footer-col p{
    margin-top: -5px;
}
}

@media(max-width:768px){
.footer-svg{height:750px;}
.footer-content{
top:120px;
grid-template-columns:1fr;
text-align:center;
}
.footer-bottom{
bottom:20px;
width:100%;
text-align:center;
}
}


#menu-toggle{display:none;}
.hamburger{display:none;position:absolute;right:20px;top:20px;width:35px;z-index:999;cursor:pointer;}
.hamburger span{display:block;height:3px;background:#0f94b0;margin:6px 0;border-radius:5px;}

.container{width:min(1200px,92%);margin:auto;}
img{max-width:100%;height:auto;}

@media(max-width:991px){
.hero{grid-template-columns:1fr!important;text-align:center;}
.choose-grid,.process-grid,.vm-grid{grid-template-columns:repeat(2,1fr)!important;}
}

@media(max-width:768px){
.hamburger{display:block;}
.nav{
position:fixed;
right:-100%;
top:0;
width:280px;
height:100vh;
background: #99D5ED;
flex-direction:column;
justify-content:center;
transition:.4s;
z-index:998;
box-shadow:-10px 0 30px rgba(0,0,0,.1);

}

.nav-link{
  font-size: 25px;
}
#menu-toggle:checked ~ .nav{right:0;}

.hero,.why-choose,.company-overview,.process-section,.vision-mission,.cta-section{
padding:60px 20px!important;
}

.choose-grid,.process-grid,.vm-grid,.footer-content{
grid-template-columns:1fr!important;
}

.cta-group{flex-direction:column;align-items:center;}
.btn{width:100%;max-width:320px;justify-content:center;}

.footer-svg{height:850px;}
.footer-content{top:110px;}
}

@media(max-width:480px){
.title{font-size:2.8rem!important;}
.subtitle{font-size:1.2rem!important;}
.section-tag{font-size:12px!important;}
.hero-visual{min-height:260px;}
}


/* FINAL MOBILE FOOTER FIT FIX */
@media (max-width:480px){

.footer-svg{
    height:400px !important;
}

.footer-content{
    top:140px !important;
    gap:14px !important;
    width:82% !important;
}

.footer-content .footer-col:nth-child(2),
.footer-content .footer-col:nth-child(3){
    display:none !important;
}

.footer-col:first-child{
    margin-bottom:12px !important;
}

.footer-col h3{
    font-size:22px !important;
}

.footer-col p{
    font-size:12px !important;
    line-height:1.45 !important;
}

.footer-col:last-child{
    margin-top:6px !important;
}

.footer-bottom{
    bottom:18px !important;
    font-size:10px !important;
}
}


/* iPad Mini / Tablet Footer Fix */
@media (min-width: 768px) and (max-width: 1024px){

.footer-svg{
    height: 450px !important;
}

.footer-content{
    top: 180px !important;
    width: 90% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:16px !important;
}

.footer-content .footer-col:nth-child(2),
.footer-content .footer-col:nth-child(3){
    display:none !important;
}

.footer-col{
    max-width:420px !important;
}

.footer-col h3{
    font-size:28px !important;
    margin-bottom:8px !important;
}

.footer-col p{
    font-size:14px !important;
    line-height:1.5 !important;
}

.footer-bottom{
    bottom:20px !important;
    width:100%;
    text-align:center;
}
}


/* Surface Duo / Small Tablet Footer Fix */
@media (min-width: 481px) and (max-width: 767px){

.footer-svg{
    height: 390px !important;
}

.footer-content{
    top: 170px !important;
    width: 84% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:10px !important;
}

.footer-content .footer-col:nth-child(2),
.footer-content .footer-col:nth-child(3){
    display:none !important;
}

.footer-col{
    max-width:320px !important;
}

.footer-col h3{
    font-size:22px !important;
    margin-bottom:6px !important;
}

.footer-col h4{
    font-size:16px !important;
    margin-bottom:4px !important;
}

.footer-col p{
    font-size:12px !important;
    line-height:1.4 !important;
}

.footer-bottom{
    bottom:15px !important;
    font-size:10px !important;
    width:100%;
    text-align:center;
}
}


/* Animated Hamburger -> Close Icon */
.hamburger{
    width:36px;
    height:30px;
}

.hamburger span{
    transition:all .35s ease;
    transform-origin:center;
}

#menu-toggle:checked + .hamburger span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

#menu-toggle:checked + .hamburger span:nth-child(2){
    opacity:0;
}

#menu-toggle:checked + .hamburger span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

#menu-toggle:checked + .hamburger{
    position:fixed;
    right:20px;
    top:20px;
}


/* Active menu item should not show hover-line animation */
.nav-link.active::before,
.nav-link.active:hover::before{
    width:0 !important;
    display:none !important;
}

.nav-link.active{
    color: var(--teal);
}


/* Premium navbar active box style */
.nav{
background:rgba(150, 212, 237, 0.92);
border-radius:22px;
padding:10px 14px;
width:fit-content;
margin-left:auto;
box-shadow:0 8px 25px rgba(0,0,0,.3);
}

.nav-link{
padding:12px 18px;
border-radius:14px;
}

.nav-link.active{
background:#f5f8ff;
box-shadow:0 2px 10px rgba(15,148,176,.08);
}

.nav-link.active::after{
bottom:6px;
}

@media(max-width:768px){
.nav{
width:280px;
border-radius:0;
padding:0;
}
.nav-link.active{
background:rgba(255,255,255,.35);
}
}


.about-showcase{
display:flex;
align-items:center;
justify-content:center;
}

.about-card{
background:rgba(255,255,255,.75);
backdrop-filter:blur(18px);
padding:40px;
border-radius:24px;
box-shadow:0 20px 45px rgba(0,21,59,.08);
min-width:320px;
}

.about-card h3{
margin-bottom:20px;
color:#0f94b0;
}

.about-card p{
padding:10px 0;
border-bottom:1px solid rgba(15,148,176,.12);
}

.about-hero{
padding-bottom:80px!important;
}