/* Media Queries for Responsive Design */

@media (max-width: 1700px) {
    .image-content img {
        max-width: 620px;
    }
    .image-content-2p img {
        max-width: 620px;
    }
}
@media (max-width: 1600px) {
    .image-content img {
        max-width: 580px;
    }
    .image-content-2p img {
        max-width: 580px;
    }
}

/* Tablets and below - 1440px */
@media (max-width: 1440px) {
    .hero-image-2 {
        top: 100px;
    }
    .hero-image-1{
        top: 20px;
    }
    .header-logo {
        left: 80px;
    }

    .content-section {
        padding: 60px 80px;
    }
    .content-section-rws {
        padding: 40px 80px;
    }
    .image-content img {
        max-width: 570px;
    }
    .image-content-2p img {
        max-width: 570px;
    }
    .image-content-2p {
            right: 4%;
    }
    .image-content {
            left: 4%;
    }
    .footer-content {
        padding: 0 80px;
    }

    .footer-decorative {
        left: 80px;
        width: calc(100% - 160px);
    }

    .decorative-circle {
        width: 500px;
        height: 500px;
    }

    .hero-images {
        width: 800px;
        height: 650px;
    }

    .hero-image-1 {
        left: 450px;
        width: 420px;
        height: 350px;
    }

    .decorative-line-bottom {
        left: 500px;
    }

    .text-content h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .text-content.reverse.\32 p {
    margin-right: 30%;
}
.text-content {
    margin-left: 30%;
}

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

}

@media (max-width: 1280px) {
    .image-content img {
        max-width: 540px;
    }
}

@media (max-width: 1200px) {
    .decorative-line-bottom {
        left: 300px;
    }
        .image-content img {
        max-width: 520px;
    }
    .decorative-line-bottom {
    bottom: 27px;
    }
    .hero-image-2 {
        width: 95%;
        height: 95%;
    }
    .hero-image-2 {
        top: 120px;
    }
    .hero-image-1 {
        left: 230px;
        width: 420px;
        height: 350px;
    }
}
/* Medium Tablets - 1024px */
@media (max-width: 1024px) {
    .hero-image-2 {
        width: 90%;
        height: 90%;
    }
    .background-gradient{
        height: 500px;
    }
    .hero-section {
        height: auto;
        min-height: 550px;
    }

    .header-logo {
        left: 60px;
    }

    .decorative-circle {
        width: 400px;
        height: 400px;
        right: 0;
        top: 0;
    }

    .hero-images {
        width: 100%;
        max-width: 600px;
        height: 500px;
    }

    .hero-image-1 {
        left: 310px;
        top: 20px;
        width: 300px;
        height: 240px;
    }

    .hero-title svg {
        width: 400px;
        height: 120px;
    }

    .decorative-line-bottom {
        left: 0;
        bottom: 19px;
    }

    .content-section {
        padding: 50px 60px;
    }
    .content-section-rws {
        padding: 40px 60px;
    }
svg.section-svg.right-bg{
    width: 50%;
}
.content-section .section-svg.left-bg {
    width: 50%;
}
.content-section .section-svg.right-bg-2p {
        width: 50%;
    }
.text-content {
    padding: 70px 30px 70px 80px;
}
    .text-content.reverse,
    .text-content.reverse.\32 p {
        padding: 70px 80px 70px 30px;
    }

    .text-content h2 {
        font-size: 28px;
        line-height: 38px;
    }

    .text-content p {
        font-size: 18px;
    }

    .image-content img {
        max-width: 350px;
    }
    .image-content-2p img {
        max-width: 350px;
    }




    .footer-decorative {
        left: 60px;
        width: calc(100% - 120px);
    }
}

/* Small Tablets - 768px */
@media (max-width: 768px) {
        .background-gradient {
        height: 430px;
    }
    .hero-section {
        min-height: 550px;
    }
.hero-text-container {
    position: relative;
    text-align: right;
    padding: 0 10px 0 0;
}
.decorative-line-bottom {
        left: 0;
        bottom: 96px;
        height: 25px;
}

    .header-logo {
        left: 40px;
        top: 15px;
    }

    .logo-text {
        font-size: 10px;
    }

    .decorative-circle {
        width: 300px;
        height: 300px;
    }

    .hero-images {
        max-width: 500px;
        height: 400px;
    }

    .hero-image-1 {
        left: 200px;
        top: 30px;
        width: 280px;
        height: 230px;
    }

    .hero-title svg {
        width: 320px;
        height: 95px;
    }

    .brand-logo {
        width: 120px;
        height: 35px;
    }

    .content-section {
        padding: 40px 40px;
    }
    .content-section-rws {
        padding: 40px 40px;
    }
.text-content{
    padding: 50px 10px 50px 70px;
}
    .text-content.reverse,
    .text-content.reverse.\32 p {
        padding: 50px 70px 50px 10px;
        margin-right: 40%;
    }

    .text-content h2 {
        font-size: 22px;
        line-height: 30px;
    }

    .text-content p {
        font-size: 15px;
        text-align: justify;
    }

    .text-content .corner-svg {
        width: 70px;
        height: 70px;
    }

    .content-section .section-svg.right-center,
    .content-section .section-svg.left-center {
        width: 35px;
        height: 200px;
    }

    .decorative-line {
        height: 50px;
    }

    .footer-content {
        padding: 0 40px;
    }

    .footer-decorative {
        left: 40px;
        width: calc(100% - 80px);
        height: 60px;
        top: -60px;
    }

    .footer {
        margin-top: 70px;
    }
}

/* Mobile Landscape - 642px (ключевая точка) */
@media (max-width: 642px) {
    .hero-section {
        min-height: 500px;
    }

    .hero-content {
        padding: 70px 30px 30px;
        gap: 30px;
    }

    .header-logo {
        left: 30px;
        top: 12px;
        gap: 8px;
    }

    .logo-icon svg {
        width: 24px;
        height: 24px;
    }

    .logo-text {
        font-size: 12px;
    }

    .decorative-circle {
        width: 250px;
        height: 250px;
    }

    .hero-images {
        max-width: 400px;
        height: 320px;
    }

    .hero-image-1 {
        left: 150px;
        top: 20px;
        width: 220px;
        height: 180px;
    }

    .hero-title svg {
        width: 280px;
        height: 85px;
    }

    .brand-logo {
        width: 110px;
        height: 30px;
    }

    .content-section {
        padding: 35px 15px;
    }
    .content-section-rws {
        padding: 35px 15px;
    }

    .text-content,
    .text-content.reverse,
    .text-content.reverse.\32 p {
        padding: 40px 25px;
    }

    .text-content h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 18px;
    }

    .text-content p {
        font-size: 14px;
        line-height: 1.3;
    }
    .image-content img
    {
        width: 250px;
    }
.image-content-2p img {
    width: 250px;
}
    .text-content .corner-svg {
        width: 60px;
        height: 60px;
    }
.footer-p-rws p {
    font-size: 12px;
}
    .content-section .section-svg.right-center,
    .content-section .section-svg.left-center {
        width: 15px;
        height: 150px;
    }

    .decorative-line {
        height: 40px;
    }

    .footer {
        margin-top: 50px;
        height: auto;
        padding: 15px 0;
    }

    .footer-content {
        padding: 0 30px;
        gap: 12px;
    }

    .footer-decorative {
        left: 30px;
        width: calc(100% - 60px);
        height: 50px;
        top: -50px;
    }

    .footer-logo .logo-text,
    .footer-copyright {
        font-size: 10px;
    }
}

/* Mobile Portrait - 480px */
@media (max-width: 480px) {
    
    .background-gradient {
        height: 410px;
    }
    .hero-text-container {
        padding: 0 0px 0 0;
    }
    .hero-image-1 {
        left: 0px;
        top: 50px;
        width: 180px;
        height: 150px;
    }
        .hero-image-2 {
        top: 180px;
    }
    .hero-image-2 {
        width: 250px;
        height: 200px;
    }
    .hero-section {
        min-height: 450px;
    }
    .decorative-line-bottom {
        left: 0;
        bottom: 16px;
        height: 25px;
    }
    .hero-content {
        padding: 60px 20px 20px 0px;
        gap: 25px;
    }

    .header-logo {
        left: 20px;
        top: 10px;
        gap: 6px;
        align-items: flex-start;
    }

    .logo-icon svg {
        width: 24px;
        height: 24px;
    }

    .logo-text {
        font-size: 10px;
    }

    .decorative-circle {
        width: 200px;
        height: 200px;
    }

    .hero-images {
        max-width: 320px;
        height: 260px;
    }

    .hero-title svg {
        width: 240px;
        height: 72px;
    }

    .brand-logo {
        width: 90px;
        height: 24px;
    }

    .content-section {
        padding: 30px 20px;
    }
    .content-section-rws {
        padding: 30px 20px;
    }

    .image-content-2p {
        position: relative;
    margin-top: 0px;
}
.text-content {
    margin-left: 0%;
}
.text-content.reverse, .text-content.reverse.\32 p {
        margin-right: 0%;
    }
.text-content.reverse.\32 p {
    margin-left: 0%;
}
.image-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    /* left: 210px; */
    margin-left: 0%;
    margin-top: 0px;
}
.image-content-2p {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    /* left: 210px; */
    margin-right: 0%;
    margin-top: 0px;
}
.content-grid {
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    align-items: center
}
    .text-content h2 {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    .text-content p {
        font-size: 14px;
        line-height: 1.4;
    }
.content-section.reverse .content-grid {
    flex-direction: column;
}
    .image-content-2p {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        /* left: 210px; */
        margin-right: 0%;
        margin-top: 0px;
        gap: 20px;
    }
    .image-content-2p {
        right: 0%;
    }
    .text-content .corner-svg {
        width: 50px;
        height: 50px;
    }

    .content-section .section-svg.right-center,
    .content-section .section-svg.left-center {
        width: 20px;
        height: 120px;
    }

    .decorative-line {
        height: 35px;
    }

    .footer {
        margin-top: 40px;
        padding: 12px 0;
    }

    .footer-content {
        padding: 0 20px;
        gap: 10px;
    }

    .footer-decorative {
        left: 0px;
        width: 100%;
        height: 40px;
        top: -32px;
    }

    .footer-logo .logo-text,
    .footer-copyright {
        font-size: 9px;
    }
    .image-content {
        left: 0;
    }
}

/* Small Mobile - 375px */
@media (max-width: 375px) {
    .hero-section {
        min-height: 400px;
    }

    .hero-content {
        padding: 50px 15px 20px;
        gap: 20px;
    }

    .header-logo {
        left: 15px;
        top: 8px;
        gap: 5px;
    }

    .logo-icon svg {
        width: 18px;
        height: 18px;
    }

    .logo-text {
        font-size: 7px;
    }

    .decorative-circle {
        width: 150px;
        height: 150px;
    }

    .hero-images {
        max-width: 280px;
        height: 220px;
    }

    .hero-image-1 {
        left: 100px;
        top: 10px;
        width: 160px;
        height: 130px;
    }

    .hero-title svg {
        width: 200px;
        height: 60px;
    }

    .brand-logo {
        width: 75px;
        height: 20px;
    }

    .content-section {
        padding: 25px 15px;
    }
    .content-section-rws {
        padding: 25px 15px;
    }

    .text-content,
    .text-content.reverse,
    .text-content.reverse.\32 p {
        padding: 30px 15px;
        border-radius: 18px;
    }

    .text-content h2 {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .text-content p {
        font-size: 13px;
        line-height: 1.4;
    }

    .text-content .corner-svg {
        width: 40px;
        height: 40px;
    }

    .content-section .section-svg.right-center,
    .content-section .section-svg.left-center {
        width: 20px;
        height: 100px;
    }

    .decorative-line {
        height: 30px;
    }

    .footer {
        margin-top: 35px;
        padding: 10px 0;
    }

    .footer-content {
        padding: 0 15px;
        gap: 8px;
    }

    .footer-decorative {
        left: 15px;
        width: calc(100% - 30px);
        height: 35px;
        top: -35px;
    }

    .footer-logo .logo-text,
    .footer-copyright {
        font-size: 8px;
    }

    .logo-icon svg {
        width: 20px;
        height: 20px;
    }
}