/* ========================================= */
/* ROOT VARIABLES */
/* ========================================= */

:root{

  --primary:#00b6c4;
  --secondary:#008fa1;
  --navy:#0b2533;
  --dark:#091a2a;
  --accent:#ff6b35;

  --white:#ffffff;
  --soft:#f3f8fa;

  --text:#243746;
  --muted:#61707f;

  --border:
  1px solid rgba(0,0,0,0.08);

  --shadow:
  0 10px 35px rgba(0,0,0,0.05);

}

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

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


/* ========================================= */
/* BUTTON SPACING */
/* ========================================= */

.hero-buttons,
.center-btn,
.cta-buttons,
.blogs-btn-wrap{

  margin-top:40px;

}
html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;

  background:var(--soft);

  color:var(--text);

  overflow-x:hidden;

}

img{
  width:100%;
  display:block;
}

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

.container{

  width:min(1320px,90%);
  margin:auto;

}

section{

  padding:120px 0;
  position:relative;
  overflow:hidden;

}

section::before{

  content:'';

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.03),
    transparent
  );

  pointer-events:none;

}

/* ========================================= */
/* LOGO */
/* ========================================= */

.logo{

  display:flex;
  align-items:center;
  gap:14px;

}

.logo-img{

  width:48px;
  height:48px;

  object-fit:contain;

}

.logo-text{

  font-size:28px;
  font-weight:800;

  color:#02131f;

}

/* ========================================= */
/* NAVBAR */
/* ========================================= */

header{

  position:fixed;
  top:0;
  left:0;

  width:100%;

  z-index:1000;

  background:
  rgba(255,255,255,0.9);

  backdrop-filter:blur(14px);

  border-bottom:
  1px solid rgba(0,0,0,0.05);

}

.navbar{

  position:relative;

  height:90px;

  display:flex;
  align-items:center;

}

.nav-links{

  position:absolute;
  left:50%;
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:40px;

}

.nav-links a{

  position:relative;

  color:#425466;

  font-size:15px;
  font-weight:500;

}

.nav-links a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  background:var(--primary);

  transition:0.35s ease;

}

.nav-links a:hover::after{

  width:100%;

}



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

.menu-toggle{

  display:none;
  font-size:30px;
  width:42px;
  height:42px;

  cursor:pointer;

  position:absolute;

  right:0;

  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:6px;

  z-index:99999;

}



/* MOBILE */

@media(max-width:768px){

  .menu-toggle{

    display:flex;

    align-items:center;
    justify-content:center;

    z-index:999999;

  }

  .menu-toggle span{

  width:24px;
  height:2px;

  background:#02131f;

  border-radius:20px;

  transition:0.3s ease;

}

  .nav-links{

    position:fixed;

    top:80px;
    right:-100%;

    left:auto;

    transform:none;

    width:280px;
    height:100vh;

    background:white;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    padding:40px 30px;

    gap:24px;

    transition:0.4s ease;

    box-shadow:
    -10px 0 40px rgba(0,0,0,0.08);

    z-index:99999;

  }

  .nav-links.active{

    right:0;

  }

  .nav-links a{

    font-size:16px;

  }

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

.btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:52px;

  padding:0 26px;

  border-radius:8px;

  font-size:14px;
  font-weight:600;

  transition:0.35s ease;
  

}

.btn-primary{

  background:var(--accent);

  color:white;

}

.btn-primary:hover{

  transform:translateY(-4px);

}

.btn-outline{

  border:
  1px solid rgba(0,0,0,0.12);

  color:#02131f;

}

.btn-outline:hover{

  background:#02131f;
  color:white;

}

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

.hero{

  padding-top:100px;
  padding-bottom:60px;

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.08),
    rgba(0,182,196,0.02)
  );

}

.hero-wrapper{

  display:grid;
  grid-template-columns:0.9fr 1.1fr;

  gap:100px;
  align-items:center;

}

.hero-left{

  max-width:580px;

}

.hero-tag{

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;

  color:#667686;

}

.hero-left h1{

  font-size:72px;

  line-height:0.9;

  letter-spacing:-6px;

  margin:28px 0;

  color:#02131f;

  font-weight:800;

}

.hero-left .accent{

  color:var(--accent);

}

.hero-left p{

  font-size:20px;

  line-height:1.8;

  color:#51606d;

}

.hero-buttons{

  display:flex;
  gap:18px;

  margin-top:42px;

}

.hero-right img{

  width:100%;
  height:680px;

  object-fit:cover;

  border-radius:28px;

}

/* ========================================= */
/* SECTION TITLES */
/* ========================================= */

.section-tag{

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;

  color:var(--primary);

  display:inline-block;

  margin-bottom:20px;

}

.section-heading{

  margin-bottom:50px;

}

.section-heading h2{

  font-size:52px;

  line-height:0.95;

  letter-spacing:-4px;

  color:#02131f;

  max-width:760px;

}

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

.about{

  background:white;

}

.about-wrapper{

  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  margin-top: -55px;
  gap:100px;
  align-items:center;
  margin-bottom: -40px;

}

.about-left{

  max-width:620px;

}

.about-left h2{

  font-size:60px;

  line-height:0.95;

  letter-spacing:-4px;

  margin-bottom:34px;

}

.about-left p{

  margin-bottom:24px;

  line-height:1.9;

  font-size:18px;

  color:#5c6b78;

}

.story-image-grid{

  display:grid;

  grid-template-columns:
  0.8fr 1fr;

  gap:22px;

}

.story-img{

  border-radius:24px;

  object-fit:cover;

}

.story-img-1{

  height:260px;

  margin-top:70px;

}

.story-img-2{

  height:360px;

}

.story-img-3{

  grid-column:span 2;

  height:320px;

}

/* ========================================= */
/* MISSION */
/* ========================================= */

.mission{

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.07),
    rgba(0,182,196,0.03)
  );

}

.mission-grid{

  display:grid;
  grid-template-columns:
  repeat(3,1fr);

  gap:26px;

}

.mission-card{

  background:white;

  padding:40px;

  border-radius:20px;

  border:var(--border);

  transition:0.35s ease;

}

.mission-card:hover{

  transform:translateY(-6px);

}

.mission-card i{

  font-size:36px;

  color:var(--primary);

  margin-bottom:22px;

}

.mission-card h3{

  font-size:30px;

}

/* ========================================= */
/* WHY HAMS */
/* ========================================= */

.why-hams{

  background:white;

}

.why-wrapper{

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:100px;
  align-items:center;

}

.why-image{

  height:700px;

  object-fit:cover;

  border-radius:28px;

}

.why-right h2{

  font-size:45px;

  line-height:0.95;

  letter-spacing:-4px;

  margin-bottom:40px;

}

.why-points{

  display:flex;
  flex-direction:column;
  gap:32px;

}

.why-item{

  display:flex;
  gap:24px;
  margin-bottom:22px;
}

.why-item i{

  font-size:28px;

  color:var(--primary);

}

.why-item h3{

  font-size:28px;

  margin-bottom:10px;

}

.why-item p{

  line-height:1.8;

  color:#5d6c79;

}

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

.services-preview{

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.08),
    rgba(0,182,196,0.03)
  );

}

.services-grid{

  display:flex;
  flex-direction:column;

  gap:90px;

}

.service-card{

  display:grid;
  grid-template-columns:1.1fr 0.9fr;

  align-items:center;

}

.service-card:nth-child(even){

  grid-template-columns:0.9fr 1.1fr;

}

.service-image{

  height:450px;

  object-fit:cover;

  border-radius:24px;

}

.service-content{

  background:white;

  padding:60px;

  border-radius:24px;

  margin-left:-80px;

  position:relative;

  z-index:2;

  box-shadow:var(--shadow);

}

.service-card:nth-child(even) .service-content{

  margin-left:0;
  margin-right:-80px;

}

.service-content i{

  font-size:34px;

  color:var(--primary);

  margin-bottom:24px;

}

.service-content h3{

  font-size:40px;

  line-height:1.05;

  margin-bottom:20px;

}

.service-content p{

  line-height:1.9;

  margin-bottom:24px;

  color:#5f6f7d;

}

.service-content ul{

  margin-bottom:30px;

}

.service-content ul li{

  margin-bottom:14px;

  color:#51606d;

}

/* ========================================= */
/* CAREERS */
/* ========================================= */

.careers-preview{

  background:white;

}

.career-grid{

  display:grid;
  grid-template-columns:
  repeat(4,1fr);

  gap:26px;

}

.career-card{

  background:white;

  padding:40px;

  border-radius:20px;

  border:var(--border);

  text-align:left;

}

.career-card i{

  font-size:36px;

  color:var(--primary);

  margin-bottom:20px;

}

.career-card h3{

  font-size:28px;

}

/* ========================================= */
/* BLOGS */
/* ========================================= */

/* ========================================= */
/* BLOGS SECTION */
/* ========================================= */

.blogs-section{

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.08),
    rgba(0,182,196,0.03)
  );

}

/* TITLE */

.blogs-title{

  font-size:60px;

  line-height:0.95;

  letter-spacing:-4px;

  color:#02131f;

  margin-top:12px;

}

.blogs-sub{

  margin-top:26px;

  max-width:650px;

  font-size:18px;

  line-height:1.9;

  color:#61707f;

}

.blogs-underline{

  width:100%;
  height:1px;

  background:
  rgba(0,0,0,0.10);

  margin:
  50px 0 70px;

}

/* FEATURED BLOG */

.blog-feature-card{

  display:grid;
  grid-template-columns:
  1.1fr 0.9fr;

  align-items:center;

  gap:0;

  margin-bottom:90px;

}

.blog-feature-img img{

  width:100%;
  height:520px;

  object-fit:cover;

  border-radius:28px;

}

.blog-feature-content{

  background:white;

  padding:60px;

  border-radius:24px;

  margin-left:-70px;

  position:relative;

  z-index:2;

  border:
  1px solid rgba(0,0,0,0.06);

  box-shadow:
  0 10px 35px rgba(0,0,0,0.05);

}

/* TAGS */

.blog-tags{

  display:flex;
  gap:12px;

  margin-bottom:26px;

}

.tag{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;

  padding:0 16px;

  border-radius:50px;

  background:
  rgba(0,182,196,0.10);

  color:var(--primary);

  font-size:12px;
  font-weight:700;

  letter-spacing:1px;

}

.tag-small{

  margin-top:22px;
  margin-bottom:18px;

}

/* FEATURED CONTENT */

.blog-feature-content h3{

  font-size:40px;

  line-height:1.05;

  letter-spacing:-3px;

  margin-bottom:24px;

  color:#02131f;

}

.blog-feature-content p{

  line-height:1.9;

  font-size:17px;

  color:#61707f;

  margin-bottom:36px;

}

.blog-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:52px;

  padding:0 28px;

  border-radius:8px;

  background:var(--accent);

  color:white;

  font-size:14px;
  font-weight:600;

  transition:0.35s ease;

}

.blog-btn:hover{

  transform:translateY(-4px);

}

/* SMALL BLOGS */

.all-posts-heading{

  font-size:34px;

  margin-bottom:36px;

  color:#02131f;

}

.blog-grid{

  display:grid;
  grid-template-columns:
  repeat(3,1fr);

  gap:28px;

}

.blog-card{

  background:white;

  border:
  1px solid rgba(0,0,0,0.08);

  border-radius:20px;

  overflow:hidden;

  transition:0.35s ease;

}

.blog-card:hover{

  transform:translateY(-6px);

  box-shadow:
  0 18px 40px rgba(0,0,0,0.06);

}

.blog-img img{

  width:100%;
  height:250px;

  object-fit:cover;

}

.blog-card h3{

  padding:
  0 28px 34px;

  font-size:34px;

  line-height:1.18;

  letter-spacing:-1px;

  color:#1f3344;

}

.blog-card .tag{

  margin-left:28px;

}

/* BUTTON */

.blogs-btn-wrap{

  display:flex;
  justify-content:center;

  margin-top:60px;

}

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

@media(max-width:1100px){

  .blog-feature-card{

    grid-template-columns:1fr;

  }

  .blog-feature-content{

    margin-left:0;
    margin-top:-40px;

  }

  .blog-grid{

    grid-template-columns:1fr 1fr;

  }

}

@media(max-width:768px){

  .blogs-title{

    font-size:56px;

    letter-spacing:-2px;

  }

  .blog-feature-content h3{

    font-size:40px;

  }

  .blog-grid{

    grid-template-columns:1fr;

  }

  .blog-card h3{

    font-size:28px;

  }

}
/* ========================================= */
/* FAQ */
/* ========================================= */

.faq-section{

  background:white;

}

.faq-grid{

  display:grid;
  grid-template-columns:0.9fr 1.1fr;

  gap:100px;

}

.faq-left h2{

  font-size:76px;

  line-height:0.95;

  letter-spacing:-4px;

  margin:20px 0 24px;

}

.faq-left .accent{

  color:var(--primary);

}

.faq-left p{

  line-height:1.9;

  color:#5f6f7d;

}

.faq-help{

  margin-top:50px;

  background:
  rgba(0,182,196,0.06);

  border:
  1px solid rgba(0,182,196,0.12);

  border-radius:22px;

  padding:32px;

}

.help-dot{

  width:12px;
  height:12px;

  border-radius:50%;

  background:var(--primary);

  margin-bottom:20px;

}

.help-body h4{

  font-size:28px;

  margin-bottom:14px;

}

.help-body p{

  margin-bottom:24px;

}

.faq-right{

  display:flex;
  flex-direction:column;

  gap:24px;

}

.faq-item{

  background:white;

  border:var(--border);

  border-radius:22px;

  padding:28px;

}

.faq-item summary{

  list-style:none;

  cursor:pointer;

  font-size:20px;
  font-weight:600;

}

.faq-item p{

  margin-top:18px;

  line-height:1.9;

  color:#61707f;

}

/* ========================================= */
/* FINAL CTA */
/* ========================================= */

.final-cta{

  background:
  linear-gradient(
    180deg,
    rgba(0,182,196,0.10),
    rgba(0,182,196,0.03)
  );

  text-align:center;

}

.final-cta h2{

  font-size:92px;

  line-height:0.9;

  letter-spacing:-5px;

  max-width:900px;

  margin:auto auto 40px;

}

.cta-buttons{

  display:flex;
  justify-content:center;

  gap:18px;

}

.cta-stats{

  display:flex;
  justify-content:center;

  gap:70px;

  margin-top:70px;

}

.cta-stats h3{

  font-size:52px;

  margin-bottom:12px;

}

.cta-stats p{

  color:#61707f;

}

/* ========================================= */
/* FEEDBACK */
/* ========================================= */

.feedback-section{

  background:white;

}

.feedback-section .container{

  display:grid;
  grid-template-columns:0.9fr 1.1fr;

  gap:100px;
  align-items:center;

}

.feedback-section h2{

  font-size:92px;

  line-height:0.9;

  letter-spacing:-5px;

  margin:24px 0 30px;

}

.feedback-section p{

  line-height:1.9;

  color:#61707f;

}

.feedback-form{

  background:white;

  padding:50px;

  border-radius:24px;

  border:var(--border);

  box-shadow:var(--shadow);

}

.feedback-form input,
.feedback-form textarea{

  width:100%;

  border:var(--border);

  height:58px;

  padding:0 18px;

  margin-bottom:20px;

  font-family:'Inter',sans-serif;

  outline:none;

}

.feedback-form textarea{

  height:150px;

  padding-top:18px;

  resize:none;

}

.feedback-form input:focus,
.feedback-form textarea:focus{

  border-color:var(--primary);

}

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

.footer{

  background:#02131f;

  color:white;

  padding-top:100px;

}

.footer-wrapper{

  display:grid;
  grid-template-columns:
  1.5fr 1fr 1fr 1fr;

  gap:70px;

}

.footer-logo{

  width:120px;

  margin-bottom:20px;

  object-fit:contain;

}

.footer h3{

  font-size:34px;

  margin-bottom:22px;

}

.footer h4{

  margin-bottom:22px;

}

.footer p,
.footer a{

  color:
  rgba(255,255,255,0.72);

  line-height:1.9;

}

.footer a{

  display:block;

  margin-bottom:14px;

}

.social-icons{

  display:flex;
  gap:14px;

  margin-top:30px;

}

.social-icons a{

  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
  rgba(255,255,255,0.08);

  color:white;

  font-size:20px;

}

.footer-bottom{

  margin-top:80px;

  padding:30px 0;

  border-top:
  1px solid rgba(255,255,255,0.08);

  text-align:center;

}

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

@media(max-width:1100px){

  .hero-wrapper,
  .about-wrapper,
  .why-wrapper,
  .faq-grid,
  .feedback-section .container{

    grid-template-columns:1fr;

  }

  .service-card,
  .service-card:nth-child(even){

    grid-template-columns:1fr;

  }

  .service-content,
  .service-card:nth-child(even) .service-content{

    margin:0;
    margin-top:-50px;

  }

  .mission-grid,
  .career-grid,
  .blogs-grid{

    grid-template-columns:1fr 1fr;

  }

}

@media(max-width:768px){

  .hero-left h1,
  .about-left h2,
  .why-right h2,
  .section-heading h2,
  .faq-left h2,
  .feedback-section h2,
  .final-cta h2{

    font-size:54px;

    letter-spacing:-3px;

  }

  .mission-grid,
  .career-grid,
  .blogs-grid,
  .footer-wrapper{

    grid-template-columns:1fr;

  }

  .hero-buttons,
  .cta-buttons,
  .cta-stats{

    flex-direction:column;

    align-items:flex-start;

  }

  .hero-right img,
  .why-image{

    height:450px;

  }
  .menu-toggle.open span:nth-child(1){

  transform:
  rotate(45deg)
  translateY(8px);

}

.menu-toggle.open span:nth-child(2){

  opacity:0;

}

.menu-toggle.open span:nth-child(3){

  transform:
  rotate(-45deg)
  translateY(-8px);

}

}