:root {

    --brand-blue: #0083c8;

    --dark-blue: #063b78;

    --light-gray: #f5f7fa;

  }



  body {

    font-family: "Plus Jakarta Sans", sans-serif;

    color: #223046;

    margin: 0;

  }



  /* Center whole page content */

  .page-wrapper-center {

    max-width: 1200px;   /* adjust width as needed */

    margin: 0 auto;

    background: #ffffff00;

  }



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

     HEADER / HERO

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

  

 .hero-logo-text-rotate {

  font-size: 22px;

  font-weight: 700;

  color: #0083c8;

  display: inline-block;  

}

  

  .header-hero {

    padding: 50px 0 40px;

	background-color:#fff;

  }

	

	.header-hero container{

	max-width: 1100px;      /* keeps the content block narrower */

	  margin: 0 auto;

	  padding-left: 40px;     /* more space from left edge */

	  padding-right: 40px;    /* same space on the right */

	}



  .hero-logo-row {

    margin-bottom: 10px;

  }



  .hero-logo {

    max-width: 180px;

    display: block;

    margin-left: 40px;   /* aligns with image left edge */

  }



  .hero-row {

    display: flex;

  }



  .hero-illustration {

    max-width: 360px;

    display: block;

    margin-left: 40px;   /* same left alignment as logo */

  }



  .hero-content {

    max-width: 520px;

    margin-left: 24px;   /* reduced gap between image & text */

  }



  .hero-content h2 {

    color: #0072ce;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 15px;

  }



  .hero-content p {

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 20px;

  }



  .hero-cta {

    text-align: right;

  }



  .hero-cta .btn {

    padding: 10px 30px;

    font-size: 16px;

	background-color:#0088d1;

  }



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

     CLOUD-TO-CLOUD BACKUP

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

  .cloud-section {

    background: #0083c8;

    color: #fff;

    padding: 80px 0;

  }

	

  .cloud-section .container {

      max-width: 1100px;      /* keeps the content block narrower */

	  margin: 0 auto;

	  padding-left: 40px;     /* more space from left edge */

	  padding-right: 40px;    /* same space on the right */

  }		

		

  .cloud-wrap {

    max-width: 900px;

    margin: 0 auto;

    text-align: left;

    padding-left: 20px;

  }



  .cloud-title {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 10px;

    letter-spacing: 1px;

  }



  .cloud-subtitle {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 22px;

    letter-spacing: 1px;

  }



  .cloud-sub {

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 28px;

    max-width: 767px;

  }



  .cloud-key {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 28px;

  }



  .features-row {

    display: flex;

    justify-content: flex-start;

    gap: 45px;

    flex-wrap: wrap;   /* allow wrap on small screens */

  }



  .feature {

    text-align: center;

    width: 210px;

  }



	.key-features-sub {

    display: block !important;



    /* REMOVE ALL HEIGHT RESTRICTIONS */

    height: auto !important;

    min-height: unset !important;

    max-height: none !important;   /* 👈 THIS FIXES IT */



    /* REMOVE LINE CLAMP */

    -webkit-line-clamp: unset !important;

    -webkit-box-orient: unset !important;



    /* FORCE NORMAL WRAPPING */

    white-space: normal !important;

    overflow: visible !important;

    word-break: normal;

    overflow-wrap: anywhere;



    line-height: 1.6;

    text-align: center;

  }

  .icon-circle {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 12px;

  }



  .icon-circle img {

    width: 75px;

  }



  .feature-title {

    font-size: 13px;

    line-height: 1.4;

    color: #fff;

  }



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

     ZTNA SECTION

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

  .ztna-section {

    background: #f3f4f7;

    text-align: center;

    padding: 70px 20px 80px;

  }

  

  .ztna-section .container {

	  max-width: 1100px;      /* keeps the content block narrower */

	  margin: 0 auto;

	  padding-left: 40px;     /* more space from left edge */

	  padding-right: 40px;    /* same space on the right */

  }



  .ztna-heading {

    font-size: 24px;

    font-weight: 700;

    color: #0083c8;

    margin-bottom: 8px;

  }



  .ztna-subtitle {

    font-size: 20px;

    color: #0083c8;

    margin-bottom: 40px;

  }



  .ztna-row {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;   /* allow cards to wrap */

    gap: 32px;

    max-width: 1100px;

    margin: 32px auto 0;

  }



  .ztna-card {

    position: relative;

    background: #ffffff;

    border-radius: 18px;

    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);

    flex: 0 0 22%;

    max-width: 200px;

    min-height: 200px;

    padding: 60px 20px 26px;

    text-align: center;

    overflow: visible;

    transition: all 0.3s ease;

    margin-top: 40px;

  }



  .ztna-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);

  }



  .ztna-card img {

    position: absolute;

    top: -40px;

    left: 50%;

    transform: translateX(-50%);

    width: 90px;

    height: auto;

  }



  .ztna-card p {

    font-size: 14px;

    color: #4d5b66;

    margin-top: 24px;

  }



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

     EMAIL PROTECTION

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

  

  .email-section .container {

      max-width: 1100px;      /* keeps the content block narrower */

	  margin: 0 auto;

	  padding-left: 40px;     /* more space from left edge */

	  padding-right: 40px;    /* same space on the right */

  }	

  

  

  .email-section {

    background: #f1f3f5;

    padding: 54px 20px;

  }



  .email-wrap {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 32px;

  }



  .email-row {

    display: flex;

    gap: 28px;

    align-items: flex-start;

  }



  .email-left,

  .email-right {

    flex: 1 1 0;

  }



  .kicker {

    font-size: 20px;

    color: #5798cc;

    font-weight: bold;

    letter-spacing: 0.6px;

    margin-bottom: 8px;

  }



  .email-title {

    font-size: 26px;

    color: var(--brand-blue);

    font-weight: 700;

    margin-bottom: 8px;

  }



  .divider {

    width: 44px;

    height: 3px;

    background: #bfcad3;

    margin-bottom: 16px;

  }



  .email-right p {

    color: #6b7786;

    font-size: 16px;

  }



  .email-pill-col {

    flex: 1 1 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

  }



  .pill {

    background: var(--brand-blue);

    color: #fff;

    border-radius: 32px;

    padding: 12px 22px;

    text-align: center;

    font-size: 13px;

    box-shadow: none;

  }



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

     MSP FOOTER / WHY CHOOSE

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

  .msp-footer {

    background: linear-gradient(180deg, var(--dark-blue) 0%, #0b2f64 100%);

    color: #dbe9ff;

    padding: 54px 20px;

  }

  .msp-footer .container{

	max-width: 1100px;      /* keeps the content block narrower */

	  margin: 0 auto;

	  padding-left: 40px;     /* more space from left edge */

	  padding-right: 40px;    /* same space on the right */

  }

  .msp-wrap {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    gap: 40px;

    align-items: flex-start;

  }



  .msp-left {

    flex: 0 0 55%;

  }



  .msp-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

  }



  .msp-left h3 {

    color: #fff;

    font-size: 28px;

    line-height: 1.25;

    margin-bottom: 24px;

  }



  .msp-list {

    display: flex;

    flex-direction: column;

    gap: 24px;

  }



  .msp-row {

    display: flex;

    gap: 18px;

    align-items: flex-start;

  }



  .msp-num {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 4px;

    font-weight: 700;

    color: #fff;

    flex-shrink: 0;

    font-size: 18px;

  }



  .msp-desc {

    color: rgba(219, 233, 255, 0.92);

    font-size: 16px;

    line-height: 1.45;

  }



  .msp-desc small {

    display: block;

    color: rgba(219, 233, 255, 0.75);

    font-size: 14px;

    margin-top: 6px;

  }



  .msp-intro {

    color: rgba(219, 233, 255, 0.9);

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 26px;

  }



  .msp-right h4 {

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    margin-bottom: 12px;

  }



  .msp-right p.msp-cta-text {

    color: rgba(219, 233, 255, 0.9);

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 22px;

  }



  .btn-demo {

    background: #20a0e6;

    border: none;

    color: #fff;

    padding: 6px 16px;

    font-size: 14px;

    border-radius: 4px;

    margin-top: 10px;

    cursor: pointer;

  }



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

     RESPONSIVE

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



  /* Tablet and below */

  @media (max-width: 992px) {

    .email-wrap,

    .msp-wrap {

      flex-direction: column;

    }



    .email-right,

    .msp-right {

      flex: 1 1 auto;

    }



    .header-hero {

      padding: 40px 0 30px;

    }



    .hero-content {

      margin-left: 0;

      text-align: center;

    }



    .hero-cta {

      text-align: center;

    }



    .ztna-card {

      flex: 0 0 45%;

      max-width: 260px;

      margin-top: 50px;

    }



    .features-row {

      flex-wrap: wrap;

      gap: 24px;

    }



    .feature {

      width: 45%;

    }

  }



  /* Mobile */

  @media (max-width: 767.98px) {

    .header-hero {

      padding: 30px 0 30px;

    }



    .hero-logo {

      margin-left: 16px;

    }



    .hero-illustration {

      max-width: 230px;

      margin: 10px 0 20px 16px;

    }



    .hero-content {

      max-width: 100%;

      margin: 0 16px;

    }



    .hero-content h2,

    .hero-content p {

      text-align: left;

    }



    .hero-cta {

      text-align: left;

    }



    .msp-wrap {

      flex-direction: column;

      gap: 24px;

    }



    .msp-left,

    .msp-right {

      align-items: flex-start;

    }



    .ztna-card {

      flex: 0 0 100%;

      max-width: 60%;	  

    }



    .email-row {

      flex-direction: column;

    }



    .email-pill-col {

      width: 100%;

    }



    .feature {

      width: 40%;

	  align-items: center;

	  

    }



    .key-features-sub {

    display: block !important;          /* allow normal flow */

    -webkit-line-clamp: unset !important;

    -webkit-box-orient: unset !important;



    height: auto !important;             /* remove fixed height */

    min-height: 0 !important;

    max-height: none !important;



    white-space: normal !important;      /* FORCE wrap */

    overflow-wrap: break-word;

    word-break: normal;



    text-align: center;

  

  }

  }