/* ===== CSS PROMĚNNÉ ===== */

:root {

    --color-primary: #2c5f5d;

    --color-yellow: #f9e87f;

    --color-yellow-light: #fef3c7;

    --color-teal: #7dd5b8;

    --color-teal-dark: #3d8a7a;

    --color-orange: #f4a261;

    --color-orange-light: #f9c784;

    --color-dark: #1a3a3a;

    --color-text: #2d3436;

    --color-text-light: #636e72;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    background: var(--color-yellow);

    overflow-x: hidden;

}



.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 40px;

}



/* ===== HEADER ===== */

header {

    background: linear-gradient(to right, #f4a261 0%, #f9c784 50%, #7dd5b8 100%);

    padding: 20px 0;

    position: sticky;

    top: 0;

    z-index: 100;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.header-logo {

    font-size: 28px;

    font-weight: 700;

    color: white;

    text-decoration: none;

    transition: opacity 0.3s ease;

}



.header-logo:hover {

    opacity: 0.9;

}



.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    z-index: 101;

}



.hamburger span {

    width: 28px;

    height: 3px;

    background: white;

    border-radius: 3px;

    transition: all 0.3s ease;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -6px);

}



nav {

    display: flex;

    gap: 40px;

}



nav a {

    color: var(--color-dark);

    text-decoration: none;

    font-size: 18px;

    font-weight: 500;

    transition: all 0.3s ease;

    padding: 8px 0;

    position: relative;

}



nav a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: white;

    transition: width 0.3s ease;

}



nav a:hover {

    color: white;

}



nav a:hover::after {

    width: 100%;

}



/* ===== HERO SECTION ===== */

.hero-section {

    position: relative;

    background: linear-gradient(180deg, 

        var(--color-yellow) 0%, 

        var(--color-yellow) 45%, 

        rgba(125, 213, 184, 0.08) 55%,

        rgba(125, 213, 184, 0.15) 65%,

        rgba(125, 213, 184, 0.25) 75%,

        rgba(125, 213, 184, 0.35) 85%,

        #7dd5b8 100%

    );

    padding: 40px 0 0;

    min-height: calc(100vh - 70px);

    overflow: visible;

}



.hero-wave-bottom {

    display: none;

}



.hero-section .container {

    position: relative;

    z-index: 10;

    max-width: 1900px;

}



.hero-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 80px;

    align-items: center;

    min-height: calc(100vh - 110px);

    position: relative;

}



.hero-left {

    padding-right: 0;

    position: relative;

    z-index: 20;

    padding-top: 0;

    max-width: 750px;

}



.hero-left h1 {

    font-size: 68px;

    font-weight: 700;

    color: #2c5f5d;

    line-height: 1.25;

    margin-bottom: 35px;

    letter-spacing: -0.3px;

}



.hero-description {

    font-size: 24px;

    color: #2c5f5d;

    line-height: 1.75;

    margin-bottom: 45px;

    letter-spacing: 0.3px;

}



.hero-description strong {

    font-weight: 700;

    color: #2c5f5d;

}



.btn-configurator {

    background: #5a9d8e;

    color: white;

    border: none;

    padding: 22px 55px;

    font-size: 20px;

    font-weight: 600;

    border-radius: 50px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    box-shadow: 0 5px 25px rgba(90, 157, 142, 0.35);

    transition: all 0.3s ease;

    margin-bottom: 20px;

    text-decoration: none;

}



.btn-configurator:hover {

    background: #4a8d7e;

    transform: translateY(-3px);

    box-shadow: 0 8px 30px rgba(90, 157, 142, 0.45);

}



.btn-configurator i {

    font-size: 24px;

}



.hero-subtext {

    font-size: 17px;

    color: #2c5f5d;

    line-height: 1.7;

    margin-bottom: 40px;

}



.hero-cta {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

}



.hero-cta-question {

    font-size: 18px;

    color: #2c5f5d;

}



.btn-contact {

    background: #5a9d8e;

    color: white;

    border: none;

    padding: 15px 38px;

    font-size: 18px;

    font-weight: 600;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.3s ease;

}



.btn-contact:hover {

    background: #4a8d7e;

    transform: translateY(-2px);

}



.hero-right {

    position: relative;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    height: 100%;

    margin-left: -350px;

    margin-right: -250px;

    z-index: 15;

    transform: translateX(-80px) translateY(-60px);

}



.hero-image-container {

    position: relative;

    width: 100%;

    max-width: none;

    min-width: 1400px;

}



.advantages-desktop {

    display: block;

}



.advantages-mobile {

    display: none;

}



.advantages-background.advantages-mobile {

    display: none;

}



.advantages-background.advantages-desktop {

    display: block;

}



.hero-image {

    width: 100%;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 25px 70px rgba(0, 0, 0, 0.12));

    position: relative;

    z-index: 15;

    display: block;

}



.hero-mobile-image {

    display: none;

    width: 100%;

    margin-left: 0;

    margin-bottom: 0;

    margin-top: 30px;

    padding-bottom: 20px;

    overflow: hidden;

}



.hero-mobile-img {

    width: 100%;

    height: auto;

    object-fit: cover;

    display: block;

    box-shadow: none;

}



/* ===== SERVICES SECTION ===== */

.services {

    padding: 100px 0 120px;

    background: #7dd5b8;

    position: relative;

    overflow: hidden;

}



.services .container {

    max-width: 1600px;

}



.section-header {

    text-align: center;

    margin-bottom: 80px;

    position: relative;

    z-index: 10;

}



.section-header h2 {

    font-size: 52px;

    color: var(--color-primary);

    margin-bottom: 20px;

    font-weight: 700;

    line-height: 1.2;

}



.section-header p {

    font-size: 20px;

    color: var(--color-text);

    line-height: 1.6;

    max-width: 800px;

    margin: 0 auto;

}



.section-header strong {

    color: var(--color-primary);

    font-weight: 700;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 10;

}



.service-card {

    background: white;

    padding: 50px 35px;

    border-radius: 25px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    text-align: center;

    position: relative;

    overflow: hidden;

}



.service-card:hover {

    transform: translateY(-15px) scale(1.03);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);

    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.6s ease;

}



.service-card:hover::before {

    left: 100%;

}



.service-icon {

    width: 90px;

    height: 90px;

    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 5px 20px rgba(244, 162, 97, 0.3);

}



.service-card:hover .service-icon {

    transform: rotate(360deg) scale(1.15);

    box-shadow: 0 10px 35px rgba(244, 162, 97, 0.5);

}



.service-icon i {

    font-size: 40px;

    color: white;

}



.service-card h3 {

    font-size: 22px;

    color: var(--color-primary);

    margin-bottom: 18px;

    font-weight: 600;

    line-height: 1.3;

}



.service-card p {

    font-size: 16px;

    color: var(--color-text-light);

    line-height: 1.7;

}



/* ===== ADVANTAGES SECTION ===== */

.advantages-section {

    position: relative;

    min-height: 650px;

    background: linear-gradient(180deg, 

        var(--color-teal) 0%, 

        var(--color-teal) 75%,

        rgba(255, 243, 199, 0.1) 82%,

        rgba(255, 243, 199, 0.25) 88%,

        rgba(255, 243, 199, 0.45) 95%,

        var(--color-yellow-light) 100%

    );

    padding: 80px 0;

    overflow: hidden;

}



.advantages-section .container {

    position: relative;

    z-index: 10;

    max-width: 1600px;

}



.advantages-wrapper {

    position: relative;

    width: 100%;

}



.advantages-background {

    width: 100%;

    max-width: 100%;

    height: auto;

    object-fit: contain;

    display: block;

    margin-bottom: 50px;

}



.advantages-numbers {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding: 0 40px;

}



.advantage-item {

    background: white;

    padding: 50px 40px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 200px;

}



.advantage-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

}



.advantage-big-number {

    font-size: 110px;

    font-weight: 900;

    color: var(--color-orange);

    line-height: 1;

    margin-bottom: 5px;

    background: none !important;

}



.advantage-percent-wrapper {

    display: inline-flex;

    align-items: flex-start;

    gap: 0;

}



.advantage-percent-sign {

    font-size: 110px;

    font-weight: 900;

    color: var(--color-orange);

    line-height: 1;

    margin-left: -8px;

}



.advantage-label {

    margin-top: 15px;

    background: none !important;

    padding: 0;

    border-radius: 0;

    box-shadow: none;

}



.advantage-label strong {

    display: block;

    font-size: 20px;

    color: var(--color-primary);

    margin-bottom: 5px;

    font-weight: 700;

    background: none !important;

}



.advantage-label span {

    font-size: 14px;

    color: var(--color-text-light);

    font-weight: 500;

    background: none !important;

    line-height: 1.4;

}



.advantages-gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 40px;

    position: relative;

    z-index: 10;

}



.gallery-item {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    transition: all 0.3s ease;

    aspect-ratio: 16 / 9;

}



.gallery-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ===== REFERENCE SECTION ===== */

.reference {

    padding: 80px 0;

    background: var(--color-yellow-light);

}



.reference-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.reference-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.reference-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

}



.reference-image-slider {

    position: relative;

    height: 250px;

    overflow: hidden;

}



.reference-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.9);

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    opacity: 0;

}



.reference-card:hover .slider-arrow {

    opacity: 1;

}



.slider-prev {

    left: 10px;

}



.slider-next {

    right: 10px;

}



.slider-arrow:hover {

    background: white;

    transform: translateY(-50%) scale(1.1);

}



.reference-info {

    padding: 25px;

}



.reference-info h3 {

    font-size: 20px;

    color: var(--color-primary);

    margin-bottom: 10px;

    font-weight: 600;

}



.reference-price {

    font-size: 15px;

    color: var(--color-text);

    margin-bottom: 15px;

}



.reference-price strong {

    color: var(--color-primary);

    font-weight: 700;

}



.reference-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.tag {

    background: var(--color-yellow-light);

    color: var(--color-text);

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 500;

}



/* ===== ABOUT SECTION ===== */

.about {

    padding: 80px 0;

    background: linear-gradient(180deg, 

        var(--color-yellow-light) 0%, 

        var(--color-yellow-light) 40%,

        var(--color-yellow) 100%

    );

}



.about-description {

    max-width: 900px;

    margin: 0 auto 50px;

    text-align: center;

}



.about-description p {

    font-size: 17px;

    color: var(--color-text);

    line-height: 1.8;

    margin-bottom: 20px;

}



.about-features {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.about-feature-card {

    background: white;

    padding: 35px 25px;

    border-radius: 20px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    text-align: center;

    transition: all 0.3s ease;

}



.about-feature-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

}



.feature-icon {

    width: 80px;

    height: 80px;

    background: var(--color-orange);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

}



.feature-icon i {

    font-size: 36px;

    color: white;

}



.about-feature-card h3 {

    font-size: 20px;

    color: var(--color-primary);

    margin-bottom: 10px;

    font-weight: 600;

}



.about-feature-card p {

    font-size: 15px;

    color: var(--color-text-light);

    line-height: 1.6;

}



/* ===== CONTACT SECTION ===== */

.contact {

    padding: 80px 0 600px;

    background: var(--color-yellow);

    position: relative;

    overflow: visible;

    min-height: auto;

    margin-bottom: 0;

}



.contact .container {

    position: relative;

    z-index: 10;

}



.contact-content {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 60px;

    margin-top: 40px;

    align-items: flex-start;

    position: relative;

    z-index: 10;

}



.contact-form {

    background: white;

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

    position: relative;

    z-index: 11;

}



.contact-form h3 {

    font-size: 24px;

    color: var(--color-primary);

    margin-bottom: 30px;

    font-weight: 600;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    font-size: 15px;

    color: var(--color-primary);

    font-weight: 600;

    margin-bottom: 8px;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px 18px;

    border: 2px solid #e0e0e0;

    border-radius: 10px;

    font-size: 15px;

    font-family: inherit;

    transition: all 0.3s ease;

    background: #f9f9f9;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--color-teal);

    background: white;

}



.submit-button {

    width: 100%;

    background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);

    color: white;

    border: none;

    padding: 16px 32px;

    font-size: 18px;

    font-weight: 600;

    border-radius: 10px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 20px rgba(244, 162, 97, 0.3);

}



.submit-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 30px rgba(244, 162, 97, 0.4);

}



.contact-info-wrapper {

    display: flex;

    flex-direction: column;

    gap: 20px;

    position: relative;

    z-index: 11;

}



.contact-item {

    background: white;

    padding: 25px;

    border-radius: 20px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    display: flex;

    gap: 20px;

    align-items: center;

    transition: all 0.3s ease;

    position: relative;

}



.contact-item:hover {

    transform: translateX(8px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

}



.contact-icon {

    width: 60px;

    height: 60px;

    background: var(--color-orange);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.contact-icon i {

    font-size: 24px;

    color: white;

}



.contact-details h4 {

    font-size: 16px;

    color: var(--color-text-light);

    margin-bottom: 5px;

}



.contact-details a,

.contact-details span {

    font-size: 20px;

    color: var(--color-primary);

    text-decoration: none;

    font-weight: 700;

    display: block;

}



.contact-details a:hover {

    color: var(--color-teal-dark);

}



.contact-decoration {

    position: absolute;

    bottom: -20px;

    right: 100px;

    width: 900px;

    height: 1050px;

    z-index: 8;

    pointer-events: none;

    overflow: visible;

}



.contact-decoration-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: right bottom;

}



/* ===== FOOTER ===== */

.footer {

    background: #2c5f5d;

    color: white;

    padding: 60px 0 30px;

    margin-top: 0;

}



.footer-content {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 60px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    margin-bottom: 20px;

}



.footer-logo {

    margin-bottom: 20px;

}



.logo-text {

    font-size: 32px;

    font-weight: 700;

}



.logo-accent {

    color: var(--color-orange);

}



.footer-left p {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

    line-height: 1.6;

}



.footer-keywords {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.footer-keywords span {

    background: rgba(255, 255, 255, 0.1);

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 14px;

    transition: all 0.3s ease;

}



.footer-keywords span:hover {

    background: rgba(255, 255, 255, 0.2);

}



.footer-right {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.footer-right p {

    font-size: 14px;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 10px;

}



/* ===== ANIMATIONS ===== */

.reveal-animation {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.8s ease-out;

}



.reveal-animation.revealed {

    opacity: 1;

    transform: translateY(0);

}



/* ===== RESPONSIVE ===== */



/* Desktop */

@media (min-width: 1200px) {

    .advantages-numbers {

        gap: 40px;

        max-width: 700px;

    }

    

    .advantage-item {

        padding: 50px 40px;

        min-height: 200px;

    }

    

    .advantage-big-number,

    .advantage-percent-sign {

        font-size: 110px;

    }

    

    .advantage-label strong {

        font-size: 20px;

    }

}



/* Tablet landscape (992px - 1199px) */

@media (min-width: 992px) and (max-width: 1199px) {

    .hero-wrapper {

        grid-template-columns: 1fr 1fr;

        gap: 40px;

    }

    

    .hero-right {

        margin-left: 0;

        margin-right: -50px;

        transform: translateX(0) translateY(0);

    }

    

    .hero-image-container {

        min-width: 600px;

        max-width: 650px;

    }

    

    .hero-image {

        width: 100%;

        height: auto;

    }

    

    .hero-left {

        max-width: 100%;

    }

    

    .hero-left h1 {

        font-size: 48px;

    }

    

    .hero-description {

        font-size: 18px;

    }

    

    .btn-configurator {

        padding: 18px 40px;

        font-size: 17px;

    }

    

    .contact {

        padding: 80px 0 400px;

    }

    

    .advantages-numbers {

        gap: 35px;

        max-width: 650px;

    }

    

    .advantage-item {

        padding: 45px 35px;

        min-height: 190px;

    }

    

    .advantage-big-number,

    .advantage-percent-sign {

        font-size: 100px;

    }

    

    .advantage-label strong {

        font-size: 18px;

    }

}



/* Show smaller contact decoration on larger tablets/notebooks */

@media (min-width: 992px) and (max-width: 1400px) {

    .contact-decoration {

        width: 600px;

        height: 700px;

        bottom: -150px;

        right: 80px;

    }

}



/* Tablet (768px - 991px) */

@media (min-width: 768px) and (max-width: 991px) {

    .hero-wrapper {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .hero-left {

        max-width: 100%;

        text-align: center;

    }

    

    .hero-left h1 {

        font-size: 48px;

    }

    

    .hero-right {

        display: none;

    }

    

    .hero-mobile-image {

        display: block !important;

    }

    

    .contact {

        padding: 60px 0 350px;

    }

    

    .contact-decoration {

        width: 500px;

        height: 600px;

        bottom: -200px;

        right: -50px;

    }

    

    .services-grid,

    .reference-grid,

    .about-features {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .advantages-section {

        padding: 60px 0;

    }

    

    .advantages-background {

        margin-bottom: 40px;

    }

    

    .advantages-numbers {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px;

        max-width: 600px;

        padding: 0 30px;

    }

    

    .advantages-gallery {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .advantage-item {

        padding: 40px 30px;

        min-height: 180px;

    }

    

    .advantage-big-number,

    .advantage-percent-sign {

        font-size: 90px;

    }

    

    .advantage-label strong {

        font-size: 17px;

    }

    

    .advantage-label span {

        font-size: 13px;

    }

    

    .contact-content {

        grid-template-columns: 1fr;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

    }

    

    .hamburger {

        display: flex;

    }

    

    nav {

        position: fixed;

        top: 0;

        right: -100%;

        width: 280px;

        height: 100vh;

        background: var(--color-teal);

        flex-direction: column;

        justify-content: center;

        padding: 40px;

        transition: right 0.4s ease;

        z-index: 200;

    }

    

    nav.active {

        right: 0;

    }

    

    nav a {

        color: white;

        font-size: 20px;

        padding: 15px;

    }

}



/* Desktop hero visibility */

@media (min-width: 768px) {

    .hero-mobile-image {

        display: none !important;

    }

    

    .hero-left {

        text-align: left;

    }

    

    .hero-cta {

        justify-content: flex-start;

        align-items: flex-start;

    }

}



/* Mobile (max 767px) */

@media (max-width: 767px) {

    .container {

        padding: 0 20px;

    }

    

    /* Hero mobile */

    .hero-section {

        min-height: auto;

        padding: 20px 0 0;

        background: linear-gradient(180deg, var(--color-yellow) 0%, var(--color-yellow) 70%, rgba(125, 213, 184, 0.3) 100%);

    }

    

    .hero-wrapper {

        grid-template-columns: 1fr;

        gap: 0;

        min-height: auto;

        padding: 30px 0 0 0;

    }

    

    .hero-left {

        max-width: 100%;

        padding-right: 0;

        padding-top: 0;

        text-align: center;

        margin: 0 auto;

    }

    

    .hero-left h1 {

        font-size: 36px;

        line-height: 1.25;

        margin-bottom: 20px;

        font-weight: 800;

        letter-spacing: -0.5px;

    }

    

    .hero-description {

        font-size: 16px;

        line-height: 1.6;

        margin-bottom: 35px;

        font-weight: 500;

    }

    

    .btn-configurator {

        padding: 16px 32px;

        font-size: 16px;

        margin: 0 auto 30px;

        width: 100%;

        justify-content: center;

        border-radius: 12px;

        background: linear-gradient(135deg, #5a9d8e 0%, #4a8d7e 100%);

        box-shadow: 0 8px 20px rgba(90, 157, 142, 0.3);

        font-weight: 700;

    }

    

    .btn-configurator:active {

        transform: translateY(-1px);

        box-shadow: 0 6px 15px rgba(90, 157, 142, 0.25);

    }

    

    .btn-configurator i {

        font-size: 18px;

    }

    

    .hero-subtext {

        font-size: 14px;

        margin-bottom: 35px;

        line-height: 1.6;

        font-weight: 500;

    }

    

    .hero-cta {

        gap: 0;

        flex-direction: column;

        margin-bottom: 20px;

        align-items: center;

        justify-content: center;

        display: flex;

    }

    

    .hero-cta-question {

        font-size: 16px;

        margin-bottom: 14px;

        font-weight: 700;

        display: block;

    }

    

    .btn-contact {

        width: auto;

        max-width: 280px;

        padding: 14px 32px;

        font-size: 16px;

        border-radius: 12px;

        background: linear-gradient(135deg, #5a9d8e 0%, #4a8d7e 100%);

        box-shadow: 0 6px 16px rgba(90, 157, 142, 0.3);

        font-weight: 700;

    }

    

    .btn-contact:active {

        transform: translateY(-1px);

        box-shadow: 0 4px 12px rgba(90, 157, 142, 0.25);

    }

    

    .hero-right {

        display: none !important;

    }

    

    .hero-mobile-image {

        display: block;

        margin-top: 40px;

    }

    

    /* Services mobile */

    .services {

        padding: 60px 0 80px;

        background: linear-gradient(180deg, rgba(125, 213, 184, 0.3) 0%, var(--color-teal) 20%, var(--color-teal) 100%);

    }

    

    .section-header h2 {

        font-size: 36px;

        margin-bottom: 15px;

    }

    

    .section-header p {

        font-size: 17px;

    }

    

    .services-grid,

    .reference-grid,

    .about-features {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    

    .service-card {

        padding: 40px 30px;

    }

    

    /* Advantages mobile */

    .advantages-section {

        padding: 50px 0;

        background: linear-gradient(180deg, var(--color-teal) 0%, var(--color-teal) 85%, var(--color-yellow-light) 100%);

    }

    

    .advantages-desktop {

        display: none;

    }

    

    .advantages-mobile {

        display: block;

        margin-bottom: 40px;

    }

    

    .advantages-background.advantages-desktop {

        display: none;

    }

    

    .advantages-background.advantages-mobile {

        display: block;

    }

    

    .advantages-background {

        margin-bottom: 35px;

    }

    

    .advantages-numbers {

        grid-template-columns: 1fr;

        gap: 25px;

        max-width: 100%;

        padding: 0 20px;

    }

    

    .advantages-gallery {

        grid-template-columns: 1fr;

    }

    

    .advantage-item {

        padding: 38px 30px;

        min-height: 170px;

    }

    

    .advantage-big-number,

    .advantage-percent-sign {

        font-size: 85px;

    }

    

    .advantage-label strong {

        font-size: 16px;

    }

    

    .advantage-label span {

        font-size: 12px;

    }

    

    /* About mobile */

    .about {

        background: linear-gradient(180deg, var(--color-yellow-light) 0%, var(--color-yellow) 100%);

    }

    

    /* Contact mobile */

    .contact {

        padding: 60px 0 200px;

        margin-bottom: 200px;

    }

    

    .contact-decoration {

        width: 450px;

        height: 660px;

        bottom: -400px;

        right: -50px;

    }

    

    .contact-content {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .contact-form {

        padding: 30px 25px;

    }

    

    .contact-form h3 {

        font-size: 20px;

        margin-bottom: 20px;

    }

    

    .form-group {

        margin-bottom: 15px;

    }

    

    .submit-button {

        padding: 14px 28px;

        font-size: 16px;

    }

    

    .contact-item {

        padding: 20px;

    }

    

    .contact-details a,

    .contact-details span {

        font-size: 18px;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

    }

    

    .hamburger {

        display: flex;

    }

    

    nav {

        position: fixed;

        top: 0;

        right: -100%;

        width: 280px;

        height: 100vh;

        background: var(--color-teal);

        flex-direction: column;

        justify-content: center;

        padding: 40px;

        transition: right 0.4s ease;

        z-index: 200;

    }

    

    nav.active {

        right: 0;

    }

    

    nav a {

        color: white;

        font-size: 20px;

        padding: 15px;

    }

}



/* Extra small mobile (max 480px) */

@media (max-width: 480px) {

    .hero-left h1 {

        font-size: 30px;

        line-height: 1.2;

        margin-bottom: 18px;

    }

    

    .hero-description {

        font-size: 15px;

    }

    

    .btn-configurator {

        padding: 14px 28px;

        font-size: 15px;

        margin: 0 auto 25px;

    }

    

    .btn-configurator i {

        font-size: 16px;

    }

    

    .hero-cta-question {

        font-size: 15px;

    }

    

    .btn-contact {

        max-width: 260px;

        padding: 12px 28px;

        font-size: 15px;

    }

    

    .section-header h2 {

        font-size: 32px;

    }

    

    .advantage-big-number,

    .advantage-percent-sign {

        font-size: 75px;

    }

    

    .advantage-label strong {

        font-size: 15px;

    }

    

    .contact {

        padding: 60px 0 180px;

    }

    

    .contact-decoration {

        width: 480px;

        height: 570px;

        bottom: -350px;

        right: -10px;

    }

    

    .contact-form h3 {

        font-size: 18px;

    }

    

    .form-group label {

        font-size: 14px;

    }

    

    .submit-button {

        padding: 12px 24px;

        font-size: 15px;

    }

}