@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

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

.container {
  max-width: 1279px;
  margin: 0 auto;
}

body {
  font-size: 16px;
}

p {
  line-height: 26px;
}



/* =====================
   GLOBAL BLUE ARROW BUTTON
===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 57px;
  min-width: 214px;
  padding: 0 22px;

  background-color: #3CA3CA;
  color: #ffffff;

  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;

  transition: background-color 0.25s ease, transform 0.2s ease;
}

/* Hover */
.btn:hover {
  background-color: #3292b7;
}

.btn .arrow {
  font-size: 16px;
  transform: translateY(3px);
}





/* HEADER */
.site-header {
  position: relative;
  background: url("header-bg.jpg") center/cover no-repeat;
  z-index: 9;
  margin-bottom: -56px;
  top: 38px;
}

/* Dark overlay */
.header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.header-inner {
  display: flex;
  justify-content: space-between;
}

/* LOGO */
.logo img {
  width: 132px;
  height: 48px;
}

/* NAV */
.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity 0.3s;
}

.nav a:hover {
  opacity: 0.7;
}

/* BUTTON */
.hire-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 0 36px;
  background-color: #318BAD;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  min-height: 47px;
  transition: background-color 0.3s ease;
}

.hire-btn:hover {
  background-color: #277b97;
}

/* HEADER BASE */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* HAMBURGER */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9;
  transition: .4s ease-in-out;
}
button.menu-toggle.active span:nth-child(2) {
    display: none;
     transition: .4s ease-in-out;
}
button.menu-toggle.active span:last-child {
    transform: rotate(-45deg);
    top: -8px;
    position: relative;
     transition: .4s ease-in-out;
}
button.menu-toggle.active span:first-child {
    transform: rotate(45deg);
     transition: .4s ease-in-out;
}
.menu-toggle span {
  width: 26px;
  height: 2px;
  background: #fff;
  display: block;
   transition: .4s ease-in-out;
}

/* MOBILE NAV */
.mobile-nav {
  background: rgba(0, 0, 0, 0.92);
  border-radius: 8px;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  transition: .4s ease-in-out;
}
.nav-inner{
flex-direction: column;
  gap: 18px;
  display: flex;
  padding:100px 20px;
}

.mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.mobile-btn {
  margin-top: 10px;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 992px) {

  .nav,
  .hire-btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav.active {
    width: 100%; 
    transition: .4s ease-in-out;
  }
}

/* header ends  */


/* banner area  */


.hero {
  position: relative;
  min-height: 870px;
  background: url("../images/banner-bg.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  background-position: 0 73%;
}

.hero .container {
  width: 1279px;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 31px;
}

/* TEXT */
.hero-title {
  font-size: 67px;
  font-weight: 700;
  color: #3aa6d8;
  letter-spacing: 0.5px;
  font-family: "Rajdhani", sans-serif;
}

.hero-subtitle {
  font-size: 34px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 28px;
}

.hero-content a.btn {
  align-self: baseline;
}



/* FEATURES SECTION */
.features {
  background: #ffffff;
  padding: 53px 0;
}

.features-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 130px;
  text-align: center;
}

/* ITEM */
.feature-item img {
  height: 70px;
  margin-bottom: 23px;
}

.feature-item h3 {
  font-size: 22px;
  font-weight: 500;
  color: #000000;
  font-family: "Work Sans", sans-serif;
  margin-bottom: 12px;
}

.feature-item p {
  font-size: 15px;
  color: #555555;
}


/* features section ends  */

/* about section starts  */

.about {
  background: #ffffff;
  padding: 100px 0;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* IMAGE */
.about-image {
  background: #f4f4f6;
  border-radius: 16px;
  padding: 32px;
  min-height: 476px;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* CONTENT */
.about-label {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #318BAD;
  margin-bottom: 10px;
  font-family: "Work Sans", sans-serif;
}

.about-title {
  font-size: 42px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 20px;
  line-height: 1.2;
  font-family: "Work Sans", sans-serif;
  margin-bottom: 18px;
}

.about-text {
  font-size: 16px;
  line-height: 1.7;
  color: #000;
  margin-bottom: 22px;
}

/* about section ends  */


/* services section starts  */


.services {
  background: radial-gradient(circle at top left, #0f4c64, #021e2a);
  padding: 100px 0;
  color: #ffffff;
}

.services-container,
.service-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}

/* LEFT */
.services-label {
  font-size: 18px;
  color: #3CA3CA;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
}

.service-head .right-head p {
  font-family: "Work Sans", sans-serif;
}

.services-title {
  font-size: 42px;
  font-weight: 600;
  margin: 10px 0 32px;
  line-height: 1.2;
  font-family: "Work Sans", sans-serif;
}

/* ACCORDION */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Work Sans", sans-serif;
}

.accordion-header .chevron {
  margin-left: auto;
  opacity: 0.7;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
  /* DOWN */
}

.accordion-item.active .accordion-header .chevron {
  transform: rotate(0deg);
  /* UP */
}

.accordion-content {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #d0e9f3;
}

.accordion-content ul {
  padding-left: 18px;
}

.accordion-content li {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}

.accordion-content .custom-list {
  list-style: none;
  padding-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 28px;
  /* space for icon */
  margin-bottom: 12px;
  line-height: 1.6;
}

.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;

  width: 15px;
  height: 15px;

  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.17338 14.3468C11.1352 14.3468 14.3468 11.1352 14.3468 7.17338C14.3468 3.21152 11.1352 0 7.17338 0C3.21152 0 0 3.21152 0 7.17338C0 11.1352 3.21152 14.3468 7.17338 14.3468ZM9.70988 4.63687C9.84458 4.50236 10.0272 4.42688 10.2175 4.42701C10.4079 4.42714 10.5904 4.50289 10.7249 4.63759C10.8594 4.77229 10.9349 4.9549 10.9348 5.14525C10.9346 5.33561 10.8589 5.51811 10.7242 5.65262L6.66909 9.70773L6.66622 9.7106C6.59976 9.77745 6.52073 9.83049 6.4337 9.86669C6.34666 9.90289 6.25333 9.92152 6.15906 9.92152C6.0648 9.92152 5.97146 9.90289 5.88443 9.86669C5.79739 9.83049 5.71837 9.77745 5.6519 9.7106L5.64903 9.70773L3.62256 7.68125C3.55404 7.61508 3.49939 7.53593 3.4618 7.44841C3.4242 7.36089 3.40442 7.26676 3.40359 7.17151C3.40276 7.07627 3.42091 6.98181 3.45698 6.89365C3.49305 6.80549 3.54631 6.7254 3.61366 6.65805C3.68102 6.59069 3.76111 6.53743 3.84927 6.50136C3.93743 6.46529 4.03188 6.44714 4.12713 6.44797C4.22238 6.4488 4.31651 6.46859 4.40403 6.50618C4.49154 6.54378 4.5707 6.59842 4.63687 6.66694L6.15906 8.18841L9.70988 4.63759V4.63687Z' fill='%23FF996A'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* OPEN STATE */
.accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;

  transition:
    max-height 0.45s ease,
    opacity 0.3s ease;

  padding: 0 20px;
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  /* enough to fit content */
  opacity: 1;
  padding-bottom: 18px;
}


/* RIGHT */
.services-right {
  height: 100%;
  display: flex;
  position: sticky;
  top: 0;
}

.services-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}


.services-left button.accordion-header .icon,
.services-left button.accordion-header .icon img {
  width: 42px;
  height: 42px;
}

/* services section ends  */



/* CLOUD PRINTING SECTION */
.cloud-printing {
  padding: 80px 0;
  background: #ffffff;
}

.cloud-title {
  text-align: center;
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 50px;
  color: #000;
  font-family: "Work Sans", sans-serif;
}

/* GRID */
.cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* CARD */
.cloud-card {
  border: 1px solid #8F8F8F;
  border-radius: 10px;
  padding: 28px 24px;
  background: #F6F6F6;
}

/* LIST */
.cloud-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cloud-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1.6;
  color: #222;
  font-weight: 500;
}

/* CHECK ICON */
.cloud-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;

  width: 12px;
  height: 12px;

  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.17338 14.3468C11.1352 14.3468 14.3468 11.1352 14.3468 7.17338C14.3468 3.21152 11.1352 0 7.17338 0C3.21152 0 0 3.21152 0 7.17338C0 11.1352 3.21152 14.3468 7.17338 14.3468ZM9.70988 4.63687C9.84458 4.50236 10.0272 4.42688 10.2175 4.42701C10.4079 4.42714 10.5904 4.50289 10.7249 4.63759C10.8594 4.77229 10.9349 4.9549 10.9348 5.14525C10.9346 5.33561 10.8589 5.51811 10.7242 5.65262L6.66909 9.70773L6.66622 9.7106C6.59976 9.77745 6.52073 9.83049 6.4337 9.86669C6.34666 9.90289 6.25333 9.92152 6.15906 9.92152C6.0648 9.92152 5.97146 9.90289 5.88443 9.86669C5.79739 9.83049 5.71837 9.77745 5.6519 9.7106L5.64903 9.70773L3.62256 7.68125C3.55404 7.61508 3.49939 7.53593 3.4618 7.44841C3.4242 7.36089 3.40442 7.26676 3.40359 7.17151C3.40276 7.07627 3.42091 6.98181 3.45698 6.89365C3.49305 6.80549 3.54631 6.7254 3.61366 6.65805C3.68102 6.59069 3.76111 6.53743 3.84927 6.50136C3.93743 6.46529 4.03188 6.44714 4.12713 6.44797C4.22238 6.4488 4.31651 6.46859 4.40403 6.50618C4.49154 6.54378 4.5707 6.59842 4.63687 6.66694L6.15906 8.18841L9.70988 4.63759V4.63687Z' fill='%232f8fb0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* cloud printing ends  */


/* intune section starts  */


.intune {
  padding: 90px 0;
  background: #F6F6F6;
}

.intune-title {
  text-align: center;
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 60px;
  color: #000;
  line-height: 1.3;
  font-family: "Work Sans", sans-serif;
}

/* GRID */
.intune-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}

/* CARD */
.intune-card {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  background: #e6f1f6;
  border-radius: 10px;
}

/* ICON */
.intune-icon {
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e6f1f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intune-icon img {
  width: 60px;
  height: 60px;
}

/* CONTENT */
.intune-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0b4f6c;
  font-family: "Work Sans", sans-serif;
}

.intune-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  font-family: "Work Sans", sans-serif;
}

/* BOTTOM CENTER */
.intune-bottom {
  display: flex;
  justify-content: center;
}

.intune-bottom .intune-card {
  max-width: 600px;
}

/* intune section ends  */


/* mob service section starts  */


.mobility-services {
  padding: 90px 0;
  background: #ffffff;
  position: relative;
}

/* HEADER */
.services-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.services-label {
  font-size: 18px;
  color: #3CA3CA;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
}

.services-head h2 {
  font-size: 42px;
  font-weight: 600;
  margin-top: 8px;
  font-family: "Work Sans", sans-serif;
}

/* NAV BUTTONS */
.swiper-nav {
  display: flex;
  gap: 12px;
}

.swiper-btn {
  width: 54px;
  height: 54px;
  background: #318BAD;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD */
.service-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 726px;
  cursor: pointer;
}

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

/* OVERLAY (HIDDEN INITIALLY) */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0.35;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* CONTENT */
.service-content {
  position: absolute;
  inset: 0;
  padding: 62px 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
  z-index: 2;
}

/* HEADING */
.service-content h3 {
  font-size: 55px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0;
  font-family: "Work Sans", sans-serif;
  transition: transform 0.35s ease;
}

/* DESCRIPTION (HIDDEN INITIALLY) */
.service-desc {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  margin-top: 30px;
}

.service-desc p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 90%;
  margin-bottom: 20px;
  font-family: "Work Sans", sans-serif;
}

/* HOVER EFFECTS */
.service-card:hover::before {
  opacity: 0.75;
}

.service-card:hover .service-desc {
  opacity: 1;
  transform: translateY(0);
}

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

.service-card:hover img {
  transform: scale(1.05);
}

/* SWIPER */
.services-swiper .swiper-slide {
  width: 50%;
}


/* service section ends   */

/* contact section start  */

.contact-section {
  position: relative;
  padding: 100px 0;
  background: #ffffff;
}

/* dotted map background */
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/map-dots.png") center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}

.contact-wrapper {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

/* LEFT */
.contact-label {
  font-size: 18px;
  color: #318BAD;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
}

.contact-title {
  font-size: 42px;
  font-weight: 600;
  margin: 12px 0 36px;
  font-family: "Work Sans", sans-serif;
}

/* FORM */
.contact-form {
  width: 100%;
}

.form-row p {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.form-row.full p {
    width: 100%;
    display: block;
    margin: 0;
}
.form-row input.contact-btn {
    max-width: 250px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  font-family: "Work Sans", sans-serif;
  outline: none;
}

.contact-form textarea {
  resize: none;
  height: 130px;
  margin-bottom: 26px;
}

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

/* RIGHT */
.contact-right img {
  width: 100%;
  min-width: 640px;
  margin-left: auto;
  display: block;
	border-radius:10px;
}


/* contact section ends  */


/* Cta section starts  */

.cta-section {
  position: relative;
  padding: 110px 0;
  background: url("../images/cta-bg.jpg") center / cover no-repeat;
}

/* Dark overlay */
.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* CONTENT */
.cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
}

.cta-content h2 {
  font-size: 62px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: "Work Sans", sans-serif;
}

.cta-content p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 571px;
  margin: 0 auto 36px;
  opacity: 0.9;
  font-family: "Work Sans", sans-serif;
}

/* BUTTON */
.cta-btn {
  min-width: 260px;
}


/* cta section ends   */


/* footer start  */

.site-footer {
  background: #ffffff;
  color: #333;
  font-family: "Work Sans", sans-serif;
}

/* TOP */
.footer-top {
  display: grid;
  grid-template-columns: 459px 1fr 260px 1.3fr;
  gap: 34px;
  padding: 80px 0;
}

.footer-logo {
  max-width: 220px;
  margin-bottom: 20px;
}

.footer-brand p {
  font-size: 16px;
  line-height: 26px;
  color: #1D1D1F;
}

/* HEADINGS */
.footer-col h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #000;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer-col ul li a {
  text-decoration: none;
  color: #1D1D1F;
  transition: color 0.3s ease;
  font-size: 15px;
}

.footer-col ul li a:hover {
  color: #318BAD;
}

/* CONTACT LIST */
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #1D1D1F;
}

.contact-list img {
  width: 16px;
  margin-top: 4px;
}

/* SOCIAL */
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-links a {
  width: 36px;
  height: 36px;
  background: #222;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-links img {
  width: 16px;
}

/* BOTTOM */
.footer-bottom {
  background: #f2f2f2;
  padding: 16px 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: 16px;
  color: #1D1D1F;
}

.footer-links {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.footer-links a {
  color: #1D1D1F;
  text-decoration: none;
  font-size: 16px;
}

.footer-links a:hover {
  color: #318BAD;
}

/* footers ends  */






/* Responsive  */

/* =====================
   HERO – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1400px) {
  .hero {
    min-height: 760px;
  }

  .hero-title {
    font-size: 56px;
  }

  .hero .container {
    width: 100%;
    padding: 0 40px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .hero {
    min-height: 650px;
    background-position: center;
  }

  .hero-title {
    font-size: 44px;
    line-height: 1.2;
  }

  .hero-content {
    gap: 24px;
  }

  .hero-content a.btn {
    align-self: flex-start;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 520px;
    padding-top: 120px;
    /* space for header */
    background-position: center;
  }

 

  .hero-title {
    font-size: 32px;
    line-height: 1.25;
  }

  .hero-content {
    gap: 20px;
  }

  .hero-content a.btn {
    min-width: 200px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero {
    min-height: 460px;
  }

  .hero-title {
    font-size: 26px;
  }
}


/* =====================
   FEATURES – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1200px) {
  .features-container {
    gap: 80px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }

  .feature-item img {
    height: 60px;
  }

  .feature-item h3 {
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .features {
    padding: 40px 0;
  }

  .features-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .feature-item img {
    height: 54px;
    margin-bottom: 18px;
  }

  .feature-item h3 {
    font-size: 18px;
  }

  .feature-item p {
    font-size: 14px;
    line-height: 1.6;
  }
  
}

/* Small mobile */
@media (max-width: 480px) {
  .feature-item h3 {
    font-size: 16px;
  }

  .feature-item p {
    font-size: 13px;
  }
}


/* =====================
   ABOUT – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1200px) {
  .about-container {
    gap: 60px;
  }

  .about-title {
    font-size: 36px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .about {
    padding: 80px 0;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-image {
    min-height: auto;
    padding: 24px;
  }

  .about-title {
    font-size: 32px;
  }

  .about-text {
    font-size: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about {
    padding: 60px 0;
  }

  .about-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .about-label {
    font-size: 16px;
  }

  .about-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .about-content .btn {
    min-width: 200px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .about-title {
    font-size: 24px;
  }

  .about-image {
    padding: 18px;
    border-radius: 12px;
  }
}



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

/* Large laptops */
@media (max-width: 1200px) {

  .services-container,
  .service-head {
    gap: 40px;
  }

  .services-title {
    font-size: 36px;
  }

  .accordion-header {
    font-size: 20px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .services {
    padding: 80px 0;
  }

  .service-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .services-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .services-title {
    font-size: 32px;
  }

  .accordion-header {
    font-size: 18px;
    padding: 14px 16px;
  }

  .accordion-content li {
    font-size: 14px;
  }

  /* Disable sticky on tablet & mobile */
  .services-right {
    position: relative;
    top: auto;
    height: auto;
  }

  .services-right img {
    height: auto;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .services {
    padding: 60px 0;
  }

  .services-label {
    font-size: 16px;
  }

  .services-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .service-head .right-head p {
    font-size: 14px;
    line-height: 1.6;
  }

  .accordion-header {
    font-size: 16px;
    gap: 10px;
  }

  .services-left button.accordion-header .icon,
  .services-left button.accordion-header .icon img {
    width: 34px;
    height: 34px;
  }

  .custom-list li {
    font-size: 14px;
    padding-left: 24px;
  }

  .custom-list li::before {
    width: 13px;
    height: 13px;
    top: 3px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .services-title {
    font-size: 22px;
  }

  .accordion-header {
    font-size: 15px;
	  text-align:left;
  }

  .accordion-content li {
    font-size: 13px;
  }

  .services-right img {
    border-radius: 12px;
  }
}




/* =====================
   CLOUD PRINTING – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1200px) {
  .cloud-title {
    font-size: 36px;
  }

  .cloud-grid {
    gap: 20px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .cloud-printing {
    padding: 70px 0;
  }

  .cloud-title {
    font-size: 32px;
    margin-bottom: 40px;
  }

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

  .cloud-card {
    padding: 24px 20px;
  }

  .cloud-list li {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cloud-printing {
    padding: 60px 0;
  }

  .cloud-title {
    font-size: 26px;
    margin-bottom: 32px;
  }

  .cloud-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cloud-card {
    padding: 22px 18px;
  }

  .cloud-list li {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 22px;
  }

  .cloud-list li::before {
    width: 11px;
    height: 11px;
    top: 4px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .cloud-title {
    font-size: 22px;
  }

  .cloud-list li {
    font-size: 13px;
  }
}



.intune {
  padding: 90px 0;
  background: #F6F6F6;
}

.intune-title {
  text-align: center;
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 60px;
  color: #000;
  line-height: 1.3;
  font-family: "Work Sans", sans-serif;
}

/* GRID */
.intune-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}

/* CARD */
.intune-card {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  background: #e6f1f6;
  border-radius: 10px;
}

/* ICON */
.intune-icon {
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e6f1f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intune-icon img {
  width: 60px;
  height: 60px;
}

/* CONTENT */
.intune-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #0b4f6c;
  font-family: "Work Sans", sans-serif;
}

.intune-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  font-family: "Work Sans", sans-serif;
}

/* BOTTOM CENTER */
.intune-bottom {
  display: flex;
  justify-content: center;
}

.intune-bottom .intune-card {
  max-width: 600px;
}


.mobility-services {
  padding: 90px 0;
  background: #ffffff;
}

/* HEADER */
.services-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.services-label {
  font-size: 18px;
  color: #3CA3CA;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
}

.services-head h2 {
  font-size: 42px;
  font-weight: 600;
  margin-top: 8px;
  font-family: "Work Sans", sans-serif;
}

/* NAV BUTTONS */
.swiper-nav {
  display: flex;
  gap: 12px;
}

.swiper-btn {
  width: 54px;
  height: 54px;
  background: #318BAD;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARD */
.service-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 726px;
  cursor: pointer;
}

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

/* OVERLAY (HIDDEN INITIALLY) */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0.35;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* CONTENT */
.service-content {
  position: absolute;
  inset: 0;
  padding: 62px 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
  z-index: 2;
}

/* HEADING */
.service-content h3 {
  font-size: 55px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0;
  font-family: "Work Sans", sans-serif;
  transition: transform 0.35s ease;
}

/* DESCRIPTION (HIDDEN INITIALLY) */
.service-desc {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  margin-top: 30px;
}

.service-desc p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 90%;
  margin-bottom: 20px;
  font-family: "Work Sans", sans-serif;
}

/* HOVER EFFECTS */
.service-card:hover::before {
  opacity: 0.75;
}

.service-card:hover .service-desc {
  opacity: 1;
  transform: translateY(0);
}

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

.service-card:hover img {
  transform: scale(1.05);
}

/* SWIPER */
.services-swiper .swiper-slide {
  width: 50%;
}



/* =====================
   CONTACT SECTION – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1200px) {
  .contact-title {
    font-size: 36px;
  }

  .contact-right img {
    min-width: auto;
    /* important */
  }
}

/* Tablets */
@media (max-width: 992px) {
  .contact-section {
    padding: 80px 0;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-title {
    font-size: 32px;
    margin-bottom: 28px;
  }
	.form-row p{
		flex-direction:column;
		        gap: 0;
        margin: 0;
	}
	.form-row p span{
		margin-bottom:10px;
	}
	.form-row p br{
		display:none;
	}
  .contact-right {
    order: -1;
    /* image on top */
    text-align: center;
  }

  .contact-right img {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .contact-section {
    padding: 60px 0;
  }

  .intune-grid {
    grid-template-columns: 1fr;
  }

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

  .contact-label {
    font-size: 16px;
  }

  .contact-title {
    font-size: 26px;
    line-height: 1.3;
  }

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

  .contact-form input,
  .contact-form textarea {
    font-size: 14px;
    padding: 12px 14px;
  }

  .contact-form textarea {
    height: 110px;
  }

  .contact-right img {
    max-width: 420px;
  }
   .service-content{
        position: relative;
    padding: 10px;
  }
  .service-card{
    background:#000;
  }
  .service-card:hover h3{
    transform: translate(0);
  }
  .service-content h3 {
    font-size: 28px;
  }
  .service-desc {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    margin-top: 10px;
}
  .mobility-services .head-right {
    position: absolute;
    bottom: 0;
}
.swiper-btn {
    width: 40px;
    height: 40px;
  }
  .swiper-btn img{
    width: 20px;
    height: 20px;
  }

}

/* Small mobile */
@media (max-width: 480px) {
  .contact-title {
    font-size: 22px;
  }

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

  .contact-right img {
    max-width: 100%;
  }

}



.cta-section {
  position: relative;
  padding: 110px 0;
  background: url("../images/cta-bg.jpg") center / cover no-repeat;
}

/* Dark overlay */
.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* CONTENT */
.cta-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
}

.cta-content h2 {
  font-size: 62px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: "Work Sans", sans-serif;
}

.cta-content p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 571px;
  margin: 0 auto 36px;
  opacity: 0.9;
  font-family: "Work Sans", sans-serif;
}

/* BUTTON */
.cta-btn {
  min-width: 260px;
}


/* =====================
   FOOTER – RESPONSIVE
===================== */

/* Large laptops */
@media (max-width: 1400px) {
  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 28px;
  }

  .footer-brand p {
    font-size: 15px;
  }

  .container {
    padding: 0 40px;
  }

  .service-card {
    min-height: auto;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 60px 0;
  }

  .footer-logo {
    max-width: 200px;
  }

  .footer-col h4 {
    font-size: 16px;
  }

  .footer-col ul li a {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 50px 0;
  }

  .footer-brand p {
    font-size: 14px;
    line-height: 1.6;
  }

  .contact-list li {
    font-size: 14px;
  }

  .social-links {
    justify-content: flex-start;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-bottom p,
  .footer-links a {
    font-size: 14px;
  }

  .cta-content h2,
  .services-head h2,
  .intune-title {
    font-size: 32px;
  }

  .container {
    padding: 0 15px;
  }

  .accordion {
    margin-top: 20px;
  }

  .intune-content h4 {
    font-size: 20px;
  }

  .intune-icon img {
    width: 40px;
    height: 40px;
  }


}

/* Small mobile */
@media (max-width: 480px) {
  .footer-logo {
    max-width: 180px;
  }

  .footer-col h4 {
    font-size: 15px;
  }

  .footer-col ul li a {
    font-size: 13px;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}