/* Bright Chalk Font (for Hero Text) */
@font-face {
    font-family: 'Bright Chalk';
    src: url('/fonts/Bright Chalk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Blauer Nue Family */
@font-face {
    font-family: 'Blauer Nue';
    src: url('/fonts/BlauerNue-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/fonts/BlauerNue-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/fonts/BlauerNue-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/fonts/BlauerNue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Blauer Nue';
    src: url('/fonts/BlauerNue-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Gummy Mucus Font */
@font-face {
    font-family: 'Gummy Mucus';
    src: url('/fonts/GummyMucusRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* LT Colored Pencil Font */
@font-face {
    font-family: 'LT Colored Pencil';
    src: url('/fonts/LT-Colored-Pencil.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
.bi.bi-send::before {
    content: ''; /* Clear default icon content */
    display: inline-block;
    width: 1em; /* Adjust size */
    height: 1em; /* Adjust size */
    mask: url('/images/icons/Enviar.svg') no-repeat center;
    -webkit-mask: url('/images/icons/Enviar.svg') no-repeat center;
    background-color: currentColor; /* Inherit text color */
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Hero Container */
.hero-container {
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.lottie-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Place it above other elements */
    pointer-events: none; /* Allow clicks to pass through */
    opacity: 0; /* Start fully transparent */
    transform: scale(0.9); /* Start slightly smaller */
    transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
}

/* Visible state */
.lottie-animation-container.loaded {
    opacity: 1; /* Fully visible */
    transform: scale(1); /* Full size */
}

/* Top Bar (Logo + Social Icons) */
.top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 100px;
    z-index: 20; /* Ensures content is above the image */
}

.logo {
    height: 30px;
}

.social-icons a {
    color: white;
    font-size: 24px;
    pointer-events: auto;
}

.social-icons a img:hover {
    transform: scale(1.2); /* Slight zoom on hover */
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2; /* Ensures content is above the background image */
    pointer-events: none;
}
/* Hero Text Styling */
.hero-content h1 {
    font-family: 'Bright Chalk', sans-serif; /* Use Bright Chalk for the headline */
    font-size: 11rem;
    line-height: 9rem;
    color: #FF005D;
    -webkit-text-stroke: 1px black; /* Stroke width and color */
    text-stroke: 1px black; /* For non-WebKit browsers (experimental) */
}

.hero-content p {
    font-family: 'Blauer Nue', sans-serif; /* Use Blauer Nue for the paragraph */
    font-size: 5rem;
    font-weight: 300; /* Use Light weight */
    color: black;
}

.hero-content .card {
    background-color: #FFE000;
    border: black 2px solid;
    width: fit-content;
    margin-left: -3rem;
    border-radius: 25px;
}

.hero-content p {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2rem;
}

/* General Parallax Container */
.parallax-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

/* Parallax Background Image */
.parallax-image {
    position: absolute;
    top: -4%;
    left: 0;
    width: 100%;
    height: 110vh; /* Larger height to allow for smooth parallax */
    object-fit: cover; /* Ensure the image covers the container */
    transform: translateY(0); /* Start at the top */
    z-index: 1; /* Ensure it stays behind content */
}

/* Content Positioning */
.parallax-container .container {
    position: relative;
    z-index: 2; /* Ensure the content is above the image */
}

.parallax-container .hero-content,
.parallax-container .container {
    /*text-align: center;*/
    /*color: white;*/
}

/* Custom class to hide horizontal scrollbar */
.no-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.card-body {
    font-family: 'Blauer Nue', sans-serif; /* Use Blauer Nue for the paragraph */
}
.modal-content {
    font-family: 'Blauer Nue', sans-serif;
    color: white;
}
.modal-header {
    border-bottom: unset;
}

/* Scrolling Text Section */
.scrolling-text-section {
    background-color: #000; /* Black background */
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent wrapping */
    padding: 10px 0;
    position: relative;
}

/* Scrolling Wrapper */
.scrolling-wrapper {
    display: flex; /* Align items horizontally */
    animation: seamlessScroll 10s linear infinite; /* Smooth scrolling */
}

/* Content Block */
.scrolling-content {
    display: flex; /* Horizontally align text */
}

/* Individual Text */
.scrolling-content span {
    font-family: 'Gummy Mucus', sans-serif; /* Gummy font */
    font-size: 2rem;
    color: #fff;
    padding-right: 2rem; /* Space between text blocks */
    display: inline-block;
}

/* Seamless Scrolling Animation */
@keyframes seamlessScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* New Class: Musical Card */
.musical-card {
    background-color: #C7FB00; /* Adjust color to match the design */
    border-radius: 26px;
    padding: 2rem; /* Adjust spacing as needed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Optional for slight elevation */
}

/* Update for Titles and Description */
.musical-title {
    font-family: 'Blauer Nue', sans-serif;
    font-size: 2.5rem; /* Adjust font size for consistency */
    color: #000000;
    margin-bottom: 1rem;
}

.musical-description {
    font-family: 'Blauer Nue', sans-serif;
    font-size: 1.2rem; /* Adjust font size for consistency */
    color: #000000;
    margin: 0;
}

/* Section Height Adjustment */
.musical-video-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.musical-content {
    height: 70vh;
    border-radius: 26px;
}
.musical-description-1 {
    font-size: 2rem;
}
.musical-description-2 {
    font-size: 0.7rem;
}

/* Closing Section */
.closing-text {
    font-family: 'Gummy Mucus';
    font-size: 3.5rem;
    color: #C7FB00;
    margin: 0;
}


/* Section 4: Interactive Butterflies */
.butterfly-section {
    position: relative;
}
.butterfly-container {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensure smooth interactivity */
}

.butterfly {
    position: absolute;
    width: 100px;
    height: 100px;
    pointer-events: auto; /* Allow interactions */
    cursor: pointer;
    z-index: 3;
}

.butterfly.small-butterfly {
    width: 60px;
    height: 60px;
}

.butterfly.medium-butterfly {
    width: 80px;
    height: 80px;
}

.butterfly.large-butterfly {
    width: 100px;
    height: 100px;
}

.butterfly-message {
    background-color: black;
    color: white;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-family: 'Blauer Nue', sans-serif;
    font-size: 0.9rem;
}
.butterfly-header {
    font-family: 'Gummy Mucus', sans-serif;
    color: #000;
    font-size: 6rem;
}
.custom-popover .popover-body {
    background-color: black; /* Black background */
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-family: 'Gummy Mucus', sans-serif;
    font-size: 1.3rem;
    text-align: center;
}

/* Black arrows */
.custom-popover.popover[data-popper-placement="top"] .popover-arrow::before {
    border-top-color: black !important; /* Adjust the top border to match the popover background */
}

.custom-popover.popover[data-popper-placement="top"] .popover-arrow::after {
    border-top-color: black !important; /* Adjust the inner arrow to match the popover background */
}
.custom-popover.popover[data-popper-placement="bottom"] .popover-arrow::before {
    border-bottom-color: black !important; /* Adjust the top border to match the popover background */
}

.custom-popover.popover[data-popper-placement="bottom"] .popover-arrow::after {
    border-bottom-color: black !important; /* Adjust the inner arrow to match the popover background */
}
.custom-popover.popover[data-popper-placement="left"] .popover-arrow::before {
    border-left-color: black !important; /* Adjust the top border to match the popover background */
}

.custom-popover.popover[data-popper-placement="left"] .popover-arrow::after {
    border-left-color: black !important; /* Adjust the inner arrow to match the popover background */
}
.custom-popover.popover[data-popper-placement="right"] .popover-arrow::before {
    border-right-color: black !important; /* Adjust the top border to match the popover background */
}

.custom-popover.popover[data-popper-placement="right"] .popover-arrow::after {
    border-right-color: black !important; /* Adjust the inner arrow to match the popover background */
}

.custom-popover[data-bs-color="#C7FB00"] .popover-body {
    color: #C7FB00; /* Green text */
}

.custom-popover[data-bs-color="#FF005D"] .popover-body {
    color: #FF005D; /* Pink text */
}

.custom-popover[data-bs-color="#4BABBF"] .popover-body {
    color: #4BABBF; /* Blue text */
}


/* Section: Sharing */
.sharing-preview-container {
    max-width: 35%;
    position: relative;
}
/* Day/Night Toggle */
.btn-toggle {
    background: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-toggle.active {
    background: #FFD700;
}

/* Sharing Image */
.sharing-preview-image {
    width: 100%;
    /*max-width: 50%;*/
    border-radius: 26px;
}
.sharing-text-input::placeholder {
    color: white; /* Set your desired placeholder color */
    opacity: 1; /* Ensure the placeholder is fully opaque */
    font-family: 'Blauer Nue', sans-serif; /* Optional: Match the font */
    font-size: 1.5rem; /* Optional: Match the size */
}

/* Text Area */
.sharing-text-input {
    width: 98%;
    height: 64%;
    font-family: 'Blauer Nue', sans-serif;
    font-size: 2vw;
    text-align: center;
    border: none;
    background: transparent;
    color: white;
    resize: none;
    outline: none;
    overflow: hidden;
    top: 25%;
    left: 1%;
}

/* Pink Share Button */
.btn-pink {
    background-color: #FF005D;
    color: white;
    font-family: 'Blauer Nue', sans-serif;
    font-size: 1.2rem;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 1rem 2rem;
    min-width: 35%;
    max-width: 560px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-pink:hover {
    background-color: #e0004f;
}

/* Download and Share Buttons */
.btn-download, .btn-share {
    background: #fff !important;
    border: 2px solid #000;
    color: black;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
}
.btn-download .bi, .btn-share .bi {
    text-shadow: 0px 0px 2px black;
}

.action-item p {
    margin-top: 0.5rem;
}
.night-day-container {
    top: 10%;
    left: 5%;
    z-index: 3;
}

/* Modal */
/* Style the placeholder (first option) */
#sech-email-embed select.form-select option:first-child {
    color: #6c757d; /* Light gray, matches default placeholder color */
}

/* Change the color of the selected option */
#sech-email-embed select.form-select:valid {
    color: #000 !important; /* Black or your desired color for valid selections */
}

/* Initial state for the select dropdown */
#sech-email-embed select.form-select {
    color: #6c757d !important; /* Set initial color to match placeholder */
}

/* Custom modal close */
.custom-close {
    background-color: white;
    border: 1px solid black;border-radius: 50%;
    padding: 0; /* Remove padding */
    cursor: pointer; /* Pointer cursor for clickable elements */
    position: absolute; /* Position it in the modal header */
    top: 15px; /* Adjust the position */
    right: 15px; /* Adjust the position */
    z-index: 1051; /* Ensure it stays above content */
}

.custom-close img {
    height: 25px; /* Adjust size of the icon */
    width: auto; /* Maintain aspect ratio */
    transition: transform 0.2s ease; /* Optional hover effect */
}

.custom-close img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Extra large screens */
@media (min-width: 1600px) {
    .hero-container .hero-bg {
        top: -4%;
    }

    .sharing-preview-container {
        max-width: 30%;
    }
    .lottie-animation-container.loaded {
        left: 5%;
    }

    .btn-pink {
        min-width: 30%;
    }
    .sharing-text-input {
        font-size: 1.6vw;
    }
}
@media (max-width: 1400px) {
    .lottie-animation-container.loaded {
        left: 10%;
    }
    .sharing-preview-container {
        max-width: 40%;
    }
    .btn-pink {
        min-width: 40%;
    }
    .sharing-text-input {
        font-size: 2.3vw;
    }
}
@media (max-width: 1200px) {
    .lottie-animation-container.loaded {
        top: 4%;
        left: 14%;
    }
    .sharing-preview-container {
        max-width: 50%;
    }
    .btn-pink {
        min-width: 50%;
    }
    .sharing-text-input {
        font-size: 2.8vw;
    }
}
@media (max-width: 992px) {
    .lottie-animation-container.loaded {
        top: 4%;
        width: 145%;
        left: 10%;
    }
    .butterfly-header {
        font-size: 5rem;
    }
    .sharing-preview-container {
        max-width: 60%;
    }
    .btn-pink {
        min-width: 60%;
    }
    .night-day-container {
        top: 13%;
        left: 2%;
    }
    .sharing-text-input {
        font-size: 3.5vw;
    }
}

@media (max-width: 768px) {
    .lottie-animation-container.loaded {
        top: 4%;
        width: 145%;
        left: 10%;
    }
    .hero-content .card {
        margin: 0 auto;
    }
    .hero-content h1 {
        font-size: 6rem;
        line-height: 7rem;
    }

    .hero-content p {
        font-size: 1.8rem;
    }

    .top-bar {
        padding: 20px 30px;
    }

    .musical-card {
        max-width: 100%;
        padding: 1.5rem;
    }

    .musical-title {
        font-size: 2rem;
    }

    .closing-text {
        font-size: 3rem;
    }
    .butterfly {
        width: 80px;
        height: 80px;
    }
    .butterfly-header {
        font-size: 4rem;
    }
    .sharing-preview-container {
        max-width: 70%;
    }
    .btn-pink {
        min-width: 70%;
    }
    .night-day-container {
        top: 1%;
    }
}

@media (max-width: 576px) {

    .hero-container .hero-bg {
        object-position: 58%;
    }
    .hero-content h1 {
        font-size: 3.5rem;
        line-height: 3rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }

    .top-bar {
        padding: 15px 5px;
    }
    .lottie-animation-container.loaded {
        top: 8%;
        width: 184%;
        left: -14%;
    }
    .musical-content {
        height: 40vh;
    }
    .musical-description-1 {
        font-size: 1.9rem;
    }

    .closing-text {
        font-size: 2.5rem;
    }
    .butterfly-header {
        font-size: 2rem;
    }
    .sharing-preview-container {
        max-width: 95%;
    }
    .btn-pink {
        min-width: 95%;
    }
    .sharing-text-input {
        font-size: 5.3vw;
    }
    .night-day-container {
        top: 5%;
        left: 2%;
    }
}

/* XXS Screens */
@media (max-width: 400px) {
    .social-icons {
        gap: 0.5rem !important; /* Reduce spacing between icons */
    }
    .logo {
        height: 20px;
    }
}