html, body {
    overflow-x: hidden;
    width: 100%;
}

/* ==========================================================================
   NAVBAR STYLES
   ========================================================================== */

/* Base navbar styles */
.custom-navbar {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* 25px Gradient shadow effect */
.custom-navbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none; 
}

/* Adjust logo size so it fits nicely */
.nav-logo {
    max-height: 50px; 
    width: auto;
}

/* Desktop Specific Adjustments */
@media (min-width: 992px) {
    .custom-navbar {
        height: 155px;
    }
    
    .navbar-container {
        padding-left: 100px !important;
        padding-right: 100px !important;
        height: 100%;
    }
    
    /* Center items vertically in the 155px tall space */
    .navbar-brand, 
    .navbar-collapse {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .nav-logo {
        max-height: 80px; 
    }
}

/* Instagram Icon Styling */
.instagram-link {
    color: #333029;
    font-size: 1.5rem;
    line-height: 1;
    transition: opacity 0.3s ease;
}

.instagram-link:hover {
    opacity: 0.7;
    color: #333029;
}

/* Exact Contact Button Styles from SquareSpace */
.btn-contact {
    background-color: #333029;
    border-radius: 300px;
    color: #fafafa;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12.6px;
    letter-spacing: -0.252px;
    padding: 15.12px 25.2px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-contact:hover {
    background-color: #000000;
    color: #ffffff;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
#hero {
    background-color: #8ea9a0;
    width: 100%;
    /* Ensure it fills the screen height, offsetting the 155px desktop navbar */
    min-height: calc(90vh - 155px); 
    margin-top: 80px; /* Offset for mobile nav */
    display: flex;
    align-items: center;
    min-height: 800px;
}

.hero-container {
    padding-top: 0;
    padding-bottom: 0; /* Make room for the swirly lines */
}

@media (min-width: 992px) {
    #hero {
        margin-top: 155px; /* Offset for desktop nav */
    }
}

/* Responsive Typography using clamp().
   Format: clamp(minimum size, preferred scalable size, maximum size)
   This keeps the exact ratio of 246.8 to 207.5 so the edges align perfectly.
*/
.hero1 {
    color: #f4e0d7;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    /* Scales dynamically, caps out at your requested 246.8px */
    font-size: clamp(4rem, 11.9vw, 246.8px);
    line-height: 1;
    margin-bottom: 0;
}

.hero2 {
    color: #f4e0d7;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    /* Scales dynamically, caps out at your requested 207.5px */
    font-size: clamp(3.36rem, 10vw, 207.5px);
    line-height: 1;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1.2rem, 2vw, 39.5px);
    letter-spacing: -0.308px;
    line-height: 1.3;
    
    /* The magic properties for single-line justification */
    display: block;
    width: 100%;
    text-align: justify;
    text-align-last: justify;
}

/* Image Styling */
.hero-img-col {
    display: flex;
    align-items: center;
}

.hero-img {
    width: 100%;
    max-width: 800px; /* Prevents it from getting too massive on ultrawides */
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Optional: adds a slight softening to the image edges */
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .hero-img {
        margin-top: 0;
    }
}

.swirly-lines {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    /* 4vw means the height will always be 4% of the screen's width */
    height: 1vw; 
    /* A safety net so it doesn't become microscopically thin on small phones */
    min-height: 25px; 
    background: url('../img/swirlylines.png') repeat-x bottom left;
    /* 'auto 100%' forces the pattern to perfectly fill the dynamic height while keeping its native proportions */
    background-size: auto 100%; 
    z-index: 5;
}

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

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

#why-social-media h2
{
    font-family: 'Playfair Display', serif;
    color:#333029;
    font-size:56px;
    font-weight: 600;
    line-height: 56px;
    margin:128px 0 28px 0;
}

#why-social-media p
{
    color:#333029;
    font-size:16px;
    line-height: 20px;
    margin:14px 0;
    letter-spacing: -0.3px;
}

/* ==========================================================================
   WHY SOCIAL MEDIA MATTERS SECTION
   ========================================================================== */



.why-social-media-arrow {
    position: absolute;
    top: 50%; /* Vertically centers the top edge of the image */
    transform: translateY(-50%); /* Pulls the image up by half its height for true centering */
    left: -171px; /* Pushes the arrow outside the left edge. Adjust this based on the arrow's actual width */
    max-width: 171px; /* Change this to match your actual image size */
    z-index: 10;
}



/* ==========================================================================
   QUOTE SECTION
   ========================================================================== */
#quote {
    /* 45% of the screen height */
    margin-top:150px;
    min-height: 55vh; 
    
    /* Flexbox to perfectly center the text vertically */
    display: flex;
    align-items: center;
    
    /* Layer 1: The 68% transparent #9f958d overlay */
    /* Layer 2: The laptop image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)), url('../img/laptop.webp');
    
    /* Forces the image to stretch edge-to-edge without distorting */
    background-size: cover; 
    
    /* Centers the image both vertically and horizontally */
    background-position: center; 
    background-repeat: no-repeat;
}

/* Fix for Bootstrap rows outside of containers */
#quote .row {
    width: 100%;
    margin: 0; /* Prevents an annoying horizontal scrollbar */
}

#quote h2 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    
    /* Maxes out at your 56px, but scales down to 2rem on small screens */
    font-size: clamp(2rem, 4vw, 56px); 
    
    /* Using 1.2 instead of exactly 54px so it adapts when the text scales down on mobile */
    line-height: 1.2; 
    text-align: center;
}



#packages h2
{
    font-family: 'Playfair Display', serif;
    color:#333029;
    font-size:56px;
    font-weight: 600;
    line-height: 56px;
    margin:128px 0 28px 0;
}

#packages h3
{
    font-family: 'Playfair Display', serif;
    color:#333029;
    font-size:30px;
    font-weight: 600;
    line-height: 31px;
    margin:0 0 28px 0;
}

#packages h4
{
    font-family: 'Open Sans', sans-serif;
    color:#333029;
    font-size:20px;
    font-weight: normal;
    line-height: 25px;
    font-style:italic;
}

#packages ul 
{
    padding-left:0;
    margin-left:0;
    margin-top:75px;
    font-size:15px;
    line-height:20px;
    letter-spacing:-0.308px;
    margin-bottom:45px;
}

#packages ul li
{
   list-style: none;
   padding-left:0;
   margin-left:0;
}

#packages h3.package-cost
{
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing:-0.308px;
    border-top:1px solid #504e4a;
    padding-top:15px;
}

/* ==========================================================================
   PACKAGES SECTION
   ========================================================================== */


.packages-most-popular {
    position: absolute;
    bottom: -7.5%;
    right: 15%;
    width: 25%;
    z-index: 10;
}

/* ==========================================================================
   IMAGE UTILITIES
   ========================================================================== */
.img-square {
    aspect-ratio: 1 / 1;
    object-fit: cover; /* This prevents the image from warping, acting like a crop */
    width: 100%; /* Ensures it still fills the bootstrap column properly */
}

#about-andrea, #about-rudi
{
    background-color:#8ea9a0;
    padding:50px 0;
    margin-top:150px;
}

#about-rudi
{
    margin-top: 0px;
}

#about-andrea h4, #about-natalie h4, #about-rudi h4
{
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    text-transform: uppercase;
    font-weight:700;
    color:#333029;
}

#about-andrea h2, #about-natalie h2, #about-rudi h2
{
    font-family: 'Playfair Display', serif;
    font-size:35px;
    font-weight:700;
    margin-bottom:75px;
}

#about-andrea h2, #about-rudi h2
{    
    color:#fff;
}




#about-natalie h2
{    
    color:#333029;
}
#about-andrea p, #about-natalie p, #about-rudi p
{
    font-size:16px;
    margin:14px 0;
    line-height: 20px;
    letter-spacing: -0.308px;
}

#about-natalie
{
    background-color:#f4e0d7;
    padding:50px 0;
}


/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

#testimonials {
    background-color: #ffffff; /* Or whatever your background should be */
}

/* This is the magic fixed height. Adjust it so it clears your longest testimonial */
.testimonial-inner {
    height: 600px; 
}

/* Scaling text down smoothly on mobile */
.testimonial-text {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 26px, 2rem);
    line-height: 1.2;
    margin-bottom: 2rem;
    color: #333029;
    padding:0 70px;
}

.testimonial-author {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 1rem;
    color: #333029;
    margin-bottom: 0.5rem;
}

/* Logo Sizing */
.testimonial-logo {
    height: 160px; /* The fixed uniform height */
    width: 300px; /* The fixed uniform width */
    object-fit: contain; /* Forces the image to fit inside the box without stretching */
    margin-top: 1rem;
}

/* Custom Round Slider Controls */
.custom-slider-btn {
    width: 60px;
    opacity: 1; /* Bootstrap defaults this to faded, we want it solid */
}

.slider-circle {
    width: 45px;
    height: 45px;
    border: 1px solid #333029;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.slider-circle i {
    color: #333029;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.slider-circle:hover {
    background-color: #333029;
}

.slider-circle:hover i {
    color: #ffffff;
}

/* Push arrows to the absolute edges on mobile */
@media (max-width: 991px) {
    .custom-slider-btn {
        width: 40px;
    }
    /* Reduce padding on mobile so text fits between the arrows */
    .carousel-item > div {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

#contact
{
    background-color:#f4e0d7;
    padding:100px 40px;
}

#contact h2
{
    font-size:56px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    margin-bottom:28px;

}

.whatsapp-me-btn
{
    margin-top:75px;
}

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

/* Base styling for all inputs and textareas in the contact section */
#contact .form-control {
    background-color: #f4e0d7;
    border: 1px solid #333029;
    color: #333029; /* Ensures the text people type is also your dark color */
}

/* Overrides the default Bootstrap blue glow when a user clicks the field */
#contact .form-control:focus {
    background-color: #f4e0d7;
    border-color: #333029;
    /* Creates a subtle glow using your dark color at 25% opacity */
    box-shadow: 0 0 0 0.25rem rgba(51, 48, 41, 0.25); 
}



#footer
{
    background-color: #8ea9a0;
    padding:100px 0;
}

#footer img
{
    max-width:450px;
}

#footer h3
{
    font-family: 'Playfair Display', serif;
    font-size:20px;
    margin-bottom:20px;
}

#footer a
{
    text-decoration: none;
    font-weight:bold;
    color: #333029;
}