/* ========================================
   CSS MENU - WEDDING WEBSITE STYLES
   ========================================

   TABLE OF CONTENTS:
   ==================
   
   1. IMPORTS & FONTS
      - Google Fonts Import
      - Custom Font Faces
   
   2. CSS VARIABLES (ROOT)
      - Colors
      - Font Sizes
      - Font Families
      - Spacing & Layout
      - Effects & Transitions
   
   3. RESPONSIVE VARIABLES
      - Mobile (540px+)
      - Tablet Small (768px+)
      - Laptop (1024px+)
      - Desktop Large (1440px+)
      - Ultra-Wide (1920px+)
      - 4K Screens (2560px+)
   
   4. GLOBAL STYLES
      - Reset & Base Styles
      - Body Styles
      - Loading States
      - Container
   
   5. PRELOADER & LOADER
      - Loader Container
      - Loader Logo
      - Loader Animations
      - Keyframes (fadeInScale, fadeInUp, pulse, spin, tracking-in-expand)
   
   6. HEADER & BANNER SECTION
      - Banner Container
      - Background & Overlay
      - Banner Content (Names, Title, Date)
      - Icon Container
      - Social Links
   
   7. ABOUT SECTION
      - Section Heading
      - About Container & Cards
      - About Media & Body
   
   8. COUNTDOWN SECTION
      - Countdown Container
      - Heartbeat Animation
      - Countdown Numbers & Labels
   
   9. INVITATION CARD
      - Invitation Container
      - Card Design
      - Time & Date Display
   
   10. TIMELINE SECTION
       - Timeline Container
       - Timeline Items
       - Timeline Media & Content
   
   11. ALBUM/GALLERY SECTION
       - Album Container
       - Swiper Slider
       - Image Styling
   
   12. MESSAGE SECTION
       - Message Container
       - Message Items
       - Input Forms & Buttons
   
   13. FORM SECTION (RSVP)
       - Form Container
       - Radio Buttons
       - Input Fields
       - Select Dropdowns
       - Submit Button
   
   14. THANK YOU SECTION
       - Thank You Container
       - Social Links
   
   15. DECORATIVE ELEMENTS
       - Flower Decorations
       - Floating Animation
   
   16. AUDIO CONTROLS
       - Audio Toggle Button
       - Audio States (playing, muted)
   
   17. RESPONSIVE DESIGN
       - Mobile Breakpoints
       - Tablet Breakpoints
       - Component-Specific Responsive Rules
   
   ========================================
*/

/* ========================================
   1. IMPORTS & FONTS
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@100;200;300;400;600;800&family=Quicksand:wght@300;400;600;700&family=WindSong&display=swap');

@font-face {
    font-family: 'SFUEdwardianScriptRegular';
    src: url('../resources/fonts/SFUEdwardianScriptRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================
   2. CSS VARIABLES (ROOT)
   ======================================== */

:root {
    --max-width: 1024px;
    /* color */
    --bg: rgba(245, 245, 220, 1);
    --primary-color: #6D3E28;
    --secondary-color: #6D3E28;
    --text-white: #fff;
    --text-black: #000;
    --text-gray: #6e6e6e;
    --text-dark: #2c2c2c;
    --text-light: ;
    --danger-color: ;
    --info-color: ;
    --success-color: ;
    --warning-color: ;
    --error-color: ;
    --hot-color: ;

    /* fontsize */
    --biger-size: 46px;
    --medium-size: 32px;
    --larger-title: ;
    --title-fs: 24px;
    --subtitle-fs: 20px;
    --menu-fs: ;
    --body-fs: ;
    --small-fs: ;

    /* font-family */
    --script-font: 'WindSong', cursive;
    --primary-font: 'Quicksand', sans-serif;
    --title-font: 'Noto Serif Display', serif;

    /* section margin and padding */
    --section-margin: 60px;
    --section-padding: 40px;
    --gap: 20px;

    /* effect */
    --shadow-small: ;
    --shadow-medium: ;
    --shadow-large: ;
    --transition: .3s;
}

/* ========================================
   4. GLOBAL STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--primary-font);
    background-color: var(--bg);
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scroll-padding-top: 0;
}

body.loading {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

body.loaded {
    overflow: auto;
    position: static;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   5. PRELOADER & LOADER
   ======================================== */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    text-align: center;
    animation: fadeInScale 1.2s ease-out;
}

.loader-logo img {
    max-width: 600px;
    width: 600px;
    height: 400px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    object-fit: cover;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.loader-logo::after {
    display: none;
}

.loader-logo p {
    padding: 8px 20px;
    color: white;
    font-size: 24px;
    font-family: var(--title-font);
    margin-top: 20px;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.loader svg {
    fill: #FD2DA2 !important;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 50px rgba(109, 62, 40, 0.4);
    }
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.tracking-in-expand {
    animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

/* ========================================
   6. HEADER & BANNER SECTION
   ======================================== */

#banner {
    height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1;
}

#banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0;
    pointer-events: none;
}

#banner img.banner-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#banner img.img_bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#banner img.banner_top {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#banner::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid gold;
    pointer-events: none;
    z-index: 5;
}

.bg_overlay {
    box-shadow: inset 0 0 0 2000px rgba(0 0 0 /.15);
}

.banner-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 27% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.banner-container {
    width: 90%;
    max-width: 14000px;
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    text-align: center;
    color: white;
    font-family: var(--script-font);
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-name {
    font-size: var(--biger-size);
    font-family: 'SFUEdwardianScriptRegular', var(--title-font);
    font-weight: 300;
    letter-spacing: 2px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-name span {
    font-family: var(--script-font);
    font-size: 1em;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.banner-name::before {
    content: "Công Triều";
    position: absolute;
    right: 50%;
    transform: translateX(-45px);
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

.banner-name::after {
    content: "Phương Uyên";
    position: absolute;
    left: 50%;
    transform: translateX(50px);
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

.banner-title {
    font-size: var(--title-fs);
    font-family: var(--script-font);
}

.banner-date {
    font-family: var(--title-font);
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    margin-top: 10px;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.icon-container p {
    margin-top: 8px;
    font-size: 12px;
    color: white;
    font-weight: 500;
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #FFD700;
    object-fit: cover;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 6px;
}

.icon-circle:hover {
    background-color: #FFD700;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.group-date {
    font-weight: 700;
    display: flex;
    align-items: center;
    position: relative;
}

.group-date .day_name {
    font-size: var(--medium-size);
    font-weight: 700;
    letter-spacing: 0.5px;
    position: absolute;
    right: 50%;
    transform: translateX(-45px);
    border-top: 1px solid var(--text-white);
    border-bottom: 1px solid var(--text-white);
    padding: 4px 8px;
    display: inline-block;
}

.group-date .banner_date {
    font-size: var(--biger-size);
    font-weight: 700;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.group-date .banner_time {
    font-size: var(--medium-size);
    font-weight: 700;
    letter-spacing: 0.5px;
    position: absolute;
    left: 50%;
    transform: translateX(50px);
    border-top: 1px solid var(--text-white);
    border-bottom: 1px solid var(--text-white);
    padding: 4px 8px;
    display: inline-block;
}

.banner_month {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
    display: block;
    margin: 20px;
}

.banner_year {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
    display: block;
    margin: 20px 0 0 0;
}

.group-add {
    display: flex;
    flex-direction: column;
    font-family: var(--title-font);
    font-weight: 300;
    letter-spacing: 0.8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.group-add .banner_location_name {
    font-size: 20px;
}

.group-add p {
    font-size: 16px;
    font-weight: 300;
    font-family: var(--script-font);
}

.group-add .banner_location_adress {
    font-size: 16px;
    font-weight: 300;
}

.social-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.social-link a {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D2691E;
    text-decoration: none;
}

.social-link a i {
    font-size: 16px;
    transition: .3s;
    color: #D2691E;
}

.social-link a:hover i {
    transform: translateY(-2px);
}

/* ========================================
   7. ABOUT SECTION
   ======================================== */

.section-heading {
    margin-bottom: 80px;
}

.subtitle {
    font-size: var(--subtitle-fs);
    text-align: center;
    margin-bottom: 4px;
}

.section-title {
    font-size: var(--title-fs);
    font-weight: bold;
    font-family: var(--title-font);
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 20px;
}

#about {
    min-height: 50vh;
    padding-top: 0;
    padding-top: 100px;
}

.about-container {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, 320px 1fr);
}

.about-card {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 12px;
}

.about-media {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about-media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center top;
}

.about-body {
    position: absolute;
    padding: 20px;
    text-align: center;
    bottom: 0;
    background-image: linear-gradient(to top,
            var(--primary-color),
            transparent);
    color: var(--text-white);
    min-width: 100%;
}

.about-body h3 {
    font-size: var(--title-fs);
    font-family: var(--title-font);
}

.about-des {
    text-align: center;
}

/* ========================================
   SECTION BREAK
   ======================================== */

.section-break {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-break img {
    max-width: 100%;
    height: auto;
}

.section-ring-break {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-ring-break img {
    max-width: 100%;
    height: auto;
}


/* ========================================
   8. COUNTDOWN SECTION
   ======================================== */

#countdown-section {
    margin-top: 60px;
}

.count-down {
    background: var(--primary-color);
    padding: 20px;
    border-radius: 120px 120px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -110px center;
}

.count-down .section-title {
    color: var(--text-white);
    font-family: 'MonteCarlo', cursive;
}

#countdown {
    margin-top: 40px;
    display: flex;
    row-gap: 24px;
    justify-content: center;
    align-items: center;
}

#countdown ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

#countdown li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px 10px;
    border-radius: 999px;
    border: 1px solid var(--text-white);
}

#countdown li span {
    display: block;
    font-size: var(--title-fs);
    font-weight: 600;
    font-family: var(--title-font);
}

#content {
    display: none;
    padding: 1rem;
}

#content span {
    font-family: var(--script-font);
    font-size: 4rem;
    padding: 0 .5rem;
}


/* ========================================
   9. INVITATION CARD
   ======================================== */

.invitation {
    background-color: #D2691E;
}

.invitation-container {
    padding: 10px;
    display: grid;
    gap: var(--gap);
}

.invitation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 12px;
    background-color: var(--text-white);
    border-radius: 12px;
    text-align: center;
}

.invitation-card .social-link a {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.invitation-card .social-link a i {
    color: var(--primary-color);
}

.invitation-card img {
    max-width: 100%;
    width: 320px;
    aspect-ratio: 1/1;
    object-fit: cover;
    padding: 8px;
    background-color: var(--text-white);
    border-radius: 999px 999px 0 0;
}

.card-title {
    font-size: calc(var(--title-fs) + 4px);
    font-family: var(--title-font);
}

.invi_time {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 12px;
}

.invi_time .fw-bold {
    font-size: calc(1rem + 10px);
}

.invi_hours {
    font-size: calc(1rem + 10px);
}

.invi_group_time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 8px;
}

.invi_date_number {
    display: flex;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    font-size: var(--biger-size);
    font-family: var(--title-font);
}

.invi_date_text,
.invi_year_text {
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding: 4px 0;
    font-size: calc(1rem + 10px);
}

.invi_amlich {
    font-style: italic;
    font-size: calc(14px + 10px);
}

.invitation-card address p {
    font-size: calc(1rem + 10px);
}



/* ========================================
   11. ALBUM/GALLERY SECTION
   ======================================== */

#album {
    padding: var(--section-padding) 0;
    overflow: hidden;
    scroll-padding-top: 0;
}

.album-slide {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.album img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center 10%;
    border-radius: 15px;
}

.swiper-slide {
    width: 400px;
}

.swiper-pagination {
    display: none;
}

/* ========================================
   12. MESSAGE SECTION
   ======================================== */

.section-message {
    position: relative;
    padding: var(--section-padding) 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.message-container {
    display: grid;
    text-align: center;
    justify-content: center;
    justify-items: center;
    row-gap: 40px;
    color: var(--text-white);
}

.list_message {
    max-width: 90%;
    display: grid;
    gap: 20px;
}

.message-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    text-align: left;
}

.user_message {
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
}

.message_body {
    color: rgba(255, 255, 255, 0.9);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.input {
    border: 1px solid white;
    padding: 12px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
}

.input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.input-text {
    border: 1px solid white;
    padding: 12px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    resize: vertical;
}

.input-text::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* ========================================
   13. FORM SECTION (RSVP)
   ======================================== */

.form {
    padding: var(--section-padding) 0;
    /* background: linear-gradient(135deg, rgba(245, 245, 220, 1) 0%, rgba(235, 235, 205, 1) 100%); */
    border-bottom: 1px solid rgba(109, 62, 40, 0.2);
}

#form-wedding {
    max-width: 450px;
    margin: 0 auto;
    background: white;
    padding: 70px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    position: relative;
}

#form-wedding::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    z-index: 1;
}

.form-container {
    position: relative;
    z-index: 2;
    padding-top: 60px;
}

.group-radio {
    margin-bottom: 30px;
}

.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.radio-container:hover input~.checkmark {
    background-color: #ccc;
}

.radio-container input:checked~.checkmark {
    background-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-container input:checked~.checkmark:after {
    display: block;
}

.radio-container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.group-input {
    margin-bottom: 50px;
}

.group-input label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 22px;
    color: var(--text-dark);
}

.group-input .input {
    border: 1px solid var(--primary-color);
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: white;
    color: var(--text-dark);
    width: 100%;
}

.group-input .input::placeholder {
    color: #ccc;
}

.group-select {
    position: relative;
    margin-bottom: 20px;
}

.group-select select {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    background: white;
    color: var(--text-dark);
    font-size: 1rem;
    appearance: none;
    cursor: pointer;
}

.group-select i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    pointer-events: none;
}

.group-input textarea {
    width: 100%;
    border: 1px solid var(--primary-color);
    padding: 12px 20px;
    border-radius: 8px;
    background: white;
    color: var(--text-dark);
    resize: vertical;
    min-height: 100px;
}

.wedding-submit {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}

.wedding-submit:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.message-form {
    margin-top: 15px;
    padding: 10px;
    background: rgba(109, 62, 40, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #D2691E;
    font-weight: 500;
}

/* ========================================
   14. THANK YOU SECTION
   ======================================== */

.section-thankyou {
    position: relative;
    padding: 25px 0 20px 0;
    display: flex;
    align-items: center;
}

.thankyou-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.thankyou-body {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.thankyou-body .section-title {
    font-family: var(--script-font);
    font-size: 5rem;
    color: #D2691E;
}

.thankyou-des {
    max-width: 800px;
    margin: 0 auto 10px;
    font-size: 1.95rem;
    line-height: 1.6;
}

.social h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-social-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.footer-social-link a {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D2691E;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.footer-social-link a i {
    font-size: 16px;
    transition: .3s;
    color: #D2691E;
}

.footer-social-link a:hover i {
    transform: translateY(-2px);
}

/* Footer removed - thankyou section now serves as footer */

/* ========================================
   15. DECORATIVE ELEMENTS
   ======================================== */

.flor-dorada {
    position: absolute;
    bottom: -30px;
    left: -50px;
    width: 400px;
    height: auto;
    z-index: 10;
    opacity: 0.8;
    filter: brightness(90%);
}

.flor {
    position: absolute;
    top: -80px;
    right: -10px;
    width: 350px;
    height: auto;
    z-index: 10;
    opacity: 0.8;
    filter: grayscale(100%) brightness(90%);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ========================================
   16. AUDIO CONTROLS
   ======================================== */

#audio {
    display: none;
}

.toggleAudio {
    position: fixed;
    top: 40px;
    right: 80px;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0.4;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.toggleAudio:hover {
    opacity: 0.8;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.toggleAudio.playing {
    opacity: 0.6;
    background: rgba(109, 62, 40, 0.9);
}

.toggleAudio.playing:hover {
    opacity: 0.9;
}

.toggleAudio i {
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.toggleAudio:hover i {
    transform: scale(1.1);
}

.toggleAudio.muted i::before {
    content: "\f0a8";
}

.toggleAudio.playing i::before {
    content: "\ec7f";
}

/* ========================================
   17. RESPONSIVE DESIGN
   ======================================== */
/* Mobile */
@media only screen and (min-width: 320px) and (max-width: 767px){
    :root {
        /* fontsize */
        --biger-size: 58px;
        --larger-title: 28px;
        --title-fs: 24px;
        --subtitle-fs: 18px;
        --menu-fs: 16px;
        --body-fs: 14px;
        --small-fs: 12px;
        /* section margin and padding */
        --section-margin: 60px;
        --section-padding: 40px;
        --gap: 20px;
    }

    .flor-dorada {
        bottom: -22px;
        left: -30px;
        width: 200px;
    }

    .flor {
        transform: rotate(-140deg);
        top: -30px;
        width: 150px;
    }

    .toggleAudio {
        right: 30px;
    }
}

/* tablet small */
@media only screen and (min-width: 768px) {
    :root {
        /* fontsize */
        --biger-size: 60px;
        --larger-title: ;
        --title-fs: 32px;
        --subtitle-fs: ;
        --menu-fs: ;
        --body-fs: ;
        --small-fs: ;
        /* section margin and padding */
        --section-margin: 60px;
        --section-padding: 40px;
        --gap: 20px;
    }
    .bg-top-left,
    .bg-bottom-right {
        max-width: 300px;
    }

    .about-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #time-line .section-title {
        font-size: 54px;
    }

    .album-slide .swiper-slide {

        width: 30%;

    }
}

/* laptop */
@media only screen and (min-width: 1024px) {
    :root {
        /* fontsize */
        --biger-size: 66px;
        --larger-title: ;
        --title-fs: 32px;
        --subtitle-fs: ;
        --menu-fs: ;
        --body-fs: ;
        --small-fs: ;
        /* section margin and padding */
        --section-margin: 100px;
        --section-padding: 40px;
        --gap: 40px;
    }
}

/* desktop large */
@media only screen and (min-width: 1440px) {
    :root {
        /* fontsize */
        --biger-size: 82px;
        --medium-size: 22px;
        --larger-title: ;
        --title-fs: 36px;
        --subtitle-fs: 25px;
        --menu-fs: ;
        --body-fs: ;
        --small-fs: ;
        /* section margin and padding */
        --section-margin: 120px;
        --section-padding: 60px;
        --gap: 60px;
    }

    .banner-container {
        max-width: 600px;
        padding: 30px;
    }
}

/* ultra-wide screens */
@media only screen and (min-width: 1920px) {
    :root {
        /* fontsize */
        --biger-size: 82px;
        --larger-title: ;
        --title-fs: 40px;
        --subtitle-fs: 25px;
        --menu-fs: ;
        --body-fs: ;
        --small-fs: ;
        /* section margin and padding */
        --section-margin: 140px;
        --section-padding: 80px;
        --gap: 80px;
    }

    .banner-container {
        max-width: 700px;
        padding: 35px;
    }
}

/* 4K and ultra-wide screens */
@media only screen and (min-width: 2560px) {
    :root {
        /* fontsize */
        --biger-size: 106px;
        --larger-title: ;
        --title-fs: 48px;
        --subtitle-fs: ;
        --menu-fs: ;
        --body-fs: ;
        --small-fs: ;
        /* section margin and padding */
        --section-margin: 160px;
        --section-padding: 100px;
        --gap: 100px;
    }

    .banner-container {
        max-width: 800px;
        padding: 40px;
    }

    #banner {
        height: 100vh;
        max-height: 1440px;
    }

    .banner-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }
}

/* 4K UHD screens (3840x2160) */
@media only screen and (min-width: 3840px) {
    :root {
        /* fontsize */
        --biger-size: 140px;
        --medium-size: 42px;
        --larger-title: ;
        --title-fs: 64px;
        --subtitle-fs: 36px;
        --menu-fs: ;
        --body-fs: 20px;
        --small-fs: 18px;
        /* section margin and padding */
        --section-margin: 200px;
        --section-padding: 120px;
        --gap: 120px;
    }

    .container {
        max-width: 1800px;
        padding: 0 40px;
    }

    .banner-container {
        max-width: 1000px;
        padding: 50px;
    }

    #banner {
        height: 100vh;
        max-height: 2160px;
    }

    .banner-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

    .banner-name {
        letter-spacing: 4px;
    }

    .banner-name::before {
        transform: translateX(-60px);
    }

    .banner-name::after {
        transform: translateX(60px);
    }

    .group-date .day_name {
        transform: translateX(-60px);
        padding: 6px 12px;
    }

    .group-date .banner_time {
        transform: translateX(60px);
        padding: 6px 12px;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
        padding: 8px;
    }

    .icon-container p {
        font-size: 16px;
    }

    .about-container {
        grid-template-columns: repeat(auto-fit, 450px 1fr);
    }

    .about-body {
        padding: 30px;
    }

    .invitation-card {
        padding: 30px;
    }

    .invitation-card img {
        width: 450px;
    }

    #form-wedding {
        max-width: 600px;
        padding: 90px;
    }

    .swiper-slide {
        width: 500px;
    }

    .section-title {
        margin-bottom: 30px;
    }
}

.text-brown {
    color: #D2691E !important;
    font-weight: 600;
}[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}