/* =========================
CSS RESET
========================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* =========================
ROOT VARIABLES
========================= */
: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;

--glass: rgba(255,255,255,.65);
--border: rgba(255,255,255,.45);
}

/* =========================
GLOBAL STYLES
========================= */
html,
body {
min-height: 100%;
}

body {
font-family: "Poppins", sans-serif;
color: var(--navy);
overflow-x: hidden;
background: linear-gradient(180deg,#f8fbff 0%,#ffffff 40%,#f4fbfd 100%);
}

img {
max-width: 100%;
height: auto;
}

.container {
width: min(1200px, 92%);
margin: auto;
}

/* =========================
LAYOUT STRUCTURE
========================= */
.page {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}

.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: 40px 80px 80px !important;
}

.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%;
}

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);
}

/* =========================
DECORATIVE ELEMENTS
========================= */
.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;
}

.visual-circle {
position: absolute;
width: 92%;
max-width: 500px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle,#fff 0%,#e8f9ff 45%,#d9f2fb 100%);
box-shadow: 0 0 80px rgba(15,148,176,.25);
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: .7;
}

/* =========================
HEADER & NAVIGATION
========================= */
.header {
position: relative;
z-index: 10;
padding: 32px 80px 0;
}

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

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 {
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
color: var(--navy);
text-decoration: none;
position: relative;
padding: 12px 18px;
padding-bottom: 8px;
border-radius: 14px;
transition: color .2s ease;
}

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

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

.nav-link:hover::before {
width: 100%;
}

/* =========================
NAVIGATION ACTIVE STATE
========================= */
.nav-link.active {
color: var(--teal);
background: #f5f8ff;
box-shadow: 0 2px 10px rgba(15,148,176,.08);
}

.nav-link.active::before,
.nav-link.active:hover::before {
width: 0 !important;
display: none !important;
}

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

/* =========================
HAMBURGER MENU
========================= */
#menu-toggle {
display: none;
}

.hamburger {
display: none;
position: absolute;
right: 20px;
top: 20px;
width: 36px;
height: 30px;
z-index: 999;
cursor: pointer;
}

.hamburger span {
display: block;
height: 3px;
background: #0f94b0;
margin: 6px 0;
border-radius: 5px;
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;
}

/* =========================
HERO SECTION
========================= */
.hero-content {
max-width: 560px;
animation: fadeUp 1s ease;
}

.hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
animation: zoomIn 1.2s ease;
}

.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 20px 7px 14px;
margin-bottom: 32px;
border-radius: 999px;
border: 1px solid var(--badge-border);
background: rgba(255,255,255,.75);
backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(15,148,176,.12);
}

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

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

.title {
font-size: clamp(3.8rem,6vw,5.6rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -.01em;
margin-bottom: 20px;
}

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

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

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

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

.chart-image {
position: relative;
z-index: 2;
width: 100%;
max-width: 520px;
object-fit: contain;
filter: drop-shadow(0 25px 60px rgba(15,148,176,.35));
animation: levitate 5s ease-in-out infinite;
}

/* =========================
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: .08em;
text-decoration: none;
border-radius: 999px;
padding: 14px 28px;
transition: .35s ease;
}

.btn-primary {
color: #fff;
border: 2px solid var(--teal);
background: linear-gradient(135deg,#0f94b0,#26c6da);
background-size: 200% 200%;
box-shadow: 0 10px 28px rgba(15,148,176,.32);
animation: gradientMove 5s ease infinite;
}

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

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

/* =========================
WHY CHOOSE US SECTION
========================= */
.why-choose {
padding: 70px 80px 80px !important;
margin-top: -20px;
text-align: center;
position: relative;
z-index: 2;
}

.section-tag {
display: inline-block;
padding: 8px 18px;
background: #0f94b0;
color: #fff;
border-radius: 30px;
font-size: 25px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: 0 10px 25px rgba(15,148,176,.15);

}

.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;
align-items: stretch;
}

.choose-card {
height: 100%;
}

/* =========================
COMPANY OVERVIEW SECTION
========================= */
.company-overview {
padding: 80px 80px !important;
text-align: center;
position: relative;
z-index: 2;
}

/* =========================
PROCESS SECTION
========================= */
.process-section {
padding: 80px 80px !important;
text-align: center;
position: relative;
z-index: 2;
}

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

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

/* =========================
VISION & MISSION SECTION
========================= */
.vision-mission {
padding: 80px 80px !important;
text-align: center;
position: relative;
z-index: 2;
}

.vm-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 25px;
max-width: 1200px;
margin: auto;
align-items: stretch;
}

/* =========================
CTA SECTION
========================= */
.cta-section {
padding: 80px 80px !important;
padding-bottom: 140px;
text-align: center;
justify-items: center;
position: relative;
z-index: 2;

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

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

/* =========================
FOOTER SECTION
========================= */
.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: 0px;
    left: -10%;
    text-decoration: none;
    color: rgb(233, 232, 232);

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

/* =========================
FLOATING SHAPES
========================= */
.floating-shape {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: .25;
pointer-events: none;
animation: float 8s ease-in-out infinite;
}

.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;
}

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

@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);
}
}

@keyframes levitate {
50% {
transform: translateY(-18px);
}
}

@keyframes gradientMove {
50% {
background-position: 100% 50%;
}
}

/* =========================
HOVER EFFECTS
========================= */
.choose-card,
.process-card,
.vm-card {
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);
transition: .4s ease;
}

.choose-card:hover,
.process-card:hover,
.vm-card:hover {
transform: translateY(-14px);
box-shadow: 0 25px 60px rgba(15,148,176,.18);
}

.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);
font-size: 40px;
}

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

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

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

/* =========================
UTILITY CLASSES
========================= */
.stats-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 25px;
max-width: 1200px;
margin: auto;
align-items: stretch;
}

/* =========================
TABLET MEDIA QUERIES
========================= */
@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:992px) {
.choose-grid,
.process-grid,
.stats-grid,
.vm-grid {
grid-template-columns: repeat(2,1fr);
}
}

@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;
}
}

/* =========================
MOBILE MEDIA QUERIES
========================= */
@media (max-width:768px) {
.hamburger {
display: block;
}

.nav {
position: fixed;
right: -100%;
top: 0;
width: 280px;
height: 100vh;
background:rgba(150, 212, 237, 0.92);
flex-direction: column;
justify-content: center;
transition: .4s;
z-index: 998;
box-shadow: -10px 0 30px rgba(0,0,0,.1);
border-radius: 0;
padding: 0;
}

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

.nav-link.active {
background: rgba(255,255,255,.35);
}

#menu-toggle:checked ~ .nav {
right: 0;
}

.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;
}

.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:640px) {
.header {
padding: 20px 20px 0;
}

.nav {
flex-wrap: wrap;
justify-content: center;
background:rgba(150, 212, 237, 0.92);
gap: 16px 20px;
}

.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;
}
}

@media (max-width:600px) {
.why-choose {
padding: 60px 20px 100px;
}

.company-overview,
.process-section,
.vision-mission,
.cta-section,
.stats-section {
padding: 60px 20px;
}

.choose-grid,
.process-grid,
.stats-grid,
.vm-grid {
grid-template-columns: 1fr;
}

.why-choose h2 {
font-size: 30px;
}
}

@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;
}
}

/* =========================
FOOTER RESPONSIVE FIXES
========================= */
@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;
}
}

@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;
}
}

@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;
}
}

@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;
}
}

/* =========================
FINAL OVERRIDES
========================= */
::selection {
background: rgba(15,148,176,.2);
}