@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.woff') format('woff');
    font-style: normal;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
    padding: 0;
    background-color: #fff;
}

.intro {
    background-color: #2D354A;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    position: relative;
}

.intro-content {
    position: relative;
    z-index: 2; /* Ensure content is above everything */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.intro-content-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Add some space between the logos */
    margin-bottom: 54px;
}

.prysmianlogo {
    max-width: 10%;
    height: auto;
    width: 150px; /* Adjust this width as needed */
}

.cableapplogo {
    max-width: 7%;
    height: auto;
    width: 150px; /* Adjust this width as needed */
}

.intro h1 {
    margin-top: 0;
    font-size: 44px;
    line-height: 70px;
    font-weight: 300;
}

.intro p {
    margin-top: 0;
    font-size: 25px;
    line-height: 35px;
    font-weight: 300;
}

.cta-button {
    background: linear-gradient(90deg, #4C8CFF, #56C271);
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 25px; /* Make the button rounded */
    cursor: pointer;
    font-size: 17px;
    font-weight: 430;
    margin-top: 20px;
    transition: background 0.3s ease;
    text-decoration: none;
}

.cta-button:hover {
    background: linear-gradient(90deg, #56C271, #4C8CFF); /* Swap the gradient colors on hover */
}

@media (max-width: 768px) {
    .prysmianlogo {
        max-width: 30%;
    }
    
    .cableapplogo {
        max-width: 22%;
    }
    
    .intro h1 {
        font-size: 40px;
        line-height: 50px;
    }

    .intro p {
        font-size: 20px;
        line-height: 30px;
    }

    .cta-button {
        padding: 12px 24px;
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .intro-content {
        width: 100%;
    }
    
    .intro-content-logos {
        flex-direction: column;
    }
    
    .intro h1 {
        font-size: 35px;
        line-height: 45px;
    }

    .intro p {
        font-size: 19px;
    }

    .cta-button {
        padding: 10px 20px;
    }
}



.divider {
    position: relative;
    width: 100%;
    height: 100px; /* Adjust the height as needed */
}

.divider-image {
    position: absolute;
    top: -128%; /* Adjust this value to control how much the image overlaps the top section */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 350%; /* Ensures the image covers both the top and bottom sections */
    object-fit: cover; /* Ensures the image maintains aspect ratio while covering the area */
}

@media (max-width: 768px) {
    .divider {
        height: 80px; /* Adjust the height for tablets */
    }

    .divider-image {
        top: -110%;
        height: 300%; /* Adjust the height for tablets */
    }
}

@media (max-width: 480px) {
    .divider {
        height: 60px; /* Adjust the height for mobile devices */
    }

    .divider-image {
        top: -90%;
        height: 250%; /* Adjust the height for mobile devices */
    }
}




.features {
    background-color: #f8f8f8;
    padding: 40px 20px;
}

.features-englobe {
    width: 80%;
    margin: 0 auto;
}

.features-englobe h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.features-englobe p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    margin-bottom: 30px;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.feature {
    display: flex;
    align-items: center; /* Center align items vertically */
    gap: 20px;
    width: calc(50% - 10px); /* Adjust width as needed */
}

.feature-icon {
    width: 70px;
    height: 70px;
}

.feature-text {
    flex: 1;
}

.feature h3 {
    color: #00D160;
    font-size: 24px;
    line-height: 30px;
    font-weight: 900;
    margin-bottom: 10px;
}

.feature p {
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
}

@media (max-width: 768px) {
    .features-englobe {
        width: 100%;
        margin: 0 auto;
    }

    .features-englobe h2 {
        font-size: 36px;
    }

    .features-englobe p {
        font-size: 20px;
        line-height: 30px;
    }

    .feature {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .feature-icon {
        margin-bottom: 0px;
        margin-right: 0;
    }

    .feature h3 {
        font-size: 20px;
    }

    .feature p {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .features-englobe h2 {
        font-size: 32px;
        line-height: 45px;
    }

    .features-englobe p {
        font-size: 19px;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
    }

    .feature h3 {
        font-size: 20px;
    }

    .feature p {
        font-size: 17px;
    }
}






.multi-features {
    background: linear-gradient(90deg, #4C8CFF, #56C271);
    color: #fff;
    padding: 72px 20px;
    position: relative;
    z-index: 1;
    height: auto; /* Adjust height to auto for responsiveness */
}

.multi-features-englobe {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    max-width: 1200px;
    text-align: center;
    background: #DCE4F2;
    color: #000;
    border-radius: 20px;
    padding: 60px 20px 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
    top: 200px; /* Adjust as needed to overlap the section below */
    z-index: 2;
}

.devices-image-container {
    position: absolute;
    top: -200px; /* Adjust as needed for the image to overlap by 50% */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
}

.devices-image {
    width: 46%;
    height: auto;
}

.multi-features h2 {
    font-size: 40px;
    font-weight: 300;
    line-height: 50px;
    margin-bottom: 20px;
    margin-top: 100px; /* Adjust to add space below the image */
}

.multi-features p {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 40px;
    font-weight: 400;
}

.multi-feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.multi-feature {
    width: 32%;
    margin-bottom: 40px;
    text-align: center;
}

.multi-feature h3 {
    color: #0093FF;
    font-size: 24px;
    line-height: 30px;
    font-weight: 900;
}

.multi-feature p {
    font-size: 18px;
    line-height: 25px;
}

@media (max-width: 1024px) {
    .multi-features-englobe {
        width: 90%;
        padding: 50px 15px 30px;
    }
    
    .multi-feature {
        width: 48%;
    }
    
    .devices-image-container {
        top: -200px; /* Adjust as needed for medium screens */
    }
    
    .devices-image {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .multi-features {
        padding: 0px 20px;
    }

    .multi-features-englobe {
        width: auto;
        padding: 100px 16px 20px;
        top: 130px;
    }
    
    .multi-feature {
        width: 100%;
    }
    
    .devices-image-container {
        top: -150px; /* Adjust as needed for smaller screens */
    }
    
    .devices-image {
        width: 80%;
    }

    .multi-features h2 {
        font-size: 36px;
        line-height: 50px;
        margin-top: 60px;
    }

    .multi-feature h3 {
        font-size: 20px;
    }

    .multi-feature p {
        font-size: 18px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .multi-features-englobe {
        width: 90%;
        padding: 32px 15px 32px;
    }

    .devices-image-container {
        top: -85px; /* Adjust as needed for extra small screens */
    }

    .devices-image {
        width: 100%;
    }

    .multi-features h2 {
        font-size: 25px;
        margin-top: 45px;
        line-height: 40px;
    }
    
    .multi-features p {
        font-size: 19px;
    }

    .multi-feature p {
        font-size: 16px;
    }
}





.ecological-section {
    width: 90%;
    margin-left: 0;
    display: flex;
    align-items: center;
    background-image: url('images/7401e62bad65d0a35b39c43654093c95.jpg');
    background-size: cover;
    background-position: center;
    padding: 0;
    position: relative;
    margin-top: 16%;
    border-radius: 0 360px 360px 0;
    margin-bottom: 72px;
}

.ecological-content {
    background-color: #2D354A; /* Fond gris avec un peu de transparence */
    color: #fff;
    padding: 40px 20px;
    width: 41%;
    margin-left: 10%;
}

.ecological-content h2 {
    font-size: 40px;
    margin-bottom: 20px;
    line-height: 50px;
    font-weight: 300;
}

.ecological-content .ecological-content-intro {
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 30px;
    font-weight: 400;
}

.ecological-content p {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 25px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .ecological-section {
        margin-top: 60px;
        border-radius: 0 180px 180px 0;
    }
    
    .ecological-content {
        width: 60%;
        padding: 30px 15px;
        margin-left: 5%;
    }
}

@media (max-width: 768px) {
    .ecological-section {
        flex-direction: column;
        width: 100%;
        margin-top: 60%;
        border-radius: 0;
    }
    
    .ecological-content {
        width: 80%;
        padding: 24px;
        margin-left: 0;
        margin: 80px 0px 80px 0px;
        border-radius: 0;
    }
    
    .ecological-content h2 {
        font-size: 36px;
        line-height: 50px;
    }
    
    .ecological-content .ecological-content-intro {
        font-size: 20px;
    }
    
    .ecological-content p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .ecological-content {
        width: 80%;
        padding: 24px;
        margin: 60px 0px 60px 0px;
    }
    
    .ecological-content h2 {
        font-size: 32px;
        line-height: 45px;
    }
    
    .ecological-content .ecological-content-intro {
        font-size: 19px;
    }
    
    .ecological-content p {
        font-size: 16px;
    }
}






.steps-section {
    text-align: center;
    padding: 0px 20px 0px 20px;
}

.steps-section-intro {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.steps-section h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #191B27;
}

.steps-section-intro p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    margin-bottom: 40px;
}

.etapes .steps-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.etapes .steps-container p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 25px;
}

.etapes .steps-container .step {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    margin: 10px;
    text-align: left;
}

.etapes .steps-container .step .circle {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background-image: url('images/Group2.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007bff; /* Blue color for the numbers */
    font-size: 2em;
    font-weight: bold;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .steps-section {
        padding: 0;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .steps-section-intro {
        width: 100%;
    }

    .steps-section h2 {
        font-size: 36px;
    }

    .steps-section-intro p {
        font-size: 20px;
        line-height: 30px;
    }

    .etapes .steps-container {
        flex-direction: column;
        align-items: center;
    }

    .etapes .steps-container .step {
        max-width: 100%;
        text-align: center;
        margin: 10px;
    }

    .etapes .steps-container .step p {
        margin-bottom: 20px;
        font-size: 18px;
    }
    
}

@media (max-width: 480px) {
    .steps-section h2 {
        font-size: 32px;
        line-height: 45px;
    }

    .etapes .steps-container .step .circle {
        width: 80px;
        height: 80px;
        font-size: 1.5em;
    }

    .steps-section-intro p {
        font-size: 19px;
    }

    .etapes .steps-container .step p {
        font-size: 16px;
    }
}





.how-it-works-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 32px 40px;
    background-color: #fff;
    border-radius: 50px 0 0 50px;
    margin-bottom: 72px;
}

.how-it-works-content {
    flex: 0.5;
    padding-right: 40px;
    padding-left: 5%;
}

.how-it-works-content h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.how-it-works-content p {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
}

.how-it-works-content .steps {
    margin-top: 20px;
}

.how-it-works-content .steps .step {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.how-it-works-content .steps .step .bullet-title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.how-it-works-content .steps .step .bullet {
    width: 50px;
    height: 50px;
    background-color: #F5F5F5;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.how-it-works-content .steps .step .bullet-title h3 {
    font-size: 20px;
    color: #00D160;
    margin: 0;
    position: absolute;
    left: 133px; /* La moitié de la largeur du bullet */
    white-space: nowrap;
}

.how-it-works-content .steps .step .step-content {
    margin-left: 30px;
}

.how-it-works-content .steps .step .step-content p {
    font-size: 18px;
    line-height: 25px;
    margin: 0;
    font-weight: 400;
}

.how-it-works-image-container {
    flex: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 360px 0px 0px 360px;
    background: linear-gradient(to bottom, #0093FF, #00D160);
    padding: 80px 0px 80px 80px;
}

.how-it-works-image {
    border-radius: 360px 0px 0px 360px;
    overflow: hidden;
}

.how-it-works-image img {
    max-width: 100%;
    border-radius: 360px 0px 0px 360px;
}

@media (max-width: 1024px) {
    .how-it-works-section {
        flex-direction: column;
        padding: 20px;
        border-radius: 20px 20px 0 0;
    }

    .how-it-works-content {
        padding: 20px;
        text-align: center;
        flex: none;
        width: 100%;
    }

    .how-it-works-image-container {
        margin-top: 20px;
        border-radius: 20px;
        padding: 20px;
    }

    .how-it-works-image {
        border-radius: 20px;
    }

    .how-it-works-image img {
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .how-it-works-content .steps .step .bullet-title h3 {
        font-size: 18px;
        left: 50px;
        white-space: normal;
    }

    .how-it-works-section {
        flex-direction: column;
        padding: 30px;
    }

    .how-it-works-content {
        padding: 10px;
        text-align: left;
    }

    .how-it-works-content h2 {
        font-size: 36px;
        text-align: center;
    }

    .how-it-works-image-container {
        margin-top: 20px;
        border-radius: 0;
        padding: 10px;
    }

    .how-it-works-image {
        border-radius: 0;
    }

    .how-it-works-image img {
        border-radius: 0;
    }

    .how-it-works-content .steps .step .step-content {
        margin-left: 25px;
    }
}

@media (max-width: 480px) {
    .how-it-works-content h2 {
        font-size: 32px;
        line-height: 45px;
    }

    .how-it-works-content p {
        font-size: 19px;
    }

    .how-it-works-content .steps .step .bullet {
        width: 60px;
        height: 60px;
    }

    .how-it-works-content .steps .step .bullet-title h3 {
        font-size: 18px;
        left: 50px;
        white-space: normal;
    }

    .how-it-works-content .steps .step .step-content p {
        font-size: 16px;
    }

    .how-it-works-content .steps .step .step-content {
        margin-left: 25px;
    }
}






.video-section {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 40px;
    background-color: #2D354A;
    color: #fff;
    margin-bottom: 72px;
    flex-wrap: wrap; /* Allow wrapping for better responsiveness */
}

.video-container {
    flex: 1;
    max-width: 560px; /* Ensure video doesn't get too wide */
    width: 100%; /* Make it responsive */
    margin-right: 20px;
}

.video-container iframe {
    width: 100%;
    height: 332px;
}

.video-content {
    max-width: 500px;
    flex: 1;
    text-align: center; /* Center text for smaller screens */
}

.video-content h2 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
    font-weight: 300;
}

.video-content p {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
    font-weight: 300;
}

.app-buttons {
    display: inline-flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.app-buttons a {
    display: block;
    margin: 0 10px 20px 0; /* Adjust margin for better spacing */
}

.app-buttons img {
    max-width: 150px;
}

@media (max-width: 1024px) {
    .app-buttons img {
        max-width: 130px;
    }
}

@media (max-width: 768px) {
    .video-container iframe {
        width: 100%;
        height: auto;
    }

    .video-section {
        flex-direction: column;
        text-align: center;
        padding: 45px 20px 20px 20px;
        margin-bottom: 40px;
    }

    .video-container {
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 100%; /* Ensure it takes the full width */
    }

    .video-content {
        max-width: 100%;
    }

    .video-content h2 {
        font-size: 36px;
    }

    .video-content p {
        font-size: 19px;
    }

    .app-buttons {
        justify-content: center;
    }

    .app-buttons a {
        margin-right: 10px;
    }

    .app-buttons img {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .video-content h2 {
        font-size: 32px;
        line-height: 45px;
    }

    .video-content p {
        font-size: 19px;
    }

    .app-buttons img {
        max-width: 100px;
    }
}





.testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Default padding for mobile */
    color: #191B27;
    width: 90%;
    margin: 0 auto 72px auto;
}

.testimonial-slider {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.testimonial-slider h2 {
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 50px;
}

.testimonial-slide {
    display: none;
    flex-direction: column;
    margin: 0 auto;
    width: 80%;
}

.testimonial-slide.active {
    display: flex;
}

.testimonial-slide p {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 10px;
}

.gradient-bar {
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #0093FF, #00D160);
    margin: 10px auto;
}

.testimonial-slide .info {
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 10px;
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #DCE4F2;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dot.active {
    background-color: #00D160;
}

.testimonial-video {
    width: 100%;
    padding: 10px; /* Default padding for mobile */
    background-color: #e0e8f3;
    border-radius: 25px;
    text-align: center;
}

.testimonial-video h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 20px;
}

.testimonial-video img {
    max-width: 100%;
    border-radius: 25px;
}

@media (min-width: 481px) and (max-width: 768px) {
    .testimonials-section {
        padding: 20px; /* Padding for tablets */
    }

    .testimonial-video {
        padding: 20px; /* Padding for tablets */
    }
}

@media (min-width: 769px) {
    .testimonials-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 40px 0; /* Padding for PCs */
        width: 80%;
    }

    .testimonial-slider {
        flex: 1;
        max-width: 50%;
        padding-right: 20px;
        text-align: left;
    }

    .testimonial-slide {
        width: 60%;
    }

    .testimonial-video {
        flex: 1.5;
        max-width: 60%;
        padding: 20px; /* Padding for PCs */
        background-color: #e0e8f3;
        border-radius: 25px;
        text-align: center;
    }

    .testimonial-video h2 {
        font-size: 36px;
    }
}

@media (max-width: 769px) {
    .testimonial-slider h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .testimonial-slider h2 {
        font-size: 32px;
        line-height: 45px;
    }

    .testimonial-slide p {
        font-size: 16px;
    }

    .testimonial-video h2 {
        font-size: 26px;
        line-height: 40px;
    }
}











.cta-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 40px;
    background-color: #2D354A;
    position: relative;
    width: 70%;
    margin-left: auto;
    height: 400px; /* or any fixed height that you need */
    margin-bottom: 72px;
}

.cta-image-container {
    position: absolute;
    left: -25%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to bottom, #0093FF, #00D160);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cta-image {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    overflow: hidden;
}

.cta-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.cta-content {
    max-width: 60%;
    color: #fff;
    padding-left: 60px;
}

.cta-content h2 {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 50px;
}

@media (max-width: 768px) {
    .cta-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 0;
        width: 100%;
        margin: 0;
        height: auto;
    }

    .cta-image-container {
        position: static;
        transform: none;
        width: 80%;
        height: auto;
        margin-bottom: 20px;
        padding: 2%; /* Maintain aspect ratio */
        border-radius: 50%;
    }

    .cta-image {
        height: 180px;
        width: 180px;
        border-radius: 50%;
    }

    .cta-content {
        max-width: 90%;
        padding-left: 0;
    }

    .cta-content h2 {
        font-size: 28px;
        line-height: 50px;
    }
}

@media (max-width: 480px) {
    .cta-content h2 {
        font-size: 24px;
        line-height: 45px;
    }

    .cta-image-container {
        height: 180px;
        width: 180px;
        padding: 2%; /* Ensure it remains circular */
    }

    .cta-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}



.gradient-section {
    background: linear-gradient(to right, #0093FF 70%, #00D160);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    background-image: url('images/AdobeStock_208314492.jpg'); /* Chemin vers l'image */
    background-size: cover;
    background-position: center;
    border-bottom-right-radius: 400px; /* Bordure arrondie en bas à droite */
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin-right: auto;
    border: solid #DCE4F2;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 80px;
    border-right-width: 80px;
}

.overlay-content {
    background: rgba(0, 0, 0, 0.7); /* Fond noir transparent */
    color: white;
    padding: 20px;
    width: 40%;
    padding: 50px 20px;
}

.overlay-content-2 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.overlay-content-2 h2 {
    font-size: 36px;
    font-weight: 300;
}

.overlay-content-2 p {
    font-size: 20px;
    font-weight: 200;
    line-height: 30px;
}

@media (max-width: 1024px) {
    .image-container {
        width: 90%;
        height: 70%;
        border-bottom-right-radius: 150px;
    }
}

@media (max-width: 768px) {
    .image-container {
        width: 100%;
        height: 60%;
        border-bottom-right-radius: 100px;
        border-bottom-width: 30px;
        border-right-width: 30px;
    }

    .overlay-content {
        width: 80%;
        padding: 50px 20px;
    }

    .overlay-content-2 h2 {
        font-size: 28px;
    }

    .overlay-content-2 p {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .image-container {
        width: 100%;
        height: 50%;
        border-bottom-right-radius: 100px;
        border-bottom-width: 30px;
        border-right-width: 30px;
    }

    .overlay-content {
        padding: 50px 20px;
        width: 100%;
        height: auto;
        border-bottom-right-radius: 70px
    }

    .overlay-content-2 h2 {
        font-size: 24px;
    }

    .overlay-content-2 p {
        font-size: 16px;
        line-height: 25px;
    }
}



.footer-section {
    padding: 10px 0; /* Default padding for mobile */
    background-color: #2D354A;
    color: #fff;
}

.footer-section-2 {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    justify-content: center;
    align-items: center; /* Center align items for mobile */
    width: 90%; /* Adjusted width for mobile */
    margin: 0 auto;
}

.footer-logo img {
    width: 50%; /* Adjust size for mobile */
    margin-bottom: 20px; /* Margin for spacing on mobile */
}

.footer-social {
    display: flex;
    gap: 15px;
    justify-content: center; /* Center align social icons for mobile */
}

.footer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #2D354A;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 481px) and (max-width: 768px) {
    .footer-section {
        padding: 20px 0; /* Padding for tablets */
    }

    .footer-section-2 {
        flex-direction: row; /* Row layout for tablets */
        justify-content: space-between;
        align-items: center; /* Center align items for tablets */
        width: 80%; /* Adjusted width for tablets */
    }

    .footer-logo img {
        width: 30%; /* Adjust size for tablets */
        margin-bottom: 0; /* Remove margin for tablets */
    }

    .footer-social {
        justify-content: flex-end; /* Align social icons to the end */
    }
}

@media (min-width: 769px) {
    .footer-section {
        padding: 20px 0; /* Padding for PCs */
    }

    .footer-section-2 {
        flex-direction: row; /* Row layout for PCs */
        justify-content: space-between;
        align-items: center; /* Center align items for PCs */
        width: 80%; /* Adjusted width for PCs */
    }

    .footer-logo img {
        width: 20%; /* Adjust size for PCs */
        margin-bottom: 0; /* Remove margin for PCs */
    }

    .footer-social {
        justify-content: flex-end; /* Align social icons to the end */
    }
}

@media (max-width: 768px) {
    .footer-logo {
        text-align: center;
    }
}