/* Target the element with the ID starting with a number */
/* Apply styles to the section title */

[id="1"] {
    background-color: #2d2d2e;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Apply styles to the div inside the element with the ID starting with a number */
[id="1"] > div {
    text-align: center;
    padding: 0 20px;
}

/* Apply styles to the heading with the specific class */
.evlt-paragraph__main-title {
    color: #EE9322;
    text-transform: uppercase;
    margin-top: 20px;
    font-family: 'Barlow', sans-serif;
}

/* Apply styles to all paragraphs */
p {
    color: black;
    text-align: center;
    margin-top: 20px;
}
[id="2"] {
    background-color: #2d2d2e;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[id="2"] div {
    text-align: center;
    padding: 0 20px;
}

[id="2"] h1.evlt-paragraph__main-title {
    color: #EE9322;
    text-transform: uppercase;
    margin-top: 40px;
    margin-left: 20px;
    font-family: 'Barlow', sans-serif;
}
[id="3"] {
    background-color: #2d2d2e;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px;
}

#rc08-content {
    text-align: left;
    padding-right: 10px;
}

#rc08-content h1.evlt-paragraph__main-title {
    color: #EE9322;
    text-transform: uppercase;
    margin-top: 40px;
    font-family: 'Barlow', sans-serif;
}
.animate-paragraph {
    color: black;
    text-align: left;
    margin-top: 20px;
}

.animate-image {
    max-width: 100%;
    height: auto;
    width: 500px;
    border-radius: 20px;
    margin-top: 40px;
    margin-left: 80px;
}




@media (max-width: 575px) {
    /* Adjust styles for smaller screens */
    
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 22px; /* Adjust font size for smaller screens */
    }

    p {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 16px; /* Adjust font size for smaller screens */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Ensure equal spacing between lines */
        margin-top: 10px;
    }
    [id="7"]{
        .key-features-heading {
            background-color: #2d2d2e;
            text-align: center;
            padding: 5px;
            margin-top: 0;
        }
        
        .key-features-title {
            color: black;
            margin-top: 15px;
            margin-bottom: 0;
        }
        
    }
    [id="3"] {
        flex-direction: column;
        align-items: center;
    }

    #rc08-content {
        margin-left: 10px;
        margin-right: 10px;
        padding: 0;
        text-align: center;
    }

    .animate-image {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 0;
    }
   
    

    [id="6"] {
        background-color: #2d2d2e;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;
    }
    
    .feature-card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
        max-width: 200px; /* Set maximum width for responsiveness */
        height: auto; /* Allow height to adjust based on content */
        margin: 5px;
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
    }
    
    .feature-card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    .feature-card h2 {
            
        font-size: 15px;
        color: #333;
        font-weight: bold;
    }
    .feature-card p {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 10px; /* Add indentation */
         /* Justify text for better spacing */
         /* Adjust letter-spacing for more consistent spacing */
    }
    
    [id="4"] 
    {
        background-color: #2d2d2e;
        position: relative;
        display: flex;
        flex-direction: column; /* Change flex direction to column */
        align-items: flex-start;
        padding: 20px;
    }
    .custom-img {
        width: 270px;
      }
      
      .cust-img{
        width: 270px;
      }
      .img-fluid {
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    .animate-image {
        max-width: 100%;
        height: auto;
        width: 260px;
        border-radius: 20px;
        margin-bottom: 10px; /* Remove top margin */
        margin-left: auto; /* Align image to the right */
        margin-right: auto; /* Align image to the left */
        margin-top: 20px;
    }
    
    #rc08-content {
        text-align: left;
        margin-top: -30px; /* Add top margin to separate from image */
    }
    
    .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 0; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    .animate-paragraph {
        color: black;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    [id="9"]{
        .key-features-heading {
            background-color: #6B7A8F;
            text-align: center;
            padding: 5px;
            margin-top: 0;
        }
        
        .key-features-title {
            color: black;
            margin-top: 015px;
            margin-bottom: -80px;
        }
        
    }
    [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;
        margin-top: -20px;
    }
    
    .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
        max-width: 200px; /* Set maximum width for responsiveness */
        height: auto; /* Allow height to adjust based on content */
        margin: 5px;
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
        margin-top: 80px;
    }
    
    .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    
    .card h2 {
        font-size: 15px;
        color: #333;
        font-weight: bold;
    }
    
    .card p {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 0px; /* Add indentation */
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    
    /* Adjust margin for the second row */
    .card:nth-child(3),
    .card:nth-child(4) {
        margin-top: 20px; /* Less top margin for the second row */
    }
    
   
    
    [id="10"] #rc08-content {
        flex-grow: 1; /* Allow content to occupy remaining space */
    }
    
    
    [id="10"] 
    {
        background-color: #2d2d2e;
        position: relative;
        display: flex;
        flex-direction: column; /* Change flex direction to column */
        align-items: flex-start;
        padding: 20px;
    }
    
    .animate-image {
        max-width: 100%;
        height: auto;
        width: 260px;
        border-radius: 20px;
        margin-bottom: 10px; /* Remove top margin */
        margin-left: auto; /* Align image to the right */
        margin-right: auto; /* Align image to the left */
       
    }
    
    #rc08-content {
        text-align: left;
        /* Add top margin to separate from image */
    }
    
    #rc08-content h1  {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 0; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    #rc08-content p {
        color: black;
        
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    

    
    
    
}
@media (min-width: 576px) and (max-width: 767.5px) {
    /* Adjust styles for medium-sized screens */
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 22px; /* Adjust font size for smaller screens */
    }

    .evlt-paragraph__main-title {
        font-size: 18px; /* Adjust font size for smaller screens */
    }

    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 20px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines;  /* Ensure equal spacing between lines */
    }
    [id="7"]{
        key-features-heading {
            background-color: #6B7A8F;
            text-align: center;
            padding: 0px;
            margin-top: 0;}
        
        .key-features-title {
            color: black;
            margin-top: 15px;
            margin-bottom: 0;
        }
        
    }
    .custom-img {
        width: 270px;
      }
      
      .cust-img{
        width: 270px;
      }
      .img-fluid {
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    [id="3"] {
        flex-direction: column; /* Arrange content vertically */
        align-items: center; /* Center items horizontally */
        padding: 0px;
    }
    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 20px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Adjust spacing between words */
    }
    
    #rc08-content {
        margin-bottom: 20px; /* Add margin-bottom to create space for the image */
    }

    .animate-image {
        max-width: auto; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px;
        margin-right: 20px;
        margin-left: 20px; /* Adjust margin-top for spacing */
    }
        h1 {
            text-align: center; /* Align the heading in center */
        }

        /* Shared styles for both ID "6" and ID "7" */
[id="6"], [id="7"] {
    background-color: #6B7A8F;
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap; /* Allow flex items to wrap to the next line */
    justify-content: center;}

.feature-card, .card {
    width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
        max-width: 200px; /* Set maximum width for responsiveness */
        height: auto; /* Allow height to adjust based on content */
        margin: 5px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
        flex-basis: calc(50% - 20px);/* Set the initial size of the flex item */
    margin-top:0px;
}

.feature-card:hover, .card:hover {
    box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
    background-color: #e0e0e0;
}

.feature-card h2, .card h2 {
    font-size: 14.2px;
        color: #333;
        font-weight: bold;
        margin-top: 0px; /* Ensure the heading is above the cards */
}

.feature-card p, .card p {
    font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 0px;/* Add indentation */
   
    /* Justify text for better spacing */
    /* Adjust letter-spacing for more consistent spacing */
}

/* Styles specific to ID "7" */
[id="7"] .card:nth-child(-n+2) {
    margin-top: 60px; /* Set the top margin to 60px for the first two cards */
}

[id="7"] .card:nth-child(n+3) {
    margin-top: 60px; /* Set the top margin to 20px for the last two cards */
}



        
        
        
        
        [id="4"] 
    {
        background-color: #2d2d2e;
        position: relative;
        display: flex;
        flex-direction: column; /* Change flex direction to column */
        align-items: flex-start;
        padding: 20px;
    }
    
    .animate-image {
        max-width: 100%;
        height: auto;
        width: 260px;
        border-radius: 20px;
        margin-bottom: 10px; /* Remove top margin */
        margin-left: auto; /* Align image to the right */
        margin-right: auto; /* Align image to the left */
        margin-top: 20px;
    }
    
    #rc08-content {
        text-align: left;
        margin-top: -30px; /* Add top margin to separate from image */
    }
    
    .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 0; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    .animate-paragraph {
        color: black;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -70px;
    }
    
    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
    [id="10"] 
    {
        background-color: #2d2d2e;
        position: relative;
        display: flex;
        flex-direction: column; /* Change flex direction to column */
        align-items: flex-start;
        padding: 20px;
    }
    
    .animate-image {
        max-width: 100%;
        height: auto;
        width: 260px;
        border-radius: 20px;
        margin-bottom: 10px; /* Remove top margin */
        margin-left: auto; /* Align image to the right */
        margin-right: auto; /* Align image to the left */
        margin-top: 20px;
    }
    
    [id="20"] {
        text-align: left;
        margin-top: -30px; /* Add top margin to separate from image */
    }
    
    [id="20"] h1 {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 40px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="20"] p {
        color: black;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
}
   

@media (min-width:630px) and(max-width:767.5px){
    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;
    }
    
    .feature-card, .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
        max-width: 200px; /* Set maximum width for responsiveness */
        height: auto; /* Allow height to adjust based on content */
        margin: 5px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
        flex-basis: calc(50% - 20px); /* Set the initial size of the flex item */
    }
    
    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    
    .feature-card h2, .card h2 {
        font-size: 14.2px;
        color: #333;
        font-weight: bold;
        z-index: 1; /* Ensure the heading is above the cards */
    }
    
    .feature-card p, .card p {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 0px; /* Add indentation */
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    
   
}

@media (min-width: 768px) and (max-width: 991.5px) {
    [id="4"] .animate-image{
        width: 250px;
        }
    /* Adjust styles for medium-sized screens */
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 32px; /* Adjust font size for smaller screens */
        margin-left: 10px;
        margin-right: 10px;
    }
    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 30px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Ensure equal spacing between lines */
    }
    
    [id="7"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 5px;
        margin-top: 0;
    }
    
    [id="7"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
    .custom-img {
        width: 240px;
        transform: translateY(10px)!important;
      }
      
      .cust-img{
        width: 240px;
        transform: translateY(65px);
      }
      .img-fluid {
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: translateY(95px);
    }

    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
        margin-left: 10px;
        margin-right: 10px;
    }

    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 320px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-right: 20px; /* Add right margin */
        margin-left: auto; /* Align image to the right */
    }

    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1; /* Allow content to grow */
        margin-top: 5px; /* Adjust top margin */
        
    }

    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 40px; 
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }

    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
        margin-bottom: 30px;
    }
    
    
   
    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;}
    
    .feature-card, .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
            max-width: 200px; /* Set maximum width for responsiveness */
            height: auto; /* Allow height to adjust based on content */
            margin: 5px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
            transition: box-shadow 0.3s ease;
            flex-basis: calc(50% - 20px);/* Set the initial size of the flex item */
        
    }
    
    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    
    .feature-card h2, .card h2 {
        font-size: 14.2px;
            color: #333;
            font-weight: bold;
            margin-top: 0px; /* Ensure the heading is above the cards */
    }
    
    .feature-card p, .card p {
        font-size: 12px;
            color: #333;
            line-height: 1.6;
            text-indent: 0px;/* Add indentation */
       
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
    }
    
    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
    [id="10"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }
    
    
    
    
    
    [id="10"] .animate-image {
        max-width: 280px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-left: auto; /* Align image to the right */
    }
    [id="20"] {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }
    
    [id="20"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="20"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    
    
    
    
}
    
    
   

@media (min-width: 992px) and (max-width: 1199.5px) {
    [id="4"] .animate-image{
        width: 280px;
        }
    /* Adjust styles for larger screens */
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 32px; /* Adjust font size for smaller screens */
    }
    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 30px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Ensure equal spacing between lines */
    }
    [id="7"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 0px;
        margin-top: 0;
        margin-bottom: 0px;
    }
    .custom-img {
        width: 240px;
        transform: translateY(10px)!important;
      }
      
      .cust-img{
        width: 240px;
        transform: translateY(45px)!important;
      }
      .img-fluid {
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: translateY(95px);
    }
    [id="7"] .key-features-title {
        color: black;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 15px;
        text-align: center;
    }

    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }

    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 320px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-right: 20px; /* Add right margin */
        margin-left: auto; /* Align image to the right */
    }

    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }

    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }

    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    
   
    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;}
    
    .feature-card, .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
            max-width: 200px; /* Set maximum width for responsiveness */
            height: auto; /* Allow height to adjust based on content */
            margin: 5px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
            transition: box-shadow 0.3s ease;
            flex-basis: calc(50% - 20px);/* Set the initial size of the flex item */
        margin-top:0px;
    }
    
    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    
    .feature-card h2, .card h2 {
        font-size: 14.2px;
            color: #333;
            font-weight: bold;
            margin-top: 0px; /* Ensure the heading is above the cards */
    }
    
    .feature-card p, .card p {
        font-size: 12px;
            color: #333;
            line-height: 1.6;
            text-indent: 0px;/* Add indentation */
       
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
    }
    
    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
   
    [id="10"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }
    
    
    
    
    
    [id="10"] .animate-image {
        max-width: 280px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-left: auto; /* Align image to the right */
    }
    [id="20"] {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }
    
    [id="20"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="20"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    #emesent1 img{
        margin-top: -50px;
    }
    
}



@media (min-width: 1200px) and (max-width: 1400px) {
    [id="4"] .animate-image{
        width: 400px;
        }
    /* Adjust styles for larger screens */
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 32px; /* Adjust font size for smaller screens */
    }
    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 30px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Ensure equal spacing between lines */
    }
    
    [id="3"] {
        align-items: center; /* Center items horizontally */
        padding: 0px;
    }
    
    p {
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 20px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Adjust spacing between words */
    }
    
    #rc08-content {
        margin-bottom: 20px; /* Add margin-bottom to create space for the image */
    }
    
    .animate-image {
        max-width: 500px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px;
        margin-right: 20px;
        margin-left: 20px; /* Adjust margin-top for spacing */
    }
    
    h1 {
        text-align: center; /* Align the heading in center */
    }
    
    /* Integration of provided CSS for id="3" */
    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }
    .custom-img {
        width: 240px;
        transform: translateY(10px)!important;
      }
      
      .cust-img{
        width: 240px;
        transform: translateY(45px)!important;
      }
      .img-fluid {
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: translateY(95px);
    }
    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 370px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-right: 20px; /* Add right margin */
        margin-left: auto; /* Align image to the right */
    }
    
    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }
    
    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    [id="7"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 0px;
        margin-top: 0;
        margin-bottom: 0px;
        margin-left: 100px;
        margin-right: 140px;
    }
    
    [id="7"] .key-features-title {
        color: black;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 100px;
        text-align: center;
    }

    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }

    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 320px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-right: 20px; /* Add right margin */
        margin-left: auto; /* Align image to the right */
    }

    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }

    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }

    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    
   
    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;}
    
    .feature-card, .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
            max-width: 200px; /* Set maximum width for responsiveness */
            height: auto; /* Allow height to adjust based on content */
            margin: 5px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
            transition: box-shadow 0.3s ease;
            flex-basis: calc(50% - 20px);/* Set the initial size of the flex item */
        margin-top:0px;
    }
    
    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }
    
    .feature-card h2, .card h2 {
        font-size: 14.2px;
            color: #333;
            font-weight: bold;
            margin-top: 0px; /* Ensure the heading is above the cards */
    }
    
    .feature-card p, .card p {
        font-size: 12px;
            color: #333;
            line-height: 1.6;
            text-indent: 0px;/* Add indentation */
       
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
    }
    
    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
    [id="10"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }
    
    
    
    
    
    [id="10"] .animate-image {
        max-width: 280px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 20px; /* Adjust top margin */
        margin-left: auto; /* Align image to the right */
    }
    [id="20"] {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }
    
    [id="20"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="20"] .animate-paragraph {
        color: black;
        font-size: 16px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    #emesent1 img{
        margin-top: -50px;
    }
}




    
    
@media (min-width: 1400px) {
    [id="4"] .animate-image{
        width: 400px;
        }
    [id="1"] > div > h1 {
        color: #EE9322; /* Set the font color to the desired color */
        margin-top: 20px; /* Adjust the top margin */
        font-size: 32px; /* Adjust font size for smaller screens */
    }
    p {
        font-size: 25px;
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 30px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Ensure equal spacing between lines */
    }
    
    [id="3"] > div {
        align-items: center; /* Center items horizontally */
        padding: 0px;
    }
    .custom-img {
        width: 350px;
        transform: translateY(10px)!important;
      }
      
      .cust-img{
        width: 350px;
        transform: translateY(45px)!important;
      }
      .img-fluid {
        max-width: 450px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: translateY(55px);
    }
    [id="3"] > div p {
        font-size: 25px;
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 0px; /* Add indentation */
        text-align: justify; /* Justify text for better spacing */
        text-justify: distribute-all-lines; /* Adjust spacing between words */
    }
    [id="3"] .H1{
        margin-top: 500PX;
    }
    #rc08-content {
        margin-bottom: 20px; /* Add margin-bottom to create space for the image */
    }
    
    .animate-image {
        max-width: 650px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 100px;
        margin-right: 20px;
        margin-left: 20px; /* Adjust margin-top for spacing */
    }
    
    h1 {
        text-align: center; /* Align the heading in center */
    }
    
    /* Integration of provided CSS for id="3" */
    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row; /* Set flex direction to row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
    }
    
    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 650px; /* Ensure image responsiveness */
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px; /* Add border radius */
        margin-top: 100px; /* Adjust top margin */
        margin-right: 20px; /* Add right margin */
        margin-left: auto; /* Align image to the right */
        margin-bottom: 40px;
    }
    
    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1; /* Allow content to grow */
        margin-top: -30px; /* Adjust top margin */
    }
    
    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px; /* Remove top margin */
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }
    
    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 20px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
    
    
    [id="7"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
        margin-left: 120px;
    }

    [id="7"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }

    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap; /* Allow flex items to wrap to the next line */
        justify-content: center;
    }

    .feature-card, .card {
        width: calc(50% - 20px); /* Adjust width to occupy half the container with margin considered */
        max-width: 200px; /* Set maximum width for responsiveness */
        height: auto; /* Allow height to adjust based on content */
        margin: 5px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
        flex-basis: calc(50% - 20px); /* Set the initial size of the flex item */
        margin-top: 0px;
    }

    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }

    .feature-card h2, .card h2 {
        font-size: 14.2px;
        color: #333;
        font-weight: bold;
        margin-top: 0px; /* Ensure the heading is above the cards */
    }

    .feature-card p, .card p {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 0px; /* Add indentation */
        /* Justify text for better spacing */
        /* Adjust letter-spacing for more consistent spacing */
    }
    #emesent1 img{
        max-width: 500px;
        margin-top: -70px;
    }
    [id="3"] .p {
        margin-top: 3000px;
    }
    #emesent3 img{
        max-width: 8000px;
        margin-top: 70px;
    }
    [id="10"] .col-img-wrapper img {
        margin-top: 60px;
        max-width: 790px;
    }
    
    
    
    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
    }

    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }
}
@media (min-width: 1401px) {
    [id="1"] > div > h1 {
        color: #EE9322;
        margin-top: 20px;
        font-size: 32px;
    }

    p {
        font-size: 25px;
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 30px;
        text-align: justify;
        text-justify: distribute-all-lines;
    }

    [id="3"] > div {
        align-items: center;
        padding: 0px;
    }

    [id="3"] > div p {
        font-size: 25px;
        margin-left: 10px;
        margin-right: 10px;
        text-indent: 0px;
        text-align: justify;
        text-justify: distribute-all-lines;
    }

    #rc08-content {
        margin-bottom: 20px;
    }

    .animate-image {
        max-width: 650px;
        height: auto;
        border-radius: 20px;
        margin-top: 100px;
        margin-right: 20px;
        margin-left: 20px;
    }

    h1 {
        text-align: center;
    }

    [id="3"], [id="4"] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    [id="3"] .animate-image, [id="4"] .animate-image {
        max-width: 650px;
        height: auto;
        border-radius: 20px;
        margin-top: 100px;
        margin-right: 20px;
        margin-left: auto;
        margin-bottom: 40px;
    }

    [id="3"] #rc08-content, [id="4"] #rc08-content {
        flex-grow: 1;
        margin-top: -30px;
    }

    [id="3"] .evlt-paragraph__main-title, [id="4"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px;
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }

    [id="3"] .animate-paragraph, [id="4"] .animate-paragraph {
        color: black;
        font-size: 20px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }

    [id="7"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
        margin-left: 420px;
        margin-right: 400px;
    }

    [id="7"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }

    [id="6"], [id="7"] {
        background-color: #6B7A8F;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .feature-card, .card {
        width: calc(50% - 20px);
        max-width: 200px;
        height: auto;
        margin: 25px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(128, 128, 128, 0.8);
        transition: box-shadow 0.3s ease;
        flex-basis: calc(50% - 20px);
        margin-top: 0px;
    }

    .feature-card:hover, .card:hover {
        box-shadow: 0 8px 16px rgba(128, 128, 128, 0.7);
        background-color: #e0e0e0;
    }

    .feature-card h2, .card h2 {
        font-size: 14.2px;
        color: #333;
        font-weight: bold;
        margin-top: 0px;
    }

    .feature-card p, .card p {
        font-size: 12px;
        color: #333;
        line-height: 1.6;
        text-indent: 0px;
    }

    [id="9"] .key-features-heading {
        background-color: #6B7A8F;
        text-align: center;
        padding: 10px;
        margin-top: 0;
        margin-bottom: -5px;
    }
[id="4"] .animate-image{
width: 350px;
}
    [id="9"] .key-features-title {
        color: black;
        margin-top: 15px;
        margin-bottom: 0;
    }

    [id="10"] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    [id="10"] .animate-image {
        max-width: 280px;
        height: auto;
        border-radius: 20px;
        margin-top: 20px;
        margin-left: auto;
    }

    [id="20"] {
        flex-grow: 1;
        margin-top: -30px;
    }

    [id="20"] .evlt-paragraph__main-title {
        color: #EE9322;
        text-transform: uppercase;
        margin-top: 20px;
        font-family: 'Barlow', sans-serif;
        text-align: center;
    }

    [id="20"] .animate-paragraph {
        color: black;
        font-size: 18px;
        text-align: justify;
        text-justify: distribute-all-lines;
        margin-top: 0;
    }
}