/*   ?name=FAMILIA%20RESENDIZ%20GALLARDO&pl=3&ado=0&ni=0&di=68ed14f49a74b&hjs=6d3f7y2zuhsd
    Tipografias:
       - juliusFont
       - newYorkFont
       - shellineFont
       - garamondFont
       - cinzelFont
       - brittanyFont
    
    */
    @font-face{
        font-family: "amafilFont";
        src:url('../Fuentes/AMALFI.TTF') format('truetype');
    } 
    @font-face{
        font-family: "adeliaFont";
        src:url('../Fuentes/adelia.ttf') format('truetype');
    } 
    @font-face{
        font-family: "AmaticBoldFont";
        src:url('../Fuentes/AmaticBold.ttf') format('truetype');
    } 
    @font-face{
        font-family: "AmsterdamFont";
        src:url('../Fuentes/Amsterdam.ttf') format('truetype');
    }
    @font-face{
        font-family: "ancientGreeceFont";
        src:url('../Fuentes/ancientGreece.otf') format('truetype');
    }
    @font-face{
        font-family: "BigillaFont";
        src:url('../Fuentes/Bigilla.otf') format('truetype');
    }
    @font-face{
        font-family: "BORCHAFont";
        src:url('../Fuentes/BORCHA.otf') format('truetype');
    }
    @font-face{
        font-family: "BrittanySignatureFont";
        src:url('../Fuentes/BrittanySignature.ttf') format('truetype');
    }
    @font-face{
        font-family: "ChickenPieFont";
        src:url('../Fuentes/ChickenPie.otf') format('truetype');
    }
    @font-face{
        font-family: "cinzelRegularFont";
        src:url('../Fuentes/cinzelRegular.ttf') format('truetype');
    }
    @font-face{
        font-family: "FernstadFont";
        src:url('../Fuentes/Fernstad.otf') format('truetype');
    }
    @font-face{
        font-family: "JelloChlourFont";
        src:url('../Fuentes/JelloChlour.otf') format('truetype');
    }
    @font-face{
        font-family: "MilkyWalkyFont";
        src:url('../Fuentes/MilkyWalky.otf') format('truetype');
    }
    @font-face{
        font-family: "MinionCyrillicFont";
        src:url('../Fuentes/MinionCyrillic.otf') format('truetype');
    }
    @font-face{
        font-family: "NorthCarosselaFont";
        src:url('../Fuentes/NorthCarossela.otf') format('truetype');
    }
    @font-face{
        font-family: "PinyonScriptFont";
        src:url('../Fuentes/PinyonScript.ttf') format('truetype');
    }
    @font-face{
        font-family: "PoppinsRegularFont";
        src:url('../Fuentes/PoppinsRegular.ttf') format('truetype');
    }
    @font-face{
        font-family: "RanteMarioFont";
        src:url('../Fuentes/RanteMario.ttf') format('truetype');
    }
    @font-face{
        font-family: "SacramentoFont";
        src:url('../Fuentes/Sacramento.ttf') format('truetype');
    }
    @font-face{
        font-family: "StarsightFont";
        src:url('../Fuentes/Starsight.otf') format('truetype');
    }
    @font-face{
        font-family: "SwilyBrightFont";
        src:url('../Fuentes/SwilyBright.otf') format('truetype');
    }
    @font-face{
        font-family: "AbygaerFont";
        src:url('../Fuentes/Abygaer.ttf') format('truetype');
    }
    @font-face{
        font-family: "DearJaneFont";
        src:url('../Fuentes/DearJane.ttf') format('truetype');
    }
    @font-face {
        font-family: "BPEcatherina";
        src: url("../Fuentes/Ecatherina.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: "aboretoFont";
        src: url("../Fuentes/Aboreto.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: "LeMajorFont";
        src: url("../Fuentes/LeMajor.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: "italicCFont";
        src: url("../Fuentes/italicc_.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
    }
:root {


    --colorbackground: #ffffff;
    --color-titulos: #000000;
    --visibilidad-musica: block;
    --border-radius-section: 12px;

    /* Section 1 [Introducción] */
        /*celular*/
        --introLogoPossCelFomTOP: 10%; /*Posición desde la parte superior*/
        --introLogoSizeCel: 35%;
        --introLogoLeftCel: 32%; /*= (100-introLogoSizeCel)/2 */
        --introLogoShadowCel: 0.4; 
        /*Computadora*/
        --introLogoPossPcFomTOP: 60%;
        --introLogoSizePc: 8%;
        --introLogoLeftPc: 45%; /*= (100-introLogoSizeCel)/2 */
        --introLogoShadowPc: 0.4; 
        /*Boton*/
        --introBotonColor: #91aaa0;
        --introBotonTxtColor: white;
        --colorNuestraBoda: #7b5a39;
        --colorFechaInicio: #7b5a39;
    /* ---- Color del "Gran Día" ---- */
    --tmlColor: #717984; /*Define Color of Line, circle and text*/
    --tmlCircColor: #717984;/*Define Color of circles*/
    --color-bg-btn: #717984; /*Define el Color de los Botones*/
    --colorTMLtxt: #717984; /*Color del texto en el TimeLine*/
    
    /* Generales  textNormal*/            
    --fuente1: "josefineFont";
    --fuente2: 'cinzelFont';
    --fuente3: 'newYorkFont';
    --fuente4: 'britanyFont';
    --fontColor: #797653;

    /*Color Botones*/
    --colorBotones: #91aaa0;
    --botonFontThinckness: 300;
    /*Color Boton intro*/
    --colorBotonIntro: hsla(0, 0%, 100%, 0.95);
    
    
    --color-bg-btn-hover: rgb(255, 253, 231);

    

    /* Section 2 [Introducción] */
        /*celular*/
        --sec2LogoPossCelFomTOP: 6%; /*Posición desde la parte superior*/
        --sec2LogoSizeCel: 55%;
        --sec2LogoShadowCel: 0.2; 
        /*Computadora*/
        --sec2LogoPossPcFomTOP: 50%;
        --sec2LogoSizePc: 65%;
        --sec2LogoLeftPc: 45%; /*= (100-introLogoSizeCel)/2 */
        --sec2LogoShadowPc: 0.0; 
    
    /*Section 4*/
        /*Celular*/
        --fontAyC: 'cinzelRegularFont';
        --fontB: 'adeliaFont';
        --fontsizeSTD1-2: 80px;
        --fontsizeSTD2-3: 65px;
        --colorDate: #7e7060;
        --duistSTDDist1-2: -5px;
        --duistSTDDist2-3: -15px;
        --spaceFromPhrase: +35px;
        --colorCountDown: #000000;

        /*Section Ubicaciones*/
        --fontSize-namePlaces: 20px;
        --circulo-titleFontSizeDatosPlaces: 12px;

        /*Flip Cards*/
        --colorRegalos: #91aaa0;
        --colorHospedaje: #eeb69f;        
        --colorVestimenta: #eeb69f;
        --colorAlbumFOtos: #744b38;




  }
    
    
   
    

    * {
        box-sizing: border-box;
    }
 
    body {
        margin: 0;
    }
    body,html {
        height: 100%
    }   

    /* Animations FadeIN UP [6]*/
    .fadeInUP{
        background-image: url('/Icons/IconsMo/Brindis.png');
        -webkit-animation: fadeInUP 1.2s both; -webkit-animation-delay: 0.5s; 
        -moz-animation: fadeInUP 1.2s both;    -moz-animation-delay: 0.5s;
        -o-animation: fadeInUP 1.2s both;      -o-animation-delay: 0.5s;
        animation: fadeInUP 1.2s both;         animation-delay: 0.5s;
    }
    @-webkit-keyframes fadeInUP{
        0%  {opacity: 0;-webkit-transform: translateY(-50px);}
        100%{opacity: 1;-webkit-transform: translateY(0px);}
    }
    @-moz-keyframes fadeInUP{
        0%  {opacity: 0;-moz-transform: translateY(-50px);}
        100%{opacity: 1;-moz-transform: translateY(0px);}
    }
    @-o-keyframes fadeInUP{
        0%  {opacity: 0;-o-transform: translateY(-50px);}
        100%{opacity: 1;-o-transform: translateY(0px);}
    }
    @keyframes fadeInUP{
        0%  {opacity: 0;transform: translateY(-50px);}
        100%{opacity: 1;transform: translateY(0px);}
    }

    .fadeInUPBtn{
        background-image: url('/Icons/IconsMo/Brindis.png');
        -webkit-animation: fadeInUPBtn 1.2s both; -webkit-animation-delay: 1.0s; 
        -moz-animation: fadeInUPBtn 1.2s both;    -moz-animation-delay: 1.0s;
        -o-animation: fadeInUPBtn 1.2s both;      -o-animation-delay: 1.0s;
        animation: fadeInUPBtn 1.2s both;         animation-delay: 1.0s;
    }
    @-webkit-keyframes fadeInUPBtn{
        0%  {opacity: 0;-webkit-transform: translateY(50px);}
        100%{opacity: 1;-webkit-transform: translateY(0px);}
    }
    @-moz-keyframes fadeInUPBtn{
        0%  {opacity: 0;-moz-transform: translateY(50px);}
        100%{opacity: 1;-moz-transform: translateY(0px);}
    }
    @-o-keyframes fadeInUPBtn{
        0%  {opacity: 0;-o-transform: translateY(50px);}
        100%{opacity: 1;-o-transform: translateY(0px);}
    }
    @keyframes fadeInUPBtn{
        0%  {opacity: 0;transform: translateY(50px);}
        100%{opacity: 1;transform: translateY(0px);}
    }



    /* ---------- BOTÓN MÚSICA ---------- */
    .btn-musica div {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBkPSdNMyA5djZoNGw1IDVWNEw3IDlIM3ptMTMuNSAzYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2OC4wNWMxLjQ4LS43MyAyLjUtMi4yNSAyLjUtNC4wMnpNMTQgMy4yM3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Jy8+PHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPjwvc3ZnPg==)
    }

    button.pausa div {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBkPSdNMTYuNSAxMmMwLTEuNzctMS4wMi0zLjI5LTIuNS00LjAzdjIuMjFsMi40NSAyLjQ1Yy4wMy0uMi4wNS0uNDEuMDUtLjYzem0yLjUgMGMwIC45NC0uMiAxLjgyLS41NCAyLjY0bDEuNTEgMS41MUMyMC42MyAxNC45MSAyMSAxMy41IDIxIDEyYzAtNC4yOC0yLjk5LTcuODYtNy04Ljc3djIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxek00LjI3IDNMMyA0LjI3IDcuNzMgOUgzdjZoNGw1IDV2LTYuNzNsNC4yNSA0LjI1Yy0uNjcuNTItMS40Mi45My0yLjI1IDEuMTh2Mi4wNmMxLjM4LS4zMSAyLjYzLS45NSAzLjY5LTEuODFMMTkuNzMgMjEgMjEgMTkuNzNsLTktOUw0LjI3IDN6TTEyIDRMOS45MSA2LjA5IDEyIDguMThWNHonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+)
    }

    .btn-musica {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        display: var(--visibilidad-musica);
        background: #fff;
        border: 1px solid #f2f2f2;
        border-radius: 32px;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
        z-index: 10000;
        overflow: hidden;
        cursor: pointer;
        transition: width .6s ease-in-out;
    }
    /* Icon Wrapper */
    .btn-musica i {
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        height: 100%;
    }

    /* SVG Icon inside */
    .btn-musica i div {
        opacity: .65;
        position: absolute;
        left: 11px;
        top: 12px;
        width: 26px;
        height: 26px;
    }

    .titlesGrl{
        font-family: 'newYorkFont';
        font-size: var(--fontSize-SaveTheDate);
        text-align: center;
    } 

    /* ---------- FIN BOTÓN MÚSICA ---------- */


    /*Footer*/
    footer {
        text-align: center;
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid #f7f7f7;
        background: #fbfbfb
    }

    footer img {
        width: 164px;
        margin-right: 10px;
        vertical-align: middle;
        max-width: 90%
    }

    footer a {
        font-size: 28px;
        text-decoration: none
    }
    /*Fin Footer*/






.owl-carousel .owl-item img {
    position: relative;
    z-index: 2
}

.owl-stage-outer {
    padding: 5px 0
}

.owl-item {
    transition: .6s ease-out 100ms
}

.owl-dots {
    text-align: center;
    margin-top: 24px;
    opacity: .8
}

.owl-dot {
    background: #ccc;
    display: inline-block;
    width: 38px;
    height: 6px;
    border-radius: 3px;
    margin: 0 5px;
    position: relative
}

.owl-dot.active {
    background: #666;
    width: 38px
}



@media(max-width: 640px) {

    /*GENERAL*/

    .event-hra {
        border: 1px solid var(--colorBotones);
        color: var(--colorBotones);
        border-radius: 10px;
        width: 114px;
        font-size: 20px;
        padding: 10px;
        display: inline-block;
        font-weight: 600;
        vertical-align: middle;
        font-family: var(--fuente-titulos);
    }

    .event-btn {
        margin-top: 26px
    }

    /* Botón General */
    .btn-grl {
        font-family: var(--fuente1);
        font-style: normal;
        font-size: 20px;
        background: var(--colorBotones);
        padding: 10px 10px;
        border-radius: 10px;
        text-decoration: none;
        margin: 0 4px;
        font-weight: 200;
        text-align: center;
        color: white;
        border: none;
    }

    h1,h2,h3 {
    text-align: center
    }

    h2 {
        font-size: 30px;
        margin-bottom: 20px
    }

    .right{
        position: absolute;
        right: 0; /* Position at the left of the container */
    }

    .left{
        position: absolute;
        left: 0;
    }
    .top{
        position: absolute;
        top: 0;
    }
    .bottom{
        position: absolute;
        bottom: 0;
    }

    .floralDecorSmall{
        width: 180px;
        height: auto;
    }

    .floralDecorMed{
        width: 260px;
        height: auto;
    }

    .floralDecorBig{
        width: 350px;
        height: auto;
    }

     /*scroll*/
    .scroll-down {
        
        z-index: 10; /* Ensure it stays on top */
        
        animation: fadeIn 2s forwards, bounce 1.5s infinite 2s; /* Combine fade-in and bounce */
    }
    
    /* Style the image */
    .scroll-icon {
        
        height: 100%;
    }
    
    /* Fade-in effect */
    @keyframes fadeIn {
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }
    
    /* Bounce effect */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        }
        40% {
        transform: translateY(-10px);
        }
        60% {
        transform: translateY(-5px);
        }
    }

    /*Seccion 1 Modal Bienvenida Logo y Boton Inicio*/
    /* Fecha */
    
    .modal-bienvenida {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000000;
        background-position: left center;

        --m2datefontfamily: "AbygaerFont";
        --m2datetop: 60px;
        --m2dateleft: 15px;

        
        /* Imagen principal */
        --s1imgtop: 30px;
        --s1imgleft: 10px;
        --s1imgwidth: 300px;
        --s1imgheight: 85vh;
        --s1bgborderradius: 130px;
        --s1bgpos: center bottom;

        /* Círculo */
        --m2circlesize: 180px;
        --m2circlecolor: #8f8f63;
        --m2circletop: 180px;
        --m2circleright: 60px;

        /* Líneas */
        --m2line1length: 350px;
        --m2line1color: #8f8f63;
        --m2line1top: 40px;
        --m2line1right: 290px;

        --m2line2length: 250px;
        --m2line2color: #8f8f63;
        --m2line2top: 400px;
        --m2line2right: 20px;

        --m2line3length: 55px;
        --m2line3color: #8f8f63;
        --m2line3top: 380px;
        --m2line3right: 130px;

        /* Foto */
        --m2photowidth: 190px;
        --m2photoheight: 190px;
        --m2phototop: 220px;
        --m2photoright: 34px;

        /* Logo + botón */
        --m2logoleft: 63%;
        --m2logobottom: 30%;
        --logoSize: 110px;

        --m2btnleft: 63%;
        --m2btnbottom: 15%;

        /* Texto */
        --m2titletop: 5%;
        --m2titleright: 10%;

        
        
    } 

    .secc1ImageBlock {
        position: relative;
        bottom: var(--s2imgtop);
    }

        /* Imagen principal (EN LA CAPA SUPERIOR) */
    .secc1ImgBg {
        position: absolute;
        z-index: 1; /* FOTO ENCIMA */

        width: var(--s1imgwidth);
        height: var(--s1imgheight);
        right: var(--s1imgleft);
        
        background-image: url('../Media/Ims/FOTOSRECORTADAS/FOTO_UNO.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: var(--s1bgpos);

        border-radius: var(--s1bgborderradius) 0 0 0;
        overflow: hidden;
    }
    
    /* ===========================================
    PORTADA A – FECHA
    =========================================== */
    .secc1Date {
        position: absolute;
        bottom: var(--m2datetop);
        left: var(--m2dateleft);
        display: flex;
        flex-direction: column;
        gap: 15px;
        font-family: var(--m2datefontfamily);
        font-size: 40px;
        letter-spacing: 1px;
        font-weight: 550;
        color: var(--colorFechaInicio);
    }

    .secc1DateLine { line-height: 1; }

    /* ===========================================
    PORTADA B – LÍNEAS + CÍRCULO
    =========================================== */
    .secc1LinesWrapper {
        position: absolute;
        inset: 0;
    }

    .secc1Circle {
        position: absolute;
        width: var(--m2circlesize);
        height: var(--m2circlesize);
        border-radius: 50%;
        border: 2px solid var(--m2circlecolor);
        top: var(--m2circletop);
        right: var(--m2circleright);
    }

    .secc1Line {
        position: absolute;
    }

    .secc1Line1 {
        width: 2px;
        height: var(--m2line1length);
        background-color: var(--m2line1color);
        top: var(--m2line1top);
        right: var(--m2line1right);
    }

    .secc1Line2 {
        height: 2px;
        width: var(--m2line2length);
        background-color: var(--m2line2color);
        top: var(--m2line2top);
        right: var(--m2line2right);
    }

    .secc1Line3 {
        width: 2px;
        height: var(--m2line3length);
        background-color: var(--m2line3color);
        top: calc(var(--m2line3top) + 1px);
        right: var(--m2line3right);
    }

    /* ===========================================
    PORTADA C – FOTO
    =========================================== */
    .secc1Photo {
        position: absolute;
        top: var(--m2phototop);
        right: var(--m2photoright);
        width: var(--m2photowidth);
        height: var(--m2photoheight);
        border-radius: 50%;
        overflow: hidden;
    }

    .secc1Photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ===========================================
    PORTADA D – LOGO + BOTÓN
    =========================================== */
    .secc1LogoBtn {
        position: absolute;
        inset: 0;
    }

    .secc1Logo {
        position: absolute;
        left: var(--m2logoleft);
        bottom: var(--m2logobottom);
        transform: translateX(-50%);
        max-width: var(--logoSize);
    }

    .secc1BtnVer {
        position: absolute;
        left: var(--m2btnleft);
        bottom: var(--m2btnbottom);
        transform: translateX(-50%);
        padding: 8px 24px;
        border-radius: 999px;
        border: none;
        font-size: 12px;
        letter-spacing: 1px;
        background-color: #8f8f63;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* ===========================================
    PORTADA E – TÍTULO
    =========================================== */

    .secc1TitleDeco {
        position: absolute;
        inset: 0;
    }

    .secc1TitleText {
        position: absolute;
        top: var(--m2titletop);
        left: var(--m2titleright);
        text-align: center;
        transform: rotate(-25deg);
        z-index: 1000;
    }

    .secc1TitleMain {
        font-family: "amafilFont";
        font-size: 35px;
        letter-spacing: 3px;
        color: var(--colorNuestraBoda);
        display: block;
        z-index: 1000;
    }

    .secc1TitleSub {
        font-family: "amafilFont";
        font-size: 35px;
        color: var(--colorNuestraBoda);
        display: block;
        margin-top: 10px;
        z-index: 1000;
    }

    /* Hoja decorativa */
    .secc1Leaf {
        position: absolute;
        left: 0;
        bottom: 21%;
        max-width: 65%;
        opacity: 0.70;
        z-index: 0;
    }
    .btnIntro
    {
        position: absolute;
        bottom: 15%; 
        margin-left: -44px; 
        background-color: var(--introBotonColor); 
        color: var(--introBotonTxtColor);
        font-family: var(--fuente1);
        letter-spacing: 3px;
    }
    /*Fin Modal Bienvenida*/
    .main-container {
        position: relative;
        overflow: hidden
    } 
    .introA {
        text-align: center;
        background-color: white;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;        
        min-height: 100vh;
        width: 100%;
        padding: 100px 0;
        position: relative;
        height: auto;        
    }
    /*Sección 2 Intro*/
   
    .cover-model2 {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
        background: #ffffff;
        min-height: 100vh;
        padding-bottom: 40px;
        box-sizing: border-box;

        /* VARIABLES DE ESTA SECCIÓN */

        /* Imagen principal */
        --s2imgtop: 10px;
        --s2imgleft: 10px;
        --s2imgwidth: 320px;
        --s2imgheight: 540px;
        --s2bgborderradius: 130px;
        --s2bgpos: center bottom;

        /* Rama (decoración inferior derecha) */
        --s2branchwidth: 260px;
        --s2branchright: -80px;
        --s2branchbottom: -30px;

        /* Texto corto debajo de la foto */
        --s2textcolor: #7c8782;
        --s2textwidth: 260px;
        --s2textfont: "josefin";
        --s2textmarginTop: 40px;

        /* Texto largo */
        --s2bodytextwidth: 270px;
        --s2bodytextfont: "AbygaerFont";
        --s2bodytextcolor: #555555;
        --s2bodytextmarginTop: 30px;
    }

        /* ===========================================
        BLOQUE IMAGEN + RAMA
        =========================================== */

        .secc2ImageBlock {
            position: relative;
            margin-top: var(--s2imgtop);
        }

            /* Imagen principal (EN LA CAPA SUPERIOR) */
        .secc2ImgBg {
            position: relative;
            z-index: 2; /* FOTO ENCIMA */

            width: var(--s2imgwidth);
            height: var(--s2imgheight);
            margin-left: var(--s2imgleft);

            background-image: url('../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: var(--s2bgpos);

            border-radius: 0 0 var(--s2bgborderradius) 0;
            overflow: hidden;
        }

            /* Rama (EN CAPA INFERIOR) */
        .secc2Branch {
            position: absolute;
            z-index: 1; /* RAMA DEBAJO */

            right: var(--s2branchright);
            bottom: var(--s2branchbottom);
            width: var(--s2branchwidth);
            height: auto;
            opacity: 0.9;
            pointer-events: none;
        }

            /* ===========================================
            TEXTO CORTO DEBAJO DE LA FOTO
            =========================================== */

        .secc2TextBlock {
            margin-top: var(--s2textmarginTop);
            display: flex;
            justify-content: center;
        }

        .secc2Text {
            width: 70%;
            margin-left: 15%;
            margin: 0;
            width: var(--s2textwidth);
            text-align: center;
            font-family: var(--s2textfont);
            font-size: 16px;
            line-height: 1.5;
            color: var(--s2textcolor);
        }

            /* ===========================================
            TEXTO LARGO / CUERPO
            =========================================== */

        .secc2BodyTextBlock {
            margin-top: var(--s2bodytextmarginTop);
            display: flex;
            justify-content: center;
        }

        .secc2BodyText {
            margin: 0;
            width: var(--s2bodytextwidth);
            text-align: center;
            font-family: var(--s2bodytextfont);
            font-size: 13px;
            line-height: 1.6;
            color: var(--s2bodytextcolor);
        }
        /*Seccion 2 Papas-Padrinos*/
        .imBackgroundContainer {
            position: relative;
            width: 100%; /* Adjust width as needed */
            height: 580px; /* Adjust height as needed */
            display: inline-block; /* Enables the container to grow with the content */
        }
        .content {
            background: transparent;
            padding: 15px;
            border-radius: 3px;
            text-align: center;
        }

        .fontTitle{
            font-family: 'josefin';
            font-style: normal;
            font-weight: 500;
            font-size:18px;
            color: var(--fontColor);
            text-transform: none;
        }
        .fontNames{
            font-family: 'aboretoFont';
            font-style: normal;
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
            color: var(--fontColor);
            text-transform: uppercase;
        }
        .fontNuestraBoda{
            font-family: 'cinzelRegularFont';
            font-style: normal;
            font-size: 30px;
            font-weight: 600;
            color: var(--fontColor);
        }

    /*Seccion 3 Votos + Fotos*/
    .circlePhotoWrapper {
        position: relative;
        width: 260px;     /* tamaño total del bloque */
        height: 260px;
        margin: 0 auto;   /* centrado */
    }

    /* Círculo decorativo de atrás */
    .circleBack {
        position: absolute;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        border: 2px solid #8f8f63;
        top: 10px;        /* lo mueves como tú lo quieras */
        right: -30px;      /* hacia la izquierda */
        z-index: 1;       /* DETRÁS */
        opacity: 0.8;
    }

    /* Foto circular */
    .circlePhoto {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        overflow: hidden;

        top: 40px;
        left: 50%;
        transform: translateX(-50%); /* Foto centrada */

        z-index: 2; /* ENCIMA */
    }

    .circlePhoto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .fechaElegante {
        text-align: center;
        line-height: 1.1;
        color: #3a332e;   /* tono oscuro elegante */
        font-family: "AbygaerFont", serif;
    }

    /* Día */
    .fechaElegante .dia {
        font-size: 75px;
        font-weight: 400;
        margin-bottom: 8px;
        color: var(--colorDate);
    }

    /* Mes */
    .fechaElegante .mes {
        font-size: 60px;
        font-weight: 300;
        margin-bottom: 8px;
        color: var(--colorDate);
    }

    /* Año */
    .fechaElegante .anio {
        font-size: 75px;
        font-weight: 400;
        color: var(--colorDate);
    }

    /*Seccion UBICACIONES*/
    .ceremoniacontainer {
      width: 100%;
      max-width: 420px;   /* simula pantalla de cel */
      position: relative;
      padding: 10px 0;
      font-family: "Julius Sans One", serif;
    }

    /* Encabezado */
    .ceremoniatitle {
      text-align: center;
      color: #6f6f52;
      font-size: 34px;
      margin-bottom: 30px;
    }

    /* Texto lateral (hora) */
    .horavertical {
      position: absolute;
      top: var(--horaTop);
      transform: translateY(-50%);
      font-size: 36px;
      color: #6f6f52;
      letter-spacing: 2px;
    }
    .horaverticalR {
      position: absolute;
      top: var(--horaTop);
      transform: translateY(-50%);
      font-size: 36px;
      color: #6f6f52;
      letter-spacing: 2px;
    }
    .horaverticalText {
      display: inline-block;
      transform: rotate(-90deg);
      transform-origin: left top;
      white-space: nowrap;
    }
    .horaverticalTextR {
      transform-origin: right top;
    }


    /* =======================================
       BLOQUE MODULAR (rectángulo + foto + hora)
       ======================================= */
    .bloque {
      width: 100%;
      position: relative;

      /* variables sin guiones internos */
      --ancho: 80%;
      --altoRect: 220px;
      --radio: 70px;

      --mStart: auto;  /* margen izquierdo por defecto */
      --mEnd: 0;       /* margen derecho por defecto */

      /* esquinas por defecto */
      --rTL: var(--radio);
      --rTR: 0;

      /* posición de la hora por defecto (lado izquierdo) */
      --horaTop: 380px;
      --horaLeft: 15px;
      --horaRight: auto;
    }

    /* Rectángulo beige */
    .bloque .rect {
      position: relative;
      width: var(--ancho);
      height: var(--altoRect);
      background: #eeb69f;
      border-top-left-radius: var(--rTL);
      border-top-right-radius: var(--rTR);
      z-index: 1;
      margin-top: 20px;

      margin-left: var(--mStart);
      margin-right: var(--mEnd);
      margin-inline-start: var(--mStart);
      margin-inline-end: var(--mEnd);
    }

    /* Foto recortada */
    .bloque .foto {
      position: relative;
      width: calc(var(--ancho) - 5%);
      overflow: hidden;
      border: 3px solid #ebe2cd;
      border-top-left-radius: var(--rTL);
      border-top-right-radius: var(--rTR);
      margin-top: -200px;
      z-index: 5;

      margin-left: var(--mStart);
      margin-right: var(--mEnd);
      margin-inline-start: var(--mStart);
      margin-inline-end: var(--mEnd);
    }

    .bloque .foto img {
      width: 100%;
      display: block;
    }

    /*Fin Sección 1 Intro*/
    /*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    
    /*Fin Seccion 2*/

    /*Secc 3*/
    .regularSection {
        position: relative;
        display: flex;
        flex-direction: column; /* Uno debajo del otro */
        align-items: center;    /* Centro horizontal */
        margin-top: 25px;
    }
    .save-the-date-section > div 
    {
        width: 70%;
        max-width: 500px;
        text-align: center;
        margin: 0 auto 0px auto; /* centrado + separación entre bloques */
    }

    .rect {
        width: 80%;
        max-width: 500px; /* Opcional para que no crezca demasiado en pantallas grandes */
        height: 660px;
        border-radius: 0px; /* Ajusta a tu gusto */
        overflow: hidden; /* Para que la imagen respete el borde redondeado */
        display: flex;
        
        justify-content: center;
        align-items: center;
    }

    .rect img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Mantiene proporción y llena el área */
        border-radius: 0px; /* Extra seguridad */
        margin-bottom: 10px;
    } 
    
    .saveTDtxt{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Uno debajo del otro */
    }

    .large 
    {
        font-size: var(--fontsizeSTD1-2); /* Large font size for "SAVE" */
        display: block; /* Make it a block to take full width */
        font-family: var(--fontAyC);
        font-weight: 100;
        color: var(--colorDate);
    }
    .medium 
    {
        font-size: var(--fontsizeSTD2-3);/*95px; /* Smaller font size for "the" */
        display: inline-block; /* Inline block for smaller width */
        position: relative; /* Relative positioning for fine-tuning */
        top: var(--duistSTDDist1-2);/*-15px; /* Adjust vertical position to overlap slightly */
        font-family: var(--fontB);
        font-weight: 500;
        margin-bottom: var(--duistSTDDist2-3);/*-25px;*/
        color: var(--colorDate);
    }
    .small 
    {
        font-size: var(--fontsizeSTD1-2);/*80px; /* Smaller than "SAVE" but larger than "the" */
        display: block; /* Block to take full width and provide spacing */
        font-family: var(--fontAyC);
        font-weight: 100;
        margin-bottom: var(--spaceFromPhrase);
        color: var(--colorDate);
    }
    .saveTheDateFrase 
    {
        font-family: var(--fuente1);
        font-size: 18px;
        font-style: normal;
        line-height: 26px;
        width: 60%;
        color: var(--fontColor);
        text-align: center;
        margin-left: 0;
    }
    .decCentral {
        width: 90%;
        max-width: 500px; /* Ajustable */
        margin-bottom: 20px;
    }

    .saveTheDateH2 {
        font-family: var(--fuente-titulos);
        font-size: var(--fontSize-SaveTheDate);
    }
    .saveTheDateH3 {
        font-family: 'LeMajorFont';
        font-style: normal;
        font-size: 40px;
        margin-bottom: 25px;
        color: var(--colorDate);
    }
    .saveTheDateNamePlaces{
        font-family: 'aboretoFont';
        font-style: normal;
        font-weight: 200;
        font-size: 20px;
        color: var(--colorDate);
        text-transform: uppercase;
    }
    .saveTheDateDatosPlaces{
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-weight: 100;
        line-height: 18px;
        font-size: 15px;
        color: var(--colorDate);
    }

    .event-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 10px; /* separación entre hora y botón */
        width: 100%;
    }

    /* Count Down */
    .countdown-header,
    .countdown, .centerDatos {
        position: relative;
        left: 0;
        transform: none;
        width: 70%;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        z-index: 2;
        color: var(--fontColor);
    }

    /* Título */
    .countdown-header {
        font-size: 40px;
        font-family: 'LeMajorFont';
        font-style: normal;
        margin-top: 40px;
        margin-bottom: 30px;
    }

    /* Contenedor de tiempos */
    .countdown {
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 0 auto 00px auto;
        width: 100%;
        max-width: 500px;
        color: var(--fontColor);
    }

    /* Cada bloque de tiempo */
    .time-section {
        text-align: center;
        font-family: var(--fuente1);
        font-size: 20px;
    }

    /* Número grande */
    .time-section div {
        font-size: 2em;
        font-weight: 600;
    }

    /* Etiqueta */
    .time-section span {
        font-size: .8em;
    }
    /*Fin Secc 3*/

    /*Secc 4 TimeLine*/
    :root {
        --tmlColor: #7b5a39;
        --colorTMLtxt: #7b5a39;
        --fontColor: #7b5a39;
        --fuente1: "Julius Sans One", system-ui, sans-serif;

        --tml-line-w: 2px;
        --tml-dot-size: 8px;

        /* 🆕 controla qué tanto se mueve la barra desde la izquierda */
        --timelineOffset: 40px;
    }

    .TMPtitle {
      margin: 0 0 25px;
      font-family: 'LeMajorFont', "Julius Sans One", serif;
      font-size: 40px;
      font-weight: 400;
      color: var(--fontColor);
      text-align: center;
      width: 100%;
    }

    .TMLtimelineWrapper {
      width: 100%;
      position: relative;
    }

    .TMLtimeline {
      position: relative;
      width: 110px;
      margin-left: var(--timelineOffset);
      padding: 20px 0;
    }

    .TMLcontainer {
      position: relative;
      width: 100%;
      padding: 20px 0;
    }

    .TMLcontainer::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 100%;
      transform: translateX(-50%);
      width: var(--tml-line-w);
      height: 26px;
      background-color: var(--tmlColor);
    }

    .TMLcontainer:last-child::after,
    .TMLcontainer.TMLlastVisible::after {
      display: none;
    }

    .TMLcontent {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .TMLicon {
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
      background-color: var(--tmlColor);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-position: center;
      mask-position: center;
    }

    .TMLtimeline .TMLicon {
      align-self: center;
      margin-left: auto;
      margin-right: auto;
    }

    .gft-gift .TMLicon {
      margin-left: auto;
      margin-right: auto;
    }

    .TimelineTitle {
      margin: 0;
      font-family: var(--fuente1);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--colorTMLtxt);
      line-height: 1.3;
    }

    .TimelineTxt {
      margin: 0;
      font-family: var(--fuente1);
      font-size: 13px;
      font-weight: 400;
      color: var(--colorTMLtxt);
    }

    /* ================================
       FOTO RECORTADA ABSOLUTA
    ================================= */
    .fotoMarco {
      position: absolute;   /* 🔥 AHORA SE PUEDE MOVER CON top/left */

      border-top-left-radius: 90px;
      border-bottom-left-radius: 90px;
      overflow: hidden;
      background-color: #fff;

      
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 20%;

      width: 80%;
      height: auto;
    }
    /*Fin Secc5*/

    /*Fin Secc 6*/

    /* ================================
       FOTO RECORTADA ABSOLUTA
    ================================= */
    .fotoMarcoB {
      position: absolute;   /* 🔥 AHORA SE PUEDE MOVER CON top/left */

      border-top-left-radius: 0px;
      border-bottom-right-radius: 90px;
      overflow: hidden;
      background-color: #fff;

      background-image: url('../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 20%;
    }


    /*Secc 6 Galeria*/
    .galeria2 {
        background-size: cover;
        min-height: 600px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 800px;
        overflow: hidden;
        margin-bottom: 50px;
    }
    .galeria2 .animated{
        animation-duration: 100ms;
    }

    .galeria2 .owl-item:nth-child(odd) {
        margin-top: 0px;
        transform: rotate(0deg)
    }

    .galeria2 .owl-item:nth-child(even) {
        transform: rotate(-0deg)
    }

    .galeria2 .owl-item:nth-child(3n+4) {
        margin-top: 0px;
        transform: rotate(-0deg)
    }

    .galeria2 .owl-stage {
        padding: 70px
    }

    .galeria2 .owl-item:hover {
        z-index: 10000;
        transform: scale(1.2) rotate(0)
    }

    .galeria2 .owl-item:hover .item {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.603)
    }

    .galeria2 .item {
        position: relative;
        max-width: 702px;
        max-height: auto;
        z-index: 1000;
        overflow: hidden;
        border: 3px solid #ffffff;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.3)
    }

    /*Fin Secc6*/
    .imBackgroundAdditionalImage { /*Logo Hand Click*/
        position: absolute;
        bottom: 7px; /* Position at the bottom of the container */
        right: 7px; /* Position at the right of the container */
        width: 30px; /* Adjust size as needed */
        height: auto;
    }

    /*Main Image*/
    
   

    .event-container {
        display: block
    }

    .event-wrap {
        width: 70%;
        margin-left: 15%;
        padding: 24px 0;
        margin-top: -50px;
    }

    .event-btn .btn-grl,.event-btn .event-hra {
        display: inline-block;
        margin: 0 4px;
        width: 124px;
        margin-top: 13px;
        font-size: 15px;
    }

    .ceremonia-wrap-names {
        border: 5px solid;
        position: relative;
        vertical-align: top;
        
        transform: translate(0, -50%);
        padding: 10px;
    }

    .ceremonia-wrap {
        border-right: none;
        
    }

    div.mdl-2 {
        width: 100%;
        margin-bottom: 10px
    }

    


    .reservacion-section {
        background: transparent;
        margin-top: 68px;
    }

    .form-reservacion {
        position: relative;
        padding: 34px 40px;
        width: 90%;
        max-width: 880px;
        border: #e2e2e2 1px solid;
        background: #fff;
        margin: 0 auto;
        box-shadow: 0 0 50px 5px rgba(0,0,0,.05);
        border-radius: var(--border-radius-section);
        overflow: hidden;
        border-radius: 0px;

        border-bottom-left-radius: 90px;
    }

    .form-reservacion .btn-grl {
        width: 100%;
        z-index: 10000;
    }

    .form-reservacion .row {
        margin: 15px 0
    }

    .form-reservacion input,.form-reservacion select {
        border: 1px solid #e2e2e2;
        width: 100%;
        height: 42px;
        padding: 0 24px;
        font-size: 20px;
        margin-top: 8px;
        transition: .18s ease-in all;
        box-shadow: 0 0 12px rgba(156,156,156,.14);
        background: #fff;
        border-radius: 2px;
        font-size: 16px;
        font-family: 'garamondFont';
        font-size: 16px;
        
    }

    .form-reservacion select,.form-reservacion input,.form-reservacion textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -ms-appearance: none
    }

    .form-reservacion select {
        font-family: 'garamondFont';
        font-size: 13px;
    }

    .titlesGrl_ConfAsistencia{
        font-family: 'cinzelRegularFont';
        font-size: 20px;
        text-align: center;
        color: var(--fontColor);
    }
    
    /* Flip card container */
    .flp-Card-container {
        width: 80%; /* 80% width */
        height: 350px; /* 60vh height */
        perspective: 1000px; /* Create 3D space */
        margin: 0 auto;
        cursor: pointer;
        border-radius: 0px; /* Ajusta a tu gusto */
        border-bottom-left-radius: 90px;
    }

    /* Flip card front and back */
    .flp-Card-front{
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden; /* Hide the back when facing front */
        border-radius: 10px;
        overflow: hidden; /* Ensures consistent borders */
        padding: 0; /* Remove any default padding */
        box-sizing: border-box; /* Include padding in width and height */
    }

    /* Front side styling */
    .flp-Card-front {
        height: 350px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; /* Ensures no repeat */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Flip effect */
    .flp-Card-container.flipped .flp-Card-inner {
        transform: rotateY(180deg);
    }

       
    .noNiñosMsg{
        font-family: var(--fuente2);
        font-size: 17px;
        width: 100%;
        text-align: center;
        position: relative;
        padding: 34px 40px;

    }


    /*MODAL Containers*/
    .modal-container {
        background: white;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 1000000;
        display: none;
        overflow: scroll;
        top: 0;
        left: 0
    }

    .modal-wrap {
        width: 90%;
        left: 5%;
        position: absolute;
        
        padding: 20px;
        height: 100vh;
        text-align: center;
    }

    .modal-container {
        z-index: 10;
        
        position: fixed
    }

    .cerrar-modal {
        width: 32px;
        height: 32px;
        position: fixed;
        right: 20px;
        border-radius: 32px;
        top: 30px;
        z-index: 1000;
        background-color: var(--modal-bg);
        background-size: cover;
        background-image: url(../Media/Ims/Iconos/cerrar-btn-modal.svg)
    }

    /* Hotels*/
    .htl-hotel-container {
        width: 100%;  /* Allows container to be flexible */
        padding-top: 50px;
        margin: auto;
        text-align: center;
    }
    .htl-hotel-container h1{
        font-family: 'cinzelRegularFont';
        font-style: normal;
        font-size: 30px;
        margin-bottom: 20px;
        margin-bottom: 45px;
        color: var(--fontColor);
    }
    .htl-hotel-item {
        background: #ffffff;
        
        padding: 15px;
        margin-bottom: 10px;
    }

    .htl-hotel-item img {
        max-width: 100%;  /* Responsive image sizing */
        height: auto;
        margin-bottom: 15px;
    }

    .htl-hotel-info{
        margin-bottom: 25px;
    }

    .htl-hotel-info h2 {
        margin-top: 15px;
        margin: 5px 0;
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 23px;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--fontColor);
    }

    .htl-hotel-info p {
        
        color: var(--fontColor);
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 17px;
        line-height: 17px;
        margin-bottom: 30px;
    }

    .htl-hotel-link {
        
        background-color: var(--colorBotones);
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
    }

    .htl-hotel-link:hover {
        background-color: var(--colorBotones);
    }
    /*Hotels*/

    /*gifts */
    .gft-gifts-container {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .gft-gifts-container h1{
        font-family: 'cinzelRegularFont';
        font-style: normal;
        font-size: 30px;
        margin-bottom: 20px;
        margin-bottom: 45px;
        color: var(--fontColor);
    }
    .gft-gifts-container p{
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 18px;
        margin-bottom: 20px;
        
        color: var(--fontColor);
    }
    .gft-gifts-containerH3{
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 18px;
        margin-bottom: 20px;
        
        color: var(--fontColor);
    }
    .gft-gift {
        margin-bottom: 20px;
    }

    .gft-gift img {
        width: 100%;
        height: 80px;
        width: auto;
        margin-bottom: 10px;
    }

    .gft-description h2, .gft-description p {
        margin: 10px 0;
    }

    .gft-button:hover {
        background-color: #f0f0f0;
    }

    .gft-description{
        margin-bottom: 25px;
    }

    .gft-description h2 {
        margin: 5px 0;
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 23px;
        font-weight: 600;
        color: var(--fontColor);
    }

    .gft-description p {
        
        color: var(--fontColor);
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 17px;
        line-height: 17px;
        margin-bottom: 25px;
    }

    hr {
        border: none;
        height: 1px;
        background-color: #ccc;
        margin: 20px 0;
    }
    .gft-gifts-container {
        width: 100%;
    }

    /*Fin Gifts*/
}

@media(max-width: 380px) {

    .imBackgroundContainer {
        position: relative;
        width: 100%; /* Adjust width as needed */
        height: 580px; /* Adjust height as needed */
        display: inline-block; /* Enables the container to grow with the content */
    }

     .modal-bienvenida {

        /* Imagen principal */
        --s1imgtop: 30px;
        --s1imgleft: 10px;
        --s1imgwidth: 300px;
        --s1imgheight: 80vh;
        --s1bgborderradius: 130px;
        --s1bgpos: center bottom;

        --m2datetop: 61px;
        --m2dateleft: 10px;

        --m2circlesize: 165px;
        --m2circletop: 141px;

        --m2line1length: 270px;
        --m2line1top: 31px;
        --m2line1right: 265px;

        --m2line2length: 230px;
        --m2line2top: 313px;
        --m2line2right: 20px;

        --m2line3length: 60px;
        --m2line3top: 293px;

        --m2photowidth: 170px;
        --m2photoheight: 170px;
        --m2phototop: 172px;

        --m2logobottom: 26%;
        --m2btnbottom: 15%;

        --logoSize: 90px;

        --m2titletop: 7%;
    }

    .secc1Date {
        font-size: 36px;
    }

    .secc1TitleMain {
        font-size: 30px;
    }

    .secc1TitleSub {
        font-size: 34px;
    }
}


@media(max-width: 350px) {
    .imBackgroundContainer {
        position: relative;
        width: 100%; /* Adjust width as needed */
        height: 570px; /* Adjust height as needed */
        max-height: 250vh;
        display: inline-block; /* Enables the container to grow with the content */
        /*background-image: url("../Icons/2Vert.jpg");*/
    }
}

@media(max-width: 300px) {

   

    .imBackgroundContainer {
        position: relative;
        width: 100%; /* Adjust width as needed */
        height: 500px; /* Adjust height as needed */
        max-height: 300vh;
        display: inline-block; /* Enables the container to grow with the content */
        /*background-image: url("../Icons/2Vert.jpg");*/
    }
}