.page-5 {
  display: none;
  width: 100%;
  height: 150%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1021" viewBox="0 0 1440 1021" fill="none"><g clip-path="url(%23clip0_770_10263)"><rect width="1440" height="1021" fill="%233F3F3F"/><rect width="1440" height="1021" fill="url(%23paint0_linear_770_10263)"/><rect opacity="0.16" width="640.595" height="667.689" rx="20" transform="matrix(-0.866025 0.5 0.5 0.866025 1740.66 291)" fill="url(%23paint1_linear_770_10263)"/><rect opacity="0.16" width="640.595" height="667.689" rx="20" transform="matrix(-0.866025 0.5 0.5 0.866025 1248.27 806.346)" fill="url(%23paint2_linear_770_10263)"/></g><defs><linearGradient id="paint0_linear_770_10263" x1="1430.25" y1="18.178" x2="-120.922" y2="266.919" gradientUnits="userSpaceOnUse"><stop stop-color="%23091E42"/><stop offset="1" stop-color="%231251AE"/></linearGradient><linearGradient id="paint1_linear_770_10263" x1="320.297" y1="667.689" x2="320.297" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0.525" stop-color="%2313CCA2"/><stop offset="1" stop-color="%230065FF"/></linearGradient><linearGradient id="paint2_linear_770_10263" x1="320.297" y1="667.689" x2="320.297" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0.525" stop-color="%2313CCA2"/><stop offset="1" stop-color="%230065FF"/></linearGradient><clipPath id="clip0_770_10263"><rect width="1440" height="1021" fill="white"/></clipPath></defs></svg>');
  background-size: cover;
}
.module-tag {
  width: 504px;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 50px;
  left: 50px;
}
.fea {
  width: 240px;
  height: 167px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  color: #000;
  height: auto;
  gap: 5px;
  padding: 16px;
}
.fes-des {
  height: 60px;
  overflow: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  scrollbar-width: none;
}
.feature-div {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  align-items: center;
}
.fea-ben {
  white-space: normal; /* Allow text to wrap */
  max-width: 100%; /* Constrain width to container */
  overflow-wrap: break-word; /* Ensure long words break correctly */
  font-size: 12px; /* Adjust font size as needed */
  line-height: 1.2
}
.benifit-div {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  scrollbar-width: none;
}
.rfq {
  float: right;
  z-index: 1;
  position: relative;
}
.module-frame {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  align-items: center;
  gap: 290px;
}
#frame {
  margin: 0 auto;
  height: 400px;
  width: 100%;
  max-width: 100%;
  height: 650px;
}

#frame input[type="radio"] {
  display: none;
}

#frame label {
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
  color: #fafbfc;
}

#slides2 {
  padding: 10px;
  background: transparent;
  position: relative;
  z-index: 1;
  height: 650px;
}

#overflow {
  width: 100%;
  height: 120%;
  overflow: hidden;
}

#frame1:checked ~ #slides2 .inner {
  margin-left: -2px;
}

#frame2:checked ~ #slides2 .inner {
  margin-left: -102%;
}

#frame3:checked ~ #slides2 .inner {
  margin-left: -205%;
}
#frame4:checked ~ #slides2 .inner {
  margin-left: -306%;
}
#frame5:checked ~ #slides2 .inner {
  margin-left: -408%;
}
#frame6:checked ~ #slides2 .inner {
  margin-left: -500%;
}

#slides2 .inner {
  transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 600%;
  height: 650px;
}

#slides2 .frame {
  width: 17%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: black;
}

#controls {
  margin: -180px 0 0 0;
  width: 100%;
  height: 50px;
  z-index: 3;
  position: relative;
}

#controls label {
  transition: opacity 0.2s ease-out;
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.4;
}

#controls label:hover {
  opacity: 1;
}

/* active class for images*/

#frame1:checked ~ #controls label:nth-child(2),
#frame2:checked ~ #controls label:nth-child(3),
#frame3:checked ~ #controls label:nth-child(4),
#frame4:checked ~ #controls label:nth-child(5),
#frame5:checked ~ #controls label:nth-child(6),
#frame5:checked ~ #controls label:nth-child(1) {
  float: right;
  margin: 0 -10px 0 0;
  display: block;
}

/* active class for navigation button*/
#frame1:checked ~ #controls label:nth-last-child(2),
#frame2:checked ~ #controls label:nth-last-child(3),
#frame3:checked ~ #controls label:nth-last-child(4),
#frame4:checked ~ #controls label:nth-last-child(5),
#frame5:checked ~ #controls label:nth-last-child(6),
#frame5:checked ~ #controls label:nth-last-child(1) {
  float: left;
  margin: 0 0 0 -10px;
  display: block;
}
.sec-5-heading {
  font-size: 44px;
  line-height: 55px;
  font-weight: 700;
  position: relative;
  top: 40px;
  color: #fff;
  margin-bottom: 50px;
}
#bullets {
  margin: 10px 0 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
}

#bullets label {
  display: flex;
  width: 127px;
  height: 41px;
  border-radius: 8px;
  background: transparent;
  margin: 0 10px;
  border: 1px solid #fafbfc;
  align-items: center;
  justify-content: center;
}
.module-1-img {
  margin: 10px;
  width: 80px;
  height: 80px;
}
.mod-1-head {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
.mod-1-para {
  font-size: 16px;
}
.fea.img {
  width: 32px;
  height: 32px;
  margin: 10px;
}
.fea-head {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  position: relative;
  top: 5px;
}
.fea.des {
  margin: 10px;
  color: #626f80;
}
.fea.ben {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #465261;
  margin: 10px;
  position: relative;
  bottom: 5px;
  display: flex;
  align-items: center;
}

#frame1:checked ~ #bullets label:nth-child(1),
#frame2:checked ~ #bullets label:nth-child(2),
#frame3:checked ~ #bullets label:nth-child(3),
#frame4:checked ~ #bullets label:nth-child(4),
#frame5:checked ~ #bullets label:nth-child(5),
#frame5:checked ~ #bullets label:nth-child(6) {
  background: #4ea686;
}
.btn-secondary {
  background-color: transparent;
  color: #fff;
  gap: 28px;
}
.btn-group {
  gap: 28px;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}
.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #249f7f;
  border-color: transparent;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-radius: 8px;
}
.btn-group > .btn:not(:first-child) {
  border-radius: 8px;
}
.module-1 {
  display: flex;
  flex-direction: row;
  color: #fff;
  align-content: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 95%;
  padding: 0px 0px;
  /* padding-left: 16px; */
  position: relative;
}
.box-fea {
  display: flex;
  gap: 24px;
  flex-direction: row;
  flex-wrap: wrap;
}
.sec-5-mod-head {
  width: 80%;
}

@media (max-width: 656px) {
  .page-5 {
    width: 100%;
    height: 1400px;
    display: flex;
    flex-direction: column;
    background-size: cover;
    padding: 42px 10px;
    gap: 16px !important;
  }
}

@media (min-width: 657px) and (max-width: 717px) {
  .page-5 {
    width: 100%;
    height: 1345px;
    display: flex;
    flex-direction: column;
    background-size: cover;
    padding: 32px 10px;
    gap: 16px !important;
  }
}
@media (min-width: 717px) and (max-width: 768px) {
  .page-5 {
    width: 100%;
    height: 1345px;
    display: flex;
    flex-direction: column;
    background-size: cover;
    padding: 32px 10px;
    gap: 16px !important;
  }
}

@media(max-width:340px){
  .page-5{
    height: 1950px;

  }
  .rfq img {
    width: 300px !important;
    height: 400px;
}
}


@media (min-width:340px) and (max-width:470px) {
  .page-5 {
    width: 100%;
    height: 1950px !important;
    display: flex;
    flex-direction: column;
    background-size: cover;
    padding: 42px 10px;
    gap: 16px !important;
  }
}
@media (max-width: 768px) {
  
  .sec-5-heading {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    position: relative;
    top: 0px;
    color: #fff;
    margin-bottom: 16px;
  }
  .mod-1-head {
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
  }
  .mod-1-para {
    font-size: 12px;
  }
  .module-1-img {
    margin: 0px;
    width: 60px;
    height: 60px;
  }
  .sec-5-mod-head {
    width: 73%;
  }
  .mod-1-head {
    font-weight: 700;
    font-size: 18px;
    line-height: 22.5px;
    margin-bottom: 10px;
  }
  .mod-1-para {
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    margin: 0;
    width: 99%;
  } 
  .fea{
    width: 200px;
  }
  .fea-img {
    width: 24px;
    height: 24px;
    margin: 00px;
  }
  .fea-head {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    position: relative;
    top: 5px;
    margin: 0;
  }
  .fes-des {
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    color: #626f80;
  }
  .fea-ben {
    white-space: normal;
    
    font-size: 12px;
    max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2; 
  max-height: 2.4em;
  font-size: 12px;
    font-weight: 600;
  
    color: #465261;
    margin: 0px;
    position: relative;
    bottom: 5px;
    display: flex;
    align-items: center;
  }

  .module-tag {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 50px;
    left: 0px;
  }
  .module-1-img {
    margin: 10px;
    width: 60px;
    height: 60px;
  }
  .rfq {
    z-index: 1;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rfq img {
    width: 343px;
    height: 400px;
  }
  .module-frame {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 60px;
  }
  .fea {
    width: 200px;
    height: 250px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    color: #000;
  }
  #frame {
    margin: 0 auto;
    height: 400px;
    width: 100%;
    max-width: 100%;
    height: 650px;
  }

  #frame input[type="radio"] {
    display: none;
  }

  #frame label {
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
    color: #fafbfc;
  }

  #slides2 {
    padding: 0px;
    background: transparent;
    position: relative;
    z-index: 1;
    height: max-content;
  }

  #overflow {
    width: 100%;
    height: max-content;
    overflow: hidden;
  }

  #frame1:checked ~ #slides2 .inner {
    margin-left: -20px !important;
  }

  #frame2:checked ~ #slides2 .inner {
    margin-left: -114% !important;
  }

  #frame3:checked ~ #slides2 .inner {
    margin-left: -222% !important;
  }
  #frame4:checked ~ #slides2 .inner {
    margin-left: -330% !important;
  }
  #frame5:checked ~ #slides2 .inner {
    margin-left: -438% !important;
  }
  #frame6:checked ~ #slides2 .inner {
    margin-left: -437% !important;
  }

  #slides2 .inner {
    transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 600%;
    height: auto;
  }

  #slides2 .frame {
    width: 18%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 70%;
    color: black;
    padding-left: 15px;
  }
  .box-fea {
    display: flex;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    overflow: scroll !important;
    /* padding:0 3rem 0 1rem !important; */
  }
  .mod-heading {
    display: flex;
    width: 83%;
    align-items: center;
  }
  #controls {
    margin: -180px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
  }

  #controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: 0.4;
  }

  #controls label:hover {
    opacity: 1;
  }

  /* active class for images*/

  #frame1:checked ~ #controls label:nth-child(2),
  #frame2:checked ~ #controls label:nth-child(3),
  #frame3:checked ~ #controls label:nth-child(4),
  #frame4:checked ~ #controls label:nth-child(5),
  #frame5:checked ~ #controls label:nth-child(6),
  #frame5:checked ~ #controls label:nth-child(1) {
    float: right;
    margin: 0 -10px 0 0;
    display: block;
  }

  /* active class for navigation button*/
  #frame1:checked ~ #controls label:nth-last-child(2),
  #frame2:checked ~ #controls label:nth-last-child(3),
  #frame3:checked ~ #controls label:nth-last-child(4),
  #frame4:checked ~ #controls label:nth-last-child(5),
  #frame5:checked ~ #controls label:nth-last-child(6),
  #frame5:checked ~ #controls label:nth-last-child(1) {
    float: left;
    margin: 0 0 0 -10px;
    display: block;
  }

  #bullets {
    margin: 10px 0 0;
    text-align: center;
    display: flex;
    width: 100%;
    height: 70px;
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap;
    scrollbar-width: thin;
  }

  #bullets label {
    display: flex;
    width: max-content;
    flex-wrap: wrap;
    height: min-content;
    border-radius: 8px;
    background: transparent;
    margin: 0 10px;
    border: 1px solid #fafbfc;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
  }

  #frame1:checked ~ #bullets label:nth-child(1),
  #frame2:checked ~ #bullets label:nth-child(2),
  #frame3:checked ~ #bullets label:nth-child(3),
  #frame4:checked ~ #bullets label:nth-child(4),
  #frame5:checked ~ #bullets label:nth-child(5),
  #frame5:checked ~ #bullets label:nth-child(6) {
    background: #4ea686;
  }
}
@media (max-width: 830px) {
  .module-1 {
    width: 100%;
    justify-content: center;
  }
  .module-tag {
    align-items: center;
  }
  #bullets {
    align-content: flex-start;
  }
}