@media (max-width: 2560px) { 
    .hero1 {
        font-size: clamp(0rem, 8.7vw, 235.8px);
    }

    .hero2 {
        font-size: clamp(3.36rem, 6.8vw, 207.5px);
    }

    #hero {
        margin-top: 0;
        padding-top: 170px;
        padding-bottom: 70px;
    }

    .custom-navbar {
        height: 150px;
    }

    .navbar-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 1.43vw, 39.5px);
    }

    .swirly-lines {
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 0.5vw; 
        min-height: 25px; 
        background: url('../img/swirlylines.png') repeat-x bottom left;
        background-size: auto 100%; 
        z-index: 5;
    }

    #why-social-media 
    {
        margin-top:50px;
    }

    .pink-block
    {
        margin-top:20px;
        background-color:#f4e0d7;
        padding:20px 40px;
        position: relative;
    }

    #about-andrea h2, #about-natalie h2, #about-rudi h2
    {
        
        margin-bottom:25px;
    }
}

/* ==========================================================================
   MEDIA QUERIES (Desktop-First / Max-Width)
   Note: Cascade flows downwards. Largest screens first, shrinking to mobile.
   ========================================================================== */

/* Extra extra large screens and down (1399.98px and down) */
@media (max-width: 1399.98px) { 
    .hero1 {
        font-size: clamp(0rem, 8.7vw, 235.8px);
    }

    .hero2 {
        font-size: clamp(3.36rem, 6.8vw, 207.5px);
    }

    #hero {
        margin-top: 0;
    }

    .custom-navbar {
        height: 120px;
    }

    .navbar-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 1.43vw, 39.5px);
    }

    #why-social-media 
    {
        margin-top:-90px;
    }

    .pink-block
    {
        margin-top:20px;
        background-color:#f4e0d7;
        padding:20px 40px;
        position: relative;
    }

     #quote 
    {
        /* 45% of the screen height */
        margin-top:50px;
        min-height: 45vh; 
        
       
    }

    #about-andrea h2, #about-natalie h2, #about-rudi h2
    {
        
        margin-bottom:25px;
    }
}

/* Extra large screens and down (1199.98px and down) */
@media (max-width: 1199.98px) { 
    #hero {
        min-height: 665px; 
        padding-top: 85px;
        padding-bottom: 0;
    }

    #about-andrea h2, #about-natalie h2, #about-rudi h2
    {
        
        margin-bottom:25px;
    }

    #why-social-media 
    {
        margin-top:-90px;
    }

    .pink-block
    {
        margin-top:20px;
        background-color:#f4e0d7;
        padding:20px 40px;
        position: relative;
    }

    .swirly-lines {
        bottom: -2px;
    }

    #quote 
    {
        /* 45% of the screen height */
        margin-top:50px;
        min-height: 45vh; 
        
       
    }
}

/* Large screens and down (991.98px and down) */
@media (max-width: 991.98px) { 
    .hero1 {
        font-size: clamp(0rem, 18.8vw, 235.8px);
        text-align:center;
    }

    .hero2 {
        font-size: clamp(3.36rem, 17.4vw, 207.5px);
        text-align:center;
    }

    #hero {
        min-height: calc(50vh - 55px); 
        padding-top: 140px;
        padding-bottom: 0;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 2.83vw, 39.5px);
        text-align: center;
    text-align-last:auto;
    }

    .swirly-lines {
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 0.5vw; 
        min-height: 25px; 
        background: url('../img/swirlylines.png') repeat-x bottom left;
        background-size: auto 100%; 
        z-index: 5;
    }

    .hero-img {
        
        margin-bottom: 50px;
    }

    #why-social-media 
    {
        margin-top:050px;
    }

    .why-social-media-arrow {
       display:none;
    }

    .pink-block
    {
        margin-top:35px;;
        padding:30px 20px;
    }

    #why-social-media h2
    {
        line-height: 46px;
        margin:0 0 35px 0;
    }
    #quote 
    {
        /* 45% of the screen height */
        margin-top:15px;
        min-height: 40vh; 
        
       
    }

    #packages ul 
    {
        margin-top:25px;
        margin-bottom:25px;
    }

    .whatsapp-me-btn
    {
        margin-top:15px;
        margin-bottom:25px;
    }

    #about-andrea h2, #about-natalie h2, #about-rudi h2
    {
        
        margin-bottom:25px;
    }
}

/* Medium screens and down (767.98px and down) */
@media (max-width: 767.98px) { 
    /* Add tablet-specific overrides here */
    
}

/* Small screens and down (575.98px and down) */
@media (max-width: 575.98px) { 
    .hero1 {
        font-size: clamp(0rem, 20.8vw, 100px);
    }

    .hero2 {
        font-size: clamp(3.36rem, 18vw, 207.5px);
    }

    #hero {
        min-height: calc(50vh - 55px); 
        padding-top: 150px;
        padding-bottom: 0;
    }

    .hero-img {
        
        margin-top: 0;
    }


    #why-social-media 
    {
        margin-top:50px;
    }

    #why-social-media h2
    {
        line-height: 46px;
        margin:0 0 35px 0;
    }

    .pink-block
    {
        margin-top:35px;;
        padding:30px 20px;
    }

    .why-social-media-arrow {
       display:none;
    }

    #quote 
    {
        /* 45% of the screen height */
        margin-top:15px;
        min-height: 40vh; 
        
       
    }

    #packages h2
    {
        
        margin:35px 0 28px 0;
    }

    #packages ul 
    {
        margin-top:25px;
        margin-bottom:25px;
    }

    #about-andrea, #about-rudi
    {
        margin-top:35px;
    }

    #about-andrea h2, #about-natalie h2, #about-rudi h2
    {
        
        margin-bottom:25px;
    }

    .testimonial-text {
        font-family: 'Playfair Display', serif;
        font-weight: 600;
        font-size: clamp(1.0rem, 18px, 2rem);
        line-height: 1.2;
        margin-bottom: 2rem;
        color: #333029;
        padding:0 20px;
    }

    .testimonial-inner {
        height: 700px; 
    }

    .whatsapp-me-btn
    {
        margin-top:15px;
        margin-bottom:25px;
    }

    .navbar-collapse
    {
        background-color:#fff !important;
        padding:0 20px;
        justify-content: center;
    }
}

/* ==========================================================================
   ULTRA-WIDE OVERRIDE (Scales UP from the base desktop styles)
   ========================================================================== */
@media (min-width: 2560px) {
    .hero1 {
        font-size: clamp(4rem, 11.9vw, 246.8px);
    }

    .hero2 {
        font-size: clamp(3.36rem, 10vw, 207.5px);
    }

    #hero {
        margin-top: 155px;
    }

    .custom-navbar {
        height: 155px;
    }

    .navbar-container {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }

    .hero-subtitle {
        font-size: clamp(1.2rem, 2vw, 39.5px);
    }
}