.hero {
    padding: 60px 20px;
    text-align: center;
    background-color: rgba(16, 54, 16, 0.9);
    border-radius: 10px;
    margin-bottom: 40px;
}
option {
    background-color: #252525;
    color: white;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #32a852;
}

.accordion-button::after {
    color: #fff!important; /* Example: Red color */
}
/* .accordion-item:first-of-type>.accordion-header .accordion-button {
     color: #fff;
} */
.form-switch .form-check-input:checked {
    background-color: black;
}
.line {
    width: 840px;
}
body {
    font-family: 'Roboto', sans-serif;
}
.bigsizeinput .input-group input{
    width: 380px;
}
input::placeholder {
    color: #A9A9A9;
}
input {
    color: white!important;
    background-color: black; 
    border: 1px solid gray; 
}
.configForm input {
    color: black!important;
    background-color: rgb(255, 255, 255); 
}
.configForm input::placeholder  {
    color: #A9A9A9!important;
}


textarea::placeholder {
    color: #A9A9A9!important;
}

/* Animation phase */
.content{
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Start hidden */
    transform: translateY(10px); /* Smaller movement */
    animation: fadeInUp 0.8s ease-out forwards; /* Faster fade-in */
  }
  .section_image {
    opacity: 0; /* Start hidden */
    transform: translateX(10px); /* Smaller movement */
    animation: fadeInDown 0.8s ease-out forwards; /* Faster fade-in */
  }
  .section_image {
    opacity: 1; /* Make it visible */
    animation: bounce 2s infinite ease-in-out; /* Continuous up-down animation */
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0); /* Starting and ending at the original position */
    }
    50% {
      transform: translateY(-20px); /* Move up by 10px */
    }
  }
  .story {
    opacity: 0; /* Start hidden */
    transform: translateX(10px); /* Smaller movement */
    animation: fadeInRight 0.8s ease-out forwards; /* Faster fade-in */
  }
  /* Fade-in effect for the content */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-40px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translateX(-40px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .solution_logo:hover {
    transform: rotate(18deg); /* Slight rotation */
  }
  .dislike_image:hover {
    transform: rotate(-18deg); /* Slight rotation */
  }

.image_1:hover ,.image_2:hover, .image_3:hover{
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #ececec;
}
.crd:hover, .crd_reverse:hover{
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #ffff;
}
.survey_card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.cat:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.navbar-brand {
    font-weight: bold;
}
  
.navbar-brand:hover {
color: #28a745; /* Logo hover effect */
}
  
.navbar-nav .nav-link {
    color: white; /* White menu links */
    margin-right: 20px;
    font-size: 20px!important;
}
  
.navbar-nav .nav-link:hover {
    color: #32a852; /* Hover effect for menu links */
}
  
.btn-custom {
    background-color: #32a852;
    color: white;
    font-weight: bold;
    font-size: 20px!important;
    border-radius: 30px; /* Rounded button */
}
  
.btn-custom:hover {
    background-color: #28a745;
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: white;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
    color: white !important;
}


.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.hero img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}
.features {
    margin-bottom: 40px;
}
.features h2 {
    margin-bottom: 20px;
}
.features p {
    font-size: 1.2rem;
}
.solution {
    padding: 40px 20px;
    background-color: rgba(16, 54, 16, 0.9);
    border-radius: 10px;
     padding: 20px 20px;
     background-color:#0F2015;
     border-radius: 23px;
     border: 7px solid #6c6e7080;
     width: 77%;
     margin-bottom: 20px;
}
.solution h2 {
    margin-bottom: 30px;
}


.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    gap: 72px;
}
 .header {
     
     padding: 20px;
 }
 .header .navbar-brand {
     color: #fff;
     font-size: 1.5rem;
     font-weight: bold;
     margin-top: 20px;
 }
 .header .nav-link {
     color: #fff;
     font-size: 1rem;
 }

 .features {
     margin-bottom: 40px;
 }
 .features h2 {
     margin-bottom: 20px;
 }
 .features p {
     font-size: 1.2rem;
 }

.config_card_main {
 border-radius: 10px;
     border: 7px solid #d1d5db; 
     width: 80%;
}
 .solution .list-group-item {
     background-color: transparent;
     color: #fff;
     border: none;
 }

 .content {
flex: 1;
max-width: 600px;
padding-right: 20px;
}
.form-control::placeholder {
color: #A9A9A9; 
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

p {
font-size: 18px;
margin-bottom: 20px;
}

/* .email-form {
display: flex;
gap: 10px;
} */

.email-form input {
padding: 10px;
border: none;
border-radius: 5px;
width: 250px;
}

.email-form button {
padding: 10px;
background-color: #4CAF50;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}

.email-form button:hover {
background-color: #45a049;
}

.image {
flex: 1;
max-width: 500px;
margin-top: 20px;
}


.questions {
flex: 1 100%;
margin-top: 40px;
}

.questions h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}

.questions ul {
font-size: 1rem;
list-style-type: none; 
padding-left: 0; 
font-family: 'Roboto'; 
color: #dfdfdf;
margin-left: 25px;
}

.questions li {
margin-bottom: 10px;
display: flex;
font-size: 18px;
align-items: center;
position: relative; 
}

.questions li::before {
content: "\2022"; 
color: #4CAF50; 
font-size: 1.5rem; 
margin-right: 10px; 
position: absolute;
left: -20px; 
}


.top img{
position: absolute;  
top: 57px;
right: 8px;
}

.main {
justify-content:center;
align-items:center;
gap:186px;
}
.content p{
color: #dfdfdf; 
font-family: Poppins;
font-weight: 300;
font-size: 20px;

}
.content_h1 {
font-size: 45px;
font-weight: 700;
line-height: 82px;
font-family: Roboto;
}
.content_h2 {
font-family: Roboto;
}
.card_part p {
border-bottom: 2px solid #dfdfdf; 
width: 100%; 
padding-bottom: 10px; 
margin: 10px 0; 
box-sizing: border-box; 
}
.heading p{
font-size: 40px;
margin-top: 40px;
text-align: center;
font-weight: 400;
}
.customize-struc p{
    font-size: 50px;
    margin-top: 40px;
    text-align: center;
    font-weight: 400;
    padding: 0 100px!important;
    }
.configurator .conf p{
font-size: 40px;
margin-top: 40px;
text-align: center;
font-weight: 400;
font-family: 'Roboto';
}
.sec_configurator  {

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

.config_card_main {
     display: flex;
     background-color: #F5F5F5;
     border: 1px solid #ccc;
     border-radius: 8px;
     width: 80%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }
 .config_form {
     background-color:#D9D9D9;
     padding: 40px 20px;
     width: 50%;
 }
 
 .config_form h2 {
     font-size: 18px;
     margin-bottom: 16px;
 }
 .form-group {
     margin-bottom: 16px;
 }
 .form-group label {
     display: block;
     margin-bottom: 6px;
     font-size: 14px;
 }
 .form-group input, .form-group select {
     width: 100%;
     padding: 8px;
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 4px;
     color:black!important
 }
 .form-group .toggle {
     display: flex;
     align-items: center;
 }
 .form-group .toggle input {
     margin-right: 10px;
 }
 .form-actions {
     display: flex;
     justify-content: center;
     margin-top: 80px;
     gap:33px;
 }
 .form-actions button {
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
 .form-actions .cancel {
     background-color: #ccc;
 }
 .form-actions .next {
     background-color: #252525;
     color: #fff;
 }
 .config_image {
     width: 50%;
     background-color: #fff;
     padding: 20px;
 }
 .config_image img {
     max-width: 100%;
     border: 1px solid #ccc;
     border-radius: 8px;
 }
 .components {
     margin-top: 20px;
     display: flex;
     justify-content: space-around;
 }
 
 .components .component img {
     max-width: 118px;
     margin-bottom: 10px;
 }


.crd {
border: 1px solid #dcdcdc; 
border-radius: 10px; 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
padding: 20px; 
background-color: #ffffff; 
display: flex; 
align-items: center;
gap: 15px; 
width: 90%; 
margin: 20px auto; 
position: relative;
}
.crd_reverse {
border: 1px solid #dcdcdc; 
border-radius: 10px; 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
padding: 20px; 
background-color: #ffffff; 
display: flex;
align-items: center; 
gap: 15px; 
width: 90%; 
margin: 20px auto; 
flex-direction: row-reverse;
position: relative;
}
.crd .step-label {
position: absolute;
top: -19px; 
left: 20px;
background-color: #28a745;
color: #fff; 
font-size: 14px; 
font-weight: 600; 
padding: 5px 10px; 
border-radius: 5px; 
}
 .step-label_reverse {
position: absolute;
top: -19px; 
left: 519px;
background-color: #28a745;
color: #fff; 
font-size: 14px; 
font-weight: 600; 
padding: 5px 10px; 
border-radius: 5px; 
}
.crd .text h5 ,.crd_reverse .text h5 {
font-family: 'Plus Jakarta Sans', sans-serif; 
font-size: 30px; 
font-weight: 600; 
color: #333; 
margin-bottom: 10px; 
}

.crd .text p ,.crd_reverse .text p{
font-family: 'Arial', sans-serif; 
font-size: 20px; 
line-height: 1.8; 
color: #555; 
}

.crd .line img ,.crd_reverse  .line img{
max-width: 100%; 
height: 100%; 
margin-bottom: 10px; 
}

.crd .imgg img ,.crd_reverse .imgg img  {
max-width: 100%; 
height: 100%;
}

.crdpart2 {
display: flex;
justify-content: center;
gap: 20px;
background-color: transparent; /* Matches the dark background in the image */
padding: 20px;
}

.survey_card {
    background-color: rgba(62, 86, 70, 0.5); /* 50% opacity */
border-radius: 10px;
padding: 20px;
width: 268px;
border-color: #32a852;
color: #fff;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.survey_card h3 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
}

.survey_card ul {
list-style: none;
padding: 0;
}

.survey_card ul li {
margin: 5px 0;
position: relative;
padding-left: 25px;
}

.survey_card ul li::before {
content: '√'; 
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: #fff;
background-color: black; 
width: 20px;
height: 17px;
line-height: 20px; 
border-radius: 31%; 
text-align: center; 
font-weight: bold; 
font-size: 12px; 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

.survey_card button {
margin-top: 15px;
background-color: #f6f7f7;
color: #070606;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
}

.survey_card button:hover {
background-color: #08b5b5;
}

.icon {
height: 50px;
width: 50px;
margin: 0 auto;
background: url('path-to-your-icon.png') no-repeat center center;
background-size: cover;
border-radius: 50%;
}
.survey_card .top  img{
position: absolute;
top: -24px;
right: 99px;
}

.askqustion {
width: 100%;
padding: 20px;
border-radius: 8px; 
margin-top: 50px;
margin-left: auto;
margin-right: auto;
font-family: 'Poppins';
}



.ask_text h2 {
font-size: 28px;
margin-bottom: 10px;
}

.ask_text p {
font-size: 14px;
margin-bottom: 10px;
}
.ask_text .ask_heading p{
    font-size:34px;
     font-family: Roboto;
     margin-bottom: 10px;
}

.ask_text a {
color: #00c3c3;
text-decoration: none;
}

.ask_text a:hover {
text-decoration: underline;
}

.ask_field {
width: 100%;
}

.faq {
display: flex;
flex-direction: column;
gap: 10px;
}

.faq-item {
background-color: #030410;
padding: 15px 20px;
border-radius: 8px;
color: #fff;
width: 84%;
box-shadow: #030410;
}

.faq-item.open .faq-answer {
display: block;
margin-top: 10px;
}

.faq-item .faq-question {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}

.faq-item .faq-answer {
display: none;
font-size: 14px;
color: #c1c1c1;
}



.faq-item button:hover {
color: #08e8e8;
}


.footer {
color: white;
padding: 40px;
}

.footer-content {
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px;
}



.footer-left h2 {
font-size: 24px;
margin-bottom: 10px;
}

.footer-left p {
font-size: 20px;
margin-bottom: 10px;
}
.socai p {
font-size: 20px;
margin-bottom: 10px;
}

.footer-left input {
padding: 8px;
font-size: 14px;
margin-right: 10px;
width: 200px;
}



.footer-right {
flex: 1;
display: flex;
justify-content: center;
gap: 103px;
}

.no-icon {
    background-image: none !important; /* Removes Bootstrap's icons */
    padding-right: 10px; /* Adjust padding if needed */
  }
.footer-links {
list-style-type: none;
}

.footer-links li {
margin: 5px 0;
list-style: none;
}


.footer-links li a {
color: white;
text-decoration: none;
font-size: 20px;
}

.footer-links li a:hover {
text-decoration: underline;
}

.socials {
display: flex;
gap: 10px;
}

.socials li a {
font-size: 18px;
color: white;
}

.socials li a:hover {
color: #f38d68;
}

.footer-bottom {
margin-top: 30px;
font-size: 12px;
}



.accordion {
    float: inline-end;
}


.accordion-item {
    width: 100%;
    background-color: black;
    margin-top: 10px;
    border: none;
    box-sizing: border-box;
}

.accordion-button {
    width: 100%;
    background-color: black;
    color: white!important;
    border: none;
    text-align: left;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.accordion-button:not(.collapsed) {
    background-color: #333;
}

.accordion-body {
    width: 100%;
    max-width: 600px;
    background-color: black;
    color: wheat;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    max-height: 300px;
}

.accordion-collapse {
    width: 100%;
    transition: max-height 0.3s ease-in-out;
    box-sizing: border-box;
}

@media (max-width: 375px) {
    /* Styles for screens smaller than or equal to 375px */
    .burger {
        display: inline-block;
    }
    .formm {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .cont {

        display: flex;
        flex-direction: column;

    }
    .contt {
        width: 100%;
    }


    .in {
        display: flex;
    justify-content: center;
    }
    .bck {
        display: flex;
        justify-content: center;
    }
    .footer-left .input-group {
        width: 249px !important;
        margin-left: 0px;
    }
    .burger {
        display: block;
    }
    .footer-left {
        padding: 15px;
        width: 100% !important;
    }

    .footer-right {
        padding: 15px;
        width: 100% !important;
    }

    .ff .input-group {
        width: 200px !important;
    }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        gap:20px;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .header .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header .nav-item {
        margin-bottom: 10px;
    }

    .header .btn {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 80%;
        height: auto;
    }

    .crd, .crd_reverse {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
    }

    .crd .text h5, .crd_reverse .text h5 {
        font-size: 18px;
    }

    .crd .text p, .crd_reverse .text p {
        font-size: 14px;
        line-height: 1.4;
    }

    .crd .imgg img, .crd_reverse .imgg img {
        width: 100%;
        height: 100%;
    }

    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }

    .accordion-button {
        width: 100%;
    }

    .accordion {
        width: 100px;
        float: none;
    }

    .accordion-item {
        width: 300px;
    }

    .step-label_reverse {
        position: absolute;
        top: -19px;
        left: 191px;
        background-color: #28a745;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .configurator .conf p {
        font-size: 27px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
        font-family: 'Roboto';
    }

    .mm {
        width: 411px;
    }

    .heading p {
        font-size: 20px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }

    .customize-struc p {
        font-size: 24px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }

    .input-group {
        width: 300px !important;
    }

    .crdpart2 {
        display: flex;
        flex-direction: column;
    }

    .input-group .form-control {
        width: 300px !important;
    }

    .input-group button {
        width: 100%;
        padding: 10px;
    }

    .footer-left input {
        width: 100%;
        margin-top: 10px;
    }

    .footer-left .input-group {
        flex-direction: column;
        width: 100%;
    }

    .footer-left img {
        max-width: 100px;
        margin-bottom: 10px;
    }
    .solution_logo {
        margin-top: 18px;
    }
    .lik {
        margin-top: 6px;
    }
    .questions h2 {
        text-align: center;
    }
}

@media (min-width: 376px) and (max-width: 734px) {
    /* Styles for screens between 376px and 734px */

    .footer-left .input-group {
        width: 249px !important;
        margin-left: 0px;
    }
    .formm {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .cont {

        display: flex;
        flex-direction: column;

    }
    .contt {
        width: 100%;
    }

    .in {
        display: flex;
    justify-content: center;
    }
   .burger {
    display: inline-block;
   }
   .bck {
    display: flex;
    justify-content: center;
}
    .footer-left {
        padding: 15px;
        width: 100% !important;
    }

    .footer-right {
        padding: 15px;
        width: 100% !important;
    }

    .ff .input-group {
        width: 200px !important;
    }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
        gap: 21px;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .header .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header .nav-item {
        margin-bottom: 10px;
    }

    .header .btn {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 80%;
        height: auto;
    }

    .crd, .crd_reverse {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
    }

    .crd .text h5, .crd_reverse .text h5 {
        font-size: 18px;
    }

    .crd .text p, .crd_reverse .text p {
        font-size: 14px;
        line-height: 1.4;
    }

    .crd .imgg img, .crd_reverse .imgg img {
        width: 100%;
        height: 100%;
    }

    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }

    .accordion-button {
        width: 100%;
    }

    .accordion {
        width: 100px;
        float: none;
    }

    .accordion-item {
        width: 300px;
    }

    .step-label_reverse {
        position: absolute;
        top: -19px;
        left: 191px;
        background-color: #28a745;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .configurator .conf p {
        font-size: 27px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
        font-family: 'Roboto';
    }

    .mm {
        width: 411px;
    }

    .heading p {
        font-size: 20px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }
    .customize-struc p {
        font-size: 24px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }

    .input-group {
        width: 300px !important;
    }

    .crdpart2 {
        display: flex;
        flex-direction: column;
    }

    .input-group .form-control {
        width: 300px !important;
    }

    .input-group button {
        width: 100%;
        padding: 10px;
    }

    .footer-left input {
        width: 100%;
        margin-top: 10px;
    }

    /* Further adjustments specific to between 376px and 734px */
    .footer-left .input-group {
        flex-direction: column;
        width: 100%;
    }

    .footer-left img {
        max-width: 100px;
        margin-bottom: 10px;
    }
    .solution_logo {
        margin-top: 18px;
    }
    .solution h6{
        margin-top: 6px!important;
        text-align: center!important;
        font-size: 26px!important;
    }
    .questions h2 {
        text-align: center!important;
    }
    .frm .input-group {
        width: 208px !important;
    }
}




@media (max-width: 768px) {
    .footer-left .input-group {
        width: 249px!important; /* Reduce width of the input group */
        margin-left: 0px;
    }
    .cont {

        display: flex;
        flex-direction: column;

    }
    .formm {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .contt {
        width: 100%;
    }

    .lik {
        margin-top: 6px;
    }
    .bck {
        display: flex;
        justify-content: center;
    }
    .solution_logo {
        margin-top: 18px;
    }
    .in {
        display: flex;
    justify-content: center;
    }
    .footer-left {
        padding: 15px;
        width: 100%!important; /* Add more padding for better spacing */
    }
    .footer-right {
        padding: 15px;
        width: 100%!important; /* Add more padding for better spacing */
    }
   .ff .input-group {
    width: 200px!important; /* Make the input group fill the container */
}
    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .header .navbar-nav {
        display: flex;
        flex-direction: column; /* Stack navbar items */
        align-items: center;
    }

    .header .nav-item {
        margin-bottom: 10px;
    }

    .header .btn {
        width: 100%; /* Full width button */
        padding: 10px;
        font-size: 16px;
    }

    /* Main section adjustments */
    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 80%; /* Scale images down */
        height: auto;
    }
    .crd, .crd_reverse {
        width: 100%;
        padding: 15px;
        margin-top: 20px; /* Reduce margin for smaller screens */
    }

    /* Adjust text styles */
    .crd .text h5, .crd_reverse .text h5 {
        font-size: 18px; /* Smaller font size */
    }

    .crd .text p, .crd_reverse .text p {
        font-size: 14px; /* Smaller text size */
        line-height: 1.4; /* Reduce line height for readability */
    }

    /* Adjust image in the imgg class (line image) */
    .crd .imgg img, .crd_reverse .imgg img {
        width: 100%; /* Ensure the line image fills the container */
        height: 100%;
    }

    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }
.accordion-button {
    width: 100%;
}
.accordion {
    width: 100px;
    float:none;
}
.accordion-item {
    width: 300px;
}
    .step-label_reverse {
        position: absolute;
        top: -19px; 
        left: 191px;
        background-color: #28a745;
        color: #fff; 
        font-size: 14px; 
        font-weight: 600; 
        padding: 5px 10px; 
        border-radius: 5px; 
        }
        .configurator .conf p {
            font-size: 27px;
            margin-top: 40px;
            text-align: center;
            font-weight: 400;
            font-family: 'Roboto';}
    .mm {
        width: 411px; /* Set the width to 300px */
    }
    .heading p{
        font-size: 20px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
        }
        .customize-struc p{
            font-size: 24px;
            margin-top: 40px;
            text-align: center;
            font-weight: 400;
            }
     .input-group {
        width: 300px!important; /* Make the input group fill the container */
    }
.crdpart2  {
    display: flex;
    flex-direction: column;
}
    .input-group .form-control {
        width: 300px!important; /* Ensure the input field takes full width of the parent */
    }

    .input-group button {
        width: 100%; /* Make the button take full width of the parent */
        padding: 10px;
    }
    .questions {
        flex-direction: column;
        justify-content: center!important;
        align-items: center;
    }

    .questions div {
        text-align: center;
    }

    .cardd .card_part {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .email-form .input-group {
        width: 100%; /* Full width for email input */
    }

    /* Configuration section adjustments */
    @media screen and (max-width: 768px) {
        .config_card_main {
            flex-direction: column; /* Stack items vertically */
            width: 100%;
            padding: 20px;
        }
        .cont {

            display: flex;
            flex-direction: column;
    
        }
        .formm {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .contt {
            width: 100%;
        }
    
        .solution_logo {
            margin-top: 18px;
        }
        .lik {
            margin-top: 6px;
        }
        .config_form {
            width: 100%;
            padding: 20px;
        }
    
        .config_form h2 {
            font-size: 16px;
        }
        .bck {
            display: flex;
            justify-content: center;
        }
        .form-group label {
            font-size: 12px;
        }
    
        .form-group input, .form-group select {
            font-size: 12px;
            padding: 10px;
        }
    
        .form-actions {
            flex-direction: column;
            gap: 20px;
            margin-top: 40px;
        }
    
        .form-actions button {
            width: 100%; /* Full width buttons */
            padding: 12px 20px;
        }
    
        .config_image {
            width: 100%;
            padding: 20px;
        }
    
        .components {
            flex-direction: column; /* Stack components vertically */
            align-items: center;
        }
    
        .components .component img {
            max-width: 80%; /* Scale images for mobile view */
            margin-bottom: 15px;
        }
    
        .form-actions .cancel, .form-actions .next {
            font-size: 14px;
        }
    }
    .solution {
        text-align: center;
    }

    .solution p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Ask Questions section adjustments */
    .askqustion .row {
        display: flex;
        flex-direction: column;
    }
    
    
    .form-group input, .form-group select   {
        width: 208px !important;
    }
        .frm .input-group .form-control {
            width: 177px!important; /* Ensure the input field takes full width of the parent */
        }
    
        .frm .input-group button {
            width: 100%; /* Make the button take full width of the parent */
            padding: 10px;
        }
        


    .askqustion .col-md-4,
    .askqustion .col-md-8 {
        width: 100%;
        margin-bottom: 20px;
    }

    .askqustion .accordion-button {
        font-size: 14px;
        padding: 10px;
    }

    .askqustion .accordion-body {
        font-size: 12px;
    }

    .askqustion h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* Footer adjustments */
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Footer left section */
    .footer-left {
        padding: 15px;
        width: 100%!important; /* Add more padding for better spacing */
    }

    .footer-left p {
        font-size: 12px; /* Keep smaller font size */
        margin-bottom: 8px;
         /* Adjust spacing between paragraphs */
    }

    .footer-left .input-group {
        flex-direction: column; /* Stack input and button vertically */
        width: 100%; /* Full width for the input group */
    }

    .footer-left input {
        width: 100%; /* Full width input */
        margin-bottom: 10px; /* Space between input and button */
    }

    .footer-left button {
        width: 100%; /* Full width button */
        margin-top: 5px; /* Space between button and input */
    }

    .footer-left img {
        max-width: 100px; /* Resize logo image */
        margin-bottom: 10px; /* Adjust space below image */
    }

    /* Footer right section */
    .footer-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Social icons in footer */
    .socials {
        justify-content: center;
        gap: 15px;
    }

    /* Footer links */
    .footer-links {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-links li {
        margin: 8px 0;
    }

    /* Adjust input field width for mobile */
    .footer-left input {
        width: 100%;
        margin-top: 10px;
    }

    /* Adjust font sizes */
    .footer-left h2 {
        font-size: 20px;
    }

    .footer-left p {
        font-size: 12px;
    }

    .footer-links li a {
        font-size: 17px;
    }

    .socials li a {
        font-size: 16px;
    }

    .footer-bottom {
        font-size: 10px;
        text-align: center;
    }
    .ff .input-group {
        width: 120px!important; /* Make the input group fill the container */
    } 
  }





@media (max-width: 991px) {
    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    .cont {

        display: flex;
        flex-direction: column;

    }
    .formm {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 90%;
        height: auto;
    }

    .questions {
        flex-direction: column;
        align-items: center;
    }

    .questions div {
        text-align: center;
    }

    .cardd .card_part {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .email-form .input-group {
        width: 100%;
    }
    .crd, .crd_reverse {
        margin-top: 30px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
}
.crd .line img, .crd_reverse .line img {
    max-width: 50%;
    height: 100%;
}

@media (max-width: 576px) {
    body {
        background-size: contain;
    }
   .ff .input-group {
        width: 100%;
        width: 204px !important;
    }
    .image_1, .image_2, .image_3 {
        width: 100%;
        height: auto;
    }
    .formm {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .header {
        flex-direction: column;
    }

    .header .btn {
        width: 100%;
        padding: 10px;
    }

    .content h1 {
        font-size: 24px;
    }

    .questions h2 {
        font-size: 24px;
    }

    .solution h6 {
        font-size: 18px;
        margin-top: 20px;
    }

    .cardd .card_part span {
        font-size: 16px;
    }

    .email-form .input-group {
        width: 100%;
    }
}


@media (max-width: 1200px) {
    .header {
        padding: 15px;
    }

    .content h1 {
        font-size: 32px;
    }

    .section_image img {
        width: 80%;
    }

    .questions h2 {
        font-size: 28px;
    }

    .cardd .card_part {
        gap: 1rem;
    }
}

@media (max-width: 991px) {
    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 90%;
        height: auto;
    }

    .questions {
        flex-direction: column;
        align-items: center;
    }

    .questions div {
        text-align: center;
    }

    .cardd .card_part {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .bigsizeinput .input-group {
        width: 345px!important;
        margin-right: 20px;
    }
}

@media (max-width: 576px) {
    body {
        background-size: contain;
    }

    .image_1, .image_2, .image_3 {
        width: 100%;
        height: auto;
    }
    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }

    .header {
        flex-direction: column;
        align-items: center;
    }

    .header .btn {
        width: 100%;
        padding: 10px;
    }

    .content h1 {
        font-size: 24px;
        text-align: center;
    }

    .questions h2 {
        font-size: 20px;
        text-align: center;
    }

    .solution h6 {
        font-size: 16px;
        margin-top: 20px;
        text-align: center;
    }

    .cardd .card_part span {
        font-size: 14px;
    }

    .email-form .input-group {
        width: 100%;
    }

    .cardd .card_part {
        gap: 1rem;
    }
}

@media (max-width: 991px) {
    .sec_configurator {
        padding: 0 15px;
    }

    .configurator {
        text-align: center;
        margin-bottom: 30px;
    }

    .crd, .crd_reverse {
        margin-top: 30px;
    }

    .crd .text, .crd_reverse .text {
        text-align: center;
    }

    .crd img, .crd_reverse img {
        width: 90%;
        height: auto;
    }

    .line img {
        width: 90%;
    }
    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }
    .crd_1, .crd_2 {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .crd_1 .card, .crd_2 .card {
        padding: 20px;
        display: flex;
        justify-content: center;
    }
    .card button {
        width: 100%;
        padding: 10px;
    }
}

@media (max-width: 576px) {
    body {
        background-size: contain;
    }
    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }

    .sec_configurator {
        padding: 0 10px;
    }

    .configurator p {
        font-size: 12px;
    }

    .crd, .crd_reverse {
        margin-top: 20px;
    }

    .crd .text, .crd_reverse .text {
        font-size: 14px;
        text-align: center;
    }

    .crd img, .crd_reverse img {
        width: 100%;
        height: auto;
    }

    .line img {
        width: 100%;
    }

    .crd_1, .crd_2 {
        width: 100%;
        margin-bottom: 20px;
    }

    .survey_card {
        padding: 10px;
    }

    .survey_card h6 {
        font-size: 16px;
    }

    .survey_card button {
        width: 100%;
        padding: 10px;
    }

    /* .mobile_btn .email-form .input-group {
        width: 180px!important;
    } */
  
    
}

@media (max-width: 991px) {
    .container.solution {
        padding: 0 15px;
    }

    .align-items-center {
        margin-left: 0;
        flex-direction: column;
        text-align: center;
    }

    .askqustion .row {
        flex-direction: column;
    }

    .ask_text {
        text-align: center;
        margin-bottom: 20px;
    }

    .accordion-button {
        font-size: 14px;
    }

    .accordion-body {
        font-size: 14px;
    }

    .accordion .accordion-item {
        margin-bottom: 15px;
        width: 377px;
    }

    .accordion-button {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    body {
        background-size: contain;
    }

    .container.solution {
        padding: 0 10px;
    }

    .align-items-center {
        margin-left: 0;
        padding: 0;
    }

    .ask_text h2 {
        font-size: 18px;
    }

    .ask_text p {
        font-size: 14px;
    }

    .askqustion .row {
        flex-direction: column;
    }

    .accordion-button {
        font-size: 13px;
    }

    .accordion-body {
        font-size: 13px;
    }

    .accordion-item {
        margin-bottom: 10px;
    }

    .accordion-button {
        padding: 10px;
    }
}

@media (max-width: 991px) {
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .footer-left, .footer-right {
        width: 100%;
        text-align: center;
    }

    .footer-left {
        margin-bottom: 20px;
    }

    .footer-links {
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        display: inline-block;
        margin: 10px;
    }

    .footer-links a {
        font-size: 16px;
    }

    .socai {
        margin-top: 20px;
    }

    .socai ul {
        display: flex;
        justify-content: center;
        padding: 0;
        list-style: none;
    }

    .socai ul li {
        margin: 0 10px;
    }

    .footer-bottom {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
    }
}



@media (max-width: 768px) {
.footer-content {
 flex-direction: column;
 align-items: center;
}
.questions h2 {
    text-align: center;
}
.footer-left,
.footer-right {
 width: 100%;
 text-align: center;
}
.crd .line img, .crd_reverse .line img {
    width: 29%;
    height: 100%;
}
}


@media (max-width: 1024px) {
    .footer-content {
        display: block;
        padding: 10px;
    }
    .frm
    {
        display: flex;
        flex-direction: column;
    }
    .questions h2 {
        text-align: center;
    }

    .footer-left, .footer-right {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    .footer-left p, .footer-right p {
        font-size: 16px;
    }

    .footer-links {
        margin-top: 20px;
    }

    .footer-links li {
        display: block;
        margin-bottom: 10px;
    }

    .footer-links a {
        font-size: 16px;
    }

    .footer-bottom {
        font-size: 12px;
    }

    .socai ul {
        justify-content: center;
    }

    .socai ul li {
        margin: 0 5px;
    }

    .socai p {
        font-size: 14px;
    }
}
@media (min-width: 376px) and (max-width: 768px) {
    /* Styles for screens between 376px and 734px */

    .footer-left .input-group {
        width: 249px !important;
        margin-left: 0px;
    }
    .in {
        display: flex;
    justify-content: center;
    }
    .footer-left {
        padding: 15px;
        width: 100% !important;
    }
    .crd .line img, .crd_reverse .line img {
        width: 29%;
        height: 100%;
    }

    .footer-right {
        padding: 15px;
        width: 100% !important;
    }

    .ff .input-group {
        width: 200px !important;
    }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    .header .navbar {
        margin-top: 15px;
    }

    .header .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header .nav-item {
        margin-bottom: 10px;
    }

    .header .btn {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .main {
        flex-direction: column;
        align-items: center;
    }

    .content {
        text-align: center;
        margin-bottom: 20px;
    }

    .section_image img {
        width: 80%;
        height: auto;
    }

    .crd, .crd_reverse {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
    }

    .crd .text h5, .crd_reverse .text h5 {
        font-size: 18px;
    }

    .crd .text p, .crd_reverse .text p {
        font-size: 14px;
        line-height: 1.4;
    }

    .crd .imgg img, .crd_reverse .imgg img {
        width: 100%;
        height: 100%;
    }

    .line {
        width: 653px;
    }
    .crd .line img, .crd_reverse .line img {
        width: 100% !important;
        height: 100%;
        margin-left: 163px;
    }

    }

    .accordion-button {
        width: 100%;
    }

    .accordion {
        width: 100px;
        float: none;
    }

    .accordion-item {
        width: 300px;
    }

    .step-label_reverse {
        position: absolute;
        top: -19px;
        left: 191px;
        background-color: #28a745;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .configurator .conf p {
        font-size: 27px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
        font-family: 'Roboto';
    }

    .mm {
        width: 411px;
    }

    .heading p {
        font-size: 20px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }

    .customize-struc p {
        font-size: 24px;
        margin-top: 40px;
        text-align: center;
        font-weight: 400;
    }

    .input-group {
        width: 300px !important;
    }

    .crdpart2 {
        display: flex;
        flex-direction: column;
    }

    .input-group .form-control {
        width: 300px !important;
    }

    .input-group button {
        width: 100%;
        padding: 10px;
    }

    .footer-left input {
        width: 100%;
        margin-top: 10px;
    }

    /* Further adjustments specific to between 376px and 734px */
    .footer-left .input-group {
        flex-direction: column;
        width: 100%;
    }
    .in {
        display: flex;
    justify-content: center;
    }
    .footer-left img {
        max-width: 100px;
        margin-bottom: 10px;
    }

    .invalid-feedback {
        color: #dc3545!important; /* Red text */
        font-size: 0.875rem!important; /* Slightly smaller text */
    }

    .is-invalid {
        border: 2px solid #dc3545!important; /* Red border color */
        background-color: #f8d7da!important; /* Light red background */
    }
    
}