/* ---------- Reset ---------- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* ---------- Base ---------- */

body {

  font-family: "Segoe UI", Arial, sans-serif;

  background-color: #f9fafc;

  color: #333;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 12px 24px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



/* ---------- Header ---------- */

.site-header {

  background: #fff;

  border-bottom: 1px solid #e3e3e3;

  position: sticky;

  top: 0;

  z-index: 10;

}



.left-section {

  display: flex;

  align-items: center;

  gap: 32px;

}



.logo img {

  height: 80px;

  width: auto;

  display: block;

}



/* Navigation Tabs */

.nav-tabs {

  display: flex;

  gap: 20px;

}



.nav-tabs a {

  text-decoration: none;

  color: #333;

  font-weight: 500;

  transition: color 0.2s ease;

}



.nav-tabs a:hover {

  color: #2b6cb0;

}



/* Shop Button */

.shop-btn {

  padding: 20px 18px;

  background-color: #2b6cb0;

  color: #fff;

  border: none;

  border-radius: 6px;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.3s ease;

}



.shop-btn:hover {

  background-color: #1e4e85;

}



/* ---------- Dropdown Menu Styles ---------- */

.dropdown {

  position: relative;

  display: inline-block;

}



.dropbtn {

  background: none;

  border: none;

  color: #333;

  font-weight: 500;

  font-size: 16px;

  cursor: pointer;

  padding: 0 10px;

  transition: color 0.2s ease;

}



.dropbtn:hover {

  color: #2b6cb0;

}



/* Hidden dropdown menu */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #fff;

  min-width: 160px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  border-radius: 6px;

  top: 35px;

  z-index: 100;

}



/* Dropdown links */

.dropdown-content a {

  display: block;

  padding: 10px 14px;

  color: #333;

  text-decoration: none;

  font-size: 14px;

  transition: background-color 0.2s ease;

}



.dropdown-content a:hover {

  background-color: #f0f4f9;

  color: #2b6cb0;

}



/* Show dropdown on hover */

/* .dropdown:hover .dropdown-content {

  display: block;

} */

.dropdown.open .dropdown-content {

  display: block;

}





/* ---------- Submenu (Nested Dropdown) Styles ---------- */

.sub-dropdown {

  position: relative;

}



.submenu-btn {

  display: block;

  padding: 10px 14px;

  color: #333;

  text-decoration: none;

  font-size: 14px;

  cursor: pointer;

}



.submenu-btn:hover {

  background-color: #f0f4f9;

  color: #2b6cb0;

}



/* Hide nested menu by default */

.sub-dropdown-content {

  display: none;

  position: absolute;

  left: 100%;

  top: 0;

  min-width: 200px;

  background-color: #fff;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  border-radius: 6px;

  z-index: 100;

}



/* Show submenu when hovering on Careers */

.sub-dropdown:hover .sub-dropdown-content {

  display: block;

}



/* Submenu links */

.sub-dropdown-content a {

  padding: 10px 14px;

  color: #333;

  display: block;

  text-decoration: none;

}



.sub-dropdown-content a:hover {

  background-color: #f0f4f9;

  color: #2b6cb0;

}



/* ---------- Mobile Menu Button ---------- */

.menu-toggle {

  display: none;

  background: none;

  border: none;

  font-size: 28px;

  cursor: pointer;

}



/* ---------- Main ---------- */

/* ---------- Video Slider ---------- */

/************************************

 HERO WRAPPER

*************************************/

.video-slider {

  position: relative;

  width: 100%;

  height: auto;

  aspect-ratio: 16 / 9;

  /* Ensures perfect responsive ratio */

  overflow: hidden;

  background: black;

  /* prevents white gap before loading */

}



/************************************

 SLIDER CONTAINER

*************************************/

.slider-container {

  display: flex;

  width: 100%;

  height: 100%;

}



.slide {

  position: relative;

  width: 100%;

  height: 100%;

}



/************************************

 VIDEO: Keep 16:9, No Cropping

*************************************/

.slide video {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);



  width: 100%;

  height: auto;

  max-height: 100%;

  object-fit: contain;

  /* preserve 16:9 without crop */

  background: black;

  /* letterbox background */

}



/************************************

 FALLBACK IMAGE HERO (same behavior, no cropping)

*************************************/

.image-hero {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);



  width: 100%;

  height: auto;

  max-height: 100%;

  background-size: contain;

  /* keep 16:9 */

  background-repeat: no-repeat;

  background-position: center;

  background-color: black;

}



/************************************

 MOBILE OPTIMIZATION

*************************************/

@media (max-width: 768px) {

  .video-slider {

    width: 100%;

    aspect-ratio: 16 / 9;

    /* stays correct */

    height: auto;

  }

}



/* ================= About Us Page ================= */



/* Hero Section */

.aboutus-hero {

  position: relative;

  /* background: url('./assets/image/about us header.jpg') center/cover no-repeat; */

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-align: center;

  overflow: hidden;

}



.aboutus-hero-overlay {

  position: absolute;

  inset: 0;

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

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.aboutus-hero-overlay h1 {

  font-size: 2.8rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

}



/* ===== ABOUT DETAILED LAYOUT ===== */



/* Container convenience (if you already have a container rule, keep that) */

.container {

  width: 92%;

  max-width: 1100px;

  margin: 0 auto;

  box-sizing: border-box;

}



/* Intro */

.about-intro {

  padding: 48px 0 12px;

  text-align: center;

  background: #ffffff;

}



.about-intro blockquote {

  font-size: 1.25rem;

  font-style: italic;

  font-weight: 600;

  margin: 0 auto 18px;

  max-width: 760px;

  color: #222;

}



.about-intro .lead {

  max-width: 920px;

  margin: 0 auto;

  color: #444;

  line-height: 1.75;

  font-size: 0.98rem;

}



/* image strip (three images in one row) */

.about-image-strip {

  padding: 18px 0;

  background: #fff;

}



.image-strip-grid {

  display: grid;

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

  gap: 8px;

}



.image-strip-grid img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  border-radius: 6px;

  display: block;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

}



/* Mission and Vision (two cards side by side) */

.mv-section {

  padding: 44px 0;

  background: #f7f9fd;

}



.mv-grid {

  display: grid;

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

  gap: 28px;

  align-items: start;

}



.mv-card {

  background: white;

  padding: 26px;

  border-radius: 8px;

  box-shadow: 0 8px 30px rgba(11, 33, 71, 0.05);

  text-align: center;

  min-height: 180px;

}



.mv-card h3 {

  margin: 6px 0 8px;

  color: #0b58b2;

  font-size: 1.1rem;

  letter-spacing: 0.6px;

  text-transform: uppercase;

}



.mv-divider {

  width: 56px;

  height: 4px;

  background: linear-gradient(90deg, #0b58b2, #37a6ff);

  margin: 8px auto 14px;

  border-radius: 2px;

}



.mv-card p {

  color: #333;

  line-height: 1.6;

  font-size: 0.95rem;

}



/* ===== Our Story Section ===== */

.our-story-section {

  background-color: #007bff;

  /* Blue background */

  padding: 80px 5%;

  font-family: "Poppins", sans-serif;

}



.our-story-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  max-width: 1200px;

  margin: 0 auto;

  flex-wrap: wrap;

}



.our-story-text {

  flex: 1;

  min-width: 300px;

  color: white;

  /* All text white */

}



.our-story-text h2 {

  font-size: 2rem;

  font-weight: 600;

  color: white;

  margin-bottom: 25px;

  position: relative;

}



.our-story-text h2::after {

  content: "";

  position: absolute;

  bottom: -10px;

  left: 0;

  width: 60px;

  height: 3px;

  background-color: #007bff;

  border-radius: 2px;

}



.our-story-text p {

  font-size: 1rem;

  color: white;

  line-height: 1.8;

  margin-bottom: 20px;

  text-align: justify;

}



.our-story-image {

  flex: 1;

  min-width: 300px;

  display: flex;

  justify-content: center;

}



.our-story-image img {

  width: 100%;

  max-width: 500px;

  border-radius: 10px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  object-fit: cover;

}



/* Choose section: left collage + right text card */

.choose-section {

  padding: 34px 0 64px;

  background: #f5f8fe;

}



.choose-grid {

  display: grid;

  grid-template-columns: 540px 1fr;

  gap: 28px;

  align-items: start;

}



/* collage */

.collage {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  height: 360px;

}



.col-left {

  display: grid;

  grid-template-rows: 1fr 1fr;

  gap: 8px;

}



.col-left img,

.col-right img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 6px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



.col-right img {

  grid-row: 1 / span 2;

}



/* choose card text */

.choose-card {

  background: #fff;

  padding: 28px;

  border-radius: 8px;

  box-shadow: 0 10px 30px rgba(11, 33, 71, 0.06);

}



.choose-card h3 {

  margin-top: 0;

  color: #0b58b2;

  font-size: 1.15rem;

  text-transform: uppercase;

  letter-spacing: .6px;

}



.choose-divider {

  width: 56px;

  height: 4px;

  background: linear-gradient(90deg, #0b58b2, #37a6ff);

  margin: 10px 0 16px;

  border-radius: 2px;

}



.choose-card p {

  color: #333;

  line-height: 1.6;

  margin-bottom: 12px;

  font-size: 0.95rem;

}



/* ===== Blue Border Line ===== */

.blue-border-line {

  width: 100%;

  height: 8px;

  background-color: #37a6ff;

}



/* ================= Award Page ================= */



/* Hero Section */

.award-hero {

  position: relative;

  background: center/cover no-repeat;

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-align: center;

  overflow: hidden;

}



.award-hero-overlay {

  position: absolute;

  inset: 0;

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

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.award-hero-overlay h1 {

  font-size: 2.8rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

}



/* ===== ABOUT DETAILED LAYOUT ===== */



/* ===== Awards Description Section ===== */

.awards-description {

  background-color: #f8f9fa;

  /* light background (you can change it if needed) */

  padding: 80px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-family: "Poppins", sans-serif;

}



.awards-description-container {

  max-width: 900px;

}



.awards-description p {

  font-size: 1.1rem;

  color: #333;

  line-height: 1.8;

}



/* Table Show Awards  */

/* ================= Awards List Section ================= */

.awards-list {

  padding: 60px 0;

  background-color: #f4f6f8;

}



.awards-list .container {

  width: 90%;

  max-width: 1000px;

  margin: 0 auto;

  display: block;

  /* ensure vertical stacking */

}



.award-card {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  width: 100%;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);

  margin-bottom: 25px;

  padding: 20px 25px;

  transition: all 0.3s ease;

}



.award-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);

}



.award-image-box {

  flex: 0 0 150px;

  text-align: center;

}



.award-image-box img {

  width: 120px;

  height: 150px;

  border-radius: 8px;

  object-fit: cover;

  margin-bottom: 8px;

}



.award-image-box .organization-name {

  font-size: 14px;

  font-weight: 600;

  color: #444;

}



.award-content {

  flex: 1;

  padding-left: 25px;

}



.award-content h3 {

  font-size: 20px;

  color: #004aad;

  margin-bottom: 8px;

  font-weight: 600;

}



.award-content p {

  color: #333;

  line-height: 1.6;

  font-size: 15px;

}



.no-data {

  text-align: center;

  color: #777;

  font-style: italic;

  margin-top: 40px;

}



@media (max-width: 768px) {

  .award-card {

    flex-direction: column;

    text-align: center;

  }



  .award-content {

    padding-left: 0;

    margin-top: 15px;

  }

}



/* ================= Awards List Section ================= */



/* ================= Team Page ================= */



/* Hero Section */

.team-hero {

  position: relative;

  background: url('./assets/image/team.jpg') center/cover no-repeat;

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-align: center;

  overflow: hidden;

}



.team-hero-overlay {

  position: absolute;

  inset: 0;



  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.team-hero-overlay h1 {

  font-size: 2.8rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

  color: #004aad;

  /* ✅ Added blue text color */

}



.team-hero-overlay p {

  font-size: 1.1rem;

  max-width: 700px;

  margin: 0 auto 25px auto;

  color: #333;

  line-height: 1.6;

}



.get-in-touch-btn {

  display: inline-block;

  margin-top: 20px;

  padding: 12px 28px;

  background-color: #004aad;

  /* 🔵 Blue background */

  color: #ffffff;

  /* ⚪ White text */

  font-size: 16px;

  font-weight: 500;

  border: none;

  border-radius: 6px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.get-in-touch-btn:hover {

  background-color: #003a88;

  /* darker blue on hover */

  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



/* Team Section */

.team-section {

  background-color: #e6f2ff;

  padding: 60px 20px;

  text-align: center;

}



.team-section h2 {

  font-size: 2rem;

  margin-bottom: 40px;

  color: #000;

}



.team-card-wrapper {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 30px;

}



.team-card {

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  width: 220px;

  transition: all 0.3s ease;

}



.team-card:hover {

  transform: translateY(-5px);

}



.team-image-box img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



.team-info {

  padding: 12px;

}



.team-info h3 {

  font-size: 1.1rem;

  color: #004aad;

  margin-bottom: 5px;

}



.team-info p {

  font-size: 0.95rem;

  color: #555;

}



/* Responsive */

@media (max-width: 768px) {

  .team-card-wrapper {

    flex-direction: column;

    align-items: center;

  }

}



/* ================= requiredjob Hero Section ================= */



.requiredjob-hero {

  position: relative;

  background: url('./assets/image/careerimage.jpg') center/cover no-repeat;

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-align: center;

  overflow: hidden;

}



.requiredjob-hero-overlay {

  position: absolute;

  inset: 0;



  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.requiredjob-hero-overlay h1 {

  font-size: 2.8rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

  color: #004aad;

  /* ✅ Added blue text color */

}



.requiredjob-hero-overlay p {

  font-size: 1.1rem;

  max-width: 700px;

  margin: 0 auto 25px auto;

  color: #333;

  line-height: 1.6;

}



/* requiredjob Section */

.requiredjob-section {

  background-color: #e6f2ff;

  padding: 60px 20px;

  text-align: center;

}



.requiredjob-section h2 {

  font-size: 2rem;

  margin-bottom: 40px;

  color: #000;

}



.requiredjob-list {

  padding: 60px 0;

  background-color: #f4f6f8;

}



.requiredjob-list .container {

  width: 90%;

  max-width: 1000px;

  margin: 0 auto;

  display: block;

  /* ensure vertical stacking */

}



.requiredjob-card {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  width: 100%;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);

  margin-bottom: 25px;

  padding: 20px 25px;

  transition: all 0.3s ease;

}



.requiredjob-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);

}



.requiredjob-image-box {

  flex: 0 0 150px;

  text-align: center;

}



.requiredjob-image-box img {

  width: 120px;

  height: 150px;

  border-radius: 8px;

  object-fit: cover;

  margin-bottom: 8px;

}



.requiredjob-image-box .organization-name {

  font-size: 14px;

  font-weight: 600;

  color: #444;

}



.requiredjob-content {

  flex: 1;

  padding-left: 25px;

}



.requiredjob-content h3 {

  font-size: 20px;

  color: #004aad;

  margin-bottom: 8px;

  font-weight: 600;

}



.requiredjob-content p {

  color: #333;

  line-height: 1.6;

  font-size: 15px;

}



.no-data {

  text-align: center;

  color: #777;

  font-style: italic;

  margin-top: 40px;

}



@media (max-width: 768px) {

  .requiredjob-card {

    flex-direction: column;

    text-align: center;

  }



  .requiredjob-content {

    padding-left: 0;

    margin-top: 15px;

  }

}



/* === forcefullyjob section === */



.forcefullyjob-hero {

  position: relative;

  background: url('./assets/image/careerimage.jpg') center/cover no-repeat;

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-align: center;

  overflow: hidden;

}



.forcefullyjob-hero-overlay {

  position: absolute;

  inset: 0;



  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.forcefullyjob-hero-overlay h1 {

  font-size: 2.8rem;

  font-weight: 600;

  letter-spacing: 1px;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

  color: #004aad;

  /* ✅ Added blue text color */

}



.forcefullyjob-hero-overlay p {

  font-size: 1.1rem;

  max-width: 700px;

  margin: 0 auto 25px auto;

  color: #333;

  line-height: 1.6;

}



/* forcefullyjob */

.forcefullyjob-section {

  background-color: #e6f2ff;

  padding: 60px 20px;

  text-align: center;

}



.forcefullyjob-section h2 {

  font-size: 2rem;

  margin-bottom: 40px;

  color: #000;

}



.forcefullyjob-form-section {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

}



.forcefullyjob-form-container {

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

  backdrop-filter: blur(10px);

  border-radius: 12px;

  padding: 30px;

  width: 400px;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);

}



.forcefullyjob-form-group {

  margin-bottom: 20px;

}



.forcefullyjob-form-group label {

  display: block;

  font-weight: 500;

  margin-bottom: 6px;

}



.forcefullyjob-form-group input,

.forcefullyjob-form-group textarea {

  width: 100%;

  padding: 10px;

  border: none;

  border-radius: 6px;

  background-color: #f0f0f0;

  outline: none;

  font-size: 14px;

  resize: none;

}



.forcefullyjob-form-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-top: 15px;

}



.forcefullyjob-attach-btn {

  background-color: #ffca28;

  color: #000;

  padding: 10px 20px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

}



.forcefullyjob-submit-btn {

  background-color: #32e0c4;

  color: #000;

  padding: 10px 25px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

}



.forcefullyjob-attach-btn:hover {

  background-color: #f1b400;

}



.forcefullyjob-submit-btn:hover {

  background-color: #28c7a9;

}



/* ==== Testimonials Section (Matches Service Card Style) ==== */





.testimonials-section {

  background-color: #fff7f2;

  padding: 60px 0;

  text-align: center;

}



.testimonials-section h2 {

  font-size: 1.8rem;

  color: #000;

  margin-bottom: 30px;

  border-bottom: 2px solid #c00;

  display: inline-block;

  padding-bottom: 8px;

}



.testimonials-container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}



.testimonials-card-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 40px;

  justify-content: center;

}



.testimonials-card {

  background-color: #d9f1ff;

  border-radius: 20px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  padding: 25px;

  position: relative;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.testimonials-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}



.testimonials-image {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 15px;

}



.testimonials-image img {

  width: 100%;

  max-width: 300px;

  height: 200px;

  object-fit: cover;

  border-radius: 10px;

}



.testimonials-card h3 {

  font-size: 1.2rem;

  color: #c00;

  margin-top: 10px;

  font-weight: 600;

}



.designation {

  font-size: 1rem;

  color: #333;

  font-weight: 500;

  margin: 5px 0 10px;

}



.message {

  font-size: 0.95rem;

  color: #333;

  line-height: 1.5;

  margin-bottom: 10px;

}



.no-data {

  text-align: center;

  color: #888;

  font-style: italic;

}



/* index about sectipn */



.index-about-section {

  padding: 60px 0;

  background-color: #baeaf3;

}



.index-about-container {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 40px;

  max-width: 1100px;

  margin: 0 auto;

  flex-wrap: wrap;

  /* responsive support */

}



.index-about-image img {

  width: 100%;

  max-width: 450px;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.index-about-content {

  flex: 1;

  min-width: 300px;

}



.index-about-content h2 {

  font-size: 2.2rem;

  color: #333;

  margin-bottom: 20px;

}



.index-about-content p {

  font-size: 1rem;

  color: #555;

  line-height: 1.7;

}



/* Responsive */

@media (max-width: 768px) {

  .index-about-container {

    flex-direction: column;

    text-align: center;

  }



  .index-about-content {

    margin-top: 20px;

  }

}









/* contact-section*/

.contact-section {

  /* make the section take most of the viewport so vertical centering works */

  min-height: calc(100vh - 140px);

  /* adjust 140px if your header+footer height differs */

  display: flex;

  align-items: center;

  /* vertical center */

  justify-content: center;

  /* horizontal center */

  padding: 40px 20px;

  background-color: #f7f9fb;

}



.contact-inner {

  width: 100%;

  max-width: 520px;

  /* form card width */

  text-align: center;

}



/* Title with underline centered */

.contact-title {

  margin: 0 0 22px 0;

  font-size: 28px;

  color: #222;

  display: inline-block;

  position: relative;

}



.contact-title::after {

  content: "";

  display: block;

  height: 3px;

  width: 60%;

  background: #0073e6;

  margin: 10px auto 0;

}



/* Form card */

.contact-form {

  background: #ffffff;

  padding: 28px;

  border-radius: 10px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

  text-align: left;

  /* keep labels above inputs */

}



/* one column rows */

.form-row {

  margin-bottom: 16px;

}



/* labels */

.contact-form label {

  display: block;

  margin-bottom: 6px;

  font-weight: 600;

  color: #333;

  font-size: 14px;

}



/* inputs and textarea full width */

.contact-form input[type="text"],

.contact-form input[type="tel"],

.contact-form input[type="email"],

.contact-form textarea {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #d0d7de;

  border-radius: 8px;

  font-size: 14px;

  background: #fff;

  transition: border-color .15s ease, box-shadow .15s ease;

}



.contact-form input:focus,

.contact-form textarea:focus {

  outline: none;

  border-color: #0073e6;

  box-shadow: 0 0 0 4px rgba(0, 115, 230, 0.06);

}



/* submit button full width */

.submit-btn {

  display: inline-block;

  width: 100%;

  padding: 12px;

  font-size: 16px;

  border-radius: 8px;

  border: none;

  background: #0073e6;

  color: #fff;

  cursor: pointer;

  font-weight: 600;

}



.submit-btn:hover {

  background: #005bb5;

}



/* ===== Map Section ===== */

.map-section {

  background: #eef3f7;

  padding: 60px 20px;

  text-align: center;

}



.map-title {

  font-size: 26px;

  color: #222;

  margin-bottom: 20px;

  position: relative;

  display: inline-block;

}



.map-title::after {

  content: "";

  display: block;

  height: 3px;

  width: 60%;

  background: #0073e6;

  margin: 8px auto 0;

}



.map-container {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}



/* ---------- Footer Info Section ---------- */

.footer-info {

  background-color: #ffffff;

  border-top: 1px solid #e3e3e3;

  border-bottom: 1px solid #e3e3e3;

  padding: 40px 0;

}



.footer-info-container {

  display: grid;

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

  gap: 30px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



.footer-col h3 {

  font-size: 18px;

  margin-bottom: 12px;

  color: #2b6cb0;

}



.footer-col p {

  color: #555;

  font-size: 14px;

  line-height: 1.6;

  margin-bottom: 6px;

}



.footer-logo img {

  height: 45px;

  width: auto;

  margin-bottom: 10px;

}



.footer-links {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links li {

  margin-bottom: 6px;

}



.footer-links a {

  text-decoration: none;

  color: #333;

  font-size: 14px;

  transition: color 0.2s ease;

}



.footer-links a:hover {

  color: #2b6cb0;

}





/* ---------- Footer ---------- */

.site-footer {

  background-color: #f3f6f8;

  border-top: 1px solid #e3e3e3;

  padding: 14px 0;

  font-size: 14px;

  color: #555;

}



.footer-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



.footer-right span {

  color: #2b6cb0;

  font-weight: 600;

}



/* ---------- Responsive Design ---------- */

@media (max-width: 900px) {

  .nav-tabs {

    display: none;

    flex-direction: column;

    background: #fff;

    position: absolute;

    top: 70px;

    left: 0;

    width: 100%;

    border-top: 1px solid #eee;

  }



  .nav-tabs.active {

    display: flex;

  }



  .menu-toggle {

    display: block;

    margin-left: 12px;

  }



  .left-section {

    flex: 1;

    justify-content: space-between;

  }

}



@media (max-width: 600px) {

  .footer-container {

    flex-direction: column;

    text-align: center;

    gap: 6px;

  }

}





@media (max-width: 900px) {

  .dropdown-content {

    position: static;

    box-shadow: none;

    border-radius: 0;

  }



  .dropbtn {

    width: 100%;

    text-align: left;

  }

}



/* Responsive behavior */

@media (max-width: 900px) {

  .sub-dropdown-content {

    position: static;

    box-shadow: none;

  }

}



/* ---------- Responsive (Mobile) ---------- */

@media (max-width: 900px) {

  .footer-info-container {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .footer-logo img {

    margin: 0 auto 10px;

  }

}



/* Responsive height */

@media (max-width: 768px) {

  .video-slider {

    height: 50vh;

  }

}



/* Responsive tweaks */

@media (max-width:480px) {

  .contact-inner {

    padding: 0 8px;

  }



  .contact-form {

    padding: 20px;

  }



  .contact-title {

    font-size: 22px;

  }

}



/* Responsive */

@media (max-width: 480px) {



  .contact-title,

  .map-title {

    font-size: 22px;

  }



  .contact-form {

    padding: 20px;

  }

}



/* Responsive Adjustments */

@media (max-width: 768px) {

  .service-card-container {

    grid-template-columns: 1fr;

    gap: 25px;

  }

}



/* Responsive */

@media (max-width: 768px) {

  .aboutus-hero {

    height: 40vh;

  }



  .aboutus-hero-overlay h1 {

    font-size: 1.8rem;

    padding: 0 20px;

  }



}



/* Responsive adjustments */

@media (max-width: 980px) {

  .mv-grid {

    grid-template-columns: 1fr;

  }



  .story-grid {

    grid-template-columns: 1fr;

  }



  .choose-grid {

    grid-template-columns: 1fr;

  }



  .image-strip-grid img {

    height: 140px;

  }



  .collage {

    height: 260px;

    grid-template-columns: 1fr 1fr;

  }



  .col-right img {

    grid-row: auto;

  }

}



@media (max-width: 560px) {

  .image-strip-grid {

    grid-template-columns: 1fr;

  }



  .image-strip-grid img {

    height: 220px;

  }



  .collage {

    grid-template-columns: 1fr;

    grid-auto-rows: 140px;

    height: auto;

  }



  .choose-card,

  .story-card,

  .mv-card {

    padding: 20px;

  }



  .mv-grid,

  .choose-grid {

    gap: 18px;

  }

}



/* Responsive */

@media (max-width: 992px) {

  .our-story-container {

    flex-direction: column;

    text-align: center;

  }



  .our-story-text h2::after {

    left: 50%;

    transform: translateX(-50%);

  }



  .our-story-image img {

    max-width: 100%;

  }

}





/* Project Page Styles */



.project-hero {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  height: 350px;

  position: relative;

}



.project-hero-overlay {

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

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 2.4rem;

  font-weight: bold;

}



.project-intro {

  padding: 60px 0;

  background-color: #f9f9f9;

  /* optional */

}



.project-intro h2 {

  font-size: 32px;

  font-weight: 700;

  margin-bottom: 15px;

  /* space between heading & paragraph */

  text-transform: capitalize;

}



.project-intro p {

  font-size: 18px;

  line-height: 1.6;

  margin: 0 auto;

  /* keeps paragraph centered */

  max-width: 800px;

  text-align: justify;

  /* gives nice readable width */

}



.project-grid-section {

  padding: 60px 0;

  background: #becedf;

  /* blue like screenshot */

}



.project-grid {

  display: grid;

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

  /* 3 cards per row */

  gap: 25px;

}



.project-card {

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  padding-bottom: 15px;

}



.project-card img {

  width: 100%;

  height: 180px;

  object-fit: cover;

}



.project-card h4 {

  font-size: 18px;

  font-weight: 700;

  margin: 12px 15px 5px;

}



.project-card p {

  margin: 8px 15px;

  line-height: 1.5;

  text-align: justify;

}



.project-card p strong {

  font-weight: 600;

}



/* Project Page Styles */



/* ============================

   GLOBAL SECTION STYLES

============================ */

.awards-section,



.product-section,

.testimonial-section {

  padding: 60px 40px;

  background: #f9f9f9;

  margin-top: 40px;

}



.awards-section:nth-of-type(odd),



.product-section:nth-of-type(odd),

.testimonial-section:nth-of-type(odd) {

  background: #ffffff;

}



.section-title {

  text-align: center;

  font-size: 32px;

  font-weight: 700;

  margin-bottom: 40px;

  color: #1c3c85;

  /* adjust to your theme */

}

/* ============================ */

.awards-section .card-container,

.product-section .card-container,

.testimonial-section .card-container {

  display: grid;

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

  gap: 30px;

  justify-items: center;

}



/* =============================  */

/* ============================

customer review section

============================= */



/* ============================

   ROW CONTAINER (Flex Layout)

============================ */

.row-container {

  display: flex;

  justify-content: center;

  gap: 25px;

  flex-wrap: wrap;

  width: 100%;

  max-width: 1200px;

  margin: auto;

}



/* ============================

   CARD BOX

============================ */

.card-box {

  width: 225px;

  min-height: 260px;

  background: #ffffff;

  padding: 20px;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  text-align: center;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.card-box:hover {

  transform: translateY(-5px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);

}



/* ============================

   CARD IMAGE

============================ */

.card-img {

  width: 100%;

  height: 180px;

  object-fit: cover;

  border-radius: 10px;

  margin-bottom: 15px;

}



/* ============================

   AWARDS CONTENT

============================ */

.awards-section .card-box h3 {

  font-size: 20px;

  margin-bottom: 10px;

  color: #00336b;

}



.awards-section .card-box p {

  font-size: 15px;

  color: #444;

}



/* ============================

   TEAM CONTENT

============================ */

.team-section .card-box h3 {

  font-size: 18px;

  margin-top: 10px;

  font-weight: 600;

  color: #333;

}



.team-section .card-box p {

  font-size: 15px;

  color: #555;

}



/* ============================

   TESTIMONIALS CONTENT

============================ */

.testimonial-text {

  font-style: italic;

  font-size: 16px;

  color: #333;

  margin-bottom: 15px;

}



.testimonial-author {

  font-size: 15px;

  font-weight: bold;

  color: #1c3c85;

}



/* ============================

   RESPONSIVE DESIGN

============================ */

@media (max-width: 768px) {

  .card-box {

    width: 100%;

    max-width: 400px;

  }

}



/* ============================

   BLOG LIST PAGE (blogs.php)

============================ */

.blogs-title {

  text-align: center;

  font-size: 34px;

  margin: 40px 0;

  color: #1c3c85;

}



.blogs-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 25px;

  justify-content: center;

  padding: 0 30px 50px;

}



.blog-card {

  width: 300px;

  background: #fff;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  overflow: hidden;

  transition: 0.3s ease;

}



.blog-card:hover {

  transform: translateY(-6px);

}



.blog-card-img {

  width: 100%;

  height: 150px;

  object-fit: cover;

}



.blog-card-body {

  padding: 20px;

}



.blog-card-body h3 {

  font-size: 20px;

  margin-bottom: 8px;

}



.blog-meta {

  font-size: 13px;

  color: #666;

  margin-bottom: 10px;

}



.blog-excerpt {

  font-size: 15px;

  color: #444;

  margin-bottom: 15px;

}



.blog-btn {

  display: inline-block;

  background: #1c3c85;

  color: white;

  padding: 10px 16px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 14px;

}



/* ============================

   BLOG DETAIL PAGE

============================ */

.blog-detail-section {

  max-width: 900px;

  margin: 40px auto;

  padding: 20px;

}



.blog-detail-title {

  font-size: 36px;

  color: #1c3c85;

  margin-bottom: 10px;

}



.detail-meta {

  font-size: 14px;

  color: #777;

  margin-bottom: 20px;

}



.blog-detail-img {

  width: 100%;

  height: 500px;

  border-radius: 10px;

  margin-bottom: 25px;

}



.blog-detail-video {

  margin: 30px 0;

}



.blog-detail-body {

  font-size: 18px;

  color: #333;

  line-height: 1.7;

  margin-top: 20px;

}



@media (max-width: 768px) {

  .blog-card {

    width: 100%;

    max-width: 420px;

  }



  .blog-detail-title {

    font-size: 28px;

  }

}



/* ============================

   PRODUCT HERO SECTION

============================ */

.product-hero-section {

  width: 100%;

  height: 350px;

  background-size: cover;

  background-position: center;

  position: relative;

}



.product-hero-overlay {

  width: 100%;

  height: 100%;

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

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}



.product-hero-title {

  font-size: 40px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #333;

}



.product-hero-subtext {

  max-width: 700px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;

}





/* ============================

   PRODUCTS GRID SECTION

============================ */

.products-section {

  padding: 50px 40px;

  background: #fff;

}



.products-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 25px;

  max-width: 1200px;

  margin: auto;

}



/* ============================

   PRODUCT CARD

============================ */

.product-card {

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  padding: 15px;

  transition: 0.25s ease;

  text-align: center;

}



.product-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);

}



/* PRODUCT IMAGE */

.product-img {

  width: 100%;

  height: 170px;

  border-radius: 10px;

  object-fit: cover;

  margin-bottom: 15px;

}



/* PRODUCT TEXT */

.product-name {

  font-size: 18px;

  font-weight: 600;

  color: #222;

  margin-bottom: 8px;

}



.product-desc {

  color: #555;

  font-size: 15px;

  line-height: 1.5;

}



/* Responsive */

@media (max-width: 768px) {

  .product-hero-title {

    font-size: 30px;

  }



  .products-section {

    padding: 30px 20px;

  }

}



/* ---------------- HERO ---------------- */

.product-detail-hero {

  height: 360px;

  background-size: cover;

  background-position: center;

  position: relative;

}



/* ---------------- HERO ---------------- */

.industry-detail-hero {

  height: 360px;

  background-size: cover;

  background-position: center;

  position: relative;

}



/* ---------------- PAGE LAYOUT ---------------- */

.industry-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}





/* ---------------- PAGE LAYOUT ---------------- */

.product-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.faq-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.text-primary {

  color: #007bff;

}



/* ---------------- ENQUIRY BUTTON ---------------- */

.btn-primary {

  background: #007bff;

  padding: 10px 25px;

  border-radius: 5px;

  color: #fff;

  text-decoration: none;

  cursor: pointer;

  border: none;

}



/* ---------------- MODAL ---------------- */

.modal-bg {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  justify-content: center;

  align-items: center;

}



.modal-box {

  background: white;

  width: 90%;

  max-width: 420px;

  padding: 20px;

  border-radius: 8px;

}



.modal-close {

  float: right;

  cursor: pointer;

}



.modal-box input,

.modal-box textarea {

  width: 100%;

  padding: 10px;

  margin-top: 4px;

  margin-bottom: 12px;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

  /* FIX FOR ALIGNMENT */

}



/* ---------------- ACCORDION ---------------- */

.accordion-item {

  background: #f9f9f9;

  margin-bottom: 8px;

  border-radius: 5px;

  overflow: hidden;

}



.accordion-header {

  padding: 15px;

  background: #e9e9e9;

  cursor: pointer;

  font-weight: bold;

}



.accordion-body {

  display: none;

  padding: 15px;

}



/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {

  .product-detail-hero {

    height: 250px;

  }

}





/* ============================

   IT Service Section HERO SECTION

============================ */

.it-service-hero-section {

  width: 100%;

  height: 350px;

  background-size: cover;

  background-position: center;

  position: relative;

}



.it-service-hero-overlay {

  width: 100%;

  height: 100%;

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

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}



.it-service-hero-title {

  font-size: 40px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #333;

}



.it-service-hero-subtext {

  max-width: 700px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;

}





/* ============================

   it-service GRID SECTION

============================ */

.it-services-section {

  padding: 50px 40px;

  background: #fff;

}



.it-services-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 25px;

  max-width: 1200px;

  margin: auto;

}



/* ============================

   it-service CARD

============================ */

.it-service-card {

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  padding: 15px;

  transition: 0.25s ease;

  text-align: center;

}



.it-service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);

}



/* it-service IMAGE */

.it-service-img {

  width: 100%;

  height: 170px;

  border-radius: 10px;

  object-fit: cover;

  margin-bottom: 15px;

}



/* it-service TEXT */

.it-service-name {

  font-size: 18px;

  font-weight: 600;

  color: #222;

  margin-bottom: 8px;

}



.it-service-desc {

  color: #555;

  font-size: 15px;

  line-height: 1.5;

}



/* Responsive */

@media (max-width: 768px) {

  .it-service-hero-title {

    font-size: 30px;

  }



  .it-service-section {

    padding: 30px 20px;

  }

}



/* ---------------- HERO ---------------- */

.it-service-detail-hero {

  height: 360px;

  background-size: cover;

  background-position: center;

  position: relative;

}



/* ---------------- PAGE LAYOUT ---------------- */

.it-service-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.it-service-faq-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.text-primary {

  color: #007bff;

}



/* ---------------- ENQUIRY BUTTON ---------------- */

.it-service-btn-primary {

  background: #007bff;

  padding: 10px 25px;

  border-radius: 5px;

  color: #fff;

  text-decoration: none;

  cursor: pointer;

  border: none;

}



/* ---------------- MODAL ---------------- */

.modal-bg {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  justify-content: center;

  align-items: center;

}



.modal-box {

  background: white;

  width: 90%;

  max-width: 420px;

  padding: 20px;

  border-radius: 8px;

}



.modal-close {

  float: right;

  cursor: pointer;

}



.modal-box input,

.modal-box textarea {

  width: 100%;

  padding: 10px;

  margin-top: 4px;

  margin-bottom: 12px;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

  /* FIX FOR ALIGNMENT */

}



/* ---------------- ACCORDION ---------------- */

.accordion-item {

  background: #f9f9f9;

  margin-bottom: 8px;

  border-radius: 5px;

  overflow: hidden;

}



.accordion-header {

  padding: 15px;

  background: #e9e9e9;

  cursor: pointer;

  font-weight: bold;

}



.accordion-body {

  display: none;

  padding: 15px;

}



/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {

  .it-service-detail-hero {

    height: 250px;

  }

}

	  

	  

/* ============================

   IOT Service Section HERO SECTION

============================ */

.iot-service-hero-section {

  width: 100%;

  height: 350px;

  background-size: cover;

  background-position: center;

  position: relative;

}



.iot-service-hero-overlay {

  width: 100%;

  height: 100%;

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

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}



.iot-service-hero-title {

  font-size: 40px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #333;

}



.iot-service-hero-subtext {

  max-width: 700px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;

}





/* ============================

   iot-service GRID SECTION

============================ */

.iot-services-section {

  padding: 50px 40px;

  background: #fff;

}



.iot-services-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 25px;

  max-width: 1200px;

  margin: auto;

}



/* ============================

   iot-service CARD

============================ */

.iot-service-card {

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  padding: 15px;

  transition: 0.25s ease;

  text-align: center;

}



.iot-service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);

}



/* iot-service IMAGE */

.iot-service-img {

  width: 100%;

  height: 170px;

  border-radius: 10px;

  object-fit: cover;

  margin-bottom: 15px;

}



/* iot-service TEXT */

.iot-service-name {

  font-size: 18px;

  font-weight: 600;

  color: #222;

  margin-bottom: 8px;

}



.iot-service-desc {

  color: #555;

  font-size: 15px;

  line-height: 1.5;

}



/* Responsive */

@media (max-width: 768px) {

  .iot-service-hero-title {

    font-size: 30px;

  }



  .iot-service-section {

    padding: 30px 20px;

  }

}



/* ---------------- HERO ---------------- */

.iot-service-detail-hero {

  height: 360px;

  background-size: cover;

  background-position: center;

  position: relative;

}



/* ---------------- PAGE LAYOUT ---------------- */

.iot-service-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.iot-service-faq-detail-container {

  width: 90%;

  max-width: 1100px;

  margin: auto;

}



.text-primary {

  color: #007bff;

}



/* ---------------- ENQUIRY BUTTON ---------------- */

.iot-service-btn-primary {

  background: #007bff;

  padding: 10px 25px;

  border-radius: 5px;

  color: #fff;

  text-decoration: none;

  cursor: pointer;

  border: none;

}



/* ---------------- MODAL ---------------- */

.modal-bg {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  justify-content: center;

  align-items: center;

}



.modal-box {

  background: white;

  width: 90%;

  max-width: 420px;

  padding: 20px;

  border-radius: 8px;

}



.modal-close {

  float: right;

  cursor: pointer;

}



.modal-box input,

.modal-box textarea {

  width: 100%;

  padding: 10px;

  margin-top: 4px;

  margin-bottom: 12px;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

  /* FIX FOR ALIGNMENT */

}



/* ---------------- ACCORDION ---------------- */

.accordion-item {

  background: #f9f9f9;

  margin-bottom: 8px;

  border-radius: 5px;

  overflow: hidden;

}



.accordion-header {

  padding: 15px;

  background: #e9e9e9;

  cursor: pointer;

  font-weight: bold;

}



.accordion-body {

  display: none;

  padding: 15px;

}



/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {

  .it-service-detail-hero {

    height: 250px;

  }

}

	  

	  

/* ============================

   INDUSTRY HERO SECTION

============================ */

.industry-hero-section {

  width: 100%;

  height: 350px;

  background-size: cover;

  background-position: center;

  position: relative;

}



.industry-hero-overlay {

  width: 100%;

  height: 100%;

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

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}



.industry-hero-title {

  font-size: 40px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #333;

}



.industry-hero-subtext {

  max-width: 700px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;

}



/* ============================

   INDUSTRY GRID SECTION

============================ */

.industry-section {

  padding: 50px 40px;

  background: #fff;

}



.industry-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 25px;

  max-width: 1200px;

  margin: auto;

}



/* ============================

   INDUSTRY CARD

============================ */

.industry-card {

  background: #ffffff;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);

  padding: 15px;

  transition: 0.25s ease;

  text-align: center;

}



.industry-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);

}



/* INDUSTRY IMAGE */

.industry-img {

  width: 100%;

  height: 170px;

  border-radius: 10px;

  object-fit: cover;

  margin-bottom: 15px;

}



/* INDUSTRY TEXT */

.industry-name {

  font-size: 18px;

  font-weight: 600;

  color: #222;

  margin-bottom: 8px;

}



.industry-desc {

  color: #555;

  font-size: 15px;

  line-height: 1.5;

}



/* Responsive */

@media (max-width: 768px) {

  .industry-hero-title {

    font-size: 30px;

  }



  .industry-section {

    padding: 30px 20px;

  }

}

/* mega menu */

/* Mega Menu Layout */

.mega-menu {

  display: none;

  position: absolute;

  top: 35px;

  left: 0;

  padding: 20px 30px;

  background: #fff;

  border-radius: 6px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  z-index: 100;

  display: flex;

  gap: 40px;

}



/* .dropdown.open .mega-menu {

  display: flex;

} */



.dropdown-content.mega-menu {

  display: none;

}



.dropdown.open .dropdown-content.mega-menu {

  display: flex;

}



/* Each column */

.mega-column {

  min-width: 180px;

}



.mega-column ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



.mega-column li {

  margin-bottom: 10px;

}



.mega-column li a {

  color: #333;

  text-decoration: none;

  font-size: 14px;

  display: block;

  padding: 4px 0;

}



.mega-column li a:hover {

  color: #2b6cb0;

}



/* mega menu */