@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



/*
.para_content {
    font-size: 22px;font-weight: 100;
}
*/

.main_header{
  background-color: #F7F8FC;
  /*background-image: linear-gradient(180deg, #3b82f6, #93c5fd);*/
  padding:30px 20px;
  
}

.main_header_text{
  font-family: "Montserrat", sans-serif;
  font-size:calc(24px + (60 - 24) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 700;
  line-height: auto;
  text-transform: capitalize;

}

/* call to action button code starts here*/

.btn-buy {
    background-color: #00D45B;
    color: #ffffff;
    border: none;
    border-radius: 10px; /* curved edges */
  }

  .btn-buy:hover {
    background-color: #00b84e;
    color: #ffffff;
  }

  .btn-buy-price {
    background-color: #0d6efd;
    color: #ffffff;
    border: none;
    border-radius: 10px; /* curved edges */
  }

  .btn-buy-price:hover {
    background-color: #0b63e3;
    color: #ffffff;
  }

  .button_text{
    font-family: "Montserrat", sans-serif;
  font-size:calc(24px + (40 - 24) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 400;
  line-height: auto;
  text-transform: capitalize;

  }

  .price_box_button_text{
    font-family: "Montserrat", sans-serif;
  font-size:calc(24px + (36 - 24) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 400;
  line-height: auto;
  text-transform: capitalize;

  }

  .sticky_button_text{
    font-family: "Montserrat", sans-serif;
  font-size:calc(18px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 500;
  line-height: auto;
  text-transform: capitalize;
  padding:10px 30px;

  }


.custom_list li{

  padding-left:20px;
  padding-bottom: 30px;

}

.fee{
  font-size:calc(18px + (26 - 18) * ((100vw - 300px) / (1920 - 300)));
  text-align: center;
  font-weight: 400;
}

.price_table{
  font-size:calc(18px + (24 - 18) * ((100vw - 300px) / (1920 - 300)));
  text-align: center;
  font-weight: 400;
}

/* call to action button code ends here*/

.section_1{
  padding:30px 20px;
  
}

.section_2{
  background-color: #f8fafc ;
  padding:30px 20px;
}

.section_3{
  padding:30px 20px;
  

}

.section_4{
  background-color: #f8fafc;
  padding:30px 20px;
}

.section_5{
  padding:30px 20px;
}


.section_6{
  background-color: #f8fafc;
  padding:30px 20px;
}

.section_7{
  padding:30px 20px;
}

.section_8{
  background-color: #f8fafc;
  padding:30px 20px;
}

.section_9{
  padding:30px 20px;
}

.section_10{
  background-color: #f8fafc;
  padding:60px 20px;
}

.section_11{
  padding:50px 20px;
}


.footer{
  background-color: #002D4E;
  padding:30px 20px;
}

.footer p{
  background-color: #002D4E;
  color:#ffffff;
}



h1{
  font-family: "Montserrat", sans-serif;
  font-size:calc(24px + (40 - 24) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 400;
  line-height: auto;
  text-transform: capitalize;
}

h2{
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-size:calc(22px + (38 - 22) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 600;
  
  line-height: normal;
}

h3{
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-size:calc(20px + (30 - 20) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 600;
  text-transform: capitalize;
}

.para_content {

    
    font-family: "Open Sans", sans-serif;
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 400;
    text-align: justify;
}

.text_box{
  background-color: #F7F8FC;
  border-radius: 10px;
 
  text-align: justify;
  
  border-width: thick;
}


/* feature box code starts here*/

.feature-box {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #eef0f3;
  padding: 32px 24px;
  height: 100%;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

/* soft professional gradient */

.feature-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f7fdfb, #eef7ff);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.feature-box:hover::before {
  opacity: 1;
}

.feature-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  border-color: #e3e8ef;
}

.feature-box * {
  position: relative;
  z-index: 2;
}

.feature-box h5 {
  color: #0f172a;
}

.feature-box p {
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}


.feature-box-title{

  font-family: "Montserrat", sans-serif;
  font-size:calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 600;
  text-transform:uppercase;
  color: #3b82f6 !important;

}

.feature-box-header{
  font-family: "Montserrat", sans-serif;
  font-size:calc(20px + (30 - 20) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 600;
  text-transform: capitalize;

}

.feature-box-para{
  font-family: "Montserrat", sans-serif;
  font-size:calc(18px + (20 - 18) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 400;
  text-transform: capitalize;
}

/* feature box code starts here*/


/* feature box 2 code starts here*/

/* FEATURE BOX */
.feature-box-2{
  /*background:#e6f0ff;*/
  background-color: #fff;
  border-radius:18px;
  padding:34px;
  border:1px solid rgba(24,119,242,0.15);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.06),
    0 22px 50px rgba(0,0,0,0.10);

  transition: all 0.4s ease;
  height:100%;
  position:relative;
  overflow:hidden;
  animation: fadeUp 0.8s ease both;
}

/* HOVER EFFECT */
.feature-box-2:hover{
  background:#1877F2;
  transform: translateY(-10px);
  border-color: transparent;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.16),
    0 40px 90px rgba(0,0,0,0.26),
    0 0 0 2px rgba(24,119,242,0.4);
}

/* TEXT COLORS */
.feature-box-2 h4,
.feature-box-2 p{
  color:#0b2233;
  transition:0.4s;
}

.feature-box-2:hover h4,
.feature-box-2:hover p{
  color:#ffffff;
}

/* ICON */
.feature-icon{
  width:60px;
  height:60px;
  border-radius:14px;
  /*background:#1877F2;*/
  background:#fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
  transition:0.4s;
  box-shadow:0 10px 22px rgba(24,119,242,0.35);
}

.feature-box-2:hover .feature-icon{
  background:#ffffff;
  color:#1877F2;
}
.feature-box-2:hover{
  color:#fff;
}

/* ANIMATION */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);}
  to{opacity:1; transform:translateY(0);}
}

/* feature box 2 code ends here*/


/* feature box 3 code starts here*/


.feature-box-3 {
    position: relative;
    background: linear-gradient(180deg, #ffffff, #f8faff);
    border-radius: 18px;
    padding: 40px 28px;
    text-align: center;
    transition: all 0.45s cubic-bezier(.21,.61,.35,1);
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.04);

    box-shadow: 
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.7);
}

/* animated top border */
.feature-box-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #00d4ff, #6f42c1, #ff4d8d);
    transition: all 0.6s ease;
}

/* glow layer */
.feature-box-3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(111,66,193,0.12), transparent 60%);
    opacity: 0;
    transition: 0.5s;
}

.feature-box-3:hover::before {
    left: 0;
}

.feature-box-3:hover::after {
    opacity: 1;
}

.feature-box-3:hover {
    transform: translateY(-12px) scale(1.02);
    background: linear-gradient(180deg, #f4f8ff, #ffffff);
    box-shadow: 0 25px 60px rgba(111,66,193,0.18);
}

.feature-icon-3 {
    font-size: 100px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #6f42c1, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-title {
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-text {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}


/* feature box 3 code ends here */




/* Testimonial section starts here */

.testimonial-box {
      background: #ffffff;
      border-radius: 18px;
      padding: 32px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }

    .testimonial-box:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(0,0,0,0.12);
    }

    .testimonial-img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #f1f1f1;
      flex-shrink: 0;
    }

    .testimonial-text {
      font-family: "Open Sans", sans-serif;
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    font-weight: 300;
    text-align: justify;
    font-style: italic;
    }

    .testimonial-name {
      font-weight: 600;
      font-size: 18px;
      color: #222;
    }

    .testimonial-role {
      font-size: 14px;
      color: #888;
    }

    .star-rating i {
      font-size: 18px;
      margin-right: 2px;
    }



/* Testimonial section ends here */


/* Price Table section starts here */

.card-title{
  font-size: calc(26px + (60 - 26) * ((100vw - 300px) / (1920 - 300)));
}

.badge{
  font-size: calc(26px + (50 - 26) * ((100vw - 300px) / (1920 - 300)));
}

.price{
  font-size: calc(26px + (50 - 26) * ((100vw - 300px) / (1920 - 300)));
  font-weight: bold;
}

.price_list{
  font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1920 - 300)));
}

.price_ul{
  text-align: left;
  padding-left:25px;
}

/* Price Table section ends here */


/* faq section starts here */

.faq-section {
  
  margin: 0px auto;
  padding:0 30px;
}


/* Question header */
.accordion-button {
  font-weight: 600;
  color: #000000 !important;
  /*background-color: #00b84e !important;*/
  background-color: #f8f9fa !important;
  border-radius: 6px;
  
}

.accordion-button::after {
  filter: brightness(0) invert(1);
}

/* Active state */
.accordion-button:not(.collapsed) {
  /*background-color: #1877F2 !important;*/
  background-color: #D6D7D4 !important;
  color: #000 !important;
  box-shadow: none;
}

/* Item spacing */
.accordion-item {
  border: none;
  margin-bottom: 12px;
  
}

/* Answer */
.accordion-body {
  background: #fff;
  color: #000;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 6px 6px;
  line-height: 1.6;
}

/* faq section ends here */

  /* Default font size for smaller screens */


/* Adjust font size for medium screens (e.g., tablets) */
@media (min-width: 768px) {
  
  

  

}

/* Adjust font size for large screens (e.g., desktops) */
@media (min-width: 992px) {
  

  

}