@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(/font/bricolage-grotesque.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/font/inter.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root{
    --main : #FAEDCD;
    --main_light:#faf2df;
    --main_dark: #ffedc0;
    --secondary:#866e56;
    --highlight : #D4A373;
    --highlight_hover : #c58b51;
    --black_text : #0E1F2B;
    --white_text : #fcfaf5;
    --green : #A3CBA3;
    --main_transparency : #faedcdf5;
    --secondary_transparency:#866e568f;
    /*PANEL COLORS*/
    --draft_background : #7e4312ff;
    --pending_background : #8a8a8aff;
    --needs_review_background : #d69d00ff;
    --denied_background : #ec7870ff;
    --approved_background : #78be7bff;
    --corrected_pending_background : #6699d4ff;
    --partially_published_background : #e3a3e6ff;
    --published_background : #a37fb8ff;

    --video_background : #a37fb8ff;
    --story_background: #6699d4ff;
    --post-carousel_background: #ec7870ff;
    --profile_changes_background: #78be7bff;

    --development_blue : #4a72c7;
}

*{margin:0;padding:0;font-family: "Inter", sans-serif !important;color:#0E1F2B}

*::selection{
    background-color:var(--highlight);
    color:var(--main);
    box-shadow: none;
    text-shadow: none;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

html{overflow-x: hidden;}

/* Prevent horizontal movement during vertical scrolling */
html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none; /* Prevent horizontal overscroll */
    width: 100%;
    scroll-snap-type: y mandatory;
}

body{background-color:var(--main);}

p,a{font-weight: 400;}

h1,h2,h3,h4,h5{font-weight: 800; font-family: "Bricolage Grotesque", sans-serif !important;}

input, textarea, select {
    font-size: 18px;
}

/*Formulario copper*/

/*#cpfh{
    z-index:99 !important;
}*/

#language-banner{
    position:fixed;
    background: var(--highlight);
    color: var(--main);
    text-align: center;
    height:30px;
    display:flex;
    margin:0;
    justify-content:center;
    z-index:5;
    width:100vw;
    align-items:center;
}

nav{
    height:10vh;
    display:flex;
    width:100vw;
    justify-content:space-around;
    align-items: center;
    background-color: var(--main);
    position: fixed !important;
    z-index: 10000;
    -webkit-box-shadow: 0px -3px 31px 5px rgba(0,0,0,0.46); 
    box-shadow: 0px -3px 31px 5px rgba(0,0,0,0.46);
    user-select: none;
    -webkit-user-select: none; /* For older browsers */
    -moz-user-select: none; /* For Firefox */
}

    #brand_container{
        display:flex;
        align-items: center;
        text-decoration: none;
        width:max-content;
        grid-column:2/5;
    }

        #brand_container div:last-of-type{
            margin-left:2.5rem;
            position:relative;
        }

#language-banner + nav{
    margin-top:30px;
}

#logoNav{height:7.5vh;position: relative;display:flex;justify-content: center;align-items: center;}

    #logoNav img{
        height:7.5vh;
        position: absolute;
        transition:0.2s all ease-in-out;
    }

    #brand_container:hover{
        #logoNav img:last-of-type{
            height:6.19vh;
        }

    }

.navLinks_container{
    list-style: none;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    width: 60%;
}

    .navLinks_container li a{
        text-decoration:none;
    }

    .navLinks_container li a{
        transition:all 0.3s ease-in-out;
    }

    .navLinks_container li a:hover{
        color:var(--secondary) !important;
        padding:0 1rem;
        font-weight: 700;
    }

    #changeRegion_button img{
        height:30px;
    }

    #privateZone_button a{
        display:flex;
        align-items: center;
    }

        #privateZone_button a img{
            height:20px;
            margin:0.3rem;
        }

#menu{display:none;}
    
main{padding-top:10vh;}

/* Estilos para páginas legales (privacy.html, terms.html) */
body.legal-page {
    font-family: Arial, sans-serif;
    background-color: var(--main);
    padding: 0;
    margin: 0;
}

body.legal-page main {
    padding-top: 10vh;
    margin: 40px auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    max-width: 80vw;
}

body.legal-page h1 {
    color: var(--secondary);
}

body.legal-page h2 {
    color: var(--secondary);
    text-shadow: none;
    font-size: max(2rem, 2.5vw);
    margin-top: 3rem;
    margin-bottom: 0.5rem;
}

body.legal-page h3 {
    color: var(--secondary);
    font-size: max(1rem, 1.2vw);
    margin-top: 2rem;
}

body.legal-page h4 {
    color: var(--secondary);
    font-size: max(0.95rem, 1vw);
    font-weight: 700;
    margin-top: 1.5rem;
}

body.legal-page p {
    color: var(--black_text);
    line-height: 1.6;
}

body.legal-page ul {
    color: var(--black_text);
    margin-left: 2rem;
    margin-top: 1rem;
}

body.legal-page li {
    color: var(--black_text);
    margin-bottom: 0.5rem;
}

body.legal-page main a {
    color: var(--secondary);
    text-decoration: underline;
}

/* Corregir estilos del logo en la navegación para páginas legales */
body.legal-page #brand_container h3,
body.legal-page #brand_container p {
    color: var(--black_text) !important;
    margin: 0 !important;
}

body.legal-page #brand_container h3 {
    font-size: unset;
    margin-top: 0 !important;
}

body.legal-page #brand_container div:last-of-type {
    position: relative;
}

h2{font-size:max(4vw,4vh);text-shadow: 8px 8px 7px #C2C2C2;}

#intro{
    width:100vw;
    height:80vh;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position:fixed;
    z-index:1;
}

    #blackCourtain_intro{
        /* background-color:#00000083; */
        background-image:url("/img/arrow_up.svg");
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;
        width:inherit;
        height:85vh;
        z-index:2;
        position: absolute;
        opacity:8%;
    }

    #intro h1{
        font-size:max(5.7vw,5.7vh);
        z-index:3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color:var(--secondary);
        margin:0 1rem;
    }

    #intro h2{z-index:3;color:var(--black_text);text-shadow: none;font-size:max(2.5vw,3.5vh)}

    #intro #socialMedia_container{
        width:60vw;
        display:flex;
        justify-content: space-around;
        margin:1rem 0;
    }

    #intro p{
        margin:1rem;
        font-size:max(2.5vh,2.5vw,20px);
        z-index:3;
    }

    #introCTA{
        width:50%;
        min-width: 300px;
        max-width: 100vw;
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        margin:2rem 0 0 0;
        z-index:2;
    }

        #introCTA a button{
            width:fit-content;
            padding:1rem 2rem;
            border:none;
            border-radius:0.5rem;
            font-size:max(1.3vw,1.3vh,15px);
            cursor: pointer;
            margin:1rem 0;
        }

        @media (max-width:600px){
            #introCTA a button{
                padding:1rem 2rem;
                font-size:max(3vh,3vw,20px);
            }
        }

        #introCTA a button:hover{
            background-color: var(--main) !important;
            border:1px solid var(--secondary);
            color:var(--secondary) !important;
            padding:calc(1rem-1px) calc(2rem-1px);
        }

        #introCTA a:first-of-type button{
            background-color: var(--secondary);
            color:var(--main);
        }

        #introCTA a:last-of-type button{
            background-color: var(--highlight);
            color:var(--black_text);
        }

#page_container{
    /* border-top:1px solid black; */
    -webkit-box-shadow: 0px -3px 31px 5px rgba(0,0,0,0.46); 
    box-shadow: 0px 3px 31px 5px rgba(0,0,0,0.46);
    display:flex;
    flex-direction:column;
    align-items: center;
    width:100%;
    max-width: 100vw;
    margin-top:80vh;
    z-index:4;
    position:absolute;
    background: rgb(250,237,205);
    background: linear-gradient(180deg, var(--main) 30%, var(--highlight) 200%);
}

#aboutUs{
    display:flex;
    flex-direction: column;
    align-items: center;
    /* background-color:var(--main);background: none; */
    width:100%;
    border-top:1px solid black;
}

#logoAboutUs, .logoAnimation{
    height: 206px;
    position: relative;
    display:flex;
    justify-content: center;
    align-items:center;
    user-select: none;
    -webkit-user-select: none; /* For older browsers */
    -moz-user-select: none; /* For Firefox */
}

    #logoAboutUs img, .logoAnimation img{
        height:100%;
        position:absolute;
    }

    #logoAboutUs img:first-of-type, .logoAnimation img:first-of-type{
        z-index:3;
    }

    #logoAboutUs img:last-of-type{
        z-index: 2;
        transition: transform 0.1s ease-out; /* Smooth transition for movement */
    }

    .logoAnimation img:last-of-type{
        z-index: 2;
        transition: transform 0.3s ease-out; /* Smooth transition for movement */
    }

    .aboutUsInfo_container{
        display:flex;
        align-items: center;
        height:auto;
        margin:75px 0;
    }

        .aboutUsInfo_container h2{
            margin-right:1rem;
        }

        .aboutUsInfo_container p{
            border-left:1px solid black;
            padding-left:1rem;
            width:100vw;
            max-width: 500px;
            font-size:max(1vw,2vh)
        }

#schedule_container{
    width:100vw;
    max-width:1000px;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:10vh;
    background-color:var(--secondary);
    padding:3rem 0;
    border-radius:2rem;
    height: fit-content;
    
}

    #schedule_container h2::selection, #schedule_container h3::selection{
        background-color:var(--main) !important;
        color:var(--secondary) !important
    }

    #schedule_container h2, #schedule_container h3{
        text-shadow:none !important;
        color:white !important;
    }

    #schedule_container h3{
        margin-bottom:2rem;
        font-size:max(3vh,2vw,25px);
        margin:5vh 10vw;
        text-align:left;
        width:80%;
    }

    #schedule_container h3:nth-child(4), #schedule_container h3:nth-child(3){
        color:var(--main) !important
    }

    #schedule_container > a > button{
        padding:1.5rem 2rem;
        background-color:var(--main);
        border-radius:0.5rem;
        font-size:max(1.5vw,2.3vh,20px);
        -webkit-box-shadow: 10px 10px 38px 2px #00000050;
        box-shadow: 10px 10px 38px 2px #00000050;
        cursor:pointer;
        transition:all 0.3s ease-in-out;
        border:none;
    }

    #schedule_container a button:hover{
        -webkit-box-shadow: 10px 10px 38px -6px #00000050; 
        box-shadow: 10px 10px 38px -6px #00000050;
        background-color:var(--highlight_hover)
    }

#testimonials_container{
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin:4rem 0;
    max-width:100vw;
}

    .testimonial{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-evenly;
        flex-wrap: wrap;
        width:450px;
        max-width: 90vw; 
        padding:0.5rem;
        border:1px solid var(--secondary);
        margin:1rem 2rem;
        border-radius:0.5rem;
    }

        .testimonial_textContent{
            display:flex;
            flex-direction: column;
            align-items: center;
            padding:2rem;
            text-align: center;
        }

            .testimonial_textContent h2, .testimonial_textContent h3,.testimonial_textContent h4{
                width:100% !important;
                text-align: center;
            }

        .testimonial_mediaContent{
            padding:2rem;
            display:flex;
            align-items: center;
            justify-content: center;
        }

            .testimonial_mediaContent video{
                width:70%;
                display:none;
            }

            .testimonial_mediaContent img{
                width:350px;
                max-width: 75vw;
            }

        @media(max-width:865px){
            .testimonial_mediaContent button{display:none}
            .testimonial_mediaContent video{display:block}
            .testimonial_mediaContent {padding:0;}
        }

#services{
    width:100%;
    /* background-color: var(--main);background: none; */
    display:flex;
    flex-direction:column;
    align-items: center;
    padding-bottom:2rem;
}

    #services h2{
        margin-top:2rem;
    }

    #concerns_container{ 
        margin:10vh 10vw;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: max(22vh,200px);
        row-gap:4rem;
        column-gap:1.5rem;
    }

        .concern{
            padding:1rem 0.5rem;
            border-radius:1rem;
            border:4px solid var(--secondary);
            height:100%;
            cursor:default;
        }

        @media (min-width:1000px){
            .concern{
                transition:all 0.4s ease-in-out;
            }

            .concern:hover{
                border-color:var(--black_text)
            }
        }

            .concernHeading{
                display:flex;
                align-items: center;
            }

                .concernHeading img{
                    height:max(17px,1.7vw,3vh);
                    margin:0 1rem;
                }

                .concernHeading h4{
                    font-size:max(17px,1.7vw,3vh);
                }

            .concernContent{
                margin:0.5rem 1rem;
            }


        
        /*Specific styles for the first concern*/
            
        .concern:nth-child(1) .concernContent div{
            display:flex;
            align-items:center;
            margin:1rem 0;
        }
        
        .concern:nth-child(1) .concernContent div div{
            border-radius:50%;
            border:1px solid black;
            width:4rem;
            height:4rem;
            margin:0 1rem;
        }

            .concern:nth-child(1) .concernContent div div:nth-child(1){
                background-color:var(--main)
            }

            .concern:nth-child(1) .concernContent div div:nth-child(2){
                background-color:var(--secondary)
            }

            .concern:nth-child(1) .concernContent div div:nth-child(3){
                background-color:var(--black_text)
            }

        /*Specific styles for the second concern*/

        .concern:nth-child(2) .concernContent h4{font-size:max(18px,1.5vw,1.5vh)}

        @media (max-width:1391px){
            #concerns_container{
                grid-template-columns: repeat(2,1fr);
            }
        }

        @media (min-width:761px){
            #concerns_container-mobile{
                display:none;
            }
        }

        @media (max-width:760px){
            #concerns_container{
                /* grid-template-columns: 1fr;
                grid-template-rows: 23vh; */
                display:none;
            }

            #concerns_container-mobile{
                display:flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;
            }

            .concern-mobile:first-of-type{
                margin-top:2rem;
            }

            .concern-mobile{
                border:2px solid var(--secondary);
                border-radius:0.2rem;
                width:80vw;
                padding:1rem 0.5rem;
                transition:all 0.4s ease-in-out;
                margin:0.5rem 0;
            }

                .concern-mobile .concernHeading{
                    display:grid;
                    grid-template-columns: repeat(5,1fr);
                }

                    .concern-mobile .concerHeading h4{
                        grid-column:2/5;
                    }

                    .concernArrow{
                        grid-column:5/6;
                    }
            

            details {overflow: hidden;}
            
            details > summary {
                list-style: none;
            }
              
            details > summary::-webkit-details-marker {
              display: none;
            }
                      
        }


        /* #concerns h4{
            width:100%;
            text-align: center;
            font-size:max(15px,1.7vh,1.7vw);
            z-index:7;
            height:fit-content;
            background-color: var(--secondary);
            border-radius: 0.5rem;
            padding:0.5rem 1rem;
            color:var(--main)
        }

        #concerns h4:nth-child(1){
            align-self:self-end;
        }

        #concerns h4:nth-child(2){
            grid-column:3/4;
            grid-row:2/3;
        }

        #concerns h4:nth-child(3){
            grid-row:3/4;
            grid-column:1/3;
        }

        #logoConcerns{
            grid-column:2/3;
            grid-row:2/3;
            height:30vh;
            z-index:6;
        } */

    #whatWeDo_grid{
        display: grid;
        grid-template-columns: 1fr;
        margin:1rem 10vw;
    }

        #whatWeDo_grid p{
            font-size:2vw; /*Importante que sea así*/
        }

        .contentCharacteristics{margin:0 0 0 1rem;}

        #thatIs_container{display:none;}

        @media (min-width:501px){
            #whatWeDo_grid p:nth-child(3){
                grid-column:2/3;
            }
    
            #whatWeDo_grid p:nth-child(4){
                grid-column:2/3;
            }
    
            #whatWeDo_grid p:nth-child(6){
                grid-column:1/3;
                margin:0.5rem;
            }
    
            #whatWeDo_grid p:nth-child(7){
                grid-column:1/3;
                margin:0.5rem;
            }
        }

    #services h3{
        font-size:max(3vh,2vw,15px);
        width:70vw;
        text-align:center;
        margin:1rem 0 0 0;
    }

        /* #services h3:last-of-type{
            margin:2rem 0 0 0;
        } */

    #services_container{
        display:flex;
        width:100%;
        justify-content: space-evenly;
        flex-wrap:wrap;
    }

        .service_container{
            width:400px;
            height:60vh;
            min-width:20%;
            display:flex;
            flex-direction:column;
            justify-content: space-evenly;
            align-items: center;
            /* border:2px solid var(--highlight);
            padding:1rem;
            border-radius:0.5rem; */
        }

            .service_container h3{
                font-size:max(2.5vh,1.5vw);
                text-align:center;
                text-shadow: 8px 8px 7px #C2C2C2;
            }

            .service_container button,#services button,#dealBox button{
                border:2px solid var(--highlight);
                background-color:var(--main);
                padding:1.5rem 2.8rem;
                border-radius:0.5rem;
                transition:0.2s all ease-in-out;
                cursor:pointer;
                font-size:max(3vh,2vh,15px);
                -webkit-box-shadow: 10px 10px 38px 2px #00000050;
                box-shadow: 10px 10px 38px 2px #00000050;
            }

            .service_container button:hover,#services button:hover,#dealBox button:hover{
                background-color:var(--highlight);
                -webkit-box-shadow: 10px 10px 38px -6px #00000050;
                box-shadow: 10px 10px 38px -6px #00000050;
            }

    /* Services Slider */
    .services-slider {
        position: relative;
        width: 100%;
        min-width: 80vw;
        max-width: 1200px;
        margin: 3rem auto;
        overflow: visible;
    }

    .slider-container {
        position: relative;
        width: 100%;
        min-height: 400px;
        transition: min-height 0.3s ease;
    }

    .service-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        gap: 3rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
        display: flex;
        align-items: flex-start;
    }

    .service-slide.active {
        position: relative;
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .slide-content {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .slide-content h3 {
        font-size: max(2lvw,2lvh,24px) !important;
        font-weight: 900;
        color: var(--secondary);
        margin-bottom: 1.5rem !important;
        line-height: 1.2;
        text-align:left !important;
        width:inherit !important;
    }

    .slide-content p {
        font-size: max(1.6lvw,1.6lvh,18px) !important;
        line-height: 1.6;
        color: #333;
    }

    .slide-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        box-sizing: border-box;
    }

    .slide-image img {
        width: 100%;
        height: 100%;
        max-height: 450px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    /* Dots Indicators */
    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 2rem;
        z-index: 10;
    }

    .slider-dots .dot {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--highlight);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--highlight);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slider-dots .dot:hover {
        background: var(--highlight);
        color: white;
        transform: scale(1.09);
    }

    .slider-dots .dot.active {
        background: var(--secondary) !important;
        border-color:var(--secondary) !important;
        color: var(--main);
    }

    /* Arrow Navigation (Mobile) */
    .slider-arrows {
        display: none; /* Hidden by default (desktop) */
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-top: 2rem;
        z-index: 10;
    }

    .arrow-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--highlight);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--highlight);
    }

    .arrow-button img {
        width: 24px;
        height: 24px;
        transition: all 0.3s ease;
    }

    .arrow-prev img {
        transform: rotate(90deg);
    }

    .arrow-next img {
        transform: rotate(-90deg);
    }

    .arrow-button:hover {
        background: var(--highlight);
        color: white;
        transform: scale(1.09);
    }

    .arrow-button:hover img {
        filter: brightness(0) invert(1);
    }

    .arrow-button:focus {
        outline: 3px solid var(--highlight);
        outline-offset: 2px;
    }

    .arrow-button:focus:not(:focus-visible) {
        outline: none;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .service-slide {
            display:flex;
            flex-direction:column-reverse;
        }

        .slider-container {
            height: auto;
            min-height: 600px;
        }

        .slide-content {
            padding: 1rem;
            order: 2;
        }

        .slide-image {
            order: 1;
        }

        .slide-image img {
            max-width: 400px;
            margin: 0 auto;
        }

        .slider-dots {
            margin-top: 1.5rem;
        }
    }

    /* Navigation Controls - Hide/Show based on screen size */
    @media (max-width: 600px) {
        /* Hide dots on mobile */
        .slider-dots {
            display: none !important;
        }

        /* Show arrows on mobile */
        .slider-arrows {
            display: flex !important;
        }

        .arrow-button {
            width: 45px;
            height: 45px;
        }
    }

    @media (min-width: 601px) {
        /* Show dots on desktop */
        .slider-dots {
            display: flex !important;
        }

        /* Hide arrows on desktop */
        .slider-arrows {
            display: none !important;
        }
    }


#comparisons_container{
    display:grid;
    grid-template-columns: repeat(2,40vw);
    max-width:80vw;
    margin: 3rem 0;
    user-select: none;
}

    #comparisons_container div{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #comparisons_container h3{
        margin:0 !important;
        max-width:40vw !important;
    }

    #comparisons_container img{
        width:30vw;
        max-width: 40vw;
        margin:2rem auto;
    }


.comparisons_container-mobile {
    position: relative;
    width: 80vw;
    max-width: 800px;
    aspect-ratio: 1 / 1.25;
    overflow: hidden;
    border-radius: 10px;
    cursor: ew-resize;
    touch-action: pan-y; /* ✅ Allow vertical scroll, block horizontal gestures */
    display:none;
    margin:1rem 0;
}

      

  .comparisons_container-mobile img {
    position: absolute;
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    user-select: none;
    pointer-events: none;
  }

  .after-image {
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.2s ease-out; /* Slightly longer transition for smoother effect */
}

    .slider-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px;
        background: #ffffffaa;
        border-left: 1px solid #999;
        border-right: 1px solid #999;
        transition: left 0.2s ease-out; /* Smooth transition for movement */
        pointer-events: none;
    }

.comparisonsText-mobile{
    display: none;
}
    /* 
        #comparisons_container img:nth-child(2){
            grid-row:4/5;
        } */

@media(max-width:1100px){
    #comparisons_container{
        display:none;
    }

    .comparisons_container-mobile{
        display:block;
        width:300px;
        max-width:80vw;
        max-height:70vh;
    }

    .comparisonsText-computer{
        display:none;
    }
    .comparisonsText-mobile{
        display:flex;
        width:300px;
        max-width:80vw;
        align-items: center;
        justify-content: space-around
    }
}

@media (max-width:840px){

    #comparisons_container{
        grid-template-columns: 1fr;
    }

        #comparisons_container h3{
            text-align:center !important;
            width:80vw !important;
            max-width:80vw !important;
        }

            #comparisons_container h3:nth-child(2){
                grid-row:3/4
            }
            #comparisons_container img:nth-child(2){
                grid-row:4/5;
            }

            #comparisons_container img{
                width:80vw;
                max-width:80vw;
            }
}

#footer{
    z-index:2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: var(--main);background: none; */
    width: 100%;
    padding: 0 0 2rem 0;
}

    #footer img{
        width:75px;
    }

    #footer_links{
        width:40vw;
        /* display:grid;
        grid-template-columns: repeat(3,1fr); */
        display:flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top:max(1vh,1vw);
    }

        #footer_links a{
            color:black;
            justify-self: center;
        }


@media(max-width:1100px){
    #schedule_container{
        max-width:800px;
    }
}

@media (max-width:840px){
    nav{
        display:grid;
        grid-template-columns: repeat(5,1fr);
    }

    .navLinks_container{
        background-color:var(--main_transparency);
        position:fixed;
        z-index:101 !important;
        height:90vh;
        bottom:0;
        width:100vw;
        display:none;
        flex-direction:column;
        justify-content: space-around;
        align-items: center;
    }

        nav a{
            grid-column: 3/4;
        }
        #changeRegion_button{
            display:none;
        }

        .navLinks_container li a{
            font-weight: 700;
            font-size:max(3vw,3vh);
        }

        .navLinks_container li a:hover{
            padding:0;
        }
        #bgVideo{
            height:100%;
            width: auto !important;
        }
        #menu{
            display:block;
            height:7vh;
            grid-column:5/6;
            z-index:102;
        }

    #intro h2{padding:0 2rem;}
    
    #logoAboutUs, .logoAnimation{display:none;}
    
    .aboutUsInfo_container{
        display:flex;
        flex-direction: column;
        margin:1rem 0;
    }

        .aboutUsInfo_container h2{
            margin-bottom:max(2vh,2vw);
        }

        .aboutUsInfo_container p{
            padding:0 1rem;
            margin:0 1rem;
            width:auto;
        }

    #schedule_container{
        border-radius:2rem 2rem 0 0 !important;
        max-width:none;
    }

        #schedule_container h3{margin-bottom:2rem;}

    #services{
        padding-top:max(5vh,5vw)
    }

        #services h2{
            width:85vw;
        }

        #services h3{
            width:80vw;
        }

        #services h3:first-of-type{
            text-align:left;
        }

    #whatWeDo_grid{
        grid-template-columns: 1fr;
    }

        #whatWeDo_grid p{
            font-size:max(3vh,3vw,20px);
        }

        #thatIs_container{display:block;height:8vh;}

        /* #whatWeDo_grid p:nth-child(2),#whatWeDo_grid p:nth-child(3),#whatWeDo_grid p:nth-child(4){
            display:none;
        } */

    .service_container p{
        padding:0 1rem;
        margin:0 1rem;
        width:auto;
    }

    .service_container a button{
        width:75vw;
    }

    #footer{
        padding-bottom: max(15vh,15vw);
        background-color:var(--secondary);
    }

        #footer h3, #footer p, #footer a{
            color:var(--white_text);
        }

        #footer_links{
            width:100%;
        }

            #footer_links a{
                transition:all 0.5s ease-in-out;
            }
}

#noLoadingSchedule a{
    color:#cee8f3;
    font-weight: 700;
}


#analyticsAdvice{
    width:calc(100vw - 2rem);
    position:fixed;
    bottom:0;
    height:calc(fit-content - 2rem);
    display:flex;
    background-color:var(--secondary);
    z-index:100;
    padding:2rem;
    justify-content: center;
    align-items: center;
}

    #analyticsAdvice p, #analyticsAdvice a{color:var(--main) !important;}

    #analyticsAdvice p{
        margin:0 2rem 0 0;
        font-size:max(1.5vw,1.5vh,15px)
    }

    #analyticsButton{
        padding:1rem 2rem;
        margin:0 2rem 0 0;
        border-radius:0.5rem;
        background-color:var(--main);
        color:var(--secondary);
        font-weight: 900;
        cursor:pointer;
        transition:all 0.2s ease-in-out;
    }

    #analyticsButton:hover{
        background-color:var(--secondary);
        color:var(--main)
    }

#closeDealBox_container{
    position:absolute;
    width:80vw;
    max-width:500px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    height:auto;
}

    #closeDealBox{
        height:35px;
        width:35px;
        cursor:pointer;
    }

        #closeDealBox hr{
            width:30px;
            height:3px;
            position:absolute;
            background-color:var(--black_text);
            border:none;
        }

        #closeDealBox hr:first-of-type{
            transform:rotate(45deg)
        }

        #closeDealBox hr:last-of-type{
            transform:rotate(-45deg)
        }

/*Animations*/

.shake{
    animation: shaky 1s linear infinite;
}

@keyframes shaky{
    0%{transform:rotate(0deg);margin:0;}
    25%{transform:rotate(15deg)}
    50%{margin:1rem;}
    75%{transform:rotate(-15deg)}
}


.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    color:transparent;
    border-radius: 4px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.chat-message-from-user .chat-message-markdown p{
    color:var(--main) !important;
}

 /*Embed panel*/
 #dashfluencer-embed{margin-top:15vh;}

/*
  Leaf sprout: places the leaf icon (img/icons/leaf-sprout.svg, traced in
  Inkscape from the real logo artwork) so its stem tip sits exactly at the
  element's `left`/`top` position, growing "out of" whatever point you anchor
  it to (a letter, a photo, etc). Rotation pivots around that same stem tip,
  so the leaf can lean any direction without drifting off-anchor. Anchor
  coords (3.06%, 99.79%) were measured from the traced SVG's own rendered
  alpha channel (stem-tip pixel at 12,472 of its 392x473 canvas), not guessed.

  Usage: wrap the anchor (a letter, a photo...) in a `position:relative` container,
  then add `<img class="leaf-sprout" src="/img/icons/leaf-sprout.svg" alt="" style="left:10px;top:4px;--leaf-size:26px;--leaf-rotate:-12deg;">`
  inside it. `left`/`top` set where the stem touches; `--leaf-size` controls the
  leaf's rendered width (height follows automatically — the `!important`s below
  guard against a stray ancestor `img{height:...}` rule deforming it, which is
  what broke this earlier).
*/
.leaf-sprout{
    position:absolute !important;
    width:var(--leaf-size, 24px) !important;
    height:auto !important;
    aspect-ratio: 391.47202 / 472.6749;
    pointer-events:none;
    user-select:none;
    transform-origin: 3.06% 99.79%;
    transform: translate(-3.06%, -99.79%) rotate(var(--leaf-rotate, 0deg));
}