/* =========================
GLOBAL STYLES
========================= */

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

video{
  margin:0;
  padding:0;
  border:none;
  outline:none;
  display:block;
}

html{
  scroll-behavior:smooth;
  margin:0;
  padding:0;
  width:100%;
}

/* =========================
MOBILE FAST PAGE TRANSITION
- lightweight overlay to feel instant on navigation
========================= */

#page-transition-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  background:rgba(0,51,102,0.85);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 120ms ease, transform 160ms ease;
}

#page-transition-overlay.is-active{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:768px){
  /* "Fast" feel: no smooth scrolling on phones */
  html{
    scroll-behavior:auto;
  }
  
  /* Reduce jank from hover-only transforms on touch devices */
  button, a, .card, .service-card, .testimonial-card, .benefit-card{
    -webkit-tap-highlight-color: transparent;
  }
}

/* respect accessibility */
@media (prefers-reduced-motion: reduce){
  #page-transition-overlay{
    transition:none;
  }
}

body{
  background:#003366;
  color:#222;
  overflow-x:hidden;
  line-height:1.6;
  margin:0;
  padding:0;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
  padding:0;
}

/* HEADER WITH LOGO BACKGROUND */
header{
  background: transparent;
  color:white;
  height:100vh;
  position:relative;
  margin:0;
  padding:0;
  top:0;
  left:0;
  width:100%;
  display:block;
  overflow:hidden;
  border:none;
  outline:none;
}

/* LIGHT VIDEO OVERLAY */
.video-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,51,102,0.15);
  z-index:1;
  margin:0;
  padding:0;
}

.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  margin:0;
  padding:0;
  display:block;
  border:none;
  outline:none;
}

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

.services-header{

  background:
  linear-gradient(
    rgba(0,89,179,0.45),
    rgba(0,89,179,0.45)
  ),
  url("logo,jpg/logo.jpg");

  background-size:contain;

  background-position:center;

  background-repeat:no-repeat;

  background-color:#003366;

  color:white;

  min-height:60vh;
}

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

.testimonials{
  padding:60px 0;
}

.testimonial-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.testimonial-card{
  background:white;
  padding:30px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  transition:0.3s;
}

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

.testimonial-avatar img{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #0059b3;
  margin-bottom:15px;
}

.testimonial-card h3{
  color:gold;
  margin-bottom:10px;
}

.testimonial-card h4{
  font-size:24px;
  margin-bottom:10px;
}

.university,
.package,
.salary{
  margin-bottom:10px;
}

.salary{
  color:#0059b3;
  font-weight:600;
}

.review{
  line-height:1.7;
  margin-top:10px;
}

/* =========================
SMALL HEADER
========================= */
.small-header{
  /* SERVICES page now uses a real <video> background (transparent).
     Remove photo background so video shows properly. */
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
  min-height: 60vh;
  color: white;
  position: relative;
  overflow: hidden;
}

.small-header::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* keep subtle transparent overlay above the video */
  background: linear-gradient(135deg, rgba(0,89,179,0.25), rgba(0,51,102,0.45));
  animation: pulse 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulse{
  0%, 100%{
    opacity: 0.3;
  }
  50%{
    opacity: 0.5;
  }
}

.small-header nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(0,51,102,0.15);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:0;
  margin:0;
  box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-bottom:1px solid rgba(255,255,255,0.18);
}

.logo-section h2{
  font-size:32px;
  font-weight:700;
  color:white;
}

.logo-section span{
  color:#4da6ff;
}

.small-header nav ul{
  display:flex;
  gap:25px;
}

.small-header nav ul li a{
  color:white;
  font-weight:500;
  transition:0.3s;
}

.small-header nav ul li a:hover,
.small-header nav ul li a.active{
  color:#4da6ff;
}

.small-header-content{
  height:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:10;
  position:relative;
  padding:30px 20px;
  flex-direction:column;
}

.header-with-intro .small-header-content{
  min-height:auto;
}

.header-with-intro .small-header-content h1{
  margin-bottom:10px;
  font-size:clamp(28px, 5vw, 40px);
}

.header-subtitle{
  font-size:clamp(14px, 3vw, 20px);
  font-weight:600;
  color:#4da6ff;
  text-shadow:0 2px 10px rgba(0,0,0,0.3);
  margin-bottom:8px;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.header-description{
  font-size:13px;
  color:rgba(255,255,255,0.9);
  max-width:650px;
  line-height:1.5;
  text-shadow:0 2px 8px rgba(0,0,0,0.2);
  animation: fadeInUp 0.8s ease-out 0.4s both;
  margin:0;
}

@keyframes slideDown{
  from{
    opacity: 0;
    transform: translateY(-30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
NAVBAR
========================= */

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
  flex-wrap:wrap;
  gap:15px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(0,51,102,0.15);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:0;
  margin:0;
  box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-bottom:1px solid rgba(255,255,255,0.18);
}

body{
  padding-top:80px;
}

.logo-section img{
  width:120px;
  height:auto;
  background:white;
  padding:8px;
  border-radius:10px;
  display:block;
  object-fit:contain;
  flex-shrink:0;
}

.logo-section h2{
  font-size:32px;
  font-weight:700;
  color:white;
  text-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.logo-section span{
  color:#4da6ff;
}

nav ul{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}

nav li{
  white-space:nowrap;
}

nav a{
  color:white;
  font-weight:500;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:16px;
  padding:10px 16px;
  border-radius:6px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

nav a i{
  font-size:14px;
  color:inherit;
}

nav a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background:#4da6ff;
  transition:all 0.3s ease;
  transform:translateX(-50%);
}

nav a:hover::after,
nav a.active::after{
  width:80%;
}

nav a:hover{
  color:#cce6ff;
  background:rgba(255,255,255,0.15);
  transform:translateY(-2px);
}

nav a.active{
  color:#4da6ff;
  background:rgba(77,166,255,0.15);
}

.nav-cta{
  display:flex;
  align-items:center;
}

.nav-cta button{
  padding:12px 28px;
  font-size:15px;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  border:2px solid transparent;
}

.nav-cta button:hover{
  background:linear-gradient(135deg, #003d7a, #002955);
  color:white;
}

/* =========================
HERO SECTION
========================= */

.hero{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:80vh;
  padding:0 5%;
  width:100%;
  position:relative;
  z-index:10;
  animation:fadeIn 1s ease-out;
}

@keyframes fadeIn {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.hero-content{
  position:relative;
  z-index:10;
}

.hero-content h1{
  font-size:clamp(32px, 8vw, 70px);
  margin-bottom:20px;
  line-height:1.2;
  font-weight:700;
  color:white;
  text-shadow:0 4px 20px rgba(0,0,0,0.3);
  letter-spacing:-1px;
  animation:slideUp 0.8s ease-out 0.2s both;
}

@keyframes slideUp {
  from {
    opacity:0;
    transform:translateY(30px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.hero-content p{
  font-size:clamp(16px, 4vw, 20px);
  max-width:700px;
  margin:auto;
  margin-bottom:35px;
  line-height:1.8;
  color:rgba(255,255,255,0.95);
  font-style:italic;
  text-shadow:0 2px 10px rgba(0,0,0,0.2);
  animation:slideUp 0.8s ease-out 0.4s both;
}

/* =========================
BUTTONS
========================= */

button{
  padding:15px 35px;
  border:none;
  border-radius:10px;
  background:white;
  color:#0059b3;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 15px rgba(0,89,179,0.2);
  position:relative;
  overflow:hidden;
}

button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s;
}

button:hover::before{
  left:100%;
}

button:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(0,89,179,0.3);
}

button:active{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  border:2px solid transparent;
}

.btn-primary:hover{
  background:linear-gradient(135deg, #003d7a, #002955);
  box-shadow:0 8px 25px rgba(0,89,179,0.4);
  color:white;
}

.btn-large{
  background:linear-gradient(135deg, #ffffff, #f0f7ff);
  color:#0059b3;
  padding:18px 50px;
  font-size:18px;
  font-weight:700;
  box-shadow:0 6px 20px rgba(255,255,255,0.3);
}

.btn-large:hover{
  background:linear-gradient(135deg, #f0f7ff, #e0efff);
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(255,255,255,0.4);
}

/* =========================
HOME INTRO
========================= */

.home-intro{
  padding:60px 5%;
  text-align:center;
}

.home-intro h2{
  color:#0059b3;
  font-size:clamp(32px, 7vw, 50px);
  margin-bottom:30px;
  font-weight:700;
}

.home-intro p{
  max-width:900px;
  margin:auto;
  line-height:2;
  font-size:clamp(14px, 3vw, 18px);
  color:#555;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* =========================
GENERAL PAGE SECTION
========================= */

.page-section{
  padding:50px 5%;
  text-align:center;
  position: relative;
  background:linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)), url('logo,jpg/logo.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.page-section::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,89,179,0.02), transparent);
  pointer-events: none;
}

.page-section h1{
  color:#0059b3;
  font-size:clamp(32px, 7vw, 50px);
  margin-bottom:40px;
  font-weight:700;
  position: relative;
  display: inline-block;
}

.page-section h1::after{
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0059b3, #4da6ff);
  border-radius: 2px;
}

.page-section p{
  max-width:900px;
  margin:auto;
  line-height:2;
  margin-bottom:20px;
  font-size:clamp(14px, 3vw, 18px);
  color:#555;
  word-wrap:break-word;
}

/* =========================
CARDS
========================= */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;
  justify-content:center;
  margin-top:50px;
  padding:0 5%;
}

.card:nth-child(1){
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.card:nth-child(2){
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.card:nth-child(3){
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.card:nth-child(4){
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.card:nth-child(5){
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.card:nth-child(6){
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.card{
  width:100%;
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:35px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(0,89,179,0.05);
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:center;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

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

.card-icon{
  font-size:52px;
  color:#0059b3;
  margin-bottom:20px;
  display:inline-block;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.card:hover .card-icon{
  transform:scale(1.1) rotate(5deg);
}

.card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(0,89,179,0.15);
  border-color:rgba(0,89,179,0.2);
}

.card h3{
  color:#0059b3;
  margin-bottom:15px;
  font-size:clamp(18px, 4vw, 24px);
  word-break:break-word;
}

.card p{
  line-height:1.8;
  color:#555;
  font-size:14px;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.package{
  color:#0059b3;
  font-weight:700;
  font-size:16px;
  margin-bottom:10px !important;
}

.review{
  font-style:italic;
  color:#555;
}

.testimonial-image{
  width:100%;
  max-width:280px;
  height:280px;
  border-radius:15px;
  object-fit:cover;
  margin-bottom:25px;
  border:none;
}

.university{
  color:#0059b3;
  font-weight:600;
  font-size:14px;
  margin-bottom:5px !important;
}

/* =========================
WHY US
========================= */

.why-us{
  padding:50px 5%;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  text-align:center;
  position: relative;
}

.why-us::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,89,179,0.02), transparent);
  pointer-events: none;
}

.section-title{
  margin-bottom:40px;
}

.section-title h2{
  color:#0059b3;
  font-size:clamp(36px, 7vw, 52px);
  margin-bottom:25px;
  font-weight:700;
  position: relative;
  display: inline-block;
  letter-spacing:-0.5px;
}

.section-title h2::after{
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0059b3, #4da6ff);
  border-radius: 2px;
}

.section-title p{
  color:#666;
  font-size:clamp(17px, 3vw, 19px);
  max-width:800px;
  margin: 30px auto 0;
  font-style:italic;
  line-height:1.8;
  font-weight:400;
}

.why-us h2{
  color:#0059b3;
  font-size:clamp(28px, 6vw, 40px);
  margin-bottom:40px;
  font-weight:700;
  position: relative;
  display: inline-block;
}

.why-us h2::after{
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0059b3, #4da6ff);
  border-radius: 2px;
}

/* =========================
TESTIMONIALS
========================= */

.testimonials{
  padding:60px 5%;
  text-align:center;
}

.testimonials h2{
  color:#0059b3;
  font-size:clamp(32px, 7vw, 50px);
  margin-bottom:20px;
  font-weight:700;
}

.testimonial-text{
  margin-bottom:50px;
  font-size:clamp(14px, 3vw, 18px);
  color:#555;
}

.testimonial-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
  justify-content:center;
}

.testimonial-card:nth-child(1){
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.testimonial-card:nth-child(2){
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.testimonial-card:nth-child(3){
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.testimonial-card:nth-child(4){
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.testimonial-card:nth-child(5){
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.testimonial-card:nth-child(6){
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.testimonial-card{
  width:100%;
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:35px;
  border-radius:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align:center;
  border:2px solid rgba(0,89,179,0.05);
  position:relative;
  overflow:hidden;

  /* alignment stability (desktop + mobile) */
  display:flex;
  flex-direction:column;
  align-items:center;
}

.testimonial-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.testimonial-card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(0,89,179,0.15);
  border-color:rgba(0,89,179,0.2);
}

.testimonial-avatar{
  font-size:60px;
  color:#0059b3;
  margin-bottom:15px;
  opacity:0.8;
  transition:transform 0.3s ease;

  /* keep avatar centered */
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.testimonial-avatar img{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #0059b3;
  box-shadow:0 4px 15px rgba(0,89,179,0.2);
  transition:all 0.3s ease;
  max-width:100%;
  display:block;
}

.testimonial-card:hover .testimonial-avatar img{
  transform:scale(1.1);
  border-color:#4da6ff;
  box-shadow:0 6px 20px rgba(0,89,179,0.3);
}

.testimonial-card:hover .testimonial-avatar{
  transform:scale(1.1);
  opacity:1;
}

.testimonial-card h3{
  color:#0059b3;
  margin-bottom:10px;
  font-size:clamp(16px, 4vw, 20px);
  font-weight:700;
}

/* =========================
ABOUT US PAGE
========================= */

.about-intro{
  max-width:900px;
  margin:0 auto 40px;
  text-align:center;
}

.about-intro h2{
  color:#0059b3;
  font-size:32px;
  margin-bottom:20px;
  font-weight:700;
}

.about-intro p{
  font-size:15px;
  color:#555;
  line-height:1.6;
  margin-bottom:15px;
}

.stats-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  margin-bottom:50px;
  text-align:center;
}

.stat{
  padding:30px;
  background:white;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.stat h3{
  color:#0059b3;
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;
}

.stat p{
  color:#666;
  font-size:16px;
  line-height:1.6;
}

.why-intro{
  text-align:center;
  margin-bottom:50px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.why-intro h3{
  color:#0059b3;
  font-size:32px;
  margin-bottom:15px;
  font-weight:600;
}

.why-intro p{
  font-size:17px;
  color:#555;
  line-height:1.8;
}

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

.benefit-card:nth-child(1){
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.benefit-card:nth-child(2){
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.benefit-card:nth-child(3){
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.benefit-card:nth-child(4){
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.benefit-card:nth-child(5){
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.benefit-card:nth-child(6){
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.benefit-card{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(0,89,179,0.05);
  position:relative;
  overflow:hidden;
}

.benefit-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.benefit-card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(0,89,179,0.15);
  border-color:rgba(0,89,179,0.2);
}

.benefit-card i{
  font-size:48px;
  color:#0059b3;
  margin-bottom:20px;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.benefit-card:hover i{
  transform:scale(1.1) rotate(5deg);
}

.benefit-card h3{
  color:#0059b3;
  font-size:22px;
  margin-bottom:15px;
  font-weight:600;
}

.benefit-card p{
  color:#666;
  font-size:15px;
  line-height:1.8;
}

.country-flags{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #e0e0e0;
}

.country-flags span{
  font-size:14px;
  color:#0059b3;
  font-weight:600;
}

.headquarters-info{
  text-align:center;
  padding:40px;
  background:linear-gradient(135deg,#f0f7ff,#ffffff);
  border-radius:12px;
  border-left:5px solid #0059b3;
  margin-top:50px;
}

.headquarters-info h3{
  color:#0059b3;
  font-size:24px;
  margin-bottom:15px;
  font-weight:600;
}

.headquarters-info p{
  color:#666;
  font-size:16px;
  line-height:1.8;
}

.about-cta-section{
  background:linear-gradient(135deg,#003366,#0059b3);
  color:white;
  padding:50px 8%;
  text-align:center;
  border-radius:15px;
  margin-top:50px;
}

.about-cta-section h2{
  font-size:42px;
  margin-bottom:25px;
  font-weight:700;
}

.about-cta-section p{
  font-size:17px;
  line-height:1.9;
  max-width:900px;
  margin:0 auto 20px;
}

.about-cta-button{
  display:inline-block;
  background:white;
  color:#0059b3;
  padding:15px 45px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition:0.3s;
  margin-top:30px;
}

.about-cta-button:hover{
  background:#f0f7ff;
  transform:translateY(-3px);
}

/* =========================
ABOUT US RESPONSIVE
========================= */

@media(max-width:768px){

  .about-intro h2{
    font-size:32px;
  }

  .about-intro p{
    font-size:15px;
  }

  .stats-section{
    gap:20px;
  }

  .stat h3{
    font-size:20px;
  }

  .why-intro h3{
    font-size:24px;
  }

  .benefit-card{
    padding:25px 20px;
  }

  .benefit-card h3{
    font-size:18px;
  }

  .about-cta-section{
    padding:60px 8%;
  }

  .about-cta-section h2{
    font-size:32px;
  }

  .about-cta-section p{
    font-size:15px;
  }

}

/* =========================
SERVICES PAGE
========================= */

.services-intro{
  text-align:center;
  margin-bottom:60px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.services-intro h2{
  color:#0059b3;
  font-size:38px;
  margin-bottom:20px;
  font-weight:600;
}

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

.services-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:20px;
}

.service-card:nth-child(1){
  animation: fadeInUp 0.6s ease-out 0.1s both;
}

.service-card:nth-child(2){
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.service-card:nth-child(3){
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.service-card:nth-child(4){
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.service-card:nth-child(5){
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.service-card:nth-child(6){
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.service-card{
  background:white;
  padding:14px;
  border-radius:12px;
  box-shadow:0 5px 18px rgba(0,0,0,0.06);
  transition:0.2s;
  position:relative;
  border:1px solid rgba(0,0,0,0.04);
}

.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 10px 35px rgba(0,0,0,0.12);
}

.service-card.popular{
  border:2px solid #0059b3;
  background:linear-gradient(135deg,#f0f7ff,#ffffff);
}

.service-card.high-impact{
  border:2px solid #00a86b;
}

.service-card.complete-package{
  border:2px solid #ff6b35;
}

.service-badge{
  display:inline-block;
  background:#0059b3;
  color:white;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:15px;
}

.service-card.high-impact .service-badge{
  background:#00a86b;
}

.service-card.complete-package .service-badge{
  background:#ff6b35;
}

.service-card h3{
  color:#0059b3;
  font-size:16px;
  margin:8px 0 4px 0;
  font-weight:700;
}

.service-tagline{
  color:#0059b3;
  font-weight:600;
  font-size:13px;
  margin-bottom:6px !important;
}

.service-description{
  color:#555;
  font-size:14px;
  line-height:1.4;
  margin-bottom:12px !important;
}

.service-features{
  list-style:none;
  margin-bottom:8px;
  padding:0;
}

.service-features li{
  color:#666;
  font-size:12px;
}

/* =========================
DOWNLOAD MODAL
========================= */

.modal{
  display:none;
  position:fixed;
  z-index:10000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.75);
  backdrop-filter:blur(5px);
  align-items:center;
  justify-content:center;
  animation:fadeIn 0.3s ease;
}

.modal-content{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  border-radius:20px;
  padding:40px;
  max-width:500px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 25px 50px rgba(0,0,0,0.25);
  animation:slideIn 0.3s ease;
}

@keyframes slideIn{
  from{
    opacity:0;
    transform:translateY(-50px) scale(0.9);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.close-btn{
  position:absolute;
  top:20px;
  right:25px;
  font-size:32px;
  font-weight:bold;
  color:#666;
  cursor:pointer;
  transition:all 0.3s ease;
  line-height:1;
}

.close-btn:hover{
  color:#0059b3;
  transform:rotate(90deg);
}

.modal-content h2{
  color:#0059b3;
  font-size:28px;
  margin-bottom:10px;
  font-weight:700;
}

.modal-content h2 i{
  margin-right:10px;
}

.modal-content > p{
  color:#666;
  font-size:15px;
  margin-bottom:25px;
  line-height:1.6;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  color:#0059b3;
  font-weight:600;
  font-size:14px;
  margin-bottom:8px;
}

.form-group input,
.form-group select{
  width:100%;
  padding:12px 15px;
  border:2px solid #e0e0e0;
  border-radius:8px;
  font-size:14px;
  font-family:'Poppins',sans-serif;
  transition:all 0.3s ease;
  background:#ffffff;
}

.form-group input:focus,
.form-group select:focus{
  outline:none;
  border-color:#0059b3;
  box-shadow:0 0 0 3px rgba(0,89,179,0.1);
}

.form-group input::placeholder{
  color:#aaa;
}

.form-group.checkbox-group label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
  font-size:13px;
  color:#555;
  cursor:pointer;
}

.form-group.checkbox-group input[type="checkbox"]{
  width:auto;
  margin-top:3px;
  cursor:pointer;
}

.submit-btn{
  width:100%;
  padding:15px 30px;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  border:none;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.submit-btn:hover{
  background:linear-gradient(135deg, #003d7a, #002955);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,89,179,0.3);
}

.submit-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}

.form-message{
  margin-top:15px;
  padding:12px;
  border-radius:8px;
  font-size:14px;
  text-align:center;
  animation:fadeIn 0.3s ease;
}

.form-message.success{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}

.form-message.warning{
  background:#fff3cd;
  color:#856404;
  border:1px solid #ffeaa7;
}

.form-message.error{
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
}

/* Responsive Modal */
@media(max-width:768px){
  .modal-content{
    padding:25px 20px;
    width:95%;
    max-width:95%;
    margin:10px;
  }
  
  .modal-content h2{
    font-size:22px;
  }
  
  .modal-content > p{
    font-size:14px;
    margin-bottom:20px;
  }
  
  .close-btn{
    font-size:28px;
    top:15px;
    right:20px;
  }
  
  .form-group{
    margin-bottom:15px;
  }
  
  .form-group label{
    font-size:13px;
  }
  
  .form-group input,
  .form-group select{
    padding:10px 12px;
    font-size:13px;
  }
  
  .submit-btn{
    padding:12px 20px;
    font-size:15px;
  }
  
  .form-message{
    font-size:13px;
    padding:10px;
  }
}

@media(max-width:480px){
  .modal-content{
    padding:20px 15px;
    width:98%;
    margin:5px;
  }
  
  .modal-content h2{
    font-size:20px;
  }
  
  .modal-content > p{
    font-size:13px;
  }
  
  .close-btn{
    font-size:24px;
    top:12px;
    right:15px;
  }
  
  .form-group input,
  .form-group select{
    padding:8px 10px;
    font-size:12px;
  }
  
  .submit-btn{
    padding:10px 15px;
    font-size:14px;
  }
}

.service-features li{
  padding:3px 0;
  line-height:1.4;
  border-bottom:1px solid #f5f5f5;
}

.service-features li:last-child{
  border-bottom:none;
}

.service-regions{
  display:flex;
  gap:20px;
  margin-bottom:20px;
  padding:15px 0;
}

.region{
  font-size:14px;
  color:#0059b3;
  font-weight:600;
}

.service-link{
  display:inline-block;
  color:#0059b3;
  font-weight:600;
  text-decoration:none;
  font-size:13px;
  transition:0.2s;
}

.service-link:hover{
  color:#003366;
  transform:translateX(3px);
}

.services-cta{
  text-align:center;
  padding:50px 40px;
  background:linear-gradient(135deg,#003366,#0059b3);
  color:white;
  border-radius:15px;
}

.services-cta p{
  font-size:18px;
  margin-bottom:25px;
  line-height:1.8;
}

.cta-button{
  display:inline-block;
  background:white;
  color:#0059b3;
  padding:15px 45px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition:0.3s;
}

.cta-button:hover{
  background:#f0f7ff;
  transform:translateY(-3px);
}

/* =========================
QUICK CONTACT SECTION
========================= */

.quick-contact-section{
  padding:80px 8%;
  text-align:center;
  background:linear-gradient(135deg, #003366, #0059b3);
  color:white;
  border-radius:15px;
  margin-top:60px;
}

.quick-contact-section h2{
  font-size:42px;
  margin-bottom:15px;
  font-weight:700;
}

.quick-contact-section > p{
  font-size:18px;
  margin-bottom:50px;
  opacity:0.95;
}

.contact-options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;
  max-width:1000px;
  margin:0 auto;
}

.contact-option{
  background:rgba(255,255,255,0.12);
  padding:45px;
  border-radius:16px;
  backdrop-filter:blur(15px);
  border:2px solid rgba(255,255,255,0.2);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.contact-option::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #4da6ff, #0059b3, #4da6ff);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.contact-option:hover{
  background:rgba(255,255,255,0.18);
  transform:translateY(-8px);
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
  border-color:rgba(255,255,255,0.3);
}

.contact-option i{
  font-size:48px;
  margin-bottom:15px;
  background:linear-gradient(135deg, #4da6ff, #ffffff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.contact-option:hover i{
  transform:scale(1.1) rotate(5deg);
}

.contact-option h3{
  font-size:24px;
  margin-bottom:12px;
  font-weight:600;
}

.contact-option p{
  font-size:14px;
  margin-bottom:20px;
  opacity:0.9;
}

.contact-link{
  display:inline-block;
  background:white;
  color:#0059b3;
  padding:12px 30px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  transition:all 0.3s ease;
}

.contact-link:hover{
  background:#f0f7ff;
  transform:scale(1.05);
}

.small-text{
  font-size:12px;
  opacity:0.7;
  margin-top:10px !important;
}

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

@media(max-width:768px){

  .services-intro h2{
    font-size:28px;
  }

  .services-intro p{
    font-size:16px;
  }

  .services-grid{
    gap:20px;
  }

  .service-card{
    padding:30px 20px;
  }

  .service-card h3{
    font-size:22px;
  }

  .services-cta{
    padding:40px 20px;
  }

  .services-cta p{
    font-size:16px;
  }

  .quick-contact-section{
    padding:50px 20px;
    margin-top:40px;
  }

  .quick-contact-section h2{
    font-size:28px;
  }

  .quick-contact-section > p{
    font-size:16px;
  }

  .contact-options{
    gap:20px;
  }

  .contact-option{
    padding:30px 20px;
  }

}

.intro-section{
  margin-bottom:60px;
  padding:40px;
  background:linear-gradient(135deg,#f0f7ff,#ffffff);
  border-radius:15px;
  border-left:5px solid #0059b3;
}

.intro-section h2{
  color:#0059b3;
  font-size:32px;
  margin-bottom:15px;
  font-weight:600;
}

.intro-text{
  font-size:20px;
  font-style:italic;
  color:#0059b3;
  margin-bottom:20px;
  font-weight:500;
}

.intro-description{
  font-size:16px;
  font-style:italic;
  color:#555;
  line-height:1.8;
  margin-bottom:15px;
  font-family:'Georgia','Garamond',serif;
}

/* =========================
FOOTER
========================= */

footer{
  background:linear-gradient(135deg, #001933, #003366);
  color:white;
  padding:80px 5% 30px;
  position:relative;
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.footer-content{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:50px;
  max-width:1200px;
  margin:0 auto 50px;
}

.footer-col{
  flex:1;
  min-width:250px;
  animation:fadeIn 0.8s ease-out;
}

.footer-col:nth-child(2){
  animation-delay:0.2s;
}

.footer-col:nth-child(3){
  animation-delay:0.4s;
}

.footer-content h3{
  margin-bottom:25px;
  font-size:clamp(18px, 4vw, 20px);
  font-weight:700;
  color:#cce6ff;
  position:relative;
  padding-bottom:15px;
}

.footer-content h3::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:50px;
  height:3px;
  background:linear-gradient(90deg, #4da6ff, #0059b3);
  border-radius:2px;
}

.footer-content p{
  margin-bottom:12px;
  font-size:clamp(14px, 2vw, 15px);
  line-height:1.8;
  color:rgba(255,255,255,0.85);
}

.contact-info p{
  margin-bottom:10px;
  font-size:clamp(14px, 2vw, 15px);
  line-height:1.8;
  color:rgba(255,255,255,0.85);
  transition:transform 0.3s ease;
}

.contact-info p:hover{
  transform:translateX(5px);
}

.contact-info i{
  margin-right:10px;
  color:#4da6ff;
  font-size:16px;
}

.social-text{
  color:rgba(255,255,255,0.9);
  font-weight:600;
  margin-top:15px;
  margin-bottom:5px;
  font-size:clamp(14px, 2vw, 15px);
}

.social-links-text{
  color:rgba(255,255,255,0.8);
  font-size:clamp(13px, 2vw, 14px);
}

.social-links-text a{
  color:#4da6ff;
  text-decoration:none;
  transition:all 0.3s ease;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.social-links-text a:hover{
  color:white;
  text-decoration:underline;
}

.social-links-text a i{
  font-size:16px;
}

.footer-content ul{
  list-style:none;
}

.footer-content ul li{
  margin-bottom:12px;
}

.footer-content ul li a{
  color:rgba(255,255,255,0.85);
  transition:all 0.3s ease;
  display:inline-block;
}

.footer-content ul li a:hover{
  color:#4da6ff;
  transform:translateX(5px);
}

.footer-content ul li a i{
  margin-right:8px;
  color:#4da6ff;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:30px;
  text-align:center;
}

.footer-bottom p{
  color:rgba(255,255,255,0.7);
  font-size:clamp(13px, 2vw, 14px);
}

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

/* =========================
RESPONSIVE MEDIA QUERIES
========================= */

@media(max-width:1024px){
  nav{
    padding:15px 5%;
  }
  
  .logo-section img{
    width:100px;
  }
  
  nav ul{
    gap:20px;
  }
  
  nav a{
    font-size:14px;
  }
}

@media(max-width:768px){
  
  /* NAV */
  nav{
    flex-direction:column;
    gap:15px;
    padding:15px 5%;
  }

  /* =========================
  SERVICES (MOBILE FIX)
  - services.html uses inline grid-template-columns: repeat(3,...)
  - enforce single-column + tighten card typography on phones/tablets
  ========================== */

  /* Force single column even when inline styles exist */
  .services-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-bottom:0 !important;
  }

  .service-card{
    padding:20px 16px !important;
    border-radius:12px !important;
  }

  .service-icon{
    font-size:42px !important;
    margin-bottom:10px !important;
  }

  .service-card h3{
    font-size:18px !important;
    margin:6px 0 2px 0 !important;
  }

  .service-tagline{
    font-size:12px !important;
    margin-bottom:6px !important;
  }

  .service-features{
    margin-bottom:10px !important;
  }

  .service-features li{
    font-size:12px !important;
    padding:2px 0 !important;
  }

  .service-link{
    font-size:12px !important;
    padding:8px 0 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
  }

  nav ul{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
  }

  .logo-section{
    width:100%;
    text-align:center;
  }

  .logo-section img{
    width:100px;
  }

  /* HERO */
  .hero{
    min-height:60vh;
    padding:30px 5%;
  }

  .hero-content h1{
    font-size:clamp(28px, 6vw, 42px);
  }

  .hero-content p{
    font-size:clamp(14px, 3vw, 16px);
  }

  /* BUTTONS */
  button{
    padding:12px 28px;
    font-size:14px;
  }

  /* SECTIONS */
  .home-intro,
  .page-section,
  .why-us,
  .testimonials{
    padding:40px 5%;
  }

  .page-section h1,
  .home-intro h2,
  .why-us h2,
  .testimonials h2{
    font-size:clamp(28px, 5vw, 38px);
    margin-bottom:25px;
  }

  .home-intro p,
  .page-section p{
    font-size:clamp(14px, 2.5vw, 16px);
  }

  /* CARDS */
  .cards{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 5%;
  }

  .card{
    width:100%;
    padding:25px 20px;
  }

  .card h3{
    font-size:clamp(16px, 4vw, 20px);
  }

  .card p{
    font-size:13px;
  }

  /* TESTIMONIALS */
  .testimonial-container{
    grid-template-columns:1fr;
    gap:20px;
  }

  .testimonial-card{
    width:100%;
    padding:25px 20px;
  }

  .testimonial-image{
    max-width:100%;
    height:auto;
  }

  /* ABOUT */
  .about-intro h2{
    font-size:clamp(28px, 5vw, 32px);
  }

  .about-intro p{
    font-size:clamp(14px, 2.5vw, 15px);
  }

  .stats-section{
    gap:20px;
  }

  .stat h3{
    font-size:clamp(18px, 3vw, 20px);
  }

  /* BENEFIT GRID */
  .benefits-grid{
    gap:20px;
  }

  .benefit-card{
    padding:25px 20px;
  }

  .benefit-card h3{
    font-size:clamp(16px, 4vw, 22px);
  }

  /* CONTACT */
  .contact-page{
    padding:40px 5%;
  }

  .contact-page h1{
    font-size:clamp(28px, 5vw, 36px);
  }

  .contact-page > p{
    font-size:clamp(14px, 2.5vw, 16px);
  }

  .contact-form{
    max-width:100%;
    padding:25px 20px;
  }

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

  .submit-btn{
    padding:12px;
    font-size:14px;
  }

  /* FOOTER */
  footer{
    padding:40px 5%;
  }

  .footer-content{
    gap:30px;
    flex-direction:column;
  }

  /* SERVICES */
  .services-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .service-card{
    padding:25px 20px;
  }

  .services-cta{
    padding:40px 5%;
  }

  /* QUICK CONTACT */
  .quick-contact-section{
    padding:40px 5%;
    margin-top:30px;
  }

  .quick-contact-section h2{
    font-size:clamp(24px, 5vw, 28px);
  }

  .contact-options{
    grid-template-columns:1fr;
    gap:20px;
  }

  .contact-option{
    padding:25px 20px;
  }
}

@media(max-width:480px){
  
  nav{
    padding:12px 4%;
  }

  nav ul{
    gap:10px;
  }

  nav a{
    font-size:12px;
    padding:6px 8px;
  }

  .logo-section img{
    width:80px;
  }

  .hero{
    min-height:50vh;
    padding:20px 4%;
  }

  .hero-content h1{
    font-size:clamp(24px, 5vw, 36px);
  }

  .home-intro,
  .page-section,
  .why-us,
  .testimonials,
  .contact-page{
    padding:30px 4%;
  }

  button{
    padding:10px 20px;
    font-size:13px;
  }

  .card h3{
    font-size:clamp(15px, 4vw, 18px);
  }

  .card p{
    font-size:12px;
  }

  .contact-form{
    padding:20px 15px;
  }

  .submit-btn{
    padding:11px;
    font-size:13px;
  }

  footer{
    padding:30px 4%;
  }

  .quick-contact-section{
    padding:30px 4%;
  }

  .contact-option{
    padding:20px 15px;
  }
}

/* =========================
PRICING PAGE
========================= */

.pricing-page{
  padding:100px 8%;
  text-align:center;
  background:#f4f8ff;
}

.pricing-page h1{
  color:#0059b3;
  font-size:50px;
  margin-bottom:15px;
}

.pricing-subtitle{
  font-size:18px;
  color:#666;
  margin-bottom:60px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

.pricing-container{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:50px;
}

.pricing-card{
  width:280px;
  background:white;
  padding:40px 30px;
  border-radius:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  transition:0.3s;
  position:relative;
  border:2px solid transparent;
}

.pricing-card:hover{
  transform:translateY(-10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.pricing-card.featured-plan{
  border:2px solid #0059b3;
  transform:scale(1.05);
  background:linear-gradient(135deg,#f0f7ff,#ffffff);
}

.pricing-card.featured-plan:hover{
  transform:scale(1.05) translateY(-10px);
}

.popular-tag{
  background:#0059b3;
  color:white;
  padding:8px 16px;
  border-radius:30px;
  font-size:12px;
  font-weight:600;
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  text-transform:uppercase;
  letter-spacing:1px;
}

.pricing-card h2{
  color:#0059b3;
  font-size:24px;
  margin:20px 0 15px 0;
}

.pricing-card .price{
  font-size:42px;
  color:#0059b3;
  font-weight:700;
  margin:15px 0;
}

.pricing-card span{
  display:block;
  color:#999;
  font-size:14px;
  margin-bottom:25px;
}

.pricing-card ul{
  text-align:left;
  margin-bottom:30px;
  list-style:none;
}

.pricing-card ul li{
  padding:10px 0;
  color:#555;
  font-size:15px;
  line-height:1.6;
  border-bottom:1px solid #f0f0f0;
}

.pricing-card ul li:last-child{
  border-bottom:none;
}

.pricing-card button{
  width:100%;
  padding:12px;
  background:#0059b3;
  color:white;
  font-weight:600;
  border-radius:8px;
  transition:0.3s;
  border:2px solid #0059b3;
}

.pricing-card button:hover{
  background:white;
  color:#0059b3;
  transform:none;
}

.pricing-note{
  color:#999;
  font-size:14px;
  margin-top:40px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.8;
}

/* =========================
FAQ SECTION
========================= */

.faq-section.pricing-cta{
  padding:100px 5%;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  text-align:center;
  color:white;
}

.faq-section h2{
  color:#0059b3;
  font-size:50px;
  margin-bottom:60px;
}

.faq-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:30px;
  max-width:1200px;
  margin:0 auto;
}

.faq-box{
  background:#f9f9f9;
  padding:35px;
  border-radius:12px;
  text-align:left;
  transition:0.3s;
  border-left:4px solid #0059b3;
}

.faq-box:hover{
  background:#f0f7ff;
  box-shadow:0 5px 15px rgba(0,89,179,0.1);
}

.faq-box h3{
  color:#0059b3;
  margin-bottom:15px;
  font-size:18px;
}

.faq-box p{
  color:#666;
  line-height:1.8;
  font-size:15px;
}

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

.pricing-cta{
  padding:80px 8%;
  background:linear-gradient(135deg,#003366,#0059b3);
  color:white;
  text-align:center;
}

.pricing-cta h2{
  font-size:45px;
  margin-bottom:25px;
}

.pricing-cta p{
  font-size:18px;
  margin-bottom:35px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.8;
}

.pricing-cta button{
  background:white;
  color:#0059b3;
  font-size:17px;
  padding:15px 45px;
}

.pricing-cta button:hover{
  background:#f0f7ff;
  transform:translateY(-3px);
}

.pricing-cta a{
  display:inline-block;
}

/* =========================
  CONTACT PAGE
  ========================= */

  .contact-page{
    padding:60px 5%;
    text-align:center;
    background:linear-gradient(135deg, #f4f8ff 0%, #e8f4ff 100%);
    min-height:100vh;
  }

  .contact-page h1{
    color:#0059b3;
    font-size:clamp(28px, 6vw, 50px);
    margin-bottom:15px;
    font-weight:700;
  }

  .contact-page > p{
    color:#666;
    font-size:clamp(14px, 3vw, 18px);
    margin-bottom:40px;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    word-wrap:break-word;
  }

  .contact-form{
    max-width:700px;
    margin:0 auto 40px;
    background:linear-gradient(145deg, #ffffff, #f8fbff);
    padding:45px;
    border-radius:18px;
    box-shadow:0 15px 50px rgba(0,89,179,0.15);
    border:2px solid rgba(0,89,179,0.1);
    animation:slideUp 0.6s ease-out;
    position:relative;
    overflow:hidden;
  }

  .contact-form::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
    background-size:200% 100%;
    animation:gradientMove 3s linear infinite;
  }

  @keyframes slideUp {
    from {
      opacity:0;
      transform:translateY(30px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }

  .form-group{
    margin-bottom:22px;
    text-align:left;
  }

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

  .contact-form label{
    display:block;
    color:#0059b3;
    font-weight:600;
    font-size:clamp(12px, 2vw, 14px);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.5px;
  }

  .contact-form input,
  .contact-form textarea{
    width:100%;
    padding:16px 18px;
    border:2px solid #e0e0e0;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    font-size:clamp(13px, 2vw, 15px);
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color:#333;
    background:linear-gradient(145deg, #f9f9f9, #ffffff);
    box-sizing:border-box;
  }

  .contact-form input:focus,
  .contact-form textarea:focus{
    outline:none;
    border-color:#0059b3;
    background:white;
    box-shadow:0 0 0 4px rgba(0,89,179,0.1), 0 4px 12px rgba(0,89,179,0.15);
    transform:translateY(-2px);
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder{
    color:#bbb;
  }

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

  .submit-btn{
    width:100%;
    padding:18px;
    background:linear-gradient(135deg, #0059b3, #003d7a);
    color:white;
    font-weight:700;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:clamp(14px, 2vw, 16px);
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow:0 6px 20px rgba(0,89,179,0.3);
    position:relative;
    overflow:hidden;
  }

  .submit-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition:left 0.5s;
  }

  .submit-btn:hover::before{
    left:100%;
  }

  .submit-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,89,179,0.4);
    background:linear-gradient(135deg, #003d7a, #002955);
  }

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

  .submit-btn:disabled{
    opacity:0.7;
    cursor:not-allowed;
  }

  .form-status{
    margin-top:18px;
    padding:14px 18px;
    border-radius:8px;
    font-weight:600;
    display:none;
    animation:slideDown 0.3s ease-out;
    font-size:clamp(13px, 2vw, 15px);
    word-wrap:break-word;
  }

  .form-status.success{
    display:block;
    background:#d4edda;
    color:#155724;
    border-left:4px solid #28a745;
  }

  .form-status.error{
    display:block;
    background:#f8d7da;
    color:#721c24;
    border-left:4px solid #dc3545;
  }

  @keyframes slideDown {
    from {
      opacity:0;
      transform:translateY(-10px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }

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

  @media(max-width:768px){

    .contact-page{
      padding:40px 5%;
    }

    .contact-page h1{
      font-size:clamp(24px, 5vw, 36px);
    }

    .contact-page > p{
      font-size:clamp(13px, 2.5vw, 16px);
      margin-bottom:30px;
    }

    .contact-form{
      padding:25px 20px;
      margin:0 auto 30px;
    }

    .form-group{
      margin-bottom:18px;
    }

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

    .contact-form input,
    .contact-form textarea{
      padding:12px;
      font-size:clamp(13px, 2vw, 14px);
    }

    .submit-btn{
      padding:12px;
      font-size:clamp(13px, 2vw, 15px);
    }

    .form-status{
      padding:12px 15px;
      font-size:clamp(12px, 2vw, 14px);
    }

  }

  @media(max-width:480px){
    
    .contact-page{
      padding:30px 4%;
    }

    .contact-page h1{
      font-size:clamp(22px, 4vw, 28px);
    }

    .contact-form{
      padding:20px 15px;
    }

    .contact-form label{
      font-size:clamp(11px, 1.5vw, 13px);
    }

    .contact-form input,
    .contact-form textarea{
      padding:10px;
      font-size:clamp(12px, 2vw, 13px);
    }

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

    .submit-btn{
      padding:10px;
      font-size:clamp(12px, 2vw, 14px);
    }

    .pricing-subtitle{
      font-size:16px;
      margin-bottom:40px;
    }

    .pricing-container{
      gap:20px;
    }

    .pricing-card{
      width:100%;
      padding:35px 25px;
    }

    .pricing-card.featured-plan{
      transform:scale(1);
    }

    .pricing-card.featured-plan:hover{
      transform:translateY(-10px);
    }

    .faq-section{
      padding:60px 8%;
    }

    .faq-section h2{
      font-size:36px;
      margin-bottom:40px;
    }

    .faq-container{
      grid-template-columns:1fr;
      gap:20px;
    }

    .pricing-cta{
      padding:60px 8%;
    }

    .pricing-cta h2{
      font-size:32px;
    }

    .pricing-cta p{
      font-size:16px;
    }

  }
/* =========================
BLOG CARDS
========================= */

.blog-card{
  position:relative;
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  border:2px solid rgba(0,89,179,0.05);
}

.blog-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.blog-icon{
  font-size:56px;
  color:#0059b3;
  margin-bottom:20px;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.blog-card:hover .blog-icon{
  transform:scale(1.1) rotate(5deg);
}

.blog-date{
  display:inline-block;
  background:#0059b3;
  color:white;
  padding:5px 15px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  margin-bottom:15px;
  text-transform:uppercase;
}

.blog-excerpt{
  margin:15px 0 !important;
  color:#555;
  line-height:1.8;
}

.blog-meta{
  color:#999;
  font-size:13px;
  margin:10px 0 !important;
}

.read-more{
  display:inline-block;
  color:#0059b3;
  font-weight:600;
  text-decoration:none;
  margin-top:15px;
  transition:0.3s;
}

.read-more:hover{
  color:#003366;
  transform:translateX(5px);
}

/* =========================
SERVICE CARDS
========================= */

.service-icon{
  font-size:64px;
  color:#0059b3;
  margin-bottom:25px;
  display:inline-block;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.service-card:hover .service-icon{
  transform:scale(1.1) rotate(5deg);
}

.service-card{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(0,89,179,0.05);
  position:relative;
  overflow:hidden;
}

.service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.service-card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(0,89,179,0.15);
  border-color:rgba(0,89,179,0.2);
}

/* =========================
TESTIMONIAL AVATARS
========================= */

.testimonial-avatar{
  font-size:60px;
  color:#0059b3;
  margin-bottom:15px;
  opacity:0.7;
}

.testimonial-card{
  position:relative;
  padding-top:20px;
}

.testimonial-card h3{
  color:#ffc107;
  font-size:16px;
  margin:10px 0;
}

.testimonial-card h4{
  color:#0059b3;
  font-size:18px;
  margin:10px 0 5px;
  font-weight:700;
}

.review{
  font-style:italic;
  color:#555;
  margin:15px 0;
  line-height:1.8;
}

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

.about-preview-section{
  padding:80px 5%;
  background:linear-gradient(180deg, #f8fbff, #ffffff);
}

.about-preview-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}

.about-text h2{
  color:#0059b3;
  font-size:clamp(32px, 5vw, 48px);
  margin-bottom:20px;
  font-weight:700;
}

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

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

.stat-box{
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  padding:40px 30px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 12px 35px rgba(0,89,179,0.35);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(255,255,255,0.15);
  position:relative;
  overflow:hidden;
}

.stat-box::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.stat-box:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 40px rgba(0,89,179,0.15);
}

.stat-box h3{
  color:#0059b3;
  font-size:42px;
  font-weight:700;
  margin-bottom:10px;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.stat-box p{
  color:#666;
  font-size:15px;
  font-weight:500;
}

/* =========================
SOCIAL LINKS
========================= */

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

.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  border-radius:50%;
  font-size:20px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 15px rgba(0,89,179,0.3);
}

.social-links a:hover{
  background:linear-gradient(135deg, #4da6ff, #0059b3);
  transform:translateY(-5px) rotate(10deg);
  box-shadow:0 8px 25px rgba(0,89,179,0.4);
}

/* =========================
SMALL HEADER CONTENT
========================= */

.small-header-content{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40vh;
  text-align:center;
  z-index:2;
  position:relative;
}

.small-header-content h1{
  font-size:clamp(32px, 6vw, 60px);
  color:white;
  font-weight:700;
}

/* =========================
CONTAINER & UTILITIES
========================= */

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 5%;
  border:none;
}

.btn-secondary{
  display:inline-block;
  background:#0059b3;
  color:white;
  padding:12px 28px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:0.3s;
  border:none;
  cursor:pointer;
}

.btn-secondary:hover{
  background:#003366;
  transform:translateY(-2px);
}

.btn-large{
  display:inline-block;
  background:white;
  color:#0059b3;
  padding:15px 40px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition:0.3s;
  border:none;
  cursor:pointer;
}

.btn-large:hover{
  background:#f0f7ff;
  transform:translateY(-3px);
}

.card-icon{
  font-size:64px;
  color:#0059b3;
  margin-bottom:25px;
  display:inline-block;
}

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

.benefits-section{
  background:white;
}

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

.benefit-card{
  background:#f9fafb;
  padding:35px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  transition:0.3s;
  text-align:center;
  border:2px solid transparent;
}

.benefit-card:hover{
  transform:translateY(-8px);
  background:white;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border-color:#0059b3;
}

.benefit-card i{
  font-size:52px;
  color:#0059b3;
  margin-bottom:20px;
  display:block;
}

.benefit-card h3{
  color:#0059b3;
  font-size:22px;
  margin-bottom:15px;
  font-weight:600;
}

.benefit-card p{
  color:#666;
  font-size:15px;
  line-height:1.8;
}

/* =========================
HEADQUARTERS SECTION
========================= */

.headquarters-section{
  padding:40px 5%;
  text-align:center;
}

.headquarters-info{
  background:linear-gradient(135deg, #f0f7ff, #ffffff);
  padding:40px;
  border-radius:12px;
  border-left:5px solid #0059b3;
}

.headquarters-info h3{
  color:#0059b3;
  font-size:28px;
  margin-bottom:15px;
  font-weight:600;
}

.headquarters-info p{
  color:#666;
  font-size:16px;
  line-height:1.8;
  margin-bottom:20px;
}

/* =========================
RESPONSIVE BLOG & SERVICE
========================= */

@media(max-width:768px){
  .about-preview-content{
    grid-template-columns:1fr;
    gap:40px;
  }

  .about-stats{
    grid-template-columns:1fr;
  }

  .benefit-card{
    padding:25px 20px;
  }

  .blog-card{
    padding:25px 20px;
  }

  .service-card{
    padding:30px 20px;
  }
}

@media(max-width:480px){
  .about-preview-section{
    padding:40px 5%;
  }

  .stat-box{
    padding:20px;
  }

  .social-links{
    gap:10px;
  }

  .social-links a{
    width:35px;
    height:35px;
    font-size:16px;
  }
}


/* =========================
SERVICES INTRO
========================= */

.services-intro{
  text-align:center;
  margin-bottom:80px;
}

.services-cards{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:30px;
  margin-top:50px;
  justify-content:center;
  align-items:stretch;
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.service-card-horizontal{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.1);
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(0,89,179,0.08);
  position:relative;
  flex:1;
  min-width:320px;
  max-width:400px;
  display:flex;
  flex-direction:column;
  padding:40px 30px;
  text-align:center;
}

.service-card-horizontal::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.service-card-horizontal:hover{
  transform:translateY(-15px);
  box-shadow:0 25px 50px rgba(0,89,179,0.2);
  border-color:rgba(0,89,179,0.25);
}

.service-image{
  width:100%;
  height:220px;
  overflow:hidden;
  position:relative;
  background:#f0f0f0;
}

.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
  display:block;
}

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

.service-content{
  padding:0;
  text-align:center;
}

.service-content h3{
  color:#0059b3;
  font-size:24px;
  margin-bottom:15px;
  font-weight:700;
  letter-spacing:-0.3px;
}

.service-content p{
  color:#555;
  font-size:16px;
  line-height:1.8;
  margin-bottom:20px;
  font-weight:400;
}

.service-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0059b3;
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  transition:all 0.3s;
}

.service-link:hover{
  color:#003366;
  transform:translateX(5px);
}

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

.service-features{
  list-style:none;
  margin-bottom:25px;
  text-align:left;
}

.service-features li{
  color:#666;
  font-size:14px;
  padding:8px 0;
  line-height:1.6;
}

.service-features li i{
  color:#0059b3;
  margin-right:8px;
  font-size:12px;
}

.service-tagline{
  color:#0059b3;
  font-weight:600;
  font-size:15px;
  margin-bottom:10px !important;
}

.service-description{
  color:#555;
  font-size:15px;
  line-height:1.8;
  margin-bottom:20px !important;
}

.service-link{
  display:inline-block;
  color:#0059b3;
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  transition:0.3s;
}

.service-link:hover{
  color:#003366;
  transform:translateX(5px);
}

.cta-button{
  display:inline-block;
  background:white;
  color:#0059b3;
  padding:15px 45px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition:0.3s;
  border:none;
  cursor:pointer;
}

.cta-button:hover{
  background:#f0f7ff;
  transform:translateY(-3px);
}

/* =========================
NEWSLETTER SECTION
========================= */

.newsletter-section input{
  font-family:'Poppins', sans-serif;
}

.newsletter-section input::placeholder{
  color:#999;
}

/* =========================
RESOURCES SECTION
========================= */

.resources-section{
  background:linear-gradient(135deg, #f0f7ff, #ffffff);
}

.resources-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  margin-top:30px;
}

.resource-card{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:25px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(0,89,179,0.05);
  position:relative;
  overflow:hidden;
  text-align:center;
}

.resource-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.resource-card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(0,89,179,0.15);
  border-color:rgba(0,89,179,0.2);
}

.resource-icon{
  font-size:48px;
  color:#0059b3;
  margin-bottom:12px;
  display:inline-block;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:transform 0.3s ease;
}

.resource-card:hover .resource-icon{
  transform:scale(1.1) rotate(5deg);
}

.resource-card h3{
  color:#0059b3;
  font-size:18px;
  margin-bottom:10px;
  font-weight:600;
}

.resource-card p{
  color:#666;
  font-size:13px;
  line-height:1.6;
  margin-bottom:15px;
}

.download-btn{
  display:inline-block;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  padding:12px 28px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:all 0.3s;
  border:none;
  cursor:pointer;
}

.download-btn:hover{
  background:linear-gradient(135deg, #003d7a, #002955);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,89,179,0.3);
}

/* =========================
DOWNLOAD FORM SECTION
========================= */

.download-form-section{
  background:#f9fafb;
}

.download-form-container{
  max-width:600px;
  margin:0 auto;
}

.download-form-content{
  background:linear-gradient(145deg, #ffffff, #f8fbff);
  padding:50px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,0.1);
  border:2px solid rgba(0,89,179,0.1);
  position:relative;
  overflow:hidden;
}

.download-form-content::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.download-form-content h3{
  color:#0059b3;
  font-size:28px;
  margin-bottom:15px;
  font-weight:700;
  text-align:center;
}

.download-form-content > p{
  color:#666;
  font-size:16px;
  text-align:center;
  margin-bottom:30px;
  line-height:1.6;
}

.download-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group label{
  color:#0059b3;
  font-weight:600;
  font-size:14px;
}

.form-group input{
  padding:15px 20px;
  border:2px solid rgba(0,89,179,0.2);
  border-radius:10px;
  font-size:15px;
  font-family:'Poppins', sans-serif;
  transition:all 0.3s;
  background:white;
}

.form-group input:focus{
  outline:none;
  border-color:#0059b3;
  box-shadow:0 0 0 3px rgba(0,89,179,0.1);
}

.form-group input::placeholder{
  color:#999;
}

.download-submit-btn{
  background:linear-gradient(135deg, #0059b3, #003d7a);
  color:white;
  padding:18px 30px;
  border-radius:10px;
  font-size:16px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:all 0.3s;
  margin-top:10px;
}

.download-submit-btn:hover{
  background:linear-gradient(135deg, #003d7a, #002955);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,89,179,0.3);
}

.form-note{
  text-align:center;
  color:#999;
  font-size:13px;
  margin-top:15px;
  font-style:italic;
}

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

.stat i{
    font-size:40px;
    color:#0059b3;
    margin-bottom:20px;
}

.stat h3{
    font-size:24px;
    color:#003366;
}

/* BENEFITS */

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

.benefit-card{
    background:white;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
}

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

.benefit-card i{
    font-size:40px;
    color:#0059b3;
    margin-bottom:20px;
}

.benefit-card h3{
    margin-bottom:15px;
    color:#003366;
}

/* LOCATION SECTION */

.headquarters-section{
    background:#003366;
    color:white;
    padding:80px 8%;
    text-align:center;
}

.headquarters-info h3{
    font-size:38px;
    margin-bottom:20px;
}

.headquarters-info p{
    font-size:18px;
    line-height:1.8;
}

.social-links{
    margin-top:30px;
}

.social-links a{
    color:white;
    font-size:22px;
    margin:0 12px;
    transition:0.3s;
}

.social-links a:hover{
    color:#4da6ff;
}

/* CTA */

.about-cta-section{
    background:linear-gradient(135deg,#0059b3,#003366);
    color:white;
    text-align:center;
    padding:90px 8%;
}

.about-cta-section h2{
    font-size:45px;
    margin-bottom:20px;
}

.about-cta-section p{
    font-size:20px;
    margin-bottom:35px;
}

.about-cta-button{
    background:white;
    color:#0059b3;
    padding:16px 40px;
    border:none;
    border-radius:10px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.about-cta-button:hover{
    transform:scale(1.05);
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.small-header{
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
  url("pexels-uriel-mont-6315191.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 60vh;
  color: white;
  position: relative;
  overflow: hidden;
}

.small-header::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,89,179,0.3), rgba(0,51,102,0.5));
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse{
  0%, 100%{
    opacity: 0.3;
  }
  50%{
    opacity: 0.5;
  }
}

.small-header nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(0,51,102,0.15);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:0;
  margin:0;
  box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-bottom:1px solid rgba(255,255,255,0.18);
}

.logo-section h2{
  font-size:32px;
  color:white;
}

.logo-section span{
  color:#4da6ff;
}

.small-header ul{
  display:flex;
  gap:25px;
  list-style:none;
}

.small-header ul li a{
  color:white;
  text-decoration:none;
  transition:0.3s;
}

.small-header ul li a:hover,
.small-header ul li a.active{
  color:#4da6ff;
}

.small-header button{
  background:#0059b3;
  color:white;
  border:none;
  padding:12px 28px;
  border-radius:8px;
  cursor:pointer;
}

/* video behind content */
.small-header .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.small-header-content{
  height:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:60px 20px;
  flex-direction:column;
  z-index:2;
}

.small-header-content h1{
  font-size:60px;
}

/* CONTACT HERO */

.contact-hero{
  padding:100px 0;
  background:#003366;
  color:white;
}

.contact-hero-inner{
  width:90%;
  max-width:1100px;
  margin:auto;
  text-align:center;
}

.contact-hero h2{
  font-size:55px;
  margin-bottom:20px;
}

.hero-sub{
  max-width:700px;
  margin:auto;
  margin-bottom:60px;
  font-size:18px;
}

/* CONTACT OPTIONS */

.contact-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.contact-option{
  background:rgba(255,255,255,0.08);
  padding:40px 30px;
  border-radius:18px;
  backdrop-filter:blur(10px);
}

.contact-option i{
  font-size:45px;
  margin-bottom:20px;
  color:#4da6ff;
}

.contact-option h3{
  margin-bottom:15px;
}

.contact-link{
  display:inline-block;
  margin-top:15px;
  color:#4da6ff;
  text-decoration:none;
}

/* FORM */

.contact-page{
  padding:100px 0;
}

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

.section-title h2{
  font-size:45px;
  color:#003366;
}

.contact-form{
  max-width:800px;
  margin:auto;
  background:white;
  padding:50px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.form-group{
  margin-bottom:25px;
}

.form-group label{
  display:block;
  margin-bottom:10px;
  font-weight:600;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:16px;
  border:1px solid #ddd;
  border-radius:10px;
}

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

.submit-btn{
  width:100%;
  padding:16px;
  background:#0059b3;
  color:white;
  border:none;
  border-radius:10px;
  font-size:17px;
  cursor:pointer;
}

/* FOOTER */

footer{
  background:linear-gradient(180deg, #001933, #000d1a);
  color:white;
  padding:80px 0 30px;
}

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

.footer-col h3{
  margin-bottom:25px;
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.3px;
}

.footer-col ul{
  list-style:none;
}

.footer-col ul li{
  margin-bottom:10px;
}

.footer-col a{
  color:#ddd;
  text-decoration:none;
  transition:all 0.3s;
  font-size:15px;
}

.footer-col a:hover{
  color:#4da6ff;
  transform:translateX(5px);
}

.footer-bottom{
  text-align:center;
  margin-top:50px;
  border-top:1px solid rgba(255,255,255,0.15);
  padding-top:30px;
  font-size:14px;
  color:rgba(255,255,255,0.8);
}

/* MOBILE */

@media(max-width:768px){
  nav{
    padding:12px 3%;
    margin:12px 3%;
    gap:12px;
  }

  .logo-section h2{
    font-size:24px;
  }

  nav ul{
    gap:12px;
  }

  nav a{
    font-size:13px;
    padding:6px 10px;
  }

  .nav-cta button{
    padding:8px 18px;
    font-size:12px;
  }

  .why-us-cards{
    flex-direction:column;
  }

  .services-cards{
    flex-direction:column;
  }

  .service-card-horizontal{
    min-width:100%;
    max-width:100%;
  }

  .service-image{
    height:180px;
  }

  .small-header nav{
    flex-direction:column;
    gap:20px;
  }

  .small-header ul{
    flex-wrap:wrap;
    justify-content:center;
  }

  .contact-hero h2,
  .small-header-content h1{
    font-size:38px;
  }

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

/* =========================
WHO WE ARE SECTION
========================= */

.who-we-are-section{
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    url('background.jpg/WHO WE ARE.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:60px 0;
  position:relative;
  overflow:hidden;
}

.who-we-are-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.who-we-are-content{
  max-width:900px;
  margin:0 auto;
}

.who-we-are-text h2{
  color:#003366;
  font-size:32px;
  font-weight:800;
  font-style:italic;
  margin-bottom:25px;
  letter-spacing:-0.5px;
  animation:fadeInUp 0.8s ease-out;
}

.who-we-are-text p{
  color:#444;
  font-size:16px;
  line-height:1.7;
  margin-bottom:18px;
  font-weight:600;
  font-style:italic;
  transition:all 0.3s ease;
  animation:fadeInUp 0.8s ease-out;
  animation-fill-mode:both;
}

.who-we-are-text p:nth-child(2){
  animation-delay:0.2s;
}

.who-we-are-text p:nth-child(3){
  animation-delay:0.4s;
}

.who-we-are-text p:nth-child(4){
  animation-delay:0.6s;
}

.who-we-are-text p:nth-child(5){
  animation-delay:0.8s;
}

.who-we-are-text p:nth-child(6){
  animation-delay:1s;
}

.who-we-are-text p:hover{
  text-shadow:0 0 20px rgba(77,166,255,0.9), 0 0 40px rgba(77,166,255,0.7);
  transition:all 0.3s ease;
  cursor:pointer;
}


.who-we-are-text .btn-secondary{
  margin-top:25px;
  animation:fadeInUp 0.8s ease-out 1.2s;
  animation-fill-mode:both;
  transition:all 0.3s ease;
}

.who-we-are-text .btn-secondary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,89,179,0.3);
}

@media(max-width:768px){
  .who-we-are-text h2{
    font-size:32px;
  }

  .who-we-are-text p{
    font-size:16px;
  }

  .who-we-are-text p:first-of-type{
    font-size:17px;
  }
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
EXPERIENCE SECTION
========================= */

.experience-section{
  padding:40px 0;
  background:#ffffff;
  position:relative;
  overflow:hidden;
  border:none;
}

.experience-content{
  max-width:1200px;
  margin:0 auto;
  border-bottom:none;
}

.experience-image{
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:contain;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,89,179,0.15);
  transition:transform 0.3s ease;
}

.experience-image:hover{
  transform:scale(1.02);
  box-shadow:0 15px 40px rgba(0,89,179,0.25);
}

@media(max-width:768px){
  .experience-section{
    padding:50px 0;
  }

  .experience-image{
    border-radius:15px;
  }
}

/* =========================
IMPACT CREATED SECTION
========================= */

.impact-section{
  padding:50px 0;
  background:linear-gradient(145deg, #f8fbff, #ffffff);
  position:relative;
  overflow:hidden;
}

.impact-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.impact-content{
  max-width:1000px;
  margin:0 auto 40px;
  text-align:center;
}

.impact-content h2{
  color:#003366;
  font-size:32px;
  font-weight:800;
  font-style:italic;
  margin-bottom:20px;
  font-family:'Georgia', serif;
}

.impact-content p{
  color:#444;
  font-size:16px;
  line-height:1.6;
  margin-bottom:15px;
  font-weight:500;
}

.impact-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
  max-width:1000px;
  margin:0 auto 40px;
}

.stat-card{
  background:white;
  padding:30px 20px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,89,179,0.1);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.stat-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.stat-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 60px rgba(0,89,179,0.2);
}

.stat-card i{
  font-size:40px;
  color:#0059b3;
  margin-bottom:15px;
}

.stat-card h3{
  color:#003366;
  font-size:36px;
  font-weight:800;
  margin-bottom:8px;
  font-family:'Poppins', sans-serif;
}

.stat-card p{
  color:#666;
  font-size:14px;
  font-weight:600;
  margin:0;
}

.impact-description{
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}

.impact-description p{
  color:#444;
  font-size:16px;
  line-height:1.6;
  font-weight:500;
  font-style:italic;
}

.companies-section{
  margin-top:60px;
  text-align:center;
}

.companies-section h3{
  color:#003366;
  font-size:28px;
  font-weight:800;
  font-style:italic;
  margin-bottom:40px;
  font-family:'Georgia', serif;
}

.companies-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:30px;
  max-width:1000px;
  margin:0 auto;
  align-items:center;
  justify-items:center;
}

.company-logo{
  max-width:120px;
  height:auto;
  opacity:1;
  transition:all 0.3s ease;
  filter:none;
}

.company-logo:hover{
  transform:scale(1.1);
}

@media(max-width:768px){
  .impact-section{
    padding:60px 0;
  }

  .impact-content h2{
    font-size:32px;
  }

  .impact-content p{
    font-size:16px;
  }

  .impact-stats{
    gap:20px;
  }

  .stat-card{
    padding:30px 20px;
  }

  .stat-card h3{
    font-size:36px;
  }
}

/* =========================
INDUSTRIES SECTION
========================= */

.industries-section{
  padding:50px 0;
  background:linear-gradient(145deg, #f8fbff, #ffffff);
  position:relative;
  overflow:hidden;
}

.industries-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.industries-content{
  max-width:1000px;
  margin:0 auto 40px;
  text-align:center;
}

.industries-content h2{
  color:#003366;
  font-size:32px;
  font-weight:800;
  font-style:italic;
  margin-bottom:20px;
  font-family:'Georgia', serif;
}

.industries-content p{
  color:#444;
  font-size:16px;
  line-height:1.6;
  margin-bottom:15px;
  font-weight:500;
}

.industries-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:25px;
  max-width:1200px;
  margin:0 auto;
}

.industry-card{
  background:white;
  padding:25px 20px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,89,179,0.1);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.industry-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.industry-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 40px rgba(0,89,179,0.2);
}

.industry-icon{
  width:60px;
  height:60px;
  background:linear-gradient(135deg, #0059b3, #003366);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
}

.industry-icon i{
  font-size:25px;
  color:white;
}

.industry-card h3{
  color:#003366;
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
  font-family:'Poppins', sans-serif;
}

.industry-card p{
  color:#666;
  font-size:14px;
  line-height:1.5;
  margin:0;
  font-weight:500;
}

@media(max-width:768px){
  .industries-section{
    padding:60px 0;
  }

  .industries-content h2{
    font-size:32px;
  }

  .industries-content p{
    font-size:16px;
  }

  .industries-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .industry-card{
    padding:30px 25px;
  }

  .industry-card h3{
    font-size:20px;
  }
}

/* =========================
HOW TO REACH OUT SECTION
========================= */

.reach-out-section{
  padding:80px 0;
  background:linear-gradient(145deg, #f8fbff, #ffffff);
  position:relative;
  overflow:hidden;
}

.reach-out-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.reach-out-content{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.reach-out-content h2{
  color:#003366;
  font-size:42px;
  font-weight:800;
  font-style:italic;
  margin-bottom:50px;
  font-family:'Georgia', serif;
}

.reach-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:30px;
}

.step-card{
  background:white;
  padding:30px 25px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,89,179,0.1);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  text-align:left;
}

.step-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.step-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 60px rgba(0,89,179,0.2);
}

.step-number{
  font-size:48px;
  font-weight:800;
  color:#0059b3;
  margin-bottom:15px;
  font-family:'Poppins', sans-serif;
  opacity:0.3;
}

.step-card h3{
  color:#003366;
  font-size:20px;
  font-weight:700;
  margin-bottom:15px;
  font-family:'Poppins', sans-serif;
}

.step-card p{
  color:#666;
  font-size:15px;
  line-height:1.6;
  margin:0;
  font-weight:500;
}

.contact-options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:25px;
  max-width:1000px;
  margin:40px auto 0;
}

.contact-option{
  background:white;
  padding:25px 20px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,89,179,0.1);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.contact-option::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.contact-option:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 40px rgba(0,89,179,0.2);
}

.contact-option i{
  font-size:50px;
  color:#0059b3;
  margin-bottom:20px;
}

.contact-icon{
  width:80px;
  height:80px;
  object-fit:contain;
  margin-bottom:15px;
}

.contact-option h3{
  color:#003366;
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  font-family:'Poppins', sans-serif;
}

.contact-option p{
  color:#666;
  font-size:14px;
  margin-bottom:15px;
  font-weight:500;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#0059b3;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  transition:all 0.3s ease;
}

.contact-link:hover{
  color:#003366;
  transform:translateX(5px);
}

@media(max-width:768px){
  .reach-out-section{
    padding:60px 0;
  }

  .reach-out-content h2{
    font-size:32px;
  }

  .reach-steps{
    grid-template-columns:1fr;
  }
}

/* =========================
MEET THE TEAM SECTION
========================= */

.meet-team-section{
  padding:60px 0;
  background:linear-gradient(145deg, #f8fbff, #ffffff);
  position:relative;
  overflow:hidden;
}

.meet-team-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, #0059b3, #4da6ff, #0059b3);
  background-size:200% 100%;
  animation:gradientMove 3s linear infinite;
}

.meet-team-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}

.team-text h2{
  color:#003366;
  font-size:32px;
  font-weight:800;
  font-style:italic;
  margin-bottom:20px;
  letter-spacing:-0.5px;
  text-align:left;
  font-family:'Georgia', serif;
}

.team-text h3{
  color:#003366;
  font-size:24px;
  font-weight:800;
  margin-bottom:20px;
  text-align:left;
  font-style:italic;
  font-family:'Georgia', serif;
}

.team-text p{
  color:#444;
  font-size:16px;
  line-height:1.7;
  margin-bottom:18px;
  font-weight:600;
  font-style:italic;
  text-align:justify;
}

.team-text p.quote{
  color:#000000;
  font-size:18px;
  font-style:italic;
  font-weight:700;
  text-align:left;
  margin-top:25px;
  margin-bottom:20px;
  font-family:'Poppins', sans-serif;
  line-height:1.4;
}

.signature{
  margin-top:20px;
  text-align:center;
  padding:10px;
}

.signature-image{
  max-width:300px;
  height:auto;
}

.team-image{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:15px;
}

.founder-image{
  width:100%;
  max-width:400px;
  height:auto;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,89,179,0.2);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.founder-image:hover{
  transform:scale(1.05);
  box-shadow:0 25px 70px rgba(0,89,179,0.3);
}

/* HAMBURGER MENU */
.hamburger{
  display:none;
  cursor:pointer;
  font-size:24px;
  color:white;
  padding:10px;
  z-index:1001;
  position:absolute;
  top:15px;
  left:15px;
}

/* RESPONSIVE DESIGN - MOBILE FIRST APPROACH */

/* Extra Small Screens (Small Mobile) */
@media(max-width:480px){
  body{
    padding-top:70px;
  }

  nav{
    padding:10px 3%;
  }

  .hamburger{
    display:block;
    position:absolute;
    top:15px;
    left:15px;
  }

  .logo-section{
    margin-left:50px;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(0,51,102,0.98);
    backdrop-filter:blur(30px);
    flex-direction:column;
    padding:20px;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
  }

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

  .nav-cta{
    display:none;
  }

  .logo-section h2{
    font-size:24px;
  }

  .container{
    padding:0 15px;
  }

  h1{
    font-size:28px;
  }

  h2{
    font-size:22px;
  }

  h3{
    font-size:18px;
  }

  p{
    font-size:14px;
  }

  .btn-primary, .btn-large{
    padding:12px 24px;
    font-size:14px;
  }

  .cards{
    grid-template-columns:1fr;
    gap:20px;
  }

  .counter{
    font-size:24px;
  }

  /* Mobile transition effects */
  .card, .service-card, .testimonial-card, .benefit-card{
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover, .service-card:hover, .testimonial-card:hover, .benefit-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
  }

  .btn-primary, .btn-large{
    transition:all 0.3s ease;
  }

  .btn-primary:hover, .btn-large:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,89,179,0.3);
  }
}

/* Small Screens (Mobile) */
@media(min-width:481px) and (max-width:767px){
  body{
    padding-top:70px;
  }

  nav{
    padding:12px 4%;
  }

  .hamburger{
    display:block;
    position:absolute;
    top:15px;
    left:15px;
  }

  .logo-section{
    margin-left:50px;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(0,51,102,0.98);
    backdrop-filter:blur(30px);
    flex-direction:column;
    padding:20px;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
  }

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

  .nav-cta{
    display:none;
  }

  .logo-section h2{
    font-size:26px;
  }

  .container{
    padding:0 20px;
  }

  h1{
    font-size:32px;
  }

  h2{
    font-size:24px;
  }

  .cards{
    grid-template-columns:1fr;
    gap:25px;
  }

  .counter{
    font-size:28px;
  }

  /* Mobile transition effects */
  .card, .service-card, .testimonial-card, .benefit-card{
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover, .service-card:hover, .testimonial-card:hover, .benefit-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
  }

  .btn-primary, .btn-large{
    transition:all 0.3s ease;
  }

  .btn-primary:hover, .btn-large:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,89,179,0.3);
  }
}

/* Medium Screens (Tablet) */
@media(min-width:768px) and (max-width:1023px){
  body{
    padding-top:75px;
  }

  nav{
    padding:12px 4%;
  }

  .hamburger{
    display:block;
    position:absolute;
    top:15px;
    left:15px;
  }

  .logo-section{
    margin-left:50px;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(0,51,102,0.98);
    backdrop-filter:blur(30px);
    flex-direction:column;
    padding:20px;
    gap:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
  }

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

  .nav-cta{
    display:none;
  }

  .logo-section h2{
    font-size:28px;
  }

  .container{
    padding:0 30px;
  }

  h1{
    font-size:36px;
  }

  h2{
    font-size:26px;
  }

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

  .counter{
    font-size:32px;
  }

  /* Mobile transition effects */
  .card, .service-card, .testimonial-card, .benefit-card{
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover, .service-card:hover, .testimonial-card:hover, .benefit-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
  }

  .btn-primary, .btn-large{
    transition:all 0.3s ease;
  }

  .btn-primary:hover, .btn-large:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,89,179,0.3);
  }
}

/* Large Screens (Laptop) */
@media(min-width:1024px) and (max-width:1439px){
  .container{
    padding:0 40px;
  }

  h1{
    font-size:42px;
  }

  h2{
    font-size:30px;
  }

  .cards{
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
  }
}

/* Extra Large Screens (Desktop) */
@media(min-width:1440px){
  .container{
    padding:0 50px;
  }

  h1{
    font-size:48px;
  }

  h2{
    font-size:32px;
  }

  .cards{
    grid-template-columns:repeat(4, 1fr);
    gap:35px;
  }
}

/* Landscape Mobile */
@media(max-height:500px) and (orientation:landscape){
  nav{
    padding:8px 3%;
  }

  .logo-section h2{
    font-size:20px;
  }

  .nav-links{
    gap:10px;
  }

  nav a{
    font-size:14px;
    padding:8px 12px;
  }
}

@media(max-width:768px){
  
  /* NOTE:
     Consolidated mobile-only overrides live at the end of this file so they
     win over earlier @media rules and inline styles (when possible). */

  /* Testimonials mobile alignment */
  .testimonial-container{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .testimonial-card{
    padding:25px 20px !important;
  }

  .testimonial-avatar img{
    width:160px !important;
    height:160px !important;
    max-width:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  .meet-team-section{
    padding:60px 0;
  }

  /* Disable “hover jump/transform” effects on touch devices */
  .card:hover,
  .service-card:hover,
  .testimonial-card:hover,
  .benefit-card:hover,
  .resource-card:hover,
  .blog-card:hover{
    transform:none !important;
    box-shadow:inherit !important;
    border-color:inherit !important;
  }

  /* Services grid is sometimes controlled by inline styles in services.html */
  .services-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-bottom:0 !important;
  }

  /* Services card typography */
  .service-card{
    padding:18px 14px !important;
    border-radius:12px !important;
  }

  .service-icon{
    font-size:44px !important;
    margin-bottom:10px !important;
  }

  .service-card h3{
    font-size:18px !important;
    margin:6px 0 2px 0 !important;
  }

  .service-tagline{
    font-size:12px !important;
    margin-bottom:6px !important;
  }

  .service-features{
    margin-bottom:10px !important;
  }

  .service-features li{
    font-size:12px !important;
    padding:2px 0 !important;
  }

  .service-link,
  .download-btn,
  .cta-button,
  .cta-button:hover{
    width:100% !important;
    text-align:center !important;
    display:block !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box;
  }

  .nav-cta{
    display:none !important;
  }

  .meet-team-content{
    grid-template-columns:1fr;
    gap:40px;
  }

  .team-text h2{
    font-size:32px;
  }

  .team-text h3{
    font-size:22px;
  }

  .team-text p{
    font-size:16px;
  }

  .team-text p.quote{
    font-size:17px;
    padding:20px;
  }

  .founder-image{
    max-width:100%;
  }
}

/* =========================
MOBILE SAFETY PATCH (GLOBAL)
=========================
Keep mobile layouts stable:
- prevent horizontal overflow
- make media responsive
- wrap long words/URLs
========================= */

html, body{
  max-width:100%;
}

body{
  overflow-x:hidden;
}

/* =========================
COUNTER (HOME PAGE) MOBILE SAFETY PATCH
Fix counter number clipping/wrapping on small screens.
Add this at the end so it wins over earlier mobile overrides.
========================= */
.stat-card h3.counter{
  /* fluid, prevents overlap/clipping on very small screens */
  font-size:clamp(22px, 6vw, 36px);
  line-height:1;
  white-space:nowrap;
}

/* responsive images/videos (exclude full-bleed header backgrounds) */
img,
video:not(.hero-video):not(.bg-video){
  max-width:100%;
  height:auto;
  display:block;
}

.hero-video,
.bg-video,
.small-header video{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* keep iframes from overflowing */
iframe{
  max-width:100%;
  width:100%;
  border:0;
}

/* wrap long words/URLs safely */
p, h1, h2, h3, h4, h5, h6, a, li{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ensure common sections don’t exceed viewport */
.container, .page-section, header, section{
  width:100%;
}

/* =========================
SERVICES PAGE HEADER VIDEO OVERRIDES
Force the <header class="small-header"> to use the video background (no photo background).
This is appended at the end to win over earlier rules.
========================= */

.small-header{
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

.small-header::before{
  z-index:1 !important;
}

/* video behind everything */
.small-header .hero-video,
.small-header .bg-video{
  z-index:0 !important;
}

/* keep content above overlay */
.small-header-content{
  z-index:2 !important;
  position:relative;
}

/* Header Section */
.small-header{
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 5%;
}

/* Background Video */
.bg-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Dark Overlay */
.video-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2;
}

/* Main Content */
.small-header-content{
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

/* Main Heading */
.small-header-content h1{
  font-size: 58px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 30px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.7);
}

/* Glass Box */
.intro-section{
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 40px;
  max-width: 850px;
  margin: auto;
  position: relative;
  z-index: 6;
}

/* Job Assistance */
.intro-section h2{
  font-size: 34px;
  color: #ffffff;
  margin-bottom: 18px;
  font-weight: 700;
}

/* Yellow Line */
.intro-text{
  font-size: 24px;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 20px;
}

/* Paragraph Text */
.intro-description{
  font-size: 17px;
  line-height: 1.9;
  color: #ffffff;
  margin-bottom: 15px;
  font-weight: 400;
}

/* Mobile Responsive */
@media(max-width:768px){

  .small-header{
    min-height: 90vh;
    padding: 40px 20px;
  }

  .small-header-content h1{
    font-size: 36px;
  }

  .intro-section{
    padding: 25px;
  }

  .intro-section h2{
    font-size: 25px;
  }

  .intro-text{
    font-size: 18px;
  }

  .intro-description{
    font-size: 15px;
    line-height: 1.7;
  }
}

/* FLOATING WHATSAPP BUTTON */
.whatsapp-float{
  position:fixed;
  width:70px;
  height:70px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow:2px 2px 3px #999;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s ease;
}

.whatsapp-float:hover{
  background-color:#128C7E;
  transform:scale(1.1);
  box-shadow:0 0 15px rgba(37,211,102,0.6);
}

.whatsapp-float i{
  font-size:35px;
}

/* BLOG IMAGE */
.blog-image{
  width:100%;
  height:200px;
  overflow:hidden;
  border-radius:12px 12px 0 0;
  margin-bottom:20px;
}

.blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.blog-card:hover .blog-image img{
  transform:scale(1.05);
}/* =========================================
   MOBILE RESPONSIVE FIX
========================================= */

@media(max-width:900px){

  /* NAVBAR */

  nav{

    padding:16px 5%;

  }

  /* HAMBURGER */

  .hamburger{

    display:flex;

    justify-content:center;

    align-items:center;

    position:absolute;

    top:14px;

    right:18px;

    width:46px;
    height:46px;

    border-radius:12px;

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    cursor:pointer;

    z-index:1001;

  }

  .hamburger i{

    color:white;

    font-size:22px;

    display:flex;

    justify-content:center;

    align-items:center;

  }

  /* CONTACT BUTTON FIX */

  .nav-cta{

    display:flex;

    margin-left:auto;

    margin-right:65px;

  }

  .btn-primary{

    padding:11px 18px;

    font-size:13px;

    border-radius:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    white-space:nowrap;

  }

  .btn-primary i{

    display:flex;

    align-items:center;

    justify-content:center;

  }

  /* MOBILE MENU */

  .nav-links{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:
    rgba(0,25,51,0.94);

    backdrop-filter:blur(18px);

    flex-direction:column;

    align-items:flex-start;

    gap:22px;

    padding:28px 7%;

    display:none;

    border-bottom:
    1px solid rgba(255,255,255,0.08);

  }

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

}

/* Mobile-only Contact us in hamburger menu */
.nav-contact-mobile{
  display:none;
}

@media(max-width:900px){

  .nav-cta{
    display:none !important;
  }

  .nav-contact-mobile{
    display:list-item !important;
    width:100%;
    margin-top:10px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.15);
  }

  .nav-contact-mobile a{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:14px 20px !important;
    background:linear-gradient(135deg, #0059b3, #003d7a) !important;
    border-radius:10px;
    font-weight:600;
    font-size:16px;
  }

  .nav-contact-mobile a:hover{
    background:linear-gradient(135deg, #003d7a, #002955) !important;
    transform:none;
  }
}

@media(min-width:901px){

  .nav-contact-mobile{
    display:none !important;
  }
}

/* Contact page icons */
.page-contact .contact-header-icon{
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  background:rgba(77,166,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:#fff;
}

.page-contact .contact-channels .contact-option-icon{
  width:80px;
  height:80px;
  margin:0 auto 24px;
  border-radius:50%;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,89,179,0.25), 0 0 30px rgba(0,89,179,0.15);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  animation:iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat{
  0%, 100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-5px);
  }
}

.page-contact .contact-channels .contact-option-icon::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:linear-gradient(135deg, #0059b3, #003d7a);
  opacity:0.2;
  filter:blur(6px);
  z-index:-1;
}

.page-contact .contact-channels .contact-option-icon i{
  font-size:36px;
  color:#fff;
  margin:0;
  -webkit-text-fill-color:#fff;
  background:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

.page-contact .contact-channels .contact-option-icon--email{
  background:linear-gradient(135deg, #dc3545, #c82333);
  box-shadow:0 6px 20px rgba(220,53,69,0.25), 0 0 30px rgba(220,53,69,0.15);
}

.page-contact .contact-channels .contact-option-icon--email::before{
  background:linear-gradient(135deg, #dc3545, #c82333);
}

.page-contact .contact-channels .contact-option-icon--email:hover{
  box-shadow:0 8px 25px rgba(220,53,69,0.35), 0 0 40px rgba(220,53,69,0.25);
}

.page-contact .contact-channels .contact-option-icon--whatsapp{
  background:linear-gradient(135deg, #25d366, #1da851);
  box-shadow:0 6px 20px rgba(37,211,102,0.25), 0 0 30px rgba(37,211,102,0.15);
}

.page-contact .contact-channels .contact-option-icon--whatsapp::before{
  background:linear-gradient(135deg, #25d366, #1da851);
}

.page-contact .contact-channels .contact-option-icon--whatsapp:hover{
  box-shadow:0 8px 25px rgba(37,211,102,0.35), 0 0 40px rgba(37,211,102,0.25);
}

.page-contact .contact-channels .contact-option-icon--schedule{
  background:linear-gradient(135deg, #6f42c1, #5a32a3);
  box-shadow:0 6px 20px rgba(111,66,193,0.25), 0 0 30px rgba(111,66,193,0.15);
}

.page-contact .contact-channels .contact-option-icon--schedule::before{
  background:linear-gradient(135deg, #6f42c1, #5a32a3);
}

.page-contact .contact-channels .contact-option-icon--schedule:hover{
  box-shadow:0 8px 25px rgba(111,66,193,0.35), 0 0 40px rgba(111,66,193,0.25);
}

.page-contact .contact-channels .contact-option-icon--email:hover,
.page-contact .contact-channels .contact-option-icon--whatsapp:hover,
.page-contact .contact-channels .contact-option-icon--schedule:hover{
  animation:none;
}

/* Add subtle background pattern to contact section */
.page-contact .quick-contact-section{
  position:relative;
  overflow:hidden;
}

.page-contact .quick-contact-section::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(77,166,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(118,75,162,0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(220,53,69,0.03) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

.page-contact .quick-contact-section .container{
  position:relative;
  z-index:1;
}

.page-contact .contact-channels .contact-option > i:not(.contact-option-icon i){
  display:none;
}

/* Professional contact form */
.page-contact .contact-form-section{
  padding:90px 5%;
  background:linear-gradient(180deg, #f0f5fc 0%, #ffffff 50%);
  min-height:auto;
  text-align:left;
}

.page-contact .contact-form-wrapper{
  max-width:1100px;
  margin:0 auto;
}

.page-contact .contact-form-layout{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(320px, 1.35fr);
  gap:48px;
  align-items:start;
}

.page-contact .contact-form-aside{
  padding:36px 0;
}

.page-contact .contact-form-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:rgba(0,89,179,0.1);
  color:#0059b3;
  font-size:13px;
  font-weight:600;
  border-radius:50px;
  margin-bottom:20px;
  letter-spacing:0.3px;
}

.page-contact .contact-form-aside h2{
  font-size:clamp(26px, 3.5vw, 34px);
  color:#003366;
  line-height:1.3;
  margin-bottom:16px;
  font-weight:700;
}

.page-contact .contact-form-aside > p{
  color:#5a6a7a;
  font-size:16px;
  line-height:1.7;
  margin-bottom:28px;
}

.page-contact .contact-form-benefits{
  list-style:none;
  padding:0;
  margin:0;
}

.page-contact .contact-form-benefits li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  font-size:15px;
  color:#333;
  font-weight:500;
  border-bottom:1px solid #e2eaf3;
}

.page-contact .contact-form-benefits li:last-child{
  border-bottom:none;
}

.page-contact .contact-form-benefits i{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #0059b3, #4da6ff);
  color:#fff;
  border-radius:50%;
  font-size:12px;
  flex-shrink:0;
}

.page-contact .contact-form-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 4px 6px rgba(0,51,102,0.04), 0 24px 48px rgba(0,51,102,0.1);
  border:1px solid rgba(0,89,179,0.08);
  overflow:hidden;
}

.page-contact .contact-form-card-header{
  padding:28px 36px 20px;
  border-bottom:1px solid #eef2f7;
  background:linear-gradient(180deg, #fafcff 0%, #fff 100%);
}

.page-contact .contact-form-card-header h3{
  font-size:22px;
  color:#003366;
  font-weight:700;
  margin:0 0 6px;
}

.page-contact .contact-form-card-header p{
  margin:0;
  font-size:13px;
  color:#8896a8;
}

.page-contact .required-mark{
  color:#e74c3c;
  font-weight:600;
}

.page-contact .contact-form-card .contact-form{
  max-width:none;
  margin:0;
  padding:32px 36px 36px;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  animation:none;
  text-align:left;
}

.page-contact .contact-form-card .contact-form::before{
  display:none;
}

.page-contact .contact-form-card .form-group{
  margin-bottom:22px;
}

.page-contact .contact-form-card label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#334155;
  margin-bottom:8px;
  text-transform:none;
  letter-spacing:0;
}

.page-contact .input-icon-wrap{
  position:relative;
}

.page-contact .input-icon-wrap .input-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:15px;
  pointer-events:none;
  z-index:1;
  transition:color 0.2s ease;
}

.page-contact .input-icon-wrap:focus-within .input-icon{
  color:#0059b3;
}

.page-contact .input-icon-wrap input,
.page-contact .input-icon-wrap textarea{
  width:100%;
  padding:14px 16px 14px 44px !important;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  font-family:'Poppins', sans-serif;
  font-size:15px;
  color:#1e293b;
  background:#f8fafc;
  box-sizing:border-box;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.page-contact .input-icon-wrap input:hover,
.page-contact .input-icon-wrap textarea:hover{
  border-color:#cbd5e1;
  background:#fff;
}

.page-contact .input-icon-wrap input:focus,
.page-contact .input-icon-wrap textarea:focus{
  outline:none;
  border-color:#0059b3;
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,89,179,0.12);
  transform:none;
}

.page-contact .input-icon-wrap input::placeholder,
.page-contact .input-icon-wrap textarea::placeholder{
  color:#94a3b8;
}

.page-contact .input-icon-wrap--textarea .input-icon{
  top:18px;
  transform:none;
}

.page-contact .input-icon-wrap--textarea textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.6;
}

.page-contact .contact-form-card .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.page-contact .contact-form-card .submit-btn{
  width:100%;
  margin-top:8px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.3px;
  text-transform:none;
  border-radius:12px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, #0059b3 0%, #003d7a 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,89,179,0.35);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .contact-form-card .submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,89,179,0.4);
  background:linear-gradient(135deg, #003d7a 0%, #002955 100%);
}

.page-contact .contact-form-card .submit-btn:active{
  transform:translateY(0);
}

.page-contact .form-privacy{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid #eef2f7;
  font-size:12px;
  color:#8896a8;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1.5;
}

.page-contact .form-privacy i{
  color:#0059b3;
  font-size:13px;
}

@media(max-width:900px){

  .page-contact .contact-form-layout{
    grid-template-columns:1fr;
    gap:32px;
  }

  .page-contact .contact-form-aside{
    padding:0;
    text-align:center;
  }

  .page-contact .contact-form-benefits{
    max-width:360px;
    margin:0 auto;
  }

  .page-contact .contact-form-card .form-row{
    grid-template-columns:1fr;
    gap:0;
  }
}

@media(max-width:480px){

  .page-contact .contact-form-section{
    padding:60px 16px;
  }

  .page-contact .contact-form-card-header,
  .page-contact .contact-form-card .contact-form{
    padding-left:22px;
    padding-right:22px;
  }
}

.page-contact .contact-link i{
  margin-right:6px;
}

.page-contact .contact-channels .contact-option{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  transition:all 0.3s ease;
  position:relative;
  opacity:0;
  transform:translateY(30px);
  animation:fadeInUp 0.6s ease forwards;
}

.page-contact .contact-channels .contact-option:nth-child(1){
  animation-delay:0.1s;
}

.page-contact .contact-channels .contact-option:nth-child(2){
  animation-delay:0.2s;
}

.page-contact .contact-channels .contact-option:nth-child(3){
  animation-delay:0.3s;
}

@keyframes fadeInUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.page-contact .contact-channels .contact-option::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #0059b3, #4da6ff);
}

.page-contact .contact-channels .contact-option:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.3);
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,0.3), 0 0 60px rgba(0,89,179,0.15);
}

.page-contact .contact-channels .contact-option:hover .contact-option-icon{
  transform:scale(1.1);
  animation:none;
}

.page-contact .contact-channels .contact-option h3,
.page-contact .contact-channels .contact-option p{
  color:#fff;
}

.page-contact .contact-channels .contact-option h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:0.5px;
}

.page-contact .contact-channels .contact-option p{
  font-size:15px;
  line-height:1.6;
  margin-bottom:20px;
  opacity:0.95;
}

.page-contact .contact-channels .contact-link{
  background:#ffffff;
  color:#0059b3;
  font-weight:600;
  padding:12px 28px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  border:1px solid rgba(0,89,179,0.15);
  position:relative;
  overflow:hidden;
}

.page-contact .contact-channels .contact-link::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(0,89,179,0.1);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}

.page-contact .contact-channels .contact-link:active::before{
  width:300px;
  height:300px;
}

.page-contact .contact-channels .contact-link:hover{
  background:#0059b3;
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,89,179,0.3);
  border-color:#0059b3;
}

/* Social media buttons */
.page-contact .social-media-buttons{
  margin-top:50px;
  text-align:center;
  position:relative;
}

.page-contact .social-media-buttons::before{
  content:'';
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.page-contact .social-media-buttons h3{
  color:#fff;
  font-size:26px;
  margin-bottom:30px;
  font-weight:700;
  letter-spacing:0.5px;
  text-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.page-contact .social-media-buttons h3 i{
  margin-right:12px;
  color:#4da6ff;
  animation:iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse{
  0%, 100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.1);
  }
}

.page-contact .social-buttons-container{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
  animation:fadeInUp 0.8s ease 0.5s forwards;
  opacity:0;
  transform:translateY(20px);
}

.page-contact .social-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 36px;
  border-radius:50px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 15px rgba(0,0,0,0.15);
  border:2px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
}

.page-contact .social-button::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.5s;
}

.page-contact .social-button:hover::before{
  left:100%;
}

.page-contact .social-button i{
  font-size:22px;
  transition:transform 0.3s ease;
}

.page-contact .social-button:hover i{
  transform:scale(1.2) rotate(10deg);
}

.page-contact .social-button span{
  position:relative;
  z-index:1;
}

.page-contact .social-button--email{
  background:linear-gradient(135deg, #dc3545, #c82333);
  color:#fff;
  border-color:rgba(255,255,255,0.3);
}

.page-contact .social-button--email:hover{
  background:linear-gradient(135deg, #c82333, #a71d2a);
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 35px rgba(220,53,69,0.5), 0 0 50px rgba(220,53,69,0.3);
}

.page-contact .social-button--linkedin{
  background:linear-gradient(135deg, #0077b5, #005885);
  color:#fff;
  border-color:rgba(255,255,255,0.3);
}

.page-contact .social-button--linkedin:hover{
  background:linear-gradient(135deg, #005885, #004470);
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 35px rgba(0,119,181,0.5), 0 0 50px rgba(0,119,181,0.3);
}

.page-contact .social-button--instagram{
  background:linear-gradient(135deg, #e1306c, #833ab4, #fd1d1d, #f77737);
  background-size:300% 300%;
  animation:instagramGradient 5s ease infinite;
  color:#fff;
  border-color:rgba(255,255,255,0.3);
}

.page-contact .social-button--instagram:hover{
  background-size:300% 300%;
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 12px 35px rgba(225,48,108,0.5), 0 0 50px rgba(225,48,108,0.3);
  animation-duration:2s;
}

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

/* Contact page header: video background with light transparent overlay */
.page-contact .contact-header{
  background:transparent !important;
  background-image:none !important;
}

.page-contact .contact-header .bg-video,
.page-contact .contact-header .hero-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  z-index:0 !important;
}

.page-contact .contact-header .video-overlay{
  background:rgba(0,51,102,0.2);
  z-index:2 !important;
}

.page-contact .contact-header::before{
  background:linear-gradient(135deg, rgba(0,89,179,0.15), rgba(0,51,102,0.25));
  animation:none;
  opacity:1;
  z-index:1 !important;
}

.page-contact .contact-header .small-header-content{
  z-index:2;
  position:relative;
}

/* =========================
BLOG PAGE — HEADER & LISTING BACKGROUND
========================= */

.page-blog .blog-header .blog-header-bg,
.page-blog .blog-header .bg-image{
  position:absolute;
  inset:0;
  background-image:url('background.jpg/blog background image.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
  transform:scale(1.02);
}

.page-blog .blog-header .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

.page-blog .blog-header .small-header-content{
  position:relative;
  z-index:2;
}

.page-blog .blog-header-tagline{
  font-size:clamp(15px, 2.5vw, 18px);
  color:#fff;
  max-width:640px;
  margin:12px auto 0;
  line-height:1.7;
  text-shadow:0 2px 12px rgba(0,0,0,0.5);
}

.page-blog .blog-listing{
  background:
    linear-gradient(rgba(255,255,255,0.94), rgba(255,255,255,0.94)),
    url('background.jpg/blog background image.jpg') center/cover no-repeat;
}

.page-blog .section-heading{
  text-align:center;
  color:#003366;
  font-size:clamp(24px, 4vw, 36px);
  margin-bottom:40px;
  font-weight:700;
}

/* Image-based headers (About, Blog) — don’t hide bg with global small-header rules */
.small-header:has(.bg-image){
  background:transparent !important;
  background-image:none !important;
}

.small-header:has(.bg-image)::before{
  display:none;
}

.small-header:has(.bg-image) .bg-image{
  z-index:0;
}

.small-header:has(.bg-image) .overlay{
  z-index:1;
}

.small-header:has(.bg-image) .small-header-content{
  z-index:2;
}

/* =========================
SITE-WIDE RESPONSIVE TEXT & LAYOUT
========================= */

html{
  -webkit-text-size-adjust:100%;
}

.container{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(16px, 5%, 40px);
  padding-right:clamp(16px, 5%, 40px);
  box-sizing:border-box;
}

.section-heading,
.small-header-content,
.hero-content,
.page-section > .container > .section-heading,
.home-intro h2,
.why-us h2,
.testimonials h2,
.quick-contact-section h2{
  text-align:center;
}

.page-section > .container > p:not(.blog-excerpt):not(.blog-meta){
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Blog cards */
.page-blog .blog-card{
  text-align:center;
}

.page-blog .blog-card h3,
.page-blog .blog-card .blog-excerpt,
.page-blog .blog-card .blog-meta,
.page-blog .blog-card .read-more{
  text-align:center;
}

.page-blog .page-section .container .cards{
  padding-left:0;
  padding-right:0;
  margin-top:32px;
}

/* Article pages — readable left-aligned body */
.page-article .page-section{
  text-align:left;
}

.page-article .page-section .container{
  text-align:left;
}

.page-article .article-content,
.page-article .blog-article{
  text-align:left;
  max-width:820px;
  margin:0 auto;
  background:#fff;
  padding:clamp(24px, 5vw, 40px);
  border-radius:12px;
  box-shadow:0 4px 24px rgba(0,51,102,0.08);
}

.page-article .article-content h2,
.page-article .article-content h3,
.page-article .blog-article h2,
.page-article .blog-article h3{
  text-align:left;
  color:#003366;
}

.page-article .article-content p,
.page-article .article-content ul,
.page-article .article-content li,
.page-article .blog-article p,
.page-article .blog-article ul,
.page-article .blog-article li{
  text-align:left;
}

.page-article .article-intro{
  font-size:clamp(15px, 2.5vw, 17px);
  line-height:1.8;
  color:#444;
}

/* Home — who we are readable on all screens */
.page-home .who-we-are-text{
  text-align:left;
}

.page-home .who-we-are-text h2{
  text-align:center;
}

.page-home .who-we-are-text .btn-secondary{
  display:inline-block;
}

/* Services / testimonials cards */
.page-services .page-section .container,
.page-testimonials .page-section .container{
  text-align:center;
}

.card,
.testimonial-card,
.service-card{
  text-align:center;
}

.card p,
.testimonial-card .review{
  text-align:center;
}

@media(max-width:1024px){

  .cards{
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
    padding-left:0;
    padding-right:0;
  }

  .page-section{
    padding:48px clamp(16px, 5%, 40px);
  }
}

@media(max-width:768px){

  .small-header-content h1{
    font-size:clamp(28px, 7vw, 42px);
    line-height:1.25;
    padding:0 8px;
  }

  .blog-header-tagline,
  .header-subtitle,
  .header-description{
    padding:0 12px;
  }

  .page-section{
    padding:40px 16px;
  }

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .page-section .container .cards{
    padding:0;
    margin-top:24px;
    gap:20px;
  }

  .card,
  .blog-card,
  .testimonial-card{
    padding:24px 18px;
  }

  .page-article .article-content,
  .page-article .blog-article{
    padding:22px 16px;
  }

  .page-article .blog-article ul{
    margin-left:0;
    padding-left:20px;
  }

  .page-home .who-we-are-section{
    padding:40px 0;
  }

  .page-home .who-we-are-text{
    text-align:left;
    padding:0 16px;
  }

  .page-home .who-we-are-text h2{
    text-align:center;
    font-size:clamp(24px, 6vw, 32px);
  }

  .meet-team-content{
    text-align:center;
  }

  .team-text h2,
  .team-text h3,
  .team-text p{
    text-align:left;
  }

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

  .footer-col{
    text-align:center;
  }

  .footer-col ul{
    padding:0;
  }
}

@media(max-width:480px){

  .small-header{
    min-height:50vh;
    padding:40px 12px;
  }

  .page-blog .blog-card h3{
    font-size:clamp(17px, 4.5vw, 20px);
  }

  .read-more{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
}

/* =========================
LEGAL PAGES (Privacy, Terms)
========================= */

.page-legal .legal-header{
  min-height:40vh;
}

.page-legal .legal-updated{
  font-size:clamp(14px, 2.5vw, 16px);
  color:rgba(255,255,255,0.85);
  margin-top:10px;
}

.page-legal .page-section{
  text-align:left;
}

.page-legal .legal-content{
  max-width:820px;
  margin:0 auto;
  background:#fff;
  padding:clamp(28px, 5vw, 48px);
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,51,102,0.08);
  border:1px solid rgba(0,89,179,0.08);
  text-align:left;
}

.page-legal .legal-intro{
  font-size:clamp(15px, 2.5vw, 17px);
  line-height:1.8;
  color:#444;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid #eef2f7;
}

.page-legal .legal-content h2{
  color:#003366;
  font-size:clamp(20px, 3.5vw, 24px);
  margin:32px 0 14px;
  font-weight:700;
}

.page-legal .legal-content h2:first-of-type{
  margin-top:0;
}

.page-legal .legal-content p,
.page-legal .legal-content li{
  color:#555;
  font-size:clamp(14px, 2.5vw, 16px);
  line-height:1.8;
  margin-bottom:14px;
  text-align:left;
}

.page-legal .legal-content ul{
  margin:0 0 18px;
  padding-left:24px;
}

.page-legal .legal-content li{
  margin-bottom:8px;
}

.page-legal .legal-content a{
  color:#0059b3;
  text-decoration:underline;
  text-underline-offset:2px;
}

.page-legal .legal-content a:hover{
  color:#003366;
}

.page-legal .legal-links{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #eef2f7;
  font-weight:500;
}

@media(max-width:768px){
  .page-legal .legal-content{
    padding:22px 18px;
  }

  .page-legal .legal-content ul{
    padding-left:20px;
  }
}