@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    scrollbar-width: thin;
    scrollbar-color: var(--placeholder) var(--gray-first);
  }
  
  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: var(--placeholder);
  }
:root {

      /* Typography */   
    --base-fonts: "Inter", sans-serif;
    --text-14: 14px;
    --base-text: 16px;
    --text-12:12px;       
    --text-18:18px;       
    --text-60:60px;       
    --text-20:20px;       
    --text-22:22px;       
    --text-24:24px;       
    --text-30:30px;       
    --text-36:36px;       
   




    /* Landing Page colors */
    --primary:#10B981;
    --primary-dark:#0b9567;
    --white:#ffffff;
    --base-landing:#111827;
    --header-border:#E6E6E6;
    --nav-link-color:#4B5563;
    --hero-bg:#F9FAFB;
    --portal-bg:#FAFAFA;
    --portal-border:#E5E7EB;
    --portal-icon-bg:#E3F3EE;
    --portal-review-bg:#EEF7F4;
    --portal-review-border:#C2EBDD;

    

    



    /* Border Rounded */  
    --border-r-6: 6px;
    --border-r-8: 8px;
    --border-r-10: 10px;
    --border-r-12: 12px;
    --border-r-16: 16px;
    --border-r-24: 24px;
    --border-r-20: 20px;
    --border-r-30: 30px;
    --border-r-100: 100px;
 
    


}

/*--------------General CSS---------*/




body {
    margin: 0;
    padding: 0;
    color: var(--base-color);
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
    font-size: var(--base-text);
    font-family:var(--base-fonts);
    font-weight: 400;
    width: 100%;
    background-color: var(--body-bg);
    overflow: auto;
}



img {
    border: 0 none;
    max-width: 100%;
}

a {
    outline: none;
    cursor: pointer;
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: none;
}

a,
button,
.btn {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}



/*-----------------------main styles starts here-----------------------------------------------*/

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}



/*=====================================	PLACE HOLDER CSSS START HERE 		====================================*/
.form-control::-moz-placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control::placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control:-ms-input-placeholder {
    color: var(--placeholder);
    opacity: 1;
  }
input.form-control,
textarea.form-control,
select.form-control {
    background-color: var(--white);
    border: 1px solid var(--gray-field);
    border-radius: var(--border-r-10);
    box-shadow: none;
    font-size: var(--base-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
    color: var(--base-color);
    padding: 10px 20px;
    font-weight: 400;
}
select.form-control {background-image: url(../images-nct/select-arrow.svg); background-position: 97% center; background-repeat: no-repeat; background-size: 24px 24px;}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus
{box-shadow: none; border: 1px solid var(--base-color);}
textarea.form-control {
    height: auto;
    overflow: auto;
    white-space: normal;
    resize: none;
}
.form-label .option-note {font-size: var(--text-14); color: var(--gray-text);}
.form-group {
    margin-bottom:20px;
}
.form-check {display: flex; padding: 0; gap: 14px; align-items: self-start;}
.form-check .form-check-input {box-shadow: none; outline: none; width: 24px; height: 24px; min-width: 24px; min-height: 24px;  border-color: var(--gray-field); margin: 0px;}
.form-check-input:checked[type="checkbox"] {background-image: url(../images-nct/check.svg); background-repeat: no-repeat; background-position: center center; background-color: var(--white); background-size: 12px auto; border-color: var(--primary); box-shadow: none; outline: none;}
/*===================================== Commen Butons ===================================*/

.lg-btn {
    border-radius: var(--border-r-16);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 27px 40px;
    font-size: var(--text-18);
    font-weight: 600;
    line-height: 1.40022222;
    box-shadow: 0 4px 6px rgba(0,0,0,0.10);
}

.lg-btn:hover,
.lg-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.lg-btn-border {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: transparent;
    text-align: center;
    color: var(--primary);
    padding: 16px 36px;
    font-size: var(--text-22);
    font-weight: 600;
    line-height: 1.40022222;
    
}

.lg-btn-border:hover,
.lg-btn-border:focus {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 7px 9px rgba(0,0,0,0.20); color: var(--white);
}


.medium-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 9px 15px;
    font-size: var(--text-18);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.medium-btn:hover,
.medium-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}

.lp-medium-btn {
    border-radius: var(--border-r-12);
    border: 1px solid #E0E4E3;
    background-color: transparent;
    text-align: center;
    color: var(--primary);
    padding: 12px 25px;
    font-size: var(--text-14);
    font-weight:500;
    line-height: 1.40022222;
    
}

.lp-medium-btn:hover,
.lp-medium-btn:focus {
    border: 1px solid #E0E4E3;
    background-color: #E0E4E3;
    color: var(--primary);
}


.sm-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 7px 15px;
    font-size: var(--base-text);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.sm-btn:hover,
.sm-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.medium-border-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--white);
    text-align: center;
    color: var(--primary);
    padding: 9px 15px;
    font-size: var(--text-18);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.medium-border-btn:hover,
.medium-border-btn:focus {
    border: 1px solid var(--primary);
    background-color: var(--primary-light);
    color: var(--primary);
}
.second-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 10px 15px;
    font-size: var(--text-18);
    font-weight: 500;
    line-height: 1.40022222;
    
}

.second-btn:hover,
.second-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.close-btn {color: #898989; font-weight: 600;}
.close-btn:hover, .close-btn:focus {color: var(--black);}








.btn-block .btn {margin-right: 15px;}
.btn-block .btn:last-child {margin: 0;}


/* Headers */
header {       
    width: 100%;
    border-bottom: 1px solid;    
    z-index: 100;
    padding: 0;
}

.navbar-brand {
    height: auto;
    position: relative;
    z-index: 5;
}
.navbar-brand img {width: 110px;}
.landing-header {border-bottom-color:var(--header-border); position: sticky;top: 0; left: 0;background-color: var(--white);}
.landing-header .navbar-brand {padding-top: 4px; padding-bottom: 4px;}
.landing-header .navbar {position: relative;}
.landing-header .center-nav {position: absolute; left: 0; right: 0;justify-content: center;}
.landing-header .navbar .navbar-nav .nav-link {font-size: var(--base-text); color: var(--nav-link-color); font-weight: 500; padding-left: 15px; padding-right: 15px;}
.landing-header .navbar .navbar-nav .nav-link:hover, .landing-header .navbar .navbar-nav .nav-link:focus{color: var(--base-landing);}
.landing-header .nav-right {position: relative; z-index: 1;}
.header-btn {font-size: var(--base-text); background-color: var(--primary); color: var(--white); border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,0.10); padding: 9px 24px; border-radius: var(--border-r-30);}
.header-btn:hover, .header-btn:focus {box-shadow: 0 7px 9px rgba(0,0,0,0.20); color: var(--white);background-color: var(--primary); }

.hero-section {background-color: var(--hero-bg); padding: 70px 0;}
.hero-top {max-width: 855px; margin: 0 auto; width: 100%;}
.hero-top h1 {font-size: var(--text-60); font-weight: 700; margin: 0;}
.hero-top h1 span {color: var(--primary);}
.hero-top p {font-size: var(--text-24); font-weight: 300; margin: 40px 0 0; color: var(--nav-link-color);}
.count-wrap {max-width: 780px; width: 100%; margin: 60px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.count-wrap h4 {font-size: var(--text-30); color: var(--primary); margin: 0; font-weight: 700;}
.count-wrap p {font-size: var(--text-24); font-weight: 500; margin:0; color: var(--nav-link-color); font-size: var(--text-14);}
.common-section {padding: 80px 0;}
.section-title {max-width: 730px; margin: 0 auto 60px;}
.section-title h2 {font-size: var(--text-36); font-weight: 700; margin: 0;}
.section-title p {font-size: var(--text-20); margin: 10px 0 0; color: var(--nav-link-color);}
.portal-cards {max-width: 1152px; margin: 0 auto; width: 100%; }
.portal-card {border-radius: var(--border-r-12); border: 1px solid var(--portal-border); background-color: var(--portal-bg); padding: 25px;}
.portal-icon-top {width: 144px; height: 144px; border-radius: var(--border-r-12); background-color:var(--portal-icon-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.portal-card .card-title {font-size: var(--text-30); font-weight: 700; margin: 20px 0 0; color: var(--primary);}
.portal-card .card-text {font-size: var(--text-18); font-weight:400; margin: 20px 0 0; color: var(--nav-link-color); line-height: 30px;}
.what-box {padding: 24px; border-radius: var(--border-r-16); background-color: var(--hero-bg); margin-top: 35px;}
.what-box h4 {margin: 0 0 16px; font-size: var(--base-text); font-weight: 600;}
.portal-icon-block {display: flex; gap: 12px; align-items: center; margin-bottom: 16px;}
.portal-icon-block:last-child {margin-bottom: 0;} 
.portal-icon  {width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: var(--border-r-8); background-color:var(--portal-icon-bg); display: flex; align-items: center; justify-content: center;}
.portal-icon-block h5 {font-size: var(--text-14); font-weight: 500; margin: 0;}
.portal-icon-block p {font-size: var(--text-12); margin:0; color: var(--nav-link-color); }
.portal-review-box {border-radius: var(--border-r-16); padding: 25px; text-align: center; background-color: var(--portal-review-bg); border: 1px solid var(--portal-review-border);}
.portal-review-box h3 {margin:0; font-size: var(--text-24); font-weight: 700; color: var(--primary);}
.portal-review-box .review-note {margin:0 0 10px; font-size: var(--text-14); color: var(--nav-link-color);}
.review-ratings p {margin: 5px 0 0; font-size: var(--text-12);color: var(--nav-link-color);}
.portal-cards .card-footer {padding: 20px 0 0; border: none; background-color: transparent;}
.review-section {background-color: var(--hero-bg);}
.review-cards {max-width: 1024px; margin: 0 auto;}
.review-card {background-color: var(--white); border: 1px solid var(--portal-border); border-radius: var(--border-r-12); padding: 30px; text-align: center;}
.review-card .review-star {display: flex; align-items: center; justify-content: center;}
.review-card .review-star img {width: 20px; }
.review-card .card-text  {font-size: var(--text-18); font-weight:400; margin: 20px 0 0; color: var(--nav-link-color); line-height: 30px;}
.review-card .review-name {font-size: var(--base-text); font-weight: 500; margin: 0; color: var(--primary);}
.review-card .review-name span {display: block; font-weight: 600; color: var(--base-landing);}
.review-card .card-footer {padding: 20px 0 0; border: none; background-color: transparent;}
.review-card .card-footer p {font-size: var(--text-14); margin:0; color: var(--nav-link-color); }
.help-box {border: 1px solid #CEF0E5; max-width: 1216px; width: 100%; margin: 0 auto; padding: 50px; border-radius: var(--border-r-24);
background: linear-gradient(to right,  #ffffff 0%,#edf9f5 100%);
}
.title-icon-top {width: 96px; height: 96px; border-radius: var(--border-r-12); background-color:var(--portal-icon-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;}
.help-box .section-title h2 {font-size: var(--text-30); margin-bottom: 15px;}
.help-box .section-title  { margin-bottom: 30px;}
.help-cards {margin: 0 auto; width: 100%; text-align: center;}
.help-cards .lp-medium-btn {width: 100%; margin-top: 12px;}
.help-card {background-color: var(--white); border: 1px solid var(--portal-border); border-radius: var(--border-r-16); padding: 25px; text-align: center; min-height: 160px;}
.help-info {margin: 0 0 10px;}
.help-card .card-title {font-size: var(--base-text); font-weight: 600; margin: 0 0 4px;}
.help-card .card-text  {font-size: var(--text-14); font-weight:400; margin:0; color: var(--nav-link-color);}
.help-box .btn-block {margin-top: 30px;}
.security-section {background-color: var(--hero-bg);}
.security-section h2 {font-size: var(--text-24); font-weight: 700; margin: 0 0 20px;}
.security-row {display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 30px;}
.security-cell {display: flex; align-items: center; gap: 12px;}
.security-cell .sc-icon {min-width: 24px; min-height: 24px; width: 24px; height: 24px;}

footer {background-color: var(--base-color); padding: 50px 0 0; border-top: 1px solid var(--portal-border);} 
.footer-nav li { margin-bottom: 10px; font-size: var(--base-text);}
.footer-nav li a {color: var(--nav-link-color);}
.footer-nav li a:hover, .footer-nav li a:focus {color: var(--base-landing);}
.footer-nav h3 {font-weight: 700; margin-bottom: 15px; font-size: var(--text-18); } 
.footer-left p {font-size: var(--text-18); line-height: 28px; font-weight:400; margin:20px 0 0; color: var(--nav-link-color);}
.social-links {display: flex; align-items: center; gap: 5px; margin-top: 20px;}
.footer-bottom { border-top: 1px solid var(--portal-border); display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding: 20px 0;}
.copyright {font-size: var(--base-text); font-weight:400; margin:0; color: var(--nav-link-color);}
.bottom-link {display: flex; align-items: center; justify-content: center; gap: 22px;}
.bottom-link li {position: relative;  display: flex; align-items: center; gap: 8px;}
.bottom-link li::before {content: ""; width: 8px; height: 8px; min-width: 8px; min-height: 8px; border-radius: 50%; background-color: var(--primary);}
.bottom-link li a {color: var(--nav-link-color);}
.bottom-link li a:hover, .bottom-link li a:focus {color: var(--base-landing);}
.container {max-width: 1240px;}
.menu.btn12 {display: none;}

 @media(max-width:1450px) {

  }
 @media(max-width:1200px) {
.hero-top h1 {font-size: 50px;}
.hero-top p {font-size: 18px; margin-top: 25px;}
.what-box {padding: 10px;}
       .help-card {padding: 15px;}
 }

  @media(max-width:992px) {
  }
@media(max-width:768px) {
  .help-cards .lp-medium-btn {margin-top: 5px;}
  .help-card {min-height: inherit;}
     .menu.btn12 {display: inline-block;}
    .btn12 {
      position: relative;
      width: 30px;
      height: 30px;
      background-color: transparent;
      padding: 0;
      border: none;
      outline: none;
      box-shadow: none;
      transition-duration: 0.5s;
    }
    .btn12 .icon {
      transition-duration: 0.5s;
      position: absolute;
      height: 2px;
      width: 24px;
      top: 15px;
      background-color: var(--base-landing);
    }
    .btn12 .icon:before {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--base-landing);
      content: "";
      top: -10px;
      left: 0;
    }
    .btn12 .icon:after {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--base-landing);
      content: "";
      top: 10px;
      left: 0;
    }
    .btn12.open .icon {
      transition-duration: 0.5s;
      background: transparent;
    }
    .btn12.open .icon:before {
      transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
    }
    .btn12.open .icon:after {
      transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
    }
    .btn12:hover {
      cursor: pointer}
      .nav-icon-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px;}
      .nav-icon-btn img {max-width: 28px;}
      .sidebar {opacity: 0; visibility: hidden; position: fixed; left: -270px; top: 0; height: 100%; overflow: auto; -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;}
    .landing-header .navbar-brand {padding-top: 4px; padding-bottom: 4px;}
    .landing-header .center-nav {position: static;}
    .landing-header .navbar-collapse { position: fixed; background-color: var(--white); border-radius:0 0 var(--border-r-12) var(--border-r-12); right: 0; top: 70px; box-shadow: 0 2px 5px rgba(0,0,0,0.10); width: 100%;}
    .landing-header .nav-right {border-top: 1px solid var(--header-border); padding-bottom: 15px; flex-direction: row; padding-top: 10px;}
    .hero-section {padding: 45px 0;}
    .hero-top h1 {font-size: 36px;}
    .hero-top p {font-size: var(--base-text); margin-top: 15px;}
    .count-wrap {margin-top: 15px; gap: 5px;}
    .count-wrap h4 {font-size: var(--base-text);}
    .common-section {padding: 40px 0;}
    .section-title h2 {font-size: var(--text-24);}
    .section-title p {font-size: var(--base-text);}
    .section-title {margin-bottom: 30px;}
    .portal-card {padding: 15px;}
    .portal-icon-top {width: 100px; height: 100px;}
    .portal-card .card-title {font-size: var(--text-22); margin-top: 10px;}
    .portal-card .card-text {font-size: var(--base-text); line-height: 20px;}
    .portal-card .card-body {padding: 5px;}
    .what-box {padding: 5px; margin-top: 15px;}
    .portal-review-box {padding: 15px; margin-top: 10px;}
    .portal-review-box h3 {font-size: var(--text-20);}
    .lg-btn {font-size: var(--base-text);padding: 15px 20px;}
    .review-card .card-text {font-size: var(--base-text); line-height: 22px;}
    .review-card .card-footer {padding-top: 10px;}
    .review-card {padding: 15px;}
    .help-box {padding: 25px;}
    .title-icon-top {width: 70px; height: 70px;}
    .help-box .section-title h2 {font-size: var(--text-22);}
    .section-title p {font-size: var(--text-14); line-height: 22px;}
    .security-section h2 {font-size: var(--text-20);}
    .security-row {justify-content: start; gap: 15px;}
    footer {padding-top: 25px;}
    .footer-left p {font-size: var(--text-14); line-height: 22px; margin-top: 10px;}
    .social-links {margin-top: 10px;}
    .footer-block {border-bottom: 1px solid var(--header-border); padding-bottom: 10px; margin-bottom: 15px;}
    .footer-block:last-child {border:none;}
    .footer-bottom {border-top: none; display: block; margin-top: 0; padding:0px 0 20px; text-align: center;}
    .footer-nav h3 {font-size: var(--base-text); margin-bottom: 10px;}
    .footer-nav li a, .copyright, .bottom-link li a {font-size: var(--text-14);}
    .bottom-link {margin-top: 10px;}
    .navbar-brand img {width: 90px;}
}