/* =====================================================
   ABOUT PAGE
===================================================== */
/* =====================================================
   ABOUT HERO VECTOR
===================================================== */

.about-hero-visual {
  width: 100%;
  min-height: 500px;

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

.about-vector-scene {
  position: relative;

  width: 100%;
  max-width: 570px;
  height: 470px;

  overflow: hidden;

  border-radius: 28px;

  background:
      radial-gradient(
          circle at 50% 45%,
          #e5efff 0%,
          #f4f8ff 42%,
          #ffffff 75%
      );
}


/* =====================================================
 DECORATIVE CIRCLES
===================================================== */

.vector-circle {
  position: absolute;

  border-radius: 50%;

  border: 1px solid #d8e5fa;
}

.circle-one {
  width: 360px;
  height: 360px;

  top: 55px;
  left: 105px;
}

.circle-two {
  width: 460px;
  height: 460px;

  top: 5px;
  left: 55px;

  border-style: dashed;

  opacity: .6;
}


/* =====================================================
 MAIN ILLUSTRATION
===================================================== */

.about-main-illustration {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 0;
  top: 0;
}


/* =====================================================
 MONITOR
===================================================== */

.illustration-monitor {
  position: absolute;

  width: 300px;
  height: 205px;

  left: 135px;
  top: 72px;

  z-index: 3;

  border-radius: 12px;

  background: #172b4d;

  padding: 8px;

  box-shadow:
      0 25px 45px rgba(24,58,110,.20);
}

.monitor-top {
  height: 18px;

  display: flex;
  align-items: center;

  gap: 4px;

  padding-left: 5px;
}

.monitor-top span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #fff;

  opacity: .8;
}

.monitor-screen {
  height: calc(100% - 18px);

  border-radius: 6px;

  overflow: hidden;

  background: #fff;
}

.screen-header {
  height: 30px;

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

  padding: 0 10px;

  border-bottom: 1px solid #edf1f7;
}

.screen-logo {
  width: 20px;
  height: 20px;

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

  border-radius: 5px;

  background: #1760ff;

  color: #fff;

  font-size: 7px;
  font-weight: 800;
}

.screen-menu {
  display: flex;
  gap: 5px;
}

.screen-menu i {
  width: 25px;
  height: 3px;

  display: block;

  border-radius: 5px;

  background: #e5eaf2;
}

.screen-content {
  display: flex;

  padding: 18px;
}

.screen-text {
  width: 45%;
}

.screen-text small {
  color: #8a95a8;

  font-size: 6px;

  letter-spacing: .5px;
}

.screen-text strong {
  display: block;

  margin-top: 7px;

  color: #172b4d;

  font-size: 20px;

  line-height: 1.05;
}

.screen-text strong span {
  color: #1760ff;
}

.screen-chart {
  position: relative;

  width: 55%;
  height: 105px;

  display: flex;
  align-items: flex-end;

  gap: 6px;

  padding: 10px;

  border-radius: 7px;

  background: #f4f7fc;
}

.screen-chart span {
  width: 12px;

  border-radius: 4px 4px 0 0;

  background: #1760ff;

  opacity: .85;
}

.chart-line {
  position: absolute;

  left: 20px;
  right: 15px;
  top: 43px;

  height: 2px;

  transform: rotate(-8deg);

  background: #6d9cff;
}


/* =====================================================
 LAPTOP
===================================================== */

.illustration-laptop {
  position: absolute;

  z-index: 5;

  width: 190px;

  left: 180px;
  top: 235px;
}

.laptop-screen {
  height: 115px;

  padding: 5px;

  border-radius: 8px 8px 4px 4px;

  background: #172b4d;

  box-shadow:
      0 15px 30px rgba(24,58,110,.18);
}

.laptop-header {
  height: 12px;

  display: flex;

  gap: 3px;

  padding-left: 4px;
}

.laptop-header span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #fff;
}

.laptop-body {
  height: 90px;

  display: flex;

  overflow: hidden;

  border-radius: 4px;

  background: #fff;
}

.laptop-sidebar {
  width: 30px;

  padding: 10px 7px;

  background: #edf3ff;
}

.laptop-sidebar i {
  display: block;

  width: 15px;
  height: 4px;

  margin-bottom: 9px;

  border-radius: 3px;

  background: #8caeff;
}

.laptop-content {
  flex: 1;

  padding: 12px;
}

.content-title {
  width: 75%;
  height: 6px;

  border-radius: 4px;

  background: #d8e3f5;

  margin-bottom: 6px;
}

.content-title.short {
  width: 45%;
}

.content-cards {
  display: flex;

  gap: 5px;

  margin-top: 15px;
}

.content-cards div {
  width: 35px;
  height: 35px;

  border-radius: 6px;

  background: #edf4ff;

  border: 1px solid #d9e6fb;
}

.laptop-base {
  width: 220px;
  height: 8px;

  margin-left: -15px;

  border-radius: 0 0 10px 10px;

  background: #b9c8dc;
}


/* =====================================================
 TEAM PERSONS
===================================================== */

.team-person {
  position: absolute;

  z-index: 6;
}

.person-one {
  left: 85px;
  top: 230px;
}

.person-two {
  right: 70px;
  top: 218px;
}

.person-head {
  width: 30px;
  height: 30px;

  margin: auto;

  border-radius: 50%;

  background: #f0b58d;

  border: 3px solid #fff;

  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.person-body {
  width: 55px;
  height: 70px;

  margin-top: 3px;

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

  border-radius: 18px 18px 8px 8px;

  background: #1760ff;

  color: #fff;

  font-size: 15px;

  box-shadow: 0 10px 20px rgba(23,96,255,.18);
}

.person-two .person-body {
  background: #426fea;
}

.person-leg {
  position: absolute;

  width: 9px;
  height: 48px;

  bottom: -43px;

  border-radius: 10px;

  background: #25395b;
}

.person-leg.left {
  left: 12px;
}

.person-leg.right {
  right: 12px;
}


/* =====================================================
 PLANT
===================================================== */

.illustration-plant {
  position: absolute;

  z-index: 4;

  right: 25px;
  bottom: 30px;

  width: 75px;
  height: 115px;
}

.plant-leaf {
  position: absolute;

  width: 30px;
  height: 48px;

  border-radius: 100% 0 100% 0;

  background: #55b879;

  transform-origin: bottom center;
}

.leaf-one {
  left: 25px;
  top: 8px;

  transform: rotate(-20deg);
}

.leaf-two {
  left: 7px;
  top: 28px;

  transform: rotate(-55deg);
}

.leaf-three {
  right: 5px;
  top: 30px;

  transform: rotate(50deg);
}

.plant-pot {
  position: absolute;

  bottom: 0;
  left: 15px;

  width: 50px;
  height: 42px;

  border-radius: 5px 5px 15px 15px;

  background: #1760ff;
}


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

.about-floating-card {
  position: absolute;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 10px 13px;

  border-radius: 10px;

  background: #fff;

  border: 1px solid #dce6f4;

  box-shadow:
      0 15px 35px rgba(24,65,130,.12);

  animation: aboutCardFloat 4s ease-in-out infinite;
}

.card-code {
  left: 22px;
  top: 80px;
}

.card-design {
  right: 18px;
  top: 145px;

  animation-delay: 1.2s;
}

.floating-icon {
  width: 32px;
  height: 32px;

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

  border-radius: 8px;

  background: #edf4ff;

  color: #1760ff;

     font-size: 14px;
}

.about-floating-card strong {
  display: block;

  color: #203554;

     font-size: 12px;
}

.about-floating-card small {
  display: block;

  margin-top: 3px;

  color: #8a95a8;

  font-size: 6px;
}

@keyframes aboutCardFloat {

  0%, 100% {
      transform: translateY(0);
  }

  50% {
      transform: translateY(-9px);
  }

}


/* =====================================================
 GROWTH CARD
===================================================== */

.about-growth-card {
  position: absolute;

  z-index: 12;

  right: 35px;
  bottom: 25px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 10px 12px;

  border-radius: 10px;

  background: #fff;

  border: 1px solid #dce6f4;

  box-shadow:
      0 15px 35px rgba(24,65,130,.13);
}

.growth-card-icon {
  width: 32px;
  height: 32px;

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

  border-radius: 8px;

  background: #eaf8f0;

  color: #24a35a;

     font-size: 14px;
}

.about-growth-card strong {
  display: block;

  color: #203554;

     font-size: 12px;
}

.about-growth-card small {
  display: block;

  margin-top: 2px;

  color: #8a95a8;

  font-size: 6px;
}

.growth-percent {
  margin-left: 7px;

  color: #20a357;

     font-size: 14px;

  font-weight: 700;
}


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

@media (max-width: 992px) {

  .about-hero-visual {
      margin-top: 35px;
  }

}

@media (max-width: 600px) {

  .about-hero-visual {
      min-height: 370px;
  }

  .about-vector-scene {
      height: 360px;
  }

  .illustration-monitor {
      width: 235px;
      height: 160px;

      left: 50%;

      transform: translateX(-50%);

      top: 55px;
  }

  .illustration-laptop {
      width: 150px;

      left: 50%;

      transform: translateX(-50%);

      top: 195px;
  }

  .team-person,
  .about-floating-card {
      display: none;
  }

  .illustration-plant {
      right: 8px;
      bottom: 15px;

      transform: scale(.75);
  }

  .about-growth-card {
      right: 15px;
      bottom: 15px;
  }

  .circle-one {
      width: 280px;
      height: 280px;

      left: 50%;

      transform: translateX(-50%);
  }

  .circle-two {
      display: none;
  }

}
.about-page {
  background: #fff;
  color: #172033;
}


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

.about-hero {
  padding: 90px 0;

  background:
      radial-gradient(
          circle at 85% 20%,
          #e7efff 0,
          transparent 30%
      ),
      #fff;
}

.about-hero-content {
  max-width: 850px;

  margin: auto;

  text-align: center;
}

.about-badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 15px;

  border-radius: 30px;

  background: #edf4ff;

  color: #1760ff;

     font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;
}

.about-hero h1 {
  margin: 20px 0 16px;

  color: #102856;

  font-size: 55px;

  line-height: 1.1;
}

.about-hero h1 span {
  display: block;

  color: #2162f5;
}

.about-hero p {
  max-width: 700px;

  margin: auto;

  color: #697386;

  font-size: 16px;

  line-height: 1.8;
}

.about-hero-buttons {
  display: flex;

  justify-content: center;

  gap: 12px;

  margin-top: 30px;
}

.about-btn-primary,
.about-btn-outline {
  min-height: 49px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding: 0 22px;

  border-radius: 8px;

  text-decoration: none;

     font-size: 14px;

  font-weight: 600;

  transition: .3s;
}

.about-btn-primary {
  background: #1760ff;

  color: #fff;
}

.about-btn-primary:hover {
  background: #0649db;

  color: #fff;

  transform: translateY(-2px);
}

.about-btn-outline {
  border: 1px solid #1760ff;

  color: #1760ff;

  background: #fff;
}

.about-btn-outline:hover {
  background: #1760ff;

  color: #fff;
}


/* =====================================================
 SECTION HEADING
===================================================== */

.about-heading {
  max-width: 730px;

  margin: 0 auto 50px;

  text-align: center;
}

.about-heading > span,
.about-section-label {
  color: #1760ff;

     font-size: 14px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.about-heading h2 {
  margin: 12px 0;

  color: #102856;

  font-size: 40px;

  line-height: 1.2;
}

.about-heading h2 strong,
.about-company-content h2 strong,
.achievement-content h2 strong {
  color: #2162f5;
}

.about-heading p {
  color: #697386;

   font-size: 15px;

  line-height: 1.8;
}


/* =====================================================
 OUR COMPANY
===================================================== */

.about-company {
  padding: 100px 0;

  background: #fff;
}

.about-company-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}


/* VISUAL */

.about-company-visual {
  display: flex;

  justify-content: center;

  padding: 30px;
}

.about-company-card {
  position: relative;

  width: 100%;

  max-width: 430px;

  min-height: 350px;

  padding: 30px;

  border-radius: 20px;

  background:
      linear-gradient(
          145deg,
          #eef4ff,
          #f7f9fd
      );

  border: 1px solid #dfe8f6;

  box-shadow:
      0 25px 55px rgba(25,65,130,.1);
}

.company-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 20px;

  border-bottom: 1px solid #dce5f2;
}

.company-card-top span {
  color: #1760ff;

     font-size: 14px;

  font-weight: 800;

  letter-spacing: 1px;
}

.company-card-top i {
  color: #1760ff;

  font-size: 20px;
}

.company-card-main {
  padding: 45px 10px;

  text-align: center;
}

.company-icon {
  width: 75px;

  height: 75px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: auto;

  border-radius: 18px;

  background: #1760ff;

  color: #fff;

  font-size: 28px;

  box-shadow:
      0 15px 30px rgba(23,96,255,.2);
}

.company-card-main h3 {
  margin: 18px 0 5px;

  color: #182b4d;

  font-size: 22px;
}

.company-card-main p {
  margin: 0;

  color: #697386;

     font-size: 14px;
}

.company-card-bottom {
  display: grid;

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

  gap: 10px;
}

.company-card-bottom div {
  padding: 12px 5px;

  text-align: center;

  border-radius: 8px;

  background: #fff;

  border: 1px solid #e2e9f4;
}

.company-card-bottom strong {
  display: block;

  color: #1760ff;

     font-size: 14px;
}

.company-card-bottom small {
  color: #8993a5;

  font-size: 7px;
}


/* CONTENT */

.about-company-content h2 {
  margin: 13px 0 18px;

  color: #102856;

  font-size: 39px;

  line-height: 1.2;
}

.about-company-content h2 strong {
  display: block;
}

.about-company-content p {
  color: #697386;

   font-size: 15px;

  line-height: 1.8;
}

.about-company-points {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 13px;

  margin-top: 25px;
}

.about-company-points div {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #3a4960;

   font-size: 14px;

  font-weight: 600;
}

.about-company-points i {
  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #edf4ff;

  color: #1760ff;

  font-size: 8px;
}


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

.about-experience {
  padding: 95px 0;

  background: #f7f9fd;
}

.experience-grid {
  display: grid;

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

  gap: 18px;
}

.experience-card {
  position: relative;

  padding: 28px 22px;

  min-height: 230px;

  border: 1px solid #e2e9f4;

  border-radius: 14px;

  background: #fff;

  transition: .3s;
}

.experience-card:hover {
  transform: translateY(-6px);

  border-color: #c4d6fa;

  box-shadow:
      0 15px 35px rgba(25,65,130,.08);
}

.experience-icon {
  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 22px;

  border-radius: 12px;

  background: #edf4ff;

  color: #1760ff;

  font-size: 19px;
}

.experience-number {
  position: absolute;

  top: 20px;

  right: 20px;

  color: #e7edf7;

  font-size: 25px;

  font-weight: 800;
}

.experience-card h3 {
  margin: 0 0 10px;

  color: #182b4d;

  font-size: 16px;
}

.experience-card p {
  margin: 0;

  color: #697386;

     font-size: 14px;

  line-height: 1.7;
}


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

.about-why {
  padding: 100px 0;

  background: #fff;
}

.why-grid {
  display: grid;

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

  gap: 18px;
}

.why-card {
  padding: 30px 22px;

  text-align: center;

  border: 1px solid #e2e9f4;

  border-radius: 14px;

  background: #fff;

  transition: .3s;
}

.why-card:hover {
  transform: translateY(-6px);

  box-shadow:
      0 15px 35px rgba(25,65,130,.08);

  border-color: #c4d6fa;
}

.why-icon {
  width: 55px;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 18px;

  border-radius: 13px;

  background: #edf4ff;

  color: #1760ff;

  font-size: 19px;
}

.why-card h3 {
  margin: 0 0 9px;

  color: #182b4d;

  font-size: 16px;
}

.why-card p {
  margin: 0;

  color: #697386;

     font-size: 14px;

  line-height: 1.7;
}


/* =====================================================
 PROCESS
===================================================== */

.about-process {
  padding: 100px 0;

  background: #f7f9fd;
}

.process-wrapper {
  display: grid;

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

  gap: 18px;

  position: relative;
}

.process-card {
  position: relative;

  padding: 30px 22px;

  border: 1px solid #e1e8f3;

  border-radius: 14px;

  background: #fff;

  text-align: center;
}

.process-number {
  position: absolute;

  top: 15px;

  right: 17px;

  color: #e5ebf5;

  font-size: 24px;

  font-weight: 800;
}

.process-icon {
  width: 55px;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 5px auto 20px;

  border-radius: 50%;

  background: #1760ff;

  color: #fff;

  font-size: 17px;
}

.process-card h3 {
  margin: 0 0 10px;

  color: #182b4d;

  font-size: 16px;
}

.process-card p {
  margin: 0;

  color: #697386;

     font-size: 14px;

  line-height: 1.7;
}


/* =====================================================
 ACHIEVEMENTS
===================================================== */

.about-achievements {
  padding: 100px 0;

  background: #fff;
}

.about-achievement-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}

.achievement-content h2 {
  margin: 13px 0 18px;

  color: #102856;

  font-size: 39px;

  line-height: 1.2;
}

.achievement-content h2 strong {
  display: block;
}

.achievement-content p {
  color: #697386;

   font-size: 15px;

  line-height: 1.8;
}

.achievement-btn {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 15px;

  padding: 13px 20px;

  border-radius: 8px;

  background: #1760ff;

  color: #fff;

  text-decoration: none;

     font-size: 14px;

  font-weight: 600;

  transition: .3s;
}

.achievement-btn:hover {
  background: #0649db;

  color: #fff;

  transform: translateY(-2px);
}

.achievement-stats {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px;
}

.achievement-stat {
  padding: 25px 20px;

  border: 1px solid #e2e9f4;

  border-radius: 13px;

  background: #fff;

  transition: .3s;
}

.achievement-stat:hover {
  transform: translateY(-5px);

  box-shadow:
      0 12px 30px rgba(25,65,130,.07);
}

.achievement-stat i {
  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 14px;

  border-radius: 10px;

  background: #edf4ff;

  color: #1760ff;

  font-size: 14px;
}

.achievement-stat strong {
  display: block;

  margin-bottom: 4px;

  color: #182b4d;

     font-size: 14px;
}

.achievement-stat span {
  color: #8993a5;

     font-size: 12px;
}


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

.about-cta {
  padding: 90px 0;

  background:
      radial-gradient(
          circle at 90% 20%,
          #3d77ff,
          transparent 25%
      ),
      #08236f;

  color: #fff;

  text-align: center;
}

.about-cta-content {
  max-width: 750px;

  margin: auto;
}

.about-cta-content > span {
  color: #bcd1ff;

     font-size: 14px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.about-cta h2 {
  margin: 15px 0;

  font-size: 41px;

  line-height: 1.2;
}

.about-cta h2 strong {
  display: block;

  color: #5e91ff;
}

.about-cta p {
  max-width: 620px;

  margin: 0 auto 28px;

  color: #d6e0f8;

   font-size: 15px;

  line-height: 1.7;
}

.about-cta-btn {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 14px 24px;

  border-radius: 8px;

  background: #fff;

  color: #145cff;

  text-decoration: none;

     font-size: 14px;

  font-weight: 700;

  transition: .3s;
}

.about-cta-btn:hover {
  color: #0649db;

  transform: translateY(-3px);

  box-shadow:
      0 10px 25px rgba(0,0,0,.15);
}


/* =====================================================
 TABLET
===================================================== */

@media (max-width: 992px) {

  .about-company-grid,
  .about-achievement-grid {
      grid-template-columns: 1fr;

      gap: 50px;
  }

  .experience-grid,
  .why-grid,
  .process-wrapper {
      grid-template-columns: repeat(2,1fr);
  }

}


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

@media (max-width: 600px) {
    
    .top-bar {
    background: linear-gradient(90deg, #001875 0%, #0e3abf 100%);
    padding: 10px 0;
    font-size: 11px;
    color: #fff;
    text-align: center;
}
.col-lg-6.text-end {
    text-align: center !important;
}


  .about-hero {
      padding: 60px 0;
  }

  .about-hero h1 {
      font-size: 36px;
  }

  .about-hero p {
      font-size: 14px;
  }

  .about-hero-buttons {
      flex-direction: column;
  }

  .about-btn-primary,
  .about-btn-outline {
      width: 100%;
  }

  .about-heading h2 {
      font-size: 31px;
  }

  .about-company-content h2,
  .achievement-content h2 {
      font-size: 31px;
  }

  .experience-grid,
  .why-grid,
  .process-wrapper,
  .achievement-stats {
      grid-template-columns: 1fr;
  }

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

  .about-company-card {
      min-height: 320px;

      padding: 22px;
  }

  .company-card-main {
      padding: 35px 10px;
  }

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

}


/* =====================================================
 SMALL MOBILE
===================================================== */

@media (max-width: 420px) {
    .top-bar {
    background: linear-gradient(90deg, #001875 0%, #0e3abf 100%);
    padding: 10px 0;
    font-size: 11px;
    color: #fff;
    text-align: center;
}
.col-lg-6.text-end {
    text-align: center !important;
}

  .about-hero h1 {
      font-size: 32px;
  }

  .about-company-card {
      padding: 18px;
  }

  .company-card-bottom {
      gap: 5px;
  }

  .company-card-bottom div {
      padding: 9px 3px;
  }

} 





/* ===================================================== WEBSITE DESIGN PAGE ===================================================== */
.website-design-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.design-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 25%, #eaf1ff 0, transparent 30% ), #fff;
}
.design-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.design-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.design-hero-content h1 {
  margin: 20px 0;
  font-size: 53px;
  line-height: 1.1;
  color: #102856;
}
.design-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.design-hero-content > p {
  max-width: 580px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.design-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.design-btn-primary, .design-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.design-btn-primary {
  background: #1760ff;
  color: #fff;
}
.design-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.design-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.design-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.design-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.design-trust i {
  color: #1760ff;
  margin-right: 5px;
}
/* ===================================================== HERO DESIGN WINDOW ===================================================== */
.design-hero-visual {
  display: flex;
  justify-content: center;
}
.design-window {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.design-window-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.design-dots {
  display: flex;
  gap: 6px;
}
.design-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.design-url {
  margin-left: auto;
  margin-right: auto;
  padding: 6px 40px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.design-window-body {
  min-height: 355px;
  padding: 20px;
  background: #f6f8fd;
}
/* NAV */
.design-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.design-logo-box {
  width: 75px;
  height: 12px;
  border-radius: 5px;
  background: #1760ff;
}
.design-nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.design-nav-links span {
  width: 35px;
  height: 6px;
  border-radius: 4px;
  background: #d2daf0;
}
.design-nav-button {
  width: 65px;
  height: 23px;
  border-radius: 6px;
  background: #1760ff;
}
/* MAIN */
.design-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}
.design-title-line {
  width: 85%;
  height: 15px;
  margin-bottom: 9px;
  border-radius: 5px;
  background: #102856;
}
.design-title-line.blue {
  width: 65%;
  background: #1760ff;
}
.design-description {
  width: 85%;
  height: 28px;
  margin: 18px 0;
  border-radius: 5px;
  background: #d9e1f1;
}
.design-small-button {
  width: 75px;
  height: 25px;
  border-radius: 6px;
  background: #1760ff;
}
/* ILLUSTRATION */
.design-illustration {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.design-circle {
  position: absolute;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: #dce8ff;
}
.design-device {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 125px;
  padding: 8px;
  border-radius: 10px;
  background: #102856;
  box-shadow: 0 15px 30px rgba(16,40,86,.2);
}
.device-screen {
  height: 100%;
  padding: 15px;
  border-radius: 5px;
  background: #fff;
}
.device-line {
  width: 70%;
  height: 8px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: #1760ff;
}
.device-line.short {
  width: 45%;
  background: #cbd8f0;
}
.device-boxes {
  display: flex;
  gap: 6px;
  margin-top: 18px;
}
.device-boxes span {
  width: 30px;
  height: 35px;
  border-radius: 5px;
  background: #e8efff;
}
/* BOTTOM */
.design-bottom-cards {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.design-bottom-cards span {
  flex: 1;
  height: 28px;
  border-radius: 7px;
  background: #fff;
}
/* ===================================================== SECTION HEADING ===================================================== */
.design-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.design-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.design-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.design-section-heading h2 strong {
  color: #2162f5;
}
.design-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== DESIGN SERVICES ===================================================== */
.design-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.design-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.design-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.design-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.design-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.design-service-card h3 {
  margin-bottom: 10px;
  color: #182b4d;
  font-size: 18px;
}
.design-service-card p {
  min-height: 75px;
  margin-bottom: 20px;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
.design-service-card a {
  color: #1760ff;
   font-size: 15px;
  font-weight: 600;
  text-decoration: none; display:none;
}
.design-service-card a i {
  margin-left: 5px;
}
/* ===================================================== UI UX SECTION ===================================================== */
.uiux-section {
  padding: 100px 0;
  background: #fff;
}
.uiux-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.uiux-visual {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.uiux-card-main {
  width: 420px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.uiux-topbar {
  height: 35px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 12px;
  background: #102856;
}
.uiux-topbar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.uiux-layout {
  display: flex;
  min-height: 260px;
}
.uiux-sidebar {
  width: 65px;
  padding: 25px 12px;
  background: #edf3ff;
}
.uiux-sidebar span {
  display: block;
  width: 35px;
  height: 7px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: #c6d6f7;
}
.uiux-content {
  flex: 1;
  padding: 25px;
}
.uiux-heading {
  width: 55%;
  height: 13px;
  margin-bottom: 25px;
  border-radius: 5px;
  background: #1760ff;
}
.uiux-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.uiux-box {
  flex: 1;
  height: 65px;
  border-radius: 8px;
  background: #edf3ff;
}
.uiux-box.large {
  flex: 2;
  background: #dce8ff;
}
.uiux-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 17px;
  border-radius: 10px;
  background: #fff;
  color: #263854;
     font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.uiux-floating i {
  color: #1760ff;
}
.floating-one {
  top: 45px;
  left: 20px;
}
.floating-two {
  right: 20px;
  bottom: 50px;
}
.design-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.uiux-content > h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.uiux-content > h2 span {
  color: #2162f5;
}
.uiux-content > p {
  color: #667085;
  line-height: 1.8;
}
.uiux-points {
  margin-top: 30px;
}
.uiux-points > div {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}
.uiux-points > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.uiux-points strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.uiux-points span {
  color: #697386;
   font-size: 15px;
}
/* ===================================================== DESIGN PROCESS ===================================================== */
.design-process {
  padding: 90px 0;
  background: #f7f9fd;
}
.design-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.design-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.design-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.design-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.design-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.design-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PRINCIPLES ===================================================== */
.design-principles {
  padding: 90px 0;
  background: #fff;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.principle-card {
  padding: 30px 24px;
  text-align: center;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.principle-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.principle-card > i {
  width: 55px;
  height: 55px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.principle-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 17px;
}
.principle-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== TOOLS ===================================================== */
.design-tools {
  padding: 85px 0;
  background: #f7f9fd;
}
.design-tools-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.design-tools-list div {
  padding: 22px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 12px;
  transition: .3s;
}
.design-tools-list div:hover {
  transform: translateY(-4px);
  border-color: #bdd0ff;
  box-shadow: 0 10px 25px rgba(30,70,140,.08);
}
.design-tools-list i {
  color: #1760ff;
  font-size: 26px;
}
.design-tools-list span {
  color: #536075;
     font-size: 14px;
  font-weight: 600;
}
/* ===================================================== CTA ===================================================== */
.design-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.design-cta-content {
  max-width: 730px;
  margin: auto;
}
.design-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.design-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.design-cta h2 strong {
  color: #5e91ff;
}
.design-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.design-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.design-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .design-hero-grid, .uiux-grid {
      grid-template-columns: 1fr;
 }
  .design-hero {
      padding: 65px 0;
 }
  .design-hero-content h1 {
      font-size: 45px;
 }
  .design-service-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .design-process-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .principles-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .design-tools-list {
      grid-template-columns: repeat(3, 1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .design-hero {
      padding: 50px 0;
 }
  .design-hero-content h1 {
      font-size: 35px;
 }
  .design-hero-content > p {
      font-size: 15px;
 }
  .design-hero-buttons {
      flex-direction: column;
 }
  .design-btn-primary, .design-btn-outline {
      width: 100%;
 }
  .design-trust {
      flex-direction: column;
      gap: 10px;
 }
  .design-section-heading h2 {
      font-size: 31px;
 }
  .design-service-grid, .design-process-grid, .principles-grid {
      grid-template-columns: 1fr;
 }
  .uiux-content > h2 {
      font-size: 34px;
 }
  .uiux-card-main {
      width: 90%;
 }
  .design-tools-list {
      grid-template-columns: repeat(2, 1fr);
 }
  .design-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== E-COMMERCE DEVELOPMENT PAGE ===================================================== */
.ecommerce-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.ecom-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.ecom-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.ecom-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.ecom-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.ecom-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.ecom-hero-content > p {
  max-width: 570px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.ecom-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.ecom-btn-primary, .ecom-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.ecom-btn-primary {
  background: #1760ff;
  color: #fff;
}
.ecom-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.ecom-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.ecom-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.ecom-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.ecom-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== HERO STORE MOCKUP ===================================================== */
.ecom-hero-visual {
  display: flex;
  justify-content: center;
}
.ecom-browser {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.ecom-browser-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.ecom-dots {
  display: flex;
  gap: 6px;
}
.ecom-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.ecom-address {
  margin: auto;
  padding: 6px 45px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.ecom-browser-body {
  min-height: 350px;
  padding: 20px;
  background: #f6f8fd;
}
/* STORE NAV */
.ecom-store-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}
.ecom-store-logo {
  color: #102856;
  font-size: 16px;
  font-weight: 800;
}
.ecom-store-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.ecom-store-links span {
  width: 38px;
  height: 6px;
  border-radius: 5px;
  background: #cfd9ed;
}
.ecom-store-icons {
  display: flex;
  gap: 12px;
  color: #1760ff;
     font-size: 14px;
}
/* STORE HERO */
.ecom-store-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
}
.ecom-line {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 5px;
  background: #102856;
}
.ecom-line.large {
  width: 90%;
}
.ecom-line.blue {
  width: 65%;
  background: #1760ff;
}
.ecom-line.small {
  width: 80%;
  margin-top: 15px;
  background: #d6deef;
}
.ecom-shop-button {
  width: 70px;
  height: 24px;
  margin-top: 15px;
  border-radius: 6px;
  background: #1760ff;
}
/* PRODUCT VISUAL */
.ecom-product-shape {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecom-product-circle {
  position: absolute;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: #dce8ff;
}
.ecom-product-box {
  position: relative;
  z-index: 2;
  width: 95px;
  height: 95px;
  border-radius: 10px;
  background: #1760ff;
  box-shadow: 0 15px 25px rgba(23,96,255,.25);
}
/* PRODUCTS */
.ecom-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.ecom-product {
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}
.product-image {
  height: 48px;
  margin-bottom: 7px;
  border-radius: 5px;
  background: #e7efff;
}
.product-line {
  width: 75%;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  background: #cbd6ea;
}
.product-price {
  width: 45%;
  height: 5px;
  border-radius: 5px;
  background: #1760ff;
}
/* ===================================================== SECTION HEADING ===================================================== */
.ecom-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.ecom-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.ecom-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.ecom-section-heading h2 strong {
  color: #2162f5;
}
.ecom-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.ecom-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.ecom-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ecom-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.ecom-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.ecom-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.ecom-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.ecom-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== FEATURES ===================================================== */
.ecom-features {
  padding: 100px 0;
  background: #fff;
}
.ecom-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
/* DASHBOARD */
.ecom-feature-visual {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.ecom-dashboard {
  width: 410px;
  padding: 25px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #536075;
   font-size: 15px;
  font-weight: 600;
}
.dashboard-header i {
  color: #9aa5b7;
}
.dashboard-number {
  margin-top: 18px;
  color: #102856;
  font-size: 34px;
  font-weight: 700;
}
.dashboard-growth {
  margin-top: 6px;
  color: #1c9a5b;
     font-size: 14px;
}
.dashboard-chart {
  height: 130px;
  margin-top: 25px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: #f5f8ff;
}
.dashboard-chart span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
}
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 15px;
}
.dashboard-cards div {
  padding: 12px;
  border-radius: 8px;
  background: #f6f8fd;
}
.dashboard-cards strong {
  display: block;
  color: #102856;
  font-size: 15px;
}
.dashboard-cards small {
  color: #7a8597;
   font-size: 14px;
}
/* FEATURE CONTENT */
.ecom-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ecom-feature-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.ecom-feature-content h2 span {
  color: #2162f5;
}
.ecom-feature-content > p {
  color: #667085;
  line-height: 1.8;
}
.ecom-feature-list {
  margin-top: 30px;
}
.ecom-feature-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.ecom-feature-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.ecom-feature-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.ecom-feature-list span {
  color: #697386;
   font-size: 15px;
}
/* ===================================================== ECOMMERCE TYPES ===================================================== */
.ecom-types {
  padding: 90px 0;
  background: #f7f9fd;
}
.ecom-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ecom-type-card {
  padding: 30px 25px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.ecom-type-card:hover {
  transform: translateY(-5px);
  border-color: #c5d6ff;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.ecom-type-card i {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 21px;
}
.ecom-type-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 17px;
}
.ecom-type-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PROCESS ===================================================== */
.ecom-process {
  padding: 90px 0;
  background: #fff;
}
.ecom-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.ecom-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.ecom-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.ecom-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.ecom-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.ecom-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PLATFORMS ===================================================== */
.ecom-platforms {
  padding: 85px 0;
  background: #f7f9fd;
}
.ecom-platform-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.ecom-platform-list div {
  padding: 22px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 12px;
  transition: .3s;
}
.ecom-platform-list div:hover {
  transform: translateY(-4px);
  border-color: #bdd0ff;
  box-shadow: 0 10px 25px rgba(30,70,140,.08);
}
.ecom-platform-list i {
  color: #1760ff;
  font-size: 28px;
}
.ecom-platform-list span {
  color: #536075;
     font-size: 14px;
  font-weight: 600;
}
/* ===================================================== CTA ===================================================== */
.ecom-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.ecom-cta-content {
  max-width: 730px;
  margin: auto;
}
.ecom-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.ecom-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.ecom-cta h2 strong {
  color: #5e91ff;
}
.ecom-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.ecom-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.ecom-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .ecom-hero-grid, .ecom-features-grid {
      grid-template-columns: 1fr;
 }
  .ecom-hero {
      padding: 65px 0;
 }
  .ecom-hero-content h1 {
      font-size: 45px;
 }
  .ecom-service-grid, .ecom-types-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .ecom-process-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .ecom-platform-list {
      grid-template-columns: repeat(3, 1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .ecom-hero {
      padding: 50px 0;
 }
  .ecom-hero-content h1 {
      font-size: 35px;
 }
  .ecom-hero-content > p {
      font-size: 15px;
 }
  .ecom-hero-buttons {
      flex-direction: column;
 }
  .ecom-btn-primary, .ecom-btn-outline {
      width: 100%;
 }
  .ecom-trust {
      flex-direction: column;
      gap: 10px;
 }
  .ecom-section-heading h2 {
      font-size: 31px;
 }
  .ecom-service-grid, .ecom-types-grid, .ecom-process-grid {
      grid-template-columns: 1fr;
 }
  .ecom-feature-content h2 {
      font-size: 34px;
 }
  .ecom-dashboard {
      width: 90%;
 }
  .ecom-platform-list {
      grid-template-columns: repeat(2, 1fr);
 }
  .ecom-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== WEBSITE MAINTENANCE PAGE ===================================================== */
.maintenance-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.maintenance-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.maintenance-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.maintenance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.maintenance-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 52px;
  line-height: 1.1;
}
.maintenance-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.maintenance-hero-content > p {
  max-width: 590px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.maintenance-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.maintenance-btn-primary, .maintenance-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.maintenance-btn-primary {
  background: #1760ff;
  color: #fff;
}
.maintenance-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.maintenance-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.maintenance-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.maintenance-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.maintenance-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== HERO DASHBOARD ===================================================== */
.maintenance-hero-visual {
  display: flex;
  justify-content: center;
}
.maintenance-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.maintenance-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.maintenance-dots {
  display: flex;
  gap: 6px;
}
.maintenance-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.maintenance-url {
  margin: auto;
  padding: 6px 45px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.maintenance-dashboard-body {
  min-height: 350px;
  padding: 22px;
  background: #f6f8fd;
}
/* STATUS */
.maintenance-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(30,60,120,.05);
}
.status-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eaf7ef;
  color: #159957;
  font-size: 18px;
}
.maintenance-status strong {
  display: block;
  color: #1d2d48;
   font-size: 15px;
}
.maintenance-status small {
  color: #7a8597;
   font-size: 14px;
}
.status-online {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 20px;
  background: #eaf7ef;
  color: #159957;
   font-size: 14px;
  font-weight: 600;
}
/* MONITOR */
.maintenance-monitor {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 15px;
}
.monitor-item {
  padding: 15px 10px;
  text-align: center;
  border-radius: 10px;
  background: #fff;
}
.monitor-icon {
  color: #1760ff;
  font-size: 16px;
  margin-bottom: 7px;
}
.monitor-item span {
  display: block;
  color: #7a8597;
     font-size: 12px;
}
.monitor-item strong {
  display: block;
  margin-top: 4px;
  color: #172b4d;
  font-size: 15px;
}
/* ACTIVITY */
.maintenance-activity {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.activity-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.activity-heading strong {
  color: #273955;
     font-size: 14px;
}
.activity-heading span {
  color: #1760ff;
     font-size: 12px;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #edf1f7;
}
.activity-row i {
  color: #159957;
   font-size: 14px;
}
.activity-row span {
  flex: 1;
  color: #667085;
     font-size: 12px;
}
.activity-row small {
  color: #9aa4b4;
  font-size: 8px;
}
/* ===================================================== SECTION HEADING ===================================================== */
.maintenance-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.maintenance-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.maintenance-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.maintenance-section-heading h2 strong {
  color: #2162f5;
}
.maintenance-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.maintenance-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.maintenance-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.maintenance-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.maintenance-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.maintenance-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.maintenance-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.maintenance-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== WHY ===================================================== */
.maintenance-why {
  padding: 100px 0;
  background: #fff;
}
.maintenance-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.maintenance-why-visual {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.maintenance-shield {
  width: 190px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon( 50% 0, 90% 18%, 82% 70%, 50% 100%, 18% 70%, 10% 18% );
  background: #1760ff;
  color: #fff;
  font-size: 65px;
  box-shadow: 0 25px 50px rgba(23,96,255,.25);
}
.maintenance-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  color: #293b58;
     font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.maintenance-floating-card i {
  color: #1760ff;
}
.maintenance-card-speed {
  top: 50px;
  left: 25px;
}
.maintenance-card-security {
  top: 140px;
  right: 20px;
}
.maintenance-card-backup {
  bottom: 45px;
  left: 45px;
}
.maintenance-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.maintenance-why-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.maintenance-why-content h2 span {
  color: #2162f5;
}
.maintenance-why-content > p {
  color: #667085;
  line-height: 1.8;
}
.maintenance-why-list {
  margin-top: 30px;
}
.maintenance-why-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.maintenance-why-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.maintenance-why-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.maintenance-why-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== PLATFORMS ===================================================== */
.maintenance-platforms {
  padding: 90px 0;
  background: #f7f9fd;
}
.maintenance-platform-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.maintenance-platform-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.maintenance-platform-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.maintenance-platform-card i {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 23px;
}
.maintenance-platform-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 17px;
}
.maintenance-platform-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PROCESS ===================================================== */
.maintenance-process {
  padding: 90px 0;
  background: #fff;
}
.maintenance-process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.maintenance-process-item {
  position: relative;
  padding: 30px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.maintenance-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.maintenance-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.maintenance-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.maintenance-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PLANS ===================================================== */
.maintenance-plans {
  padding: 90px 0;
  background: #f7f9fd;
}
.maintenance-plan-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  align-items: stretch;
}
.maintenance-plan-card {
  position: relative;
  padding: 35px 30px;
  background: #fff;
  border: 1px solid #e3eaf7;
  border-radius: 16px;
}
.maintenance-plan-card.featured {
  border: 2px solid #1760ff;
  box-shadow: 0 18px 45px rgba(23,96,255,.12);
}
.maintenance-popular {
  position: absolute;
  top: 0;
  right: 25px;
  padding: 6px 12px;
  border-radius: 0 0 7px 7px;
  background: #1760ff;
  color: #fff;
     font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}
.maintenance-plan-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 14px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.maintenance-plan-card h3 {
  color: #182b4d;
  font-size: 20px;
}
.maintenance-plan-text {
  color: #697386;
   font-size: 15px;
}
.maintenance-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.maintenance-plan-card li {
  display: flex;
  gap: 9px;
  margin-bottom: 13px;
  color: #596579;
   font-size: 15px;
}
.maintenance-plan-card li i {
  color: #1760ff;
  margin-top: 3px;
}
.maintenance-plan-card > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1760ff;
   font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
/* ===================================================== CTA ===================================================== */
.maintenance-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.maintenance-cta-content {
  max-width: 730px;
  margin: auto;
}
.maintenance-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.maintenance-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.maintenance-cta h2 strong {
  color: #5e91ff;
}
.maintenance-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.maintenance-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.maintenance-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .maintenance-hero-grid, .maintenance-why-grid {
      grid-template-columns: 1fr;
 }
  .maintenance-hero {
      padding: 65px 0;
 }
  .maintenance-hero-content h1 {
      font-size: 45px;
 }
  .maintenance-service-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .maintenance-platform-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .maintenance-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .maintenance-plan-grid {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: auto;
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .maintenance-hero {
      padding: 50px 0;
 }
  .maintenance-hero-content h1 {
      font-size: 35px;
 }
  .maintenance-hero-content > p {
      font-size: 15px;
 }
  .maintenance-hero-buttons {
      flex-direction: column;
 }
  .maintenance-btn-primary, .maintenance-btn-outline {
      width: 100%;
 }
  .maintenance-trust {
      flex-direction: column;
      gap: 10px;
 }
  .maintenance-section-heading h2 {
      font-size: 31px;
 }
  .maintenance-service-grid, .maintenance-platform-grid, .maintenance-process-grid {
      grid-template-columns: 1fr;
 }
  .maintenance-why-content h2 {
      font-size: 34px;
 }
  .maintenance-shield {
      width: 150px;
      height: 180px;
      font-size: 50px;
 }
  .maintenance-floating-card {
         font-size: 12px;
      padding: 10px 12px;
 }
  .maintenance-card-speed {
      left: 10px;
 }
  .maintenance-card-security {
      right: 10px;
 }
  .maintenance-card-backup {
      left: 20px;
 }
  .maintenance-plan-grid {
      grid-template-columns: 1fr;
 }
  .maintenance-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== CMS DEVELOPMENT PAGE ===================================================== */
.cms-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.cms-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.cms-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.cms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.cms-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.cms-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.cms-hero-content > p {
  max-width: 580px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.cms-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.cms-btn-primary, .cms-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.cms-btn-primary {
  background: #1760ff;
  color: #fff;
}
.cms-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.cms-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.cms-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.cms-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.cms-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== CMS HERO DASHBOARD ===================================================== */
.cms-hero-visual {
  display: flex;
  justify-content: center;
}
.cms-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.cms-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.cms-dots {
  display: flex;
  gap: 6px;
}
.cms-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.cms-url {
  margin: auto;
  padding: 6px 40px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.cms-dashboard-body {
  display: flex;
  min-height: 350px;
  background: #f6f8fd;
}
/* ===================================================== CMS SIDEBAR ===================================================== */
.cms-sidebar {
  width: 125px;
  flex-shrink: 0;
  padding: 22px 12px;
  background: #102856;
}
.cms-sidebar-logo {
  width: 65px;
  height: 12px;
  margin: 0 auto 30px;
  border-radius: 5px;
  background: #fff;
}
.cms-menu {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  margin-bottom: 8px;
  border-radius: 7px;
  color: #b8c7e5;
     font-size: 12px;
  transition: .3s;
}
.cms-menu i {
  width: 14px;
  text-align: center;
   font-size: 14px;
}
.cms-menu.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
/* ===================================================== CMS MAIN ===================================================== */
.cms-main {
  flex: 1;
  padding: 22px;
}
.cms-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cms-heading-line {
  width: 130px;
  height: 10px;
  border-radius: 4px;
  background: #102856;
}
.cms-subheading-line {
  width: 85px;
  height: 6px;
  margin-top: 7px;
  border-radius: 4px;
  background: #d2dced;
}
.cms-admin-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dce8ff;
  border: 3px solid #fff;
}
/* ===================================================== CMS STATS ===================================================== */
.cms-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}
.cms-stat-card {
  padding: 13px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf1f7;
}
.cms-stat-card i {
  color: #1760ff;
     font-size: 14px;
  margin-bottom: 6px;
}
.cms-stat-card strong {
  display: block;
  color: #172b4d;
  font-size: 17px;
}
.cms-stat-card small {
  color: #7a8597;
     font-size: 12px;
}
/* ===================================================== CONTENT BOX ===================================================== */
.cms-content-box {
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.cms-box-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cms-box-heading strong {
  color: #263854;
     font-size: 14px;
}
.cms-box-heading span {
  color: #1760ff;
     font-size: 12px;
}
.cms-content-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #edf1f7;
}
.cms-content-thumb {
  width: 35px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #e4edff;
}
.cms-content-lines {
  flex: 1;
}
.cms-content-lines span {
  display: block;
  width: 80%;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  background: #cbd6e9;
}
.cms-content-lines span:last-child {
  width: 55%;
  margin-bottom: 0;
}
.cms-content-row > i {
  color: #1760ff;
   font-size: 14px;
}
/* ===================================================== SECTION HEADING ===================================================== */
.cms-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.cms-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.cms-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.cms-section-heading h2 strong {
  color: #2162f5;
}
.cms-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.cms-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.cms-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cms-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.cms-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.cms-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.cms-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.cms-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== WHY CMS ===================================================== */
.cms-why {
  padding: 100px 0;
  background: #fff;
}
.cms-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
/* EDITOR VISUAL */
.cms-why-visual {
  position: relative;
  min-height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.cms-content-editor {
  width: 390px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.editor-top {
  height: 35px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 13px;
  background: #102856;
}
.editor-top span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.editor-toolbar {
  display: flex;
  gap: 15px;
  padding: 13px 18px;
  border-bottom: 1px solid #edf1f7;
  color: #697386;
     font-size: 14px;
}
.editor-body {
  padding: 22px;
}
.editor-title {
  width: 60%;
  height: 13px;
  margin-bottom: 18px;
  border-radius: 5px;
  background: #1760ff;
}
.editor-line {
  width: 90%;
  height: 7px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #d8e0ee;
}
.editor-line.medium {
  width: 75%;
}
.editor-line.short {
  width: 50%;
}
.editor-image {
  width: 100%;
  height: 100px;
  margin-top: 18px;
  border-radius: 8px;
  background: #e6efff;
}
.editor-save {
  width: max-content;
  margin: 0 22px 20px;
  padding: 9px 15px;
  border-radius: 6px;
  background: #1760ff;
  color: #fff;
   font-size: 14px;
}
.cms-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  color: #293b58;
     font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.cms-floating i {
  color: #1760ff;
}
.cms-floating-one {
  top: 45px;
  left: 20px;
}
.cms-floating-two {
  right: 20px;
  bottom: 50px;
}
/* WHY CONTENT */
.cms-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.cms-why-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.cms-why-content h2 span {
  color: #2162f5;
}
.cms-why-content > p {
  color: #667085;
  line-height: 1.8;
}
.cms-why-list {
  margin-top: 30px;
}
.cms-why-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.cms-why-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.cms-why-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.cms-why-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== CMS TYPES ===================================================== */
.cms-types {
  padding: 90px 0;
  background: #f7f9fd;
}
.cms-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cms-type-card {
  position: relative;
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.cms-type-card:hover {
  transform: translateY(-6px);
  border-color: #c8d8ff;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.cms-type-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 25px;
}
.cms-type-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 18px;
}
.cms-type-card p {
  margin-bottom: 18px;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
.cms-type-card > span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  background: #f0f5ff;
  color: #1760ff;
     font-size: 12px;
  font-weight: 600;
}
/* ===================================================== FEATURES ===================================================== */
.cms-features {
  padding: 90px 0;
  background: #fff;
}
.cms-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cms-feature-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid #e7edf8;
  border-radius: 12px;
  transition: .3s;
}
.cms-feature-item:hover {
  transform: translateY(-3px);
  border-color: #c8d8ff;
  box-shadow: 0 10px 25px rgba(30,70,140,.07);
}
.cms-feature-item > i {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 18px;
}
.cms-feature-item h3 {
  margin: 0 0 4px;
  color: #263854;
  font-size: 15px;
}
.cms-feature-item p {
  margin: 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.5;
}
/* ===================================================== PROCESS ===================================================== */
.cms-process {
  padding: 90px 0;
  background: #f7f9fd;
}
.cms-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cms-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.cms-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.cms-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.cms-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.cms-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== TECHNOLOGY ===================================================== */
.cms-technology {
  padding: 85px 0;
  background: #fff;
}
.cms-tech-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.cms-tech-list > div {
  padding: 22px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #f7f9fd;
  border: 1px solid #e7edf8;
  border-radius: 12px;
  transition: .3s;
}
.cms-tech-list > div:hover {
  transform: translateY(-4px);
  border-color: #bdd0ff;
  box-shadow: 0 10px 25px rgba(30,70,140,.08);
}
.cms-tech-list i {
  color: #1760ff;
  font-size: 27px;
}
.cms-tech-list span {
  color: #536075;
     font-size: 14px;
  font-weight: 600;
}
/* ===================================================== CTA ===================================================== */
.cms-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.cms-cta-content {
  max-width: 730px;
  margin: auto;
}
.cms-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.cms-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.cms-cta h2 strong {
  color: #5e91ff;
}
.cms-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.cms-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.cms-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .cms-hero-grid, .cms-why-grid {
      grid-template-columns: 1fr;
 }
  .cms-hero {
      padding: 65px 0;
 }
  .cms-hero-content h1 {
      font-size: 45px;
 }
  .cms-service-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .cms-types-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .cms-process-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .cms-tech-list {
      grid-template-columns: repeat(3, 1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .cms-hero {
      padding: 50px 0;
 }
  .cms-hero-content h1 {
      font-size: 35px;
 }
  .cms-hero-content > p {
      font-size: 15px;
 }
  .cms-hero-buttons {
      flex-direction: column;
 }
  .cms-btn-primary, .cms-btn-outline {
      width: 100%;
 }
  .cms-trust {
      flex-direction: column;
      gap: 10px;
 }
  .cms-section-heading h2 {
      font-size: 31px;
 }
  .cms-service-grid, .cms-types-grid, .cms-process-grid {
      grid-template-columns: 1fr;
 }
  .cms-feature-grid {
      grid-template-columns: 1fr;
 }
  .cms-tech-list {
      grid-template-columns: repeat(2, 1fr);
 }
  .cms-why-content h2 {
      font-size: 34px;
 }
  .cms-content-editor {
      width: 90%;
 }
  .cms-floating {
         font-size: 12px;
      padding: 10px 12px;
 }
  .cms-floating-one {
      left: 10px;
 }
  .cms-floating-two {
      right: 10px;
 }
  .cms-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .cms-dashboard-body {
      min-height: 300px;
 }
  .cms-sidebar {
      width: 72px;
 }
  .cms-menu span {
      display: none;
 }
  .cms-menu {
      justify-content: center;
 }
  .cms-main {
      padding: 14px;
 }
  .cms-url {
      padding: 6px 20px;
 }
  .cms-stat-card {
      padding: 9px;
 }
  .cms-stat-card strong {
      font-size: 14px;
 }
}
/* ===================================================== SEO SERVICES PAGE ===================================================== */
.seo-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.seo-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.seo-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.seo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.seo-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.seo-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.seo-hero-content > p {
  max-width: 590px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.seo-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.seo-btn-primary, .seo-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.seo-btn-primary {
  background: #1760ff;
  color: #fff;
}
.seo-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.seo-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.seo-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.seo-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.seo-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== SEO DASHBOARD ===================================================== */
.seo-hero-visual {
  display: flex;
  justify-content: center;
}
.seo-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.seo-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.seo-dots {
  display: flex;
  gap: 6px;
}
.seo-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.seo-url {
  margin: auto;
  padding: 6px 40px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.seo-dashboard-body {
  min-height: 350px;
  padding: 22px;
  background: #f6f8fd;
}
/* DASHBOARD HEADER */
.seo-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.seo-dashboard-header strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.seo-dashboard-header small {
  color: #8993a5;
     font-size: 12px;
}
.seo-period {
  padding: 6px 9px;
  border-radius: 5px;
  background: #fff;
  color: #68758b;
     font-size: 12px;
}
/* SCORE */
.seo-score-box {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
}
.seo-score-circle {
  width: 95px;
  height: 95px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient( circle at center, #fff 58%, transparent 59% ), conic-gradient( #1760ff 0deg 331deg, #e2e9f5 331deg 360deg );
}
.seo-score-circle span {
  color: #102856;
  font-size: 23px;
  font-weight: 800;
}
.seo-score-circle small {
  color: #7c8798;
  font-size: 8px;
}
.seo-score-info strong {
  display: block;
  color: #263854;
     font-size: 14px;
}
.seo-score-info p {
  margin: 6px 0;
  color: #7a8597;
     font-size: 12px;
  line-height: 1.5;
}
.seo-progress {
  width: 130px;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #e6ebf3;
}
.seo-progress span {
  display: block;
  width: 92%;
  height: 100%;
  border-radius: inherit;
  background: #1760ff;
}
/* STATS */
.seo-stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 15px;
}
.seo-stat {
  padding: 13px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf1f7;
}
.seo-stat i {
  color: #1760ff;
     font-size: 14px;
  margin-bottom: 6px;
}
.seo-stat strong {
  display: block;
  color: #172b4d;
  font-size: 16px;
}
.seo-stat small {
  color: #7a8597;
     font-size: 12px;
}
/* CHART */
.seo-chart {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.seo-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.seo-chart-heading strong {
  color: #263854;
   font-size: 14px;
}
.seo-chart-heading span {
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
.seo-chart-bars {
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding: 5px 5px 0;
  background: repeating-linear-gradient( to bottom, transparent 0, transparent 24px, #edf1f7 25px );
}
.seo-chart-bars span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
  opacity: .85;
}
/* ===================================================== SECTION HEADING ===================================================== */
.seo-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.seo-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.seo-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.seo-section-heading h2 strong {
  color: #2162f5;
}
.seo-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SEO SERVICES ===================================================== */
.seo-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.seo-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.seo-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.seo-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.seo-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.seo-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.seo-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== SEO AUDIT ===================================================== */
.seo-audit {
  padding: 100px 0;
  background: #fff;
}
.seo-audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
/* AUDIT VISUAL */
.seo-audit-visual {
  position: relative;
  min-height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.seo-audit-card {
  width: 390px;
  padding: 25px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.seo-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf1f7;
}
.seo-audit-header strong {
  color: #263854;
   font-size: 15px;
}
.seo-audit-header span {
  padding: 5px 9px;
  border-radius: 15px;
  background: #eaf7ef;
  color: #159957;
     font-size: 12px;
}
.seo-audit-score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
}
.seo-audit-circle {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient( circle, #fff 58%, transparent 59% ), conic-gradient( #1760ff 0deg 331deg, #e3eaf5 331deg 360deg );
}
.seo-audit-circle span {
  color: #102856;
  font-size: 21px;
  font-weight: 800;
}
.seo-audit-circle small {
  color: #7c8798;
  font-size: 8px;
}
.seo-audit-score strong {
  display: block;
  color: #263854;
     font-size: 14px;
}
.seo-audit-score p {
  max-width: 170px;
  margin: 5px 0 0;
  color: #7a8597;
     font-size: 12px;
  line-height: 1.5;
}
.seo-audit-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid #edf1f7;
}
.seo-audit-list span {
  color: #596579;
   font-size: 14px;
}
.seo-audit-list span i {
  margin-right: 6px;
  color: #159957;
}
.seo-audit-list strong {
  color: #159957;
     font-size: 12px;
}
.seo-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  color: #293b58;
   font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.seo-floating-card i {
  color: #1760ff;
}
.seo-floating-a {
  top: 45px;
  left: 20px;
}
.seo-floating-b {
  right: 20px;
  bottom: 50px;
}
/* AUDIT CONTENT */
.seo-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.seo-audit-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.seo-audit-content h2 span {
  color: #2162f5;
}
.seo-audit-content > p {
  color: #667085;
  line-height: 1.8;
}
.seo-check-list {
  margin-top: 30px;
}
.seo-check-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.seo-check-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.seo-check-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.seo-check-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== SEO AREAS ===================================================== */
.seo-areas {
  padding: 90px 0;
  background: #f7f9fd;
}
.seo-area-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.seo-area-card {
  position: relative;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.seo-area-card:hover {
  transform: translateY(-6px);
  border-color: #c8d8ff;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.seo-area-number {
  position: absolute;
  top: 14px;
  right: 18px;
  color: #dce6fb;
  font-size: 27px;
  font-weight: 800;
}
.seo-area-card > i {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.seo-area-card h3 {
  margin-bottom: 9px;
  color: #182b4d;
  font-size: 17px;
}
.seo-area-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== SEO PROCESS ===================================================== */
.seo-process {
  padding: 90px 0;
  background: #fff;
}
.seo-process-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
}
.seo-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.seo-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.seo-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.seo-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.seo-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== SEO METRICS ===================================================== */
.seo-metrics {
  padding: 90px 0;
  background: #f7f9fd;
}
.seo-metric-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.seo-metric-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.seo-metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.seo-metric-card i {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.seo-metric-card strong {
  display: block;
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 16px;
}
.seo-metric-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== SEO TOOLS ===================================================== */
.seo-tools {
  padding: 85px 0;
  background: #fff;
}
.seo-tools-list {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 15px;
}
.seo-tools-list > div {
  padding: 22px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #f7f9fd;
  border: 1px solid #e7edf8;
  border-radius: 12px;
  transition: .3s;
}
.seo-tools-list > div:hover {
  transform: translateY(-4px);
  border-color: #bdd0ff;
  box-shadow: 0 10px 25px rgba(30,70,140,.08);
}
.seo-tools-list i {
  color: #1760ff;
  font-size: 27px;
}
.seo-tools-list span {
  color: #536075;
     font-size: 14px;
  font-weight: 600;
  text-align: center;
}
/* ===================================================== CTA ===================================================== */
.seo-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.seo-cta-content {
  max-width: 730px;
  margin: auto;
}
.seo-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.seo-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.seo-cta h2 strong {
  color: #5e91ff;
}
.seo-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.seo-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.seo-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .seo-hero-grid, .seo-audit-grid {
      grid-template-columns: 1fr;
 }
  .seo-hero {
      padding: 65px 0;
 }
  .seo-hero-content h1 {
      font-size: 45px;
 }
  .seo-service-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .seo-area-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .seo-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .seo-metric-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .seo-tools-list {
      grid-template-columns: repeat(3,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .seo-hero {
      padding: 50px 0;
 }
  .seo-hero-content h1 {
      font-size: 35px;
 }
  .seo-hero-content > p {
      font-size: 15px;
 }
  .seo-hero-buttons {
      flex-direction: column;
 }
  .seo-btn-primary, .seo-btn-outline {
      width: 100%;
 }
  .seo-trust {
      flex-direction: column;
      gap: 10px;
 }
  .seo-section-heading h2 {
      font-size: 31px;
 }
  .seo-service-grid, .seo-area-grid, .seo-process-grid, .seo-metric-grid {
      grid-template-columns: 1fr;
 }
  .seo-tools-list {
      grid-template-columns: repeat(2,1fr);
 }
  .seo-audit-content h2 {
      font-size: 34px;
 }
  .seo-audit-card {
      width: 90%;
 }
  .seo-floating-card {
         font-size: 12px;
      padding: 10px 12px;
 }
  .seo-floating-a {
      left: 10px;
 }
  .seo-floating-b {
      right: 10px;
 }
  .seo-score-box {
      gap: 12px;
 }
  .seo-score-circle {
      width: 75px;
      height: 75px;
 }
  .seo-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .seo-dashboard-body {
      padding: 15px;
 }
  .seo-score-box {
      padding: 12px;
 }
  .seo-score-info p {
      font-size: 8px;
 }
  .seo-stat {
      padding: 9px;
 }
  .seo-stat strong {
       font-size: 15px;
 }
  .seo-chart-bars {
      gap: 7px;
 }
}
/* ===================================================== DIGITAL MARKETING PAGE ===================================================== */
.digital-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.digital-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.digital-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.digital-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.digital-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.digital-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.digital-hero-content > p {
  max-width: 590px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.digital-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.digital-btn-primary, .digital-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.digital-btn-primary {
  background: #1760ff;
  color: #fff;
}
.digital-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.digital-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.digital-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.digital-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.digital-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== DASHBOARD ===================================================== */
.digital-hero-visual {
  display: flex;
  justify-content: center;
}
.digital-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24, 61, 130, .15);
  transform: perspective(1000px) rotateY(-4deg);
}
.digital-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.digital-dots {
  display: flex;
  gap: 6px;
}
.digital-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.digital-url {
  margin: auto;
  padding: 6px 38px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.digital-dashboard-body {
  min-height: 350px;
  padding: 22px;
  background: #f6f8fd;
}
.digital-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.digital-dashboard-header strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.digital-dashboard-header small {
  color: #8993a5;
     font-size: 12px;
}
.digital-live {
  padding: 5px 9px;
  border-radius: 15px;
  background: #eaf7ef;
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
/* STATS */
.digital-stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.digital-stat-card {
  position: relative;
  padding: 13px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf1f7;
}
.digital-stat-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.digital-stat-card strong {
  display: block;
  color: #172b4d;
  font-size: 16px;
}
.digital-stat-card small {
  display: block;
  margin-top: 2px;
  color: #7a8597;
     font-size: 12px;
}
.digital-stat-card > span {
  display: block;
  margin-top: 5px;
  color: #159957;
  font-size: 8px;
  font-weight: 600;
}
/* CHART */
.digital-chart {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.digital-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.digital-chart-heading strong {
  color: #263854;
   font-size: 14px;
}
.digital-chart-heading span {
  color: #7a8597;
     font-size: 12px;
}
.digital-chart-area {
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding: 5px 5px 0;
  background: repeating-linear-gradient( to bottom, transparent 0, transparent 24px, #edf1f7 25px );
}
.digital-chart-area span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
  opacity: .85;
}
/* CAMPAIGN */
.digital-campaign {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.digital-campaign-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.digital-campaign-heading strong {
  color: #263854;
   font-size: 14px;
}
.digital-campaign-heading span {
  color: #1760ff;
     font-size: 12px;
}
.digital-campaign-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid #edf1f7;
}
.campaign-platform {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.digital-campaign-row > div:nth-child(2) {
  flex: 1;
}
.digital-campaign-row strong {
  display: block;
  color: #596579;
     font-size: 12px;
}
.digital-campaign-row small {
  color: #9aa4b4;
  font-size: 8px;
}
.campaign-status {
  padding: 4px 7px;
  border-radius: 10px;
  background: #eaf7ef;
  color: #159957;
  font-size: 8px;
}
/* ===================================================== SECTION HEADING ===================================================== */
.digital-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.digital-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.digital-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.digital-section-heading h2 strong {
  color: #2162f5;
}
.digital-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.digital-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.digital-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.digital-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.digital-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.digital-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.digital-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.digital-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== SOCIAL MEDIA SECTION ===================================================== */
.digital-social {
  padding: 100px 0;
  background: #fff;
}
.digital-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.digital-social-visual {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
/* PHONE */
.social-phone {
  width: 245px;
  overflow: hidden;
  border: 7px solid #102856;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.18);
}
.social-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid #edf1f7;
}
.social-phone-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1760ff;
}
.social-phone-top strong {
  color: #263854;
   font-size: 14px;
}
.social-phone-top i {
  color: #697386;
   font-size: 14px;
}
.social-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
}
.social-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #dce8ff;
}
.social-profile strong {
  display: block;
  color: #263854;
   font-size: 14px;
}
.social-profile small {
  color: #8993a5;
  font-size: 8px;
}
.social-post-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6efff;
  color: #1760ff;
  font-size: 28px;
}
.social-post-actions {
  display: flex;
  gap: 11px;
  padding: 12px;
  color: #536075;
     font-size: 14px;
}
.social-post-actions span {
  flex: 1;
}
.social-post-lines {
  padding: 0 12px 15px;
}
.social-post-lines span {
  display: block;
  width: 90%;
  height: 5px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: #d8e0ee;
}
.social-post-lines span:nth-child(2) {
  width: 70%;
}
.social-post-lines span:nth-child(3) {
  width: 45%;
}
/* FLOATING */
.digital-social-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.digital-social-floating i {
  color: #1760ff;
  font-size: 16px;
}
.digital-social-floating strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.digital-social-floating small {
  color: #8993a5;
  font-size: 8px;
}
.social-followers {
  top: 65px;
  left: 20px;
}
.social-engagement {
  right: 20px;
  bottom: 70px;
}
/* SOCIAL CONTENT */
.digital-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.digital-social-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.digital-social-content h2 span {
  color: #2162f5;
}
.digital-social-content > p {
  color: #667085;
  line-height: 1.8;
}
.digital-check-list {
  margin-top: 30px;
}
.digital-check-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.digital-check-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.digital-check-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.digital-check-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== CHANNELS ===================================================== */
.digital-channels {
  padding: 90px 0;
  background: #f7f9fd;
}
.digital-channel-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 15px;
}
.digital-channel-card {
  padding: 25px 12px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 13px;
  transition: .3s;
}
.digital-channel-card:hover {
  transform: translateY(-5px);
  border-color: #bdd0ff;
  box-shadow: 0 12px 28px rgba(30,70,140,.08);
}
.digital-channel-card i {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 21px;
}
.digital-channel-card h3 {
  margin-bottom: 6px;
  color: #182b4d;
  font-size: 15px;
}
.digital-channel-card p {
  margin: 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.5;
}
/* ===================================================== PROCESS ===================================================== */
.digital-process {
  padding: 90px 0;
  background: #fff;
}
.digital-process-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
}
.digital-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.digital-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.digital-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.digital-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.digital-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== BENEFITS ===================================================== */
.digital-benefits {
  padding: 90px 0;
  background: #f7f9fd;
}
.digital-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.digital-benefit-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.digital-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.digital-benefit-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.digital-benefit-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 16px;
}
.digital-benefit-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== CTA ===================================================== */
.digital-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.digital-cta-content {
  max-width: 730px;
  margin: auto;
}
.digital-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.digital-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.digital-cta h2 strong {
  color: #5e91ff;
}
.digital-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.digital-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.digital-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .digital-hero-grid, .digital-social-grid {
      grid-template-columns: 1fr;
 }
  .digital-hero {
      padding: 65px 0;
 }
  .digital-hero-content h1 {
      font-size: 45px;
 }
  .digital-service-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .digital-channel-grid {
      grid-template-columns: repeat(3,1fr);
 }
  .digital-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .digital-benefit-grid {
      grid-template-columns: repeat(2,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .digital-hero {
      padding: 50px 0;
 }
  .digital-hero-content h1 {
      font-size: 35px;
 }
  .digital-hero-content > p {
      font-size: 15px;
 }
  .digital-hero-buttons {
      flex-direction: column;
 }
  .digital-btn-primary, .digital-btn-outline {
      width: 100%;
 }
  .digital-trust {
      flex-direction: column;
      gap: 10px;
 }
  .digital-section-heading h2 {
      font-size: 31px;
 }
  .digital-service-grid, .digital-process-grid, .digital-benefit-grid {
      grid-template-columns: 1fr;
 }
  .digital-channel-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .digital-social-content h2 {
      font-size: 34px;
 }
  .social-phone {
      width: 220px;
 }
  .digital-social-floating {
         font-size: 12px;
      padding: 10px 12px;
 }
  .social-followers {
      left: 8px;
 }
  .social-engagement {
      right: 8px;
 }
  .digital-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .digital-dashboard-body {
      padding: 15px;
 }
  .digital-stat-card {
      padding: 9px;
 }
  .digital-stat-card strong {
       font-size: 15px;
 }
  .digital-chart-area {
      gap: 7px;
 }
  .digital-campaign-row strong {
      font-size: 8px;
 }
  .digital-channel-grid {
      gap: 10px;
 }
  .digital-channel-card {
      padding: 20px 8px;
 }
}
.container {
  padding: 0px 20px;
}
/* ===================================================== SOCIAL MEDIA MARKETING PAGE ===================================================== */
.smm-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.smm-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.smm-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.smm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.smm-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.smm-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.smm-hero-content > p {
  max-width: 590px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.smm-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.smm-btn-primary, .smm-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.smm-btn-primary {
  background: #1760ff;
  color: #fff;
}
.smm-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.smm-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.smm-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.smm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.smm-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== DASHBOARD ===================================================== */
.smm-hero-visual {
  display: flex;
  justify-content: center;
}
.smm-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24,61,130,.15);
  transform: perspective(1000px) rotateY(-4deg);
}
.smm-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.smm-dots {
  display: flex;
  gap: 6px;
}
.smm-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.smm-url {
  margin: auto;
  padding: 6px 38px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.smm-dashboard-body {
  min-height: 350px;
  padding: 22px;
  background: #f6f8fd;
}
.smm-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.smm-dashboard-header strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.smm-dashboard-header small {
  color: #8993a5;
     font-size: 12px;
}
.smm-live {
  padding: 5px 9px;
  border-radius: 15px;
  background: #eaf7ef;
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
/* STATS */
.smm-stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.smm-stat-card {
  padding: 13px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf1f7;
}
.smm-stat-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.smm-stat-card strong {
  display: block;
  color: #172b4d;
  font-size: 16px;
}
.smm-stat-card small {
  display: block;
  margin-top: 2px;
  color: #7a8597;
     font-size: 12px;
}
.smm-stat-card > span {
  display: block;
  margin-top: 5px;
  color: #159957;
  font-size: 8px;
  font-weight: 600;
}
/* ===================================================== PLATFORM BOX ===================================================== */
.smm-platform-box {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.smm-platform-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.smm-platform-heading strong {
  color: #263854;
   font-size: 14px;
}
.smm-platform-heading span {
  color: #1760ff;
     font-size: 12px;
}
.smm-platform-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid #edf1f7;
}
.smm-platform-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.smm-platform-info {
  flex: 1;
}
.smm-platform-info strong {
  display: block;
  margin-bottom: 5px;
  color: #596579;
     font-size: 12px;
}
.smm-platform-row b {
  color: #536075;
     font-size: 12px;
}
.smm-mini-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #e7edf5;
}
.smm-mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1760ff;
}
/* ===================================================== CHART ===================================================== */
.smm-chart {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.smm-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.smm-chart-heading strong {
  color: #263854;
   font-size: 14px;
}
.smm-chart-heading span {
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
.smm-chart-bars {
  height: 80px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  background: repeating-linear-gradient( to bottom, transparent 0, transparent 19px, #edf1f7 20px );
}
.smm-chart-bars span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
  opacity: .85;
}
/* ===================================================== SECTION HEADING ===================================================== */
.smm-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.smm-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.smm-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.smm-section-heading h2 strong {
  color: #2162f5;
}
.smm-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.smm-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.smm-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.smm-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.smm-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.smm-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.smm-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.smm-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== STRATEGY ===================================================== */
.smm-strategy {
  padding: 100px 0;
  background: #fff;
}
.smm-strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.smm-strategy-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
/* CALENDAR */
.smm-content-calendar {
  width: 390px;
  padding: 22px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.smm-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf1f7;
}
.smm-calendar-header strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.smm-calendar-header small {
  color: #8993a5;
     font-size: 12px;
}
.smm-calendar-header i {
  color: #1760ff;
  font-size: 18px;
}
.smm-calendar-days {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 7px;
  margin-top: 15px;
}
.smm-calendar-days span {
  text-align: center;
  color: #8993a5;
  font-size: 8px;
  font-weight: 600;
}
.smm-calendar-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 7px;
  margin-top: 8px;
}
.calendar-post {
  min-height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: #f1f5fc;
  color: #1760ff;
}
.calendar-post i {
  font-size: 17px;
}
.calendar-post small {
  color: #667085;
  font-size: 8px;
}
.smm-calendar-footer {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #edf1f7;
}
.smm-calendar-footer span {
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
.smm-calendar-footer i {
  margin-right: 5px;
}
/* FLOATING */
.smm-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  color: #293b58;
   font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.smm-floating i {
  color: #1760ff;
}
.smm-floating-one {
  top: 45px;
  left: 20px;
}
.smm-floating-two {
  right: 20px;
  bottom: 50px;
}
/* STRATEGY CONTENT */
.smm-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.smm-strategy-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.smm-strategy-content h2 span {
  color: #2162f5;
}
.smm-strategy-content > p {
  color: #667085;
  line-height: 1.8;
}
.smm-check-list {
  margin-top: 30px;
}
.smm-check-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.smm-check-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.smm-check-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.smm-check-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== PLATFORMS ===================================================== */
.smm-platforms {
  padding: 90px 0;
  background: #f7f9fd;
}
.smm-platform-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.smm-platform-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.smm-platform-card:hover {
  transform: translateY(-6px);
  border-color: #c8d8ff;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.smm-platform-large-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 27px;
}
.smm-platform-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 18px;
}
.smm-platform-card p {
  margin-bottom: 18px;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
.smm-platform-card > span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  background: #f0f5ff;
  color: #1760ff;
     font-size: 12px;
  font-weight: 600;
}
/* ===================================================== GROWTH ===================================================== */
.smm-growth {
  padding: 90px 0;
  background: #fff;
}
.smm-growth-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.smm-growth-card {
  position: relative;
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.smm-growth-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.smm-growth-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 27px;
  font-weight: 800;
}
.smm-growth-card > i {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.smm-growth-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 16px;
}
.smm-growth-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== PROCESS ===================================================== */
.smm-process {
  padding: 90px 0;
  background: #f7f9fd;
}
.smm-process-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
}
.smm-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.smm-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.smm-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.smm-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.smm-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== CTA ===================================================== */
.smm-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.smm-cta-content {
  max-width: 730px;
  margin: auto;
}
.smm-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.smm-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.smm-cta h2 strong {
  color: #5e91ff;
}
.smm-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.smm-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.smm-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .smm-hero-grid, .smm-strategy-grid {
      grid-template-columns: 1fr;
 }
  .smm-hero {
      padding: 65px 0;
 }
  .smm-hero-content h1 {
      font-size: 45px;
 }
  .smm-service-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .smm-platform-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .smm-growth-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .smm-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .smm-hero {
      padding: 50px 0;
 }
  .smm-hero-content h1 {
      font-size: 35px;
 }
  .smm-hero-content > p {
      font-size: 15px;
 }
  .smm-hero-buttons {
      flex-direction: column;
 }
  .smm-btn-primary, .smm-btn-outline {
      width: 100%;
 }
  .smm-trust {
      flex-direction: column;
      gap: 10px;
 }
  .smm-section-heading h2 {
      font-size: 31px;
 }
  .smm-service-grid, .smm-platform-grid, .smm-growth-grid, .smm-process-grid {
      grid-template-columns: 1fr;
 }
  .smm-strategy-content h2 {
      font-size: 34px;
 }
  .smm-content-calendar {
      width: 90%;
 }
  .smm-floating {
         font-size: 12px;
      padding: 10px 12px;
 }
  .smm-floating-one {
      left: 8px;
 }
  .smm-floating-two {
      right: 8px;
 }
  .smm-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .smm-dashboard-body {
      padding: 15px;
 }
  .smm-stat-card {
      padding: 9px;
 }
  .smm-stat-card strong {
       font-size: 15px;
 }
  .smm-calendar-grid {
      gap: 4px;
 }
  .calendar-post {
      min-height: 65px;
 }
  .calendar-post i {
      font-size: 14px;
 }
}
/* ===================================================== CONTENT MARKETING PAGE ===================================================== */
.cm-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.cm-hero {
  padding: 85px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.cm-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .7px;
}
.cm-hero-content h1 {
  margin: 20px 0;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.cm-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.cm-hero-content > p {
  max-width: 590px;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.cm-hero-buttons {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.cm-btn-primary, .cm-btn-outline {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.cm-btn-primary {
  background: #1760ff;
  color: #fff;
}
.cm-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.cm-btn-outline {
  color: #1760ff;
  border: 1.5px solid #1760ff;
}
.cm-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
.cm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #5d6878;
   font-size: 15px;
}
.cm-trust i {
  margin-right: 5px;
  color: #1760ff;
}
/* ===================================================== DASHBOARD ===================================================== */
.cm-hero-visual {
  display: flex;
  justify-content: center;
}
.cm-content-dashboard {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(24,61,130,.15);
  transform: perspective(1000px) rotateY(-4deg);
}
.cm-dashboard-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #102856;
}
.cm-dots {
  display: flex;
  gap: 6px;
}
.cm-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.cm-dashboard-url {
  margin: auto;
  padding: 6px 38px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #dce7ff;
   font-size: 14px;
}
.cm-dashboard-body {
  min-height: 350px;
  padding: 22px;
  background: #f6f8fd;
}
.cm-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cm-dashboard-header strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.cm-dashboard-header small {
  color: #8993a5;
     font-size: 12px;
}
.cm-status {
  padding: 5px 9px;
  border-radius: 15px;
  background: #eaf7ef;
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
/* STATS */
.cm-stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.cm-stat-card {
  padding: 13px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf1f7;
}
.cm-stat-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.cm-stat-card strong {
  display: block;
  color: #172b4d;
  font-size: 16px;
}
.cm-stat-card small {
  display: block;
  margin-top: 2px;
  color: #7a8597;
     font-size: 12px;
}
.cm-stat-card > span {
  display: block;
  margin-top: 5px;
  color: #159957;
  font-size: 8px;
  font-weight: 600;
}
/* PERFORMANCE */
.cm-performance {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.cm-performance-heading {
  display: flex;
  justify-content: space-between;
}
.cm-performance-heading strong {
  color: #263854;
   font-size: 14px;
}
.cm-performance-heading span {
  color: #159957;
     font-size: 12px;
  font-weight: 600;
}
.cm-chart {
  height: 90px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  background: repeating-linear-gradient( to bottom, transparent 0, transparent 21px, #edf1f7 22px );
}
.cm-chart span {
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
  opacity: .85;
}
/* CONTENT TYPES */
.cm-content-types {
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
}
.cm-content-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cm-content-heading strong {
  color: #263854;
   font-size: 14px;
}
.cm-content-heading span {
  color: #1760ff;
     font-size: 12px;
}
.cm-content-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid #edf1f7;
}
.cm-row-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.cm-content-row > div:nth-child(2) {
  flex: 1;
}
.cm-content-row strong {
  display: block;
  color: #596579;
     font-size: 12px;
}
.cm-content-row small {
  color: #9aa4b4;
  font-size: 8px;
}
.cm-content-row b {
  color: #159957;
     font-size: 12px;
}
/* ===================================================== SECTION HEADING ===================================================== */
.cm-section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}
.cm-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.cm-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.cm-section-heading h2 strong {
  color: #2162f5;
}
.cm-section-heading p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== SERVICES ===================================================== */
.cm-services {
  padding: 90px 0;
  background: #f7f9fd;
}
.cm-service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.cm-service-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.cm-service-card:hover {
  transform: translateY(-7px);
  border-color: #c8d8ff;
  box-shadow: 0 18px 45px rgba(26,72,150,.1);
}
.cm-service-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.cm-service-card h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 18px;
}
.cm-service-card p {
  margin: 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== STRATEGY ===================================================== */
.cm-strategy {
  padding: 100px 0;
  background: #fff;
}
.cm-strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.cm-strategy-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
/* EDITOR */
.cm-editor-card {
  width: 390px;
  padding: 22px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.cm-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf1f7;
}
.cm-editor-top strong {
  display: block;
  color: #263854;
   font-size: 15px;
}
.cm-editor-top small {
  color: #8993a5;
     font-size: 12px;
}
.cm-editor-top i {
  color: #1760ff;
  font-size: 18px;
}
.cm-editor-title {
  padding: 20px 0;
}
.cm-editor-title > span {
  color: #1760ff;
     font-size: 12px;
  font-weight: 700;
}
.cm-editor-title h3 {
  margin: 8px 0 0;
  color: #182b4d;
  font-size: 20px;
  line-height: 1.3;
}
.cm-editor-lines span {
  display: block;
  width: 100%;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 5px;
  background: #e5ebf5;
}
.cm-editor-lines .short {
  width: 60%;
}
.cm-editor-tags {
  display: flex;
  gap: 7px;
  margin-top: 17px;
}
.cm-editor-tags span {
  padding: 5px 9px;
  border-radius: 15px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 8px;
}
.cm-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid #edf1f7;
}
.cm-editor-footer span {
  color: #159957;
     font-size: 12px;
}
.cm-editor-footer i {
  margin-right: 4px;
}
.cm-editor-footer strong {
  color: #159957;
     font-size: 12px;
}
/* FLOATING */
.cm-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  color: #293b58;
   font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.cm-floating i {
  color: #1760ff;
}
.cm-floating-one {
  top: 45px;
  left: 20px;
}
.cm-floating-two {
  right: 20px;
  bottom: 50px;
}
/* STRATEGY CONTENT */
.cm-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.cm-strategy-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.cm-strategy-content h2 span {
  color: #2162f5;
}
.cm-strategy-content > p {
  color: #667085;
  line-height: 1.8;
}
.cm-check-list {
  margin-top: 30px;
}
.cm-check-list > div {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.cm-check-list > div > i {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf1ff;
  color: #1760ff;
     font-size: 14px;
}
.cm-check-list strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  font-size: 14px;
}
.cm-check-list span {
  color: #697386;
   font-size: 15px;
  line-height: 1.5;
}
/* ===================================================== CONTENT FORMATS ===================================================== */
.cm-content-types-section {
  padding: 90px 0;
  background: #f7f9fd;
}
.cm-format-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.cm-format-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.cm-format-card:hover {
  transform: translateY(-6px);
  border-color: #c8d8ff;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.cm-format-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 23px;
}
.cm-format-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 17px;
}
.cm-format-card p {
  margin-bottom: 18px;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
.cm-format-card > span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  background: #f0f5ff;
  color: #1760ff;
     font-size: 12px;
  font-weight: 600;
}
/* ===================================================== SEO SECTION ===================================================== */
.cm-seo {
  padding: 100px 0;
  background: #fff;
}
.cm-seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.cm-seo-content h2 {
  margin: 15px 0;
  color: #102856;
  font-size: 42px;
  line-height: 1.2;
}
.cm-seo-content h2 span {
  color: #2162f5;
}
.cm-seo-content > p {
  color: #667085;
  line-height: 1.8;
}
.cm-seo-points {
  margin-top: 30px;
}
.cm-seo-points > div {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.cm-seo-point-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 15px;
}
.cm-seo-points strong {
  display: block;
  color: #263854;
  font-size: 14px;
}
.cm-seo-points p {
  margin: 4px 0 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.5;
}
/* SEARCH VISUAL */
.cm-seo-visual {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: radial-gradient( circle, #e4edff, transparent 65% ), #f7f9ff;
}
.cm-search-card {
  width: 390px;
  padding: 22px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 55px rgba(25,60,120,.14);
}
.cm-search-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  color: #697386;
     font-size: 12px;
}
.cm-search-top i {
  color: #1760ff;
}
.cm-search-result {
  padding: 18px 0;
  border-bottom: 1px solid #edf1f7;
}
.cm-search-result:last-child {
  border-bottom: 0;
}
.cm-search-result small {
  display: block;
  margin-bottom: 5px;
  color: #159957;
  font-size: 8px;
}
.cm-search-result strong {
  display: block;
  margin-bottom: 5px;
  color: #1760ff;
   font-size: 15px;
}
.cm-search-result p {
  margin: 0;
  color: #697386;
     font-size: 12px;
  line-height: 1.5;
}
.cm-seo-score {
  position: absolute;
  right: 25px;
  bottom: 35px;
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient( circle, #fff 58%, transparent 59% ), conic-gradient( #1760ff 0deg 331deg, #e3eaf5 331deg 360deg );
  box-shadow: 0 10px 30px rgba(30,65,130,.12);
}
.cm-seo-score strong {
  color: #1760ff;
     font-size: 12px;
}
.cm-seo-score span {
  color: #102856;
  font-size: 20px;
  font-weight: 800;
}
.cm-seo-score small {
  color: #8993a5;
  font-size: 7px;
}
/* ===================================================== PROCESS ===================================================== */
.cm-process {
  padding: 90px 0;
  background: #f7f9fd;
}
.cm-process-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
}
.cm-process-item {
  position: relative;
  padding: 30px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
}
.cm-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.cm-process-icon {
  width: 55px;
  height: 55px;
  margin: 10px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.cm-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.cm-process-item p {
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== BENEFITS ===================================================== */
.cm-benefits {
  padding: 90px 0;
  background: #fff;
}
.cm-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.cm-benefit-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e7edf8;
  border-radius: 15px;
  transition: .3s;
}
.cm-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.cm-benefit-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.cm-benefit-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 16px;
}
.cm-benefit-card p {
  margin: 0;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* ===================================================== CTA ===================================================== */
.cm-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.cm-cta-content {
  max-width: 730px;
  margin: auto;
}
.cm-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.cm-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.cm-cta h2 strong {
  color: #5e91ff;
}
.cm-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.cm-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.cm-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .cm-hero-grid, .cm-strategy-grid, .cm-seo-grid {
      grid-template-columns: 1fr;
 }
  .cm-hero {
      padding: 65px 0;
 }
  .cm-hero-content h1 {
      font-size: 45px;
 }
  .cm-service-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .cm-format-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .cm-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .cm-benefit-grid {
      grid-template-columns: repeat(2,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .cm-hero {
      padding: 50px 0;
 }
  .cm-hero-content h1 {
      font-size: 35px;
 }
  .cm-hero-content > p {
      font-size: 15px;
 }
  .cm-hero-buttons {
      flex-direction: column;
 }
  .cm-btn-primary, .cm-btn-outline {
      width: 100%;
 }
  .cm-trust {
      flex-direction: column;
      gap: 10px;
 }
  .cm-section-heading h2 {
      font-size: 31px;
 }
  .cm-service-grid, .cm-format-grid, .cm-process-grid, .cm-benefit-grid {
      grid-template-columns: 1fr;
 }
  .cm-strategy-content h2, .cm-seo-content h2 {
      font-size: 34px;
 }
  .cm-editor-card, .cm-search-card {
      width: 90%;
 }
  .cm-floating {
         font-size: 12px;
      padding: 10px 12px;
 }
  .cm-floating-one {
      left: 8px;
 }
  .cm-floating-two {
      right: 8px;
 }
  .cm-seo-score {
      right: 10px;
      bottom: 25px;
      width: 75px;
      height: 75px;
 }
  .cm-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .cm-dashboard-body {
      padding: 15px;
 }
  .cm-stat-card {
      padding: 9px;
 }
  .cm-stat-card strong {
       font-size: 15px;
 }
  .cm-chart {
      gap: 7px;
 }
  .cm-editor-title h3 {
      font-size: 17px;
 }
  .cm-search-card {
      padding: 15px;
 }
}
/* ===================================================== BLOG PAGE ===================================================== */
.blog-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.blog-hero {
  padding: 90px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.blog-hero-content {
  max-width: 850px;
  margin: auto;
  text-align: center;
}
.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .8px;
}
.blog-hero h1 {
  margin: 20px 0 15px;
  color: #102856;
  font-size: 55px;
  line-height: 1.1;
}
.blog-hero h1 span {
  display: block;
  color: #2162f5;
}
.blog-hero p {
  max-width: 700px;
  margin: auto;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
/* SEARCH */
.blog-search {
  max-width: 620px;
  height: 58px;
  display: flex;
  margin: 32px auto 0;
  padding: 5px;
  border: 1px solid #dce4f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(25,65,130,.08);
}
.blog-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 17px;
  color: #263854;
  font-size: 14px;
}
.blog-search input::placeholder {
  color: #9aa4b4;
}
.blog-search button {
  padding: 0 22px;
  border: 0;
  border-radius: 7px;
  background: #1760ff;
  color: #fff;
   font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.blog-search button:hover {
  background: #0649db;
}
/* ===================================================== SECTION TITLES ===================================================== */
.blog-section-title {
  max-width: 700px;
  margin: 0 auto 45px;
  text-align: center;
}
.blog-section-title > span, .blog-section-heading-row > div > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.blog-section-title h2, .blog-section-heading-row h2 {
  margin: 12px 0 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.blog-section-title h2 strong, .blog-section-heading-row h2 strong {
  color: #2162f5;
}
/* ===================================================== FEATURED BLOG ===================================================== */
.featured-blog {
  padding: 90px 0;
  background: #f7f9fd;
}
.featured-blog-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid #e3eaf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(25,65,130,.08);
}
.featured-blog-image {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient( circle at center, #dce8ff, #edf3fc );
}
.blog-image-placeholder {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #1760ff;
  color: #fff;
  font-size: 55px;
  box-shadow: 0 20px 45px rgba(23,96,255,.25);
}
.featured-label {
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 7px 12px;
  border-radius: 20px;
  background: #1760ff;
  color: #fff;
   font-size: 14px;
  font-weight: 700;
}
.featured-blog-content {
  padding: 50px;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: #7d8798;
     font-size: 14px;
}
.blog-meta i {
  margin-right: 4px;
  color: #1760ff;
}
.featured-blog-content h3 {
  margin: 20px 0 14px;
  color: #182b4d;
  font-size: 29px;
  line-height: 1.3;
}
.featured-blog-content > p {
  color: #697386;
  font-size: 14px;
  line-height: 1.8;
}
.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #edf1f7;
}
.blog-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.author-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
}
.blog-author strong {
  display: block;
  color: #263854;
     font-size: 14px;
}
.blog-author small {
  color: #8993a5;
     font-size: 12px;
}
.featured-footer > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1760ff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 700;
}
.featured-footer > a:hover {
  color: #0649db;
}
/* ===================================================== CATEGORIES ===================================================== */
.blog-categories {
  padding: 90px 0;
  background: #fff;
}
.blog-category-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.blog-category-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e5ebf5;
  border-radius: 13px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: .3s;
}
.blog-category-card:hover {
  transform: translateY(-5px);
  border-color: #c6d7fb;
  box-shadow: 0 12px 30px rgba(25,65,130,.08);
}
.blog-category-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 18px;
}
.blog-category-card > div:nth-child(2) {
  flex: 1;
}
.blog-category-card h3 {
  margin: 0 0 4px;
  color: #263854;
  font-size: 14px;
}
.blog-category-card span {
  color: #8993a5;
   font-size: 14px;
}
.blog-category-card > i {
  color: #1760ff;
     font-size: 14px;
}
/* ===================================================== LATEST BLOGS ===================================================== */
.latest-blogs {
  padding: 90px 0;
  background: #f7f9fd;
}
.blog-section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 45px;
}
.blog-section-heading-row h2 {
  margin-bottom: 0;
}
.view-all-blogs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid #1760ff;
  border-radius: 7px;
  color: #1760ff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.view-all-blogs:hover {
  background: #1760ff;
  color: #fff;
}
/* BLOG GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
/* BLOG CARD */
.blog-card {
  overflow: hidden;
  border: 1px solid #e5ebf5;
  border-radius: 15px;
  background: #fff;
  transition: .3s;
}
.blog-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 40px rgba(25,65,130,.09);
}
.blog-card-image {
  position: relative;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient( circle, #dce8ff, #eff4fb );
}
.blog-card-image > div {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #1760ff;
  color: #fff;
  font-size: 27px;
  box-shadow: 0 12px 30px rgba(23,96,255,.2);
}
.blog-card-image > span {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 6px 10px;
  border-radius: 15px;
  background: #fff;
  color: #1760ff;
     font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.blog-card-content {
  padding: 24px;
}
.blog-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #8993a5;
     font-size: 12px;
}
.blog-card-meta i {
  margin-right: 3px;
  color: #1760ff;
}
.blog-card-content h3 {
  margin: 14px 0 10px;
  color: #263854;
  font-size: 18px;
  line-height: 1.4;
}
.blog-card-content p {
  margin: 0 0 18px;
  color: #697386;
     font-size: 14px;
  line-height: 1.7;
}
.blog-card-content > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1760ff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 700;
}
.blog-card-content > a:hover {
  color: #0649db;
}
/* ===================================================== NEWSLETTER ===================================================== */
.blog-newsletter {
  padding: 80px 0;
  background: #fff;
}
.newsletter-box {
  display: grid;
  grid-template-columns: auto 1fr 1.2fr;
  align-items: center;
  gap: 25px;
  padding: 45px;
  border-radius: 18px;
  background: linear-gradient( 135deg, #f1f5ff, #f8faff );
  border: 1px solid #dfe8f7;
}
.newsletter-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #1760ff;
  color: #fff;
  font-size: 24px;
}
.newsletter-content > span {
  color: #1760ff;
   font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.newsletter-content h2 {
  margin: 7px 0;
  color: #102856;
  font-size: 25px;
  line-height: 1.2;
}
.newsletter-content h2 strong {
  color: #2162f5;
}
.newsletter-content p {
  margin: 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.5;
}
/* NEWSLETTER FORM */
.newsletter-form {
  display: flex;
  gap: 8px;
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  outline: 0;
  border: 1px solid #dce4f1;
  border-radius: 7px;
  background: #fff;
  color: #263854;
     font-size: 14px;
}
.newsletter-form button {
  height: 48px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: #1760ff;
  color: #fff;
     font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.newsletter-form button:hover {
  background: #0649db;
}
/* ===================================================== CTA ===================================================== */
.blog-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.blog-cta-content {
  max-width: 730px;
  margin: auto;
}
.blog-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.blog-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.blog-cta h2 strong {
  color: #5e91ff;
}
.blog-cta p {
  max-width: 600px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.blog-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.blog-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .blog-hero h1 {
      font-size: 46px;
 }
  .featured-blog-card {
      grid-template-columns: 1fr;
 }
  .featured-blog-image {
      min-height: 300px;
 }
  .blog-category-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .blog-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .newsletter-box {
      grid-template-columns: auto 1fr;
 }
  .newsletter-form {
      grid-column: 1 / -1;
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .blog-hero {
      padding: 60px 0;
 }
  .blog-hero h1 {
      font-size: 36px;
 }
  .blog-hero p {
      font-size: 15px;
 }
  .blog-search {
      height: auto;
      flex-direction: column;
      gap: 7px;
      padding: 7px;
 }
  .blog-search input {
      height: 48px;
 }
  .blog-search button {
      height: 45px;
 }
  .blog-section-title h2, .blog-section-heading-row h2 {
      font-size: 31px;
 }
  .featured-blog-content {
      padding: 30px 22px;
 }
  .featured-blog-content h3 {
      font-size: 23px;
 }
  .featured-footer {
      align-items: flex-start;
      flex-direction: column;
 }
  .blog-category-grid, .blog-grid {
      grid-template-columns: 1fr;
 }
  .blog-section-heading-row {
      align-items: flex-start;
      flex-direction: column;
 }
  .newsletter-box {
      grid-template-columns: 1fr;
      padding: 30px 22px;
      text-align: center;
 }
  .newsletter-icon {
      margin: auto;
 }
  .newsletter-form {
      flex-direction: column;
      grid-column: auto;
 }
  .newsletter-form input, .newsletter-form button {
      width: 100%;
 }
  .blog-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .blog-hero h1 {
      font-size: 32px;
 }
  .featured-blog-image {
      min-height: 240px;
 }
  .blog-image-placeholder {
      width: 110px;
      height: 110px;
      font-size: 40px;
 }
  .blog-card-image {
      height: 190px;
 }
}
/* ===================================================== CONTACT PAGE ===================================================== */
.contact-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.contact-hero {
  padding: 90px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.contact-hero-content {
  max-width: 800px;
  margin: auto;
  text-align: center;
}
.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .8px;
}
.contact-hero h1 {
  margin: 20px 0 15px;
  color: #102856;
  font-size: 55px;
  line-height: 1.1;
}
.contact-hero h1 span {
  display: block;
  color: #2162f5;
}
.contact-hero p {
  max-width: 650px;
  margin: auto;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
/* ===================================================== CONTACT MAIN ===================================================== */
.contact-main {
  padding: 90px 0;
  background: #f7f9fd;
}
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
/* ===================================================== CONTACT INFO ===================================================== */
.contact-small-title {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.contact-info h2 {
  margin: 14px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.contact-info h2 span {
  color: #2162f5;
}
.contact-intro {
  max-width: 500px;
  color: #697386;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 30px;
}
/* INFO CARDS */
.contact-info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px;
  margin-bottom: 14px;
  border: 1px solid #e4eaf4;
  border-radius: 12px;
  background: #fff;
  transition: .3s;
}
.contact-info-card:hover {
  transform: translateX(4px);
  border-color: #c6d7fb;
  box-shadow: 0 10px 25px rgba(25,65,130,.06);
}
.contact-info-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 18px;
}
.contact-info-card span {
  display: block;
  margin-bottom: 4px;
  color: #8993a5;
   font-size: 14px;
  font-weight: 600;
}
.contact-info-card a, .contact-info-card strong {
  display: block;
  margin-bottom: 3px;
  color: #263854;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.contact-info-card a:hover {
  color: #1760ff;
}
.contact-info-card small {
  color: #8993a5;
     font-size: 12px;
}
/* SOCIAL */
.contact-social {
  margin-top: 30px;
}
.contact-social > span {
  display: block;
  margin-bottom: 12px;
  color: #263854;
     font-size: 14px;
  font-weight: 700;
}
.contact-social > div {
  display: flex;
  gap: 8px;
}
.contact-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #edf4ff;
  color: #1760ff;
  text-decoration: none;
  transition: .3s;
}
.contact-social a:hover {
  background: #1760ff;
  color: #fff;
  transform: translateY(-3px);
}
/* ===================================================== CONTACT FORM ===================================================== */
.contact-form-wrapper {
  padding: 38px;
  border: 1px solid #e1e8f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(25,65,130,.08);
}
.contact-form-header > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.contact-form-header h2 {
  margin: 10px 0;
  color: #102856;
  font-size: 30px;
  line-height: 1.25;
}
.contact-form-header h2 strong {
  color: #2162f5;
}
.contact-form-header p {
  margin-bottom: 28px;
  color: #697386;
   font-size: 15px;
  line-height: 1.6;
}
/* FORM ROW */
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-field {
  margin-bottom: 18px;
}
.contact-field label {
  display: block;
  margin-bottom: 7px;
  color: #344054;
     font-size: 14px;
  font-weight: 600;
}
.contact-field label > span {
  color: #1760ff;
}
/* INPUT */
.contact-input, .contact-textarea {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #fff;
  transition: .3s;
}
.contact-input:focus-within, .contact-textarea:focus-within {
  border-color: #1760ff;
  box-shadow: 0 0 0 3px rgba(23,96,255,.08);
}
.contact-input > i, .contact-textarea > i {
  margin-left: 13px;
  color: #8993a5;
     font-size: 14px;
}
.contact-input input, .contact-input select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #263854;
     font-size: 14px;
}
.contact-input input::placeholder {
  color: #a1a9b7;
}
.contact-input select {
  cursor: pointer;
}
.contact-textarea {
  align-items: flex-start;
}
.contact-textarea > i {
  margin-top: 15px;
}
.contact-textarea textarea {
  width: 100%;
  padding: 13px;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: #263854;
  font-family: inherit;
     font-size: 14px;
  line-height: 1.6;
}
.contact-textarea textarea::placeholder {
  color: #a1a9b7;
}
/* ===================================================== BUDGET ===================================================== */
.contact-budget {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
.budget-option {
  position: relative;
  margin: 0 !important;
}
.budget-option input {
  position: absolute;
  opacity: 0;
}
.budget-option span {
  display: block;
  padding: 11px 7px;
  text-align: center;
  border: 1px solid #dce4ef;
  border-radius: 7px;
  color: #697386;
     font-size: 12px;
  cursor: pointer;
  transition: .3s;
}
.budget-option input:checked + span {
  border-color: #1760ff;
  background: #edf4ff;
  color: #1760ff;
  font-weight: 700;
}
.budget-option span:hover {
  border-color: #a9c2f5;
}
/* ===================================================== CHECKBOX ===================================================== */
.contact-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin-top: 5px;
  color: #697386 !important;
  font-size: 10px !important;
  line-height: 1.5;
}
.contact-checkbox input {
  margin-top: 2px;
  accent-color: #1760ff;
}
.contact-checkbox a {
  color: #1760ff;
  text-decoration: none;
}
/* SUBMIT */
.contact-submit {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  border: 0;
  border-radius: 8px;
  background: #1760ff;
  color: #fff;
   font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
}
.contact-submit:hover {
  background: #0649db;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(23,96,255,.2);
}
.contact-form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 13px 0 0;
  color: #8993a5;
     font-size: 12px;
}
/* ===================================================== BENEFITS ===================================================== */
.contact-benefits {
  padding: 90px 0;
  background: #fff;
}
.contact-section-heading {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}
.contact-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.contact-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.contact-section-heading h2 strong {
  color: #2162f5;
}
.contact-section-heading p {
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
.contact-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.contact-benefit-card {
  padding: 30px 22px;
  text-align: center;
  border: 1px solid #e5ebf5;
  border-radius: 15px;
  background: #fff;
  transition: .3s;
}
.contact-benefit-card:hover {
  transform: translateY(-6px);
  border-color: #c6d7fb;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.contact-benefit-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.contact-benefit-card h3 {
  margin-bottom: 8px;
  color: #182b4d;
  font-size: 16px;
}
.contact-benefit-card p {
  margin: 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.6;
}
/* ===================================================== PROCESS ===================================================== */
.contact-process {
  padding: 90px 0;
  background: #f7f9fd;
}
.contact-process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.contact-process-item {
  position: relative;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #e5ebf5;
  border-radius: 15px;
  background: #fff;
}
.contact-process-number {
  position: absolute;
  top: 12px;
  right: 15px;
  color: #dce6fb;
  font-size: 28px;
  font-weight: 800;
}
.contact-process-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 18px;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 19px;
}
.contact-process-item h3 {
  color: #182b4d;
  font-size: 17px;
}
.contact-process-item p {
  color: #697386;
     font-size: 14px;
  line-height: 1.6;
}
/* ===================================================== FAQ ===================================================== */
.contact-faq {
  padding: 90px 0;
  background: #fff;
}
.contact-faq-grid {
  max-width: 900px;
  margin: auto;
}
.contact-faq-item {
  padding: 20px 22px;
  margin-bottom: 12px;
  border: 1px solid #e4eaf4;
  border-radius: 10px;
  background: #fff;
  transition: .3s;
}
.contact-faq-item:hover {
  border-color: #c6d7fb;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.faq-question h3 {
  margin: 0;
  color: #263854;
  font-size: 14px;
}
.faq-question i {
  color: #1760ff;
     font-size: 14px;
}
.contact-faq-item p {
  margin: 12px 25px 0 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== CTA ===================================================== */
.contact-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.contact-cta-content {
  max-width: 730px;
  margin: auto;
}
.contact-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.contact-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.contact-cta h2 strong {
  color: #5e91ff;
}
.contact-cta p {
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.contact-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.contact-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .contact-hero h1 {
      font-size: 46px;
 }
  .contact-grid {
      grid-template-columns: 1fr;
      gap: 45px;
 }
  .contact-info {
      max-width: 750px;
 }
  .contact-benefit-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .contact-process-grid {
      grid-template-columns: repeat(2,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .contact-hero {
      padding: 60px 0;
 }
  .contact-hero h1 {
      font-size: 36px;
 }
  .contact-hero p {
      font-size: 15px;
 }
  .contact-info h2 {
      font-size: 32px;
 }
  .contact-form-wrapper {
      padding: 25px 18px;
 }
  .contact-form-row {
      grid-template-columns: 1fr;
      gap: 0;
 }
  .contact-budget {
      grid-template-columns: repeat(2,1fr);
 }
  .contact-section-heading h2 {
      font-size: 31px;
 }
  .contact-benefit-grid, .contact-process-grid {
      grid-template-columns: 1fr;
 }
  .contact-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .contact-info-card {
      padding: 14px;
 }
  .contact-info-icon {
      width: 42px;
      height: 42px;
 }
  .contact-form-header h2 {
      font-size: 25px;
 }
  .contact-budget {
      gap: 6px;
 }
  .budget-option span {
      padding: 10px 4px;
      font-size: 8px;
 }
}
/* ===================================================== PORTFOLIO PAGE ===================================================== */
.portfolio-page {
  background: #fff;
  color: #172033;
}
/* ===================================================== HERO ===================================================== */
.portfolio-hero {
  padding: 95px 0;
  background: radial-gradient( circle at 85% 20%, #e8f0ff 0, transparent 30% ), #fff;
}
.portfolio-hero-content {
  max-width: 850px;
  margin: auto;
  text-align: center;
}
.portfolio-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 30px;
  background: #eef4ff;
  color: #145cff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: .8px;
}
.portfolio-hero h1 {
  margin: 20px 0 15px;
  color: #102856;
  font-size: 55px;
  line-height: 1.1;
}
.portfolio-hero h1 span {
  display: block;
  color: #2162f5;
}
.portfolio-hero p {
  max-width: 700px;
  margin: auto;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}
.portfolio-hero-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.portfolio-btn-primary, .portfolio-btn-outline {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 23px;
  border-radius: 8px;
  text-decoration: none;
   font-size: 15px;
  font-weight: 600;
  transition: .3s;
}
.portfolio-btn-primary {
  background: #1760ff;
  color: #fff;
}
.portfolio-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.portfolio-btn-outline {
  border: 1px solid #1760ff;
  color: #1760ff;
}
.portfolio-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
/* ===================================================== SECTION HEADING ===================================================== */
.portfolio-section-heading {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}
.portfolio-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.portfolio-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.portfolio-section-heading h2 strong {
  color: #2162f5;
}
.portfolio-section-heading p {
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== CATEGORIES ===================================================== */
.portfolio-categories {
  padding: 90px 0;
  background: #f7f9fd;
}
.portfolio-category-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.portfolio-category-card {
  padding: 30px 22px;
  border: 1px solid #e5ebf5;
  border-radius: 15px;
  background: #fff;
  transition: .3s;
}
.portfolio-category-card:hover {
  transform: translateY(-6px);
  border-color: #c5d7fb;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.portfolio-category-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 20px;
}
.portfolio-category-card h3 {
  margin: 0 0 9px;
  color: #182b4d;
  font-size: 17px;
}
.portfolio-category-card p {
  min-height: 66px;
  margin: 0 0 18px;
  color: #697386;
     font-size: 14px;
  line-height: 1.7;
}
.portfolio-category-card > span {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 12px;
  font-weight: 600;
}
/* ===================================================== FEATURED PROJECT ===================================================== */
.portfolio-featured {
  padding: 100px 0;
  background: #fff;
}
.portfolio-featured-card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  border: 1px solid #e3eaf5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(25,65,130,.08);
}
/* BROWSER */
.portfolio-featured-visual {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: radial-gradient( circle, #dce8ff, #f1f5fb );
}
.portfolio-browser {
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(25,65,130,.18);
}
.portfolio-browser-top {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #102856;
}
.portfolio-browser-dots {
  display: flex;
  gap: 5px;
}
.portfolio-browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.portfolio-browser-url {
  margin: auto;
  min-width: 180px;
  padding: 5px 20px;
  text-align: center;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  color: #dce7ff;
  font-size: 8px;
}
.portfolio-browser-content {
  padding: 18px;
  background: #f8faff;
}
.portfolio-mock-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #e7edf6;
}
.portfolio-mock-nav strong {
  color: #1760ff;
     font-size: 14px;
}
.portfolio-mock-nav div {
  color: #697386;
  font-size: 7px;
  word-spacing: 7px;
}
.portfolio-mock-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 220px;
  padding: 20px;
}
.portfolio-mock-hero small {
  color: #1760ff;
  font-size: 7px;
  font-weight: 700;
}
.portfolio-mock-hero h3 {
  max-width: 210px;
  margin: 8px 0;
  color: #182b4d;
  font-size: 24px;
  line-height: 1.2;
}
.portfolio-mock-hero p {
  max-width: 230px;
  color: #7a8597;
  font-size: 8px;
  line-height: 1.5;
}
.portfolio-mock-hero button {
  margin-top: 10px;
  padding: 8px 13px;
  border: 0;
  border-radius: 5px;
  background: #1760ff;
  color: #fff;
  font-size: 7px;
}
.portfolio-mock-circle {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1760ff;
  color: #fff;
  font-size: 35px;
  box-shadow: 0 15px 35px rgba(23,96,255,.22);
}
.portfolio-mock-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.portfolio-mock-cards span {
  height: 45px;
  border-radius: 5px;
  background: #e5edfc;
}
/* FEATURED INFO */
.portfolio-featured-info {
  padding: 45px;
}
.portfolio-project-type {
  color: #1760ff;
   font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.portfolio-featured-info h3 {
  margin: 12px 0;
  color: #182b4d;
  font-size: 30px;
}
.portfolio-featured-info > p {
  color: #697386;
   font-size: 15px;
  line-height: 1.8;
}
.portfolio-project-details {
  margin-top: 25px;
}
.portfolio-project-details > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}
.portfolio-project-details > div > i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
}
.portfolio-project-details span {
  color: #263854;
     font-size: 14px;
  font-weight: 600;
}
.portfolio-project-details small {
  display: block;
  margin-bottom: 2px;
  color: #8993a5;
  font-size: 8px;
  font-weight: 400;
}
.portfolio-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}
.portfolio-tech-list span {
  padding: 6px 10px;
  border-radius: 15px;
  background: #f0f5ff;
  color: #1760ff;
  font-size: 8px;
  font-weight: 600;
}
.portfolio-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 17px;
  border-radius: 7px;
  background: #1760ff;
  color: #fff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.portfolio-view-btn:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
/* ===================================================== PROJECTS ===================================================== */
.portfolio-projects {
  padding: 100px 0;
  background: #f7f9fd;
}
/* FILTER */
.portfolio-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.portfolio-filter-btn {
  padding: 9px 17px;
  border: 1px solid #dce4ef;
  border-radius: 25px;
  background: #fff;
  color: #697386;
   font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.portfolio-filter-btn:hover, .portfolio-filter-btn.active {
  border-color: #1760ff;
  background: #1760ff;
  color: #fff;
}
/* PROJECT GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.portfolio-card {
  overflow: hidden;
  border: 1px solid #e3e9f3;
  border-radius: 15px;
  background: #fff;
  transition: .3s;
}
.portfolio-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 40px rgba(25,65,130,.1);
}
/* PROJECT IMAGE */
.portfolio-card-image {
  position: relative;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient( circle, #dce8ff, #f1f5fb );
}
.portfolio-card-category {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 6px 10px;
  border-radius: 15px;
  background: #fff;
  color: #1760ff;
  font-size: 8px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
/* PROJECT PREVIEW */
.portfolio-project-preview {
  width: 85%;
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(25,65,130,.15);
}
.preview-header {
  height: 22px;
  background: #102856;
}
.preview-content {
  padding: 14px;
}
.preview-content > span {
  display: block;
  width: 35%;
  height: 7px;
  margin-bottom: 10px;
  border-radius: 5px;
  background: #dce8ff;
}
.preview-content strong {
  display: block;
  width: 65%;
  height: 13px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #1760ff;
}
.preview-content small {
  display: block;
  width: 80%;
  height: 7px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: #e5ebf5;
}
.preview-content div {
  width: 35%;
  height: 25px;
  border-radius: 5px;
  background: #1760ff;
}
/* ECOMMERCE */
.ecommerce-preview {
  padding: 15px;
}
.ecommerce-preview .preview-header {
  height: 15px;
  margin-bottom: 15px;
  border-radius: 3px;
}
.preview-products {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}
.preview-products span {
  height: 90px;
  border-radius: 5px;
  background: #e8effb;
}
/* DASHBOARD */
.dashboard-preview {
  display: flex;
  gap: 10px;
  padding: 12px;
}
.dashboard-sidebar {
  width: 25%;
  border-radius: 4px;
  background: #102856;
}
.dashboard-main {
  flex: 1;
  padding: 8px;
  background: #f4f7fc;
}
.dashboard-main span {
  display: block;
  height: 28px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: #dce7f9;
}
.dashboard-main span:first-child {
  background: #1760ff;
}
/* AGENCY */
.agency-preview {
  padding: 20px;
}
.agency-title {
  width: 65%;
  height: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  background: #1760ff;
}
.agency-boxes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}
.agency-boxes span {
  height: 75px;
  border-radius: 6px;
  background: #e6eefb;
}
/* MOBILE */
.mobile-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fc;
}
.mobile-frame {
  width: 65px;
  height: 130px;
  padding: 9px 6px;
  border: 3px solid #102856;
  border-radius: 12px;
  background: #fff;
}
.mobile-frame > div {
  height: 35px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #1760ff;
}
.mobile-frame span {
  display: block;
  height: 10px;
  margin-bottom: 5px;
  border-radius: 3px;
  background: #e0e8f5;
}
/* CMS */
.cms-preview {
  padding: 14px;
}
.cms-top {
  height: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #102856;
}
.cms-layout {
  display: flex;
  gap: 10px;
  height: 105px;
}
.cms-layout > span {
  width: 25%;
  border-radius: 4px;
  background: #e3ebf8;
}
.cms-layout > div {
  flex: 1;
}
.cms-layout > div span {
  display: block;
  height: 45px;
  margin-bottom: 8px;
  border-radius: 5px;
  background: #1760ff;
}
.cms-layout > div span:last-child {
  background: #e3ebf8;
}
/* CARD CONTENT */
.portfolio-card-content {
  padding: 23px;
}
.portfolio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.portfolio-card-top span {
  color: #1760ff;
     font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.portfolio-card-top i {
  color: #8993a5;
   font-size: 14px;
}
.portfolio-card-content h3 {
  margin: 11px 0 8px;
  color: #182b4d;
  font-size: 18px;
  line-height: 1.4;
}
.portfolio-card-content > p {
  min-height: 42px;
  margin: 0 0 17px;
  color: #697386;
     font-size: 14px;
  line-height: 1.6;
}
.portfolio-card-tech {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.portfolio-card-tech span {
  padding: 5px 8px;
  border-radius: 12px;
  background: #f0f5ff;
  color: #1760ff;
  font-size: 8px;
}
.portfolio-card-content > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1760ff;
  text-decoration: none;
   font-size: 14px;
  font-weight: 700;
}
.portfolio-card-content > a:hover {
  color: #0649db;
}
/* ===================================================== TECHNOLOGIES ===================================================== */
.portfolio-technologies {
  padding: 90px 0;
  background: #fff;
}
.portfolio-tech-grid {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  gap: 12px;
}
.portfolio-tech-card {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #e4eaf4;
  border-radius: 12px;
  background: #fff;
  color: #263854;
  transition: .3s;
}
.portfolio-tech-card i {
  color: #1760ff;
  font-size: 27px;
}
.portfolio-tech-card span {
  color: #697386;
   font-size: 14px;
  font-weight: 600;
}
.portfolio-tech-card:hover {
  transform: translateY(-5px);
  border-color: #c6d7fb;
  box-shadow: 0 12px 30px rgba(25,65,130,.08);
}
/* ===================================================== CTA ===================================================== */
.portfolio-cta {
  padding: 85px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.portfolio-cta-content {
  max-width: 730px;
  margin: auto;
}
.portfolio-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.portfolio-cta h2 {
  margin: 15px 0;
  font-size: 42px;
  line-height: 1.2;
}
.portfolio-cta h2 strong {
  color: #5e91ff;
}
.portfolio-cta p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #d6e0f8;
  line-height: 1.7;
}
.portfolio-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.portfolio-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .portfolio-hero h1 {
      font-size: 46px;
 }
  .portfolio-category-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .portfolio-featured-card {
      grid-template-columns: 1fr;
 }
  .portfolio-featured-visual {
      min-height: 400px;
 }
  .portfolio-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .portfolio-tech-grid {
      grid-template-columns: repeat(4,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .portfolio-hero {
      padding: 60px 0;
 }
  .portfolio-hero h1 {
      font-size: 36px;
 }
  .portfolio-hero p {
      font-size: 15px;
 }
  .portfolio-hero-buttons {
      flex-direction: column;
 }
  .portfolio-btn-primary, .portfolio-btn-outline {
      width: 100%;
 }
  .portfolio-section-heading h2 {
      font-size: 31px;
 }
  .portfolio-category-grid, .portfolio-grid {
      grid-template-columns: 1fr;
 }
  .portfolio-featured-visual {
      min-height: 300px;
      padding: 20px;
 }
  .portfolio-featured-info {
      padding: 30px 22px;
 }
  .portfolio-featured-info h3 {
      font-size: 25px;
 }
  .portfolio-mock-nav div {
      display: none;
 }
  .portfolio-mock-hero {
      min-height: 180px;
 }
  .portfolio-mock-hero h3 {
      font-size: 19px;
 }
  .portfolio-mock-circle {
      width: 85px;
      height: 85px;
      font-size: 25px;
 }
  .portfolio-tech-grid {
      grid-template-columns: repeat(2,1fr);
 }
  .portfolio-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .portfolio-hero h1 {
      font-size: 32px;
 }
  .portfolio-browser {
      width: 100%;
 }
  .portfolio-mock-hero {
      padding: 12px;
 }
  .portfolio-mock-circle {
      width: 70px;
      height: 70px;
      font-size: 21px;
 }
  .portfolio-card-image {
      height: 210px;
 }
}
/* ===================================================== INDUSTRIES PAGE ===================================================== */
.industries-page {
  background: #fff;
  color: #172033;
}

/* ===================================================== HERO ===================================================== */
.industries-hero {
  padding: 90px 0;
  background: radial-gradient( circle at 85% 20%, #e7efff 0, transparent 30% ), #fff;
}
.industries-hero-content {
  max-width: 800px;
  margin: auto;
  text-align: center;
}
.industries-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 30px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.industries-hero h1 {
  margin: 20px 0 15px;
  color: #102856;
  font-size: 54px;
  line-height: 1.1;
}
.industries-hero h1 span {
  display: block;
  color: #2162f5;
}
.industries-hero p {
  max-width: 680px;
  margin: auto;
  color: #697386;
  font-size: 16px;
  line-height: 1.8;
}
/* ===================================================== INDUSTRIES LIST ===================================================== */
.industries-list {
  padding: 90px 0;
  background: #f7f9fd;
}
.industries-heading {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}
.industries-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.industries-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 40px;
  line-height: 1.2;
}
.industries-heading h2 strong {
  color: #2162f5;
}
.industries-heading p {
  color: #697386;
  font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== INDUSTRY GRID ===================================================== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.industry-card {
  position: relative;
  display: block;
  min-height: 270px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #e2e9f4;
  border-radius: 15px;
  background: #fff;
  text-decoration: none;
  transition: .3s;
}
.industry-card:hover {
  transform: translateY(-7px);
  border-color: #c2d5fb;
  box-shadow: 0 18px 40px rgba(25,65,130,.09);
}
.industry-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 13px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 21px;
  transition: .3s;
}
.industry-card:hover .industry-icon {
  background: #1760ff;
  color: #fff;
  transform: scale(1.05);
}
.industry-number {
  position: absolute;
  top: 22px;
  right: 25px;
  color: #e4ebf7;
  font-size: 28px;
  font-weight: 800;
}
.industry-content h3 {
  margin: 0 0 10px;
  color: #182b4d;
  font-size: 19px;
}
.industry-content p {
  max-width: 310px;
  min-height: 62px;
  margin: 0 0 20px;
  color: #697386;
     font-size: 14px;
  line-height: 1.7;
}
.industry-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1760ff;
   font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.industry-link i {
  transition: .3s;
}
.industry-card:hover .industry-link i {
  transform: translateX(5px);
}
/* ===================================================== BENEFITS ===================================================== */
.industry-benefits {
  padding: 100px 0;
  background: #fff;
}
.industry-benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.industry-benefit-content > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.industry-benefit-content h2 {
  margin: 14px 0 18px;
  color: #102856;
  font-size: 38px;
  line-height: 1.2;
}
.industry-benefit-content h2 strong {
  color: #2162f5;
}
.industry-benefit-content p {
  color: #697386;
   font-size: 15px;
  line-height: 1.8;
}
.industry-benefit-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding: 13px 20px;
  border-radius: 7px;
  background: #1760ff;
  color: #fff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.industry-benefit-btn:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
/* FEATURES */
.industry-benefits {
  position: relative;
}
.industry-benefit-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.industry-feature {
  padding: 25px 20px;
  border: 1px solid #e4eaf4;
  border-radius: 12px;
  background: #fff;
  transition: .3s;
}
.industry-feature:hover {
  border-color: #c4d6fa;
  box-shadow: 0 12px 30px rgba(25,65,130,.07);
  transform: translateY(-4px);
}
.industry-feature-icon {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 15px;
}
.industry-feature h3 {
  margin: 0 0 7px;
  color: #182b4d;
  font-size: 14px;
}
.industry-feature p {
  margin: 0;
  color: #697386;
   font-size: 14px;
  line-height: 1.6;
}
/* ===================================================== CTA ===================================================== */
.industries-cta {
  padding: 90px 0;
  background: radial-gradient( circle at 90% 20%, #3d77ff, transparent 25% ), #08236f;
  text-align: center;
  color: #fff;
}
.industries-cta-content {
  max-width: 760px;
  margin: auto;
}
.industries-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.industries-cta h2 {
  margin: 15px 0;
  font-size: 40px;
  line-height: 1.2;
}
.industries-cta h2 strong {
  color: #5e91ff;
}
.industries-cta p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: #d6e0f8;
   font-size: 15px;
  line-height: 1.7;
}
.industries-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 23px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.industries-cta-btn:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .industries-hero h1 {
      font-size: 46px;
 }
  .industry-grid {
      grid-template-columns: repeat(2, 1fr);
 }
  .industry-benefit-grid {
      grid-template-columns: 1fr;
      gap: 45px;
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .industries-hero {
      padding: 60px 0;
 }
  .industries-hero h1 {
      font-size: 35px;
 }
  .industries-hero p {
      font-size: 14px;
 }
  .industries-heading h2 {
      font-size: 31px;
 }
  .industry-grid {
      grid-template-columns: 1fr;
 }
  .industry-card {
      min-height: auto;
      padding: 25px;
 }
  .industry-benefit-content h2 {
      font-size: 31px;
 }
  .industry-benefit-features {
      grid-template-columns: 1fr;
 }
  .industries-cta h2 {
      font-size: 31px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .industries-hero h1 {
      font-size: 31px;
 }
  .industry-card {
      padding: 22px;
 }
}
/* ===================================================== BUSINESS SOLUTIONS PAGE ===================================================== */
.business-page {
  background: #fff;
  color: #172033;
}
.business-page .container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}
/* ===================================================== HERO ===================================================== */
.business-hero {
  padding: 90px 0;
  background: radial-gradient( circle at 85% 20%, #e7efff 0, transparent 30% ), #fff;
}
.business-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.business-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: #edf4ff;
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.business-hero-content h1 {
  margin: 20px 0 17px;
  color: #102856;
  font-size: 53px;
  line-height: 1.1;
}
.business-hero-content h1 span {
  display: block;
  color: #2162f5;
}
.business-hero-content > p {
  max-width: 570px;
  color: #697386;
  font-size: 15px;
  line-height: 1.8;
}
.business-hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.business-btn-primary, .business-btn-outline {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 21px;
  border-radius: 8px;
  text-decoration: none;
     font-size: 14px;
  font-weight: 600;
  transition: .3s;
}
.business-btn-primary {
  background: #1760ff;
  color: #fff;
}
.business-btn-primary:hover {
  background: #0649db;
  color: #fff;
  transform: translateY(-2px);
}
.business-btn-outline {
  border: 1px solid #1760ff;
  color: #1760ff;
  background: #fff;
}
.business-btn-outline:hover {
  background: #1760ff;
  color: #fff;
}
/* ===================================================== HERO DASHBOARD ===================================================== */
.business-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.business-dashboard {
  width: 100%;
  max-width: 530px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(25,65,130,.15);
  border: 1px solid #e0e8f5;
}
.business-dashboard-top {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #102856;
}
.business-dots {
  display: flex;
  gap: 5px;
}
.business-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.business-dashboard-title {
  margin: auto;
  color: #dbe6ff;
     font-size: 12px;
}
.business-dashboard-body {
  display: flex;
  min-height: 330px;
  background: #f5f8fd;
}
.business-dashboard-sidebar {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px 0;
  background: #fff;
  border-right: 1px solid #e3eaf5;
}
.business-dashboard-sidebar span {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #8b96aa;
     font-size: 14px;
}
.business-dashboard-sidebar span.active {
  background: #edf4ff;
  color: #1760ff;
}
.business-dashboard-main {
  flex: 1;
  padding: 25px;
}
.business-stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.business-stat-card {
  padding: 14px;
  border: 1px solid #e0e7f2;
  border-radius: 9px;
  background: #fff;
}
.business-stat-card i {
  display: block;
  margin-bottom: 8px;
  color: #1760ff;
  font-size: 14px;
}
.business-stat-card strong {
  display: block;
  color: #263854;
   font-size: 14px;
}
.business-stat-card small {
  color: #8993a5;
  font-size: 7px;
}
.business-chart {
  margin-top: 15px;
  padding: 18px;
  border: 1px solid #e0e7f2;
  border-radius: 10px;
  background: #fff;
}
.business-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.business-chart-heading span {
  color: #263854;
     font-size: 12px;
  font-weight: 600;
}
.business-chart-heading strong {
  color: #1760ff;
   font-size: 14px;
}
.business-bars {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
}
.business-bars span {
  width: 25px;
  min-height: 20px;
  border-radius: 5px 5px 0 0;
  background: #1760ff;
  opacity: .8;
}
/* ===================================================== SECTION HEADING ===================================================== */
.business-section-heading {
  max-width: 730px;
  margin: 0 auto 50px;
  text-align: center;
}
.business-section-heading > span {
  color: #1760ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.business-section-heading h2 {
  margin: 12px 0;
  color: #102856;
  font-size: 39px;
  line-height: 1.2;
}
.business-section-heading h2 strong {
  color: #2162f5;
}
.business-section-heading p {
  color: #697386;
   font-size: 15px;
  line-height: 1.7;
}
/* ===================================================== INTRO ===================================================== */
.business-intro {
  padding: 85px 0 20px;
  background: #fff;
}
/* ===================================================== SERVICES ===================================================== */
.business-services {
  padding: 60px 0 100px;
  background: #fff;
}
.business-service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 75px 0;
  border-bottom: 1px solid #e8edf5;
}
.business-service-row:last-child {
  border-bottom: 0;
}
.business-service-row.reverse .business-service-visual {
  order: 2;
}
.business-service-row.reverse .business-service-content {
  order: 1;
}
/* ===================================================== SERVICE VISUAL ===================================================== */
.business-service-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient( circle, #dce8ff, #f2f6fc );
}
.service-visual-icon {
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: #1760ff;
  color: #fff;
  font-size: 43px;
  box-shadow: 0 20px 45px rgba(23,96,255,.25);
  z-index: 3;
}
/* CLOUD */
.cloud-shape {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: .7;
}
.cloud-one {
  width: 150px;
  height: 80px;
  left: 70px;
  top: 80px;
}
.cloud-two {
  width: 120px;
  height: 65px;
  right: 65px;
  bottom: 80px;
}
.cloud-server {
  position: absolute;
  bottom: 65px;
  width: 170px;
  padding: 13px;
  border-radius: 10px;
  background: #102856;
  box-shadow: 0 15px 30px rgba(16,40,86,.2);
}
.cloud-server span {
  display: block;
  height: 8px;
  margin-bottom: 7px;
  border-radius: 3px;
  background: #4b80ff;
}
.cloud-server span:last-child {
  margin-bottom: 0;
}
/* SECURITY */
.security-visual {
  background: radial-gradient( circle, #dbe8ff, #f3f6fb );
}
.security-shield {
  position: relative;
  z-index: 4;
  width: 125px;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon( 50% 0, 92% 15%, 85% 70%, 50% 100%, 15% 70%, 8% 15% );
  background: #1760ff;
  color: #fff;
  font-size: 45px;
}
.security-ring {
  position: absolute;
  border: 1px solid #9bbcff;
  border-radius: 50%;
}
.ring-one {
  width: 240px;
  height: 240px;
}
.ring-two {
  width: 320px;
  height: 320px;
  opacity: .5;
}
.security-lock {
  position: absolute;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #1760ff;
  font-size: 16px;
  transform: translateY(20px);
}
/* AI */
.ai-visual {
  background: radial-gradient( circle, #dbe8ff, #f4f7fc );
}
.ai-center {
  position: relative;
  z-index: 5;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1760ff;
  color: #fff;
  font-size: 38px;
  box-shadow: 0 20px 45px rgba(23,96,255,.25);
}
.ai-node {
  position: absolute;
  z-index: 5;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  color: #1760ff;
  box-shadow: 0 10px 25px rgba(25,65,130,.1);
  font-size: 17px;
}
.node-one {
  top: 65px;
  left: 85px;
}
.node-two {
  top: 75px;
  right: 85px;
}
.node-three {
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
}
.ai-line {
  position: absolute;
  width: 150px;
  height: 1px;
  background: #9ebaf0;
  transform-origin: left center;
}
.line-one {
  top: 145px;
  left: 135px;
  transform: rotate(20deg);
}
.line-two {
  top: 145px;
  right: 135px;
  transform: rotate(160deg);
}
.line-three {
  bottom: 115px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 90px;
}
/* CONSULTING */
.consulting-circle {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1760ff;
  color: #fff;
  font-size: 38px;
  box-shadow: 0 20px 45px rgba(23,96,255,.25);
}
.consulting-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  color: #263854;
  box-shadow: 0 12px 30px rgba(25,65,130,.1);
   font-size: 14px;
  font-weight: 600;
}
.consulting-card i {
  color: #1760ff;
   font-size: 15px;
}
.card-one {
  top: 70px;
  left: 70px;
}
.card-two {
  top: 90px;
  right: 60px;
}
.card-three {
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}
/* ===================================================== SERVICE CONTENT ===================================================== */
.service-label {
  color: #1760ff;
   font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.business-service-content h2 {
  margin: 13px 0 17px;
  color: #102856;
  font-size: 37px;
  line-height: 1.2;
}
.business-service-content h2 strong {
  display: block;
  color: #2162f5;
}
.business-service-content > p {
  color: #697386;
   font-size: 15px;
  line-height: 1.8;
}
/* FEATURES */
.service-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 25px;
}
.service-feature-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #394a64;
     font-size: 14px;
  font-weight: 600;
}
.service-feature-list i {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf4ff;
  color: #1760ff;
  font-size: 8px;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: #1760ff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 700;
}
.service-link:hover {
  color: #0649db;
}
.service-link i {
  transition: .3s;
}
.service-link:hover i {
  transform: translateX(5px);
}
/* ===================================================== WHY US ===================================================== */
.business-why {
  padding: 95px 0;
  background: #f7f9fd;
}
.business-why-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}
.business-why-card {
  padding: 28px 20px;
  text-align: center;
  border: 1px solid #e1e8f3;
  border-radius: 14px;
  background: #fff;
  transition: .3s;
}
.business-why-card:hover {
  transform: translateY(-6px);
  border-color: #c4d6fa;
  box-shadow: 0 15px 35px rgba(25,65,130,.08);
}
.why-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 17px;
  border-radius: 12px;
  background: #edf4ff;
  color: #1760ff;
  font-size: 18px;
}
.business-why-card h3 {
  margin: 0 0 8px;
  color: #182b4d;
  font-size: 15px;
}
.business-why-card p {
  margin: 0;
  color: #697386;
     font-size: 14px;
  line-height: 1.7;
}
/* ===================================================== CTA ===================================================== */
.business-cta {
  padding: 90px 0;
  background: radial-gradient( circle at 90% 20%, #3c76ff, transparent 25% ), #08236f;
  color: #fff;
  text-align: center;
}
.business-cta-content {
  max-width: 740px;
  margin: auto;
}
.business-cta-content > span {
  color: #bcd1ff;
     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.business-cta h2 {
  margin: 15px 0;
  font-size: 41px;
  line-height: 1.2;
}
.business-cta h2 strong {
  color: #5e91ff;
}
.business-cta p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: #d6e0f8;
   font-size: 15px;
  line-height: 1.7;
}
.business-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 8px;
  background: #fff;
  color: #145cff;
  text-decoration: none;
     font-size: 14px;
  font-weight: 700;
  transition: .3s;
}
.business-cta-button:hover {
  color: #0649db;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
/* ===================================================== TABLET ===================================================== */
@media (max-width: 992px) {
  .business-hero-grid {
      grid-template-columns: 1fr;
      gap: 50px;
 }
  .business-hero-content {
      text-align: center;
 }
  .business-hero-content > p {
      margin: auto;
 }
  .business-hero-buttons {
      justify-content: center;
 }
  .business-service-row {
      grid-template-columns: 1fr;
      gap: 45px;
 }
  .business-service-row.reverse .business-service-visual {
      order: 1;
 }
  .business-service-row.reverse .business-service-content {
      order: 2;
 }
  .business-why-grid {
      grid-template-columns: repeat(2,1fr);
 }
}
/* ===================================================== MOBILE ===================================================== */
@media (max-width: 600px) {
  .business-hero {
      padding: 60px 0;
 }
  .business-hero-content h1 {
      font-size: 36px;
 }
  .business-hero-content > p {
      font-size: 14px;
 }
  .business-hero-buttons {
      flex-direction: column;
 }
  .business-btn-primary, .business-btn-outline {
      width: 100%;
 }
  .business-dashboard-body {
      min-height: 270px;
 }
  .business-dashboard-sidebar {
      width: 45px;
 }
  .business-dashboard-main {
      padding: 15px;
 }
  .business-stat-row {
      grid-template-columns: 1fr;
 }
  .business-chart {
      display: none;
 }
  .business-section-heading h2 {
      font-size: 31px;
 }
  .business-service-row {
      padding: 55px 0;
 }
  .business-service-visual {
      height: 300px;
 }
  .business-service-content h2 {
      font-size: 30px;
 }
  .service-feature-list {
      grid-template-columns: 1fr;
 }
  .business-why-grid {
      grid-template-columns: 1fr;
 }
  .business-cta h2 {
      font-size: 32px;
 }
}
/* ===================================================== SMALL MOBILE ===================================================== */
@media (max-width: 420px) {
  .business-hero-content h1 {
      font-size: 32px;
 }
  .business-service-visual {
      height: 270px;
 }
  .business-service-content h2 {
      font-size: 27px;
 }
  .cloud-one {
      left: 30px;
 }
  .cloud-two {
      right: 30px;
 }
  .node-one {
      left: 35px;
 }
  .node-two {
      right: 35px;
 }
  .card-one {
      left: 25px;
 }
  .card-two {
      right: 20px;
 }
}
/* =====================================================
   FAQ SECTION
===================================================== */

.faq-section {
  padding: 100px 0;
  background: #f7f9fd;
}

.faq-section .container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}


/* =====================================================
 FAQ HEADING
===================================================== */

.faq-heading {
  max-width: 700px;
  margin: 0 auto 55px;
  text-align: center;
}

.faq-label {
  display: inline-block;
  margin-bottom: 12px;

  color: #1760ff;

     font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.faq-heading h2 {
  margin: 0 0 15px;

  color: #102856;

  font-size: 40px;
  line-height: 1.2;
}

.faq-heading h2 strong {
  color: #2162f5;
}

.faq-heading p {
  max-width: 620px;
  margin: auto;

  color: #697386;

   font-size: 15px;
  line-height: 1.8;
}


/* =====================================================
 FAQ WRAPPER
===================================================== */

.faq-wrapper {
  display: grid;

  grid-template-columns: 330px 1fr;

  gap: 55px;

  align-items: start;
}


/* =====================================================
 LEFT INTRO
===================================================== */

.faq-intro {
  position: sticky;
  top: 100px;

  padding: 35px 28px;

  border-radius: 18px;

  background:
      linear-gradient(
          145deg,
          #0d2c82,
          #1760ff
      );

  color: #fff;

  overflow: hidden;
}

.faq-intro::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -65px;
  bottom: -70px;

  border-radius: 50%;

  background: rgba(255,255,255,.08);
}

.faq-icon {
  width: 55px;
  height: 55px;

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

  margin-bottom: 25px;

  border-radius: 14px;

  background: rgba(255,255,255,.15);

  font-size: 22px;
}

.faq-intro h3 {
  margin: 0 0 12px;

  font-size: 23px;
}

.faq-intro p {
  margin: 0;

  color: #dbe6ff;

     font-size: 14px;
  line-height: 1.8;
}

.faq-contact-btn {
  position: relative;
  z-index: 2;

  display: inline-flex;

  align-items: center;
  gap: 8px;

  margin-top: 25px;

  padding: 12px 18px;

  border-radius: 7px;

  background: #fff;

  color: #1760ff;

  text-decoration: none;

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

  transition: .3s;
}

.faq-contact-btn:hover {
  transform: translateY(-2px);

  color: #0649db;

  box-shadow:
      0 8px 20px rgba(0,0,0,.15);
}


/* =====================================================
 FAQ LIST
===================================================== */

.faq-list {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.faq-item {
  overflow: hidden;

  border: 1px solid #e1e8f3;

  border-radius: 11px;

  background: #fff;

  transition: .3s;
}

.faq-item:hover {
  border-color: #c8d7ef;
}

.faq-item.active {
  border-color: #c4d6fa;

  box-shadow:
      0 8px 25px rgba(25,65,130,.06);
}


/* =====================================================
 QUESTION
===================================================== */

.faq-question {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 20px 22px;

  border: 0;

  outline: none;

  background: transparent;

  color: #182b4d;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

   font-size: 15px;

  font-weight: 600;
}

.faq-question i {
  width: 27px;
  height: 27px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 7px;

  background: #edf4ff;

  color: #1760ff;

   font-size: 14px;

  transition: .3s;
}

.faq-item.active .faq-question i {
  transform: rotate(45deg);

  background: #1760ff;

  color: #fff;
}


/* =====================================================
 ANSWER
===================================================== */

.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition:
      grid-template-rows .35s ease;
}

.faq-answer p {
  overflow: hidden;

  margin: 0;

  padding: 0 22px;

  color: #697386;

     font-size: 14px;

  line-height: 1.8;

  opacity: 0;

  transition:
      opacity .25s ease,
      padding .35s ease;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
  padding:
      0 22px 20px;

  opacity: 1;
}


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

@media (max-width: 992px) {

  .faq-wrapper {
      grid-template-columns: 1fr;

      gap: 30px;
  }

  .faq-intro {
      position: relative;

      top: auto;

      max-width: 600px;

      width: 100%;

      margin: auto;
  }

}


@media (max-width: 600px) {

  .faq-section {
      padding: 70px 0;
  }

  .faq-heading h2 {
      font-size: 31px;
  }

  .faq-heading p {
         font-size: 14px;
  }

  .faq-question {
      padding: 17px;

         font-size: 14px;
  }

  .faq-answer p {
      padding-left: 17px;
      padding-right: 17px;
  }

  .faq-item.active .faq-answer p {
      padding-left: 17px;
      padding-right: 17px;
      padding-bottom: 17px;
  }

  .faq-intro {
      padding: 28px 22px;
  }

}

.contact-card li a {
    color: #fff;
}