/*=========================================================
 NIC Kerala Onam Celebration 2026
 Invitation Page Theme
=========================================================*/


/*=========================================================
 HERO
=========================================================*/


.invitationHero {


    min-height: 65vh;


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;



    background:


        linear-gradient(135deg,

            rgba(255, 213, 79, .92),

            rgba(255, 152, 0, .88)),


        url("../images/onam-bg.jpg");



    background-size: cover;


    background-position: center;


    overflow: hidden;


}



.invitationOverlay {


    position: absolute;


    inset: 0;



    background:

        radial-gradient(circle,

            transparent,

            rgba(0, 0, 0, .35));

}




.invitationHeroContent {


    position: relative;


    z-index: 2;


    max-width: 950px;


    text-align: center;


    color: white;


    padding: 50px 20px;


}




.invitationHeroContent .tag {


    display: inline-block;


    padding: 8px 25px;


    border-radius: 40px;



    background:

        rgba(255, 255, 255, .25);



    backdrop-filter: blur(10px);



    font-family:

        "Noto Sans Malayalam";



    font-weight: 700;


    font-size: 20px;


}




.invitationHeroContent h1 {


    font-family: "Cinzel", serif;


    font-size: 64px;


    font-weight: 900;


    margin: 20px 0;


}



.invitationHeroContent h2 {


    font-size: 34px;


}



.invitationHeroContent p {


    font-size: 19px;


    line-height: 1.8;


}





.invitationHero .heroInfo {


    display: flex;


    justify-content: center;


    flex-wrap: wrap;


    gap: 20px;


    margin-top: 35px;


}




.invitationHero .heroInfo div {


    padding: 14px 28px;


    border-radius: 35px;



    background:

        rgba(255, 255, 255, .22);



    backdrop-filter: blur(10px);


}






/*=========================================================
 INVITATION SECTION
=========================================================*/


.invitationSection {


    padding: 90px 8%;


    background:


        linear-gradient(180deg,

            #fffaf0,

            #fff7ed);


}





.invitationGrid {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 40px;


    margin-top: 50px;


}






/*=========================================================
 INVITATION CARD
=========================================================*/


.inviteCard {


    position: relative;


    background: white;


    padding: 45px 40px;


    border-radius: 35px;


    overflow: hidden;



    box-shadow:


        0 20px 60px rgba(0, 0, 0, .12);



    border:

        2px solid rgba(255, 193, 7, .35);



}




.inviteCard::before {


    content: "";


    position: absolute;


    inset: 15px;


    border:

        1px dashed #fbbf24;



    border-radius: 25px;



    pointer-events: none;


}





.cardTop {


    width: 75px;


    height: 75px;


    margin: auto;



    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;



    font-size: 40px;



    background:

        linear-gradient(135deg,

            #ffd54f,

            #ff9800);


}






.inviteCard h2 {


    text-align: center;


    margin: 25px 0;


    color: #b45309;


    font-family:

        "Noto Sans Malayalam";


    font-weight: 800;


}




.inviteCard h3 {


    text-align: center;


    color: #92400e;


    margin-bottom: 25px;


}




.inviteCard p {


    position: relative;


    z-index: 2;


    font-size: 16px;


    line-height: 2;



    color: #475569;



    margin-bottom: 20px;


}




/* Malayalam */


.malayalamCard {


    background:


        linear-gradient(145deg,

            #fffdf5,

            #fff7ed);


}



.malayalamCard p {


    font-family:

        "Noto Sans Malayalam";



    font-size: 17px;


    line-height: 2.1;


}




/* English */


.englishCard p {


    font-family:

        "Poppins",
        sans-serif;


}





.signature {


    position: relative;


    z-index: 2;


    margin-top: 35px;


    text-align: right;



    color: #d97706;



    font-weight: 700;


    line-height: 1.8;


}








/*=========================================================
 EVENT DETAILS
=========================================================*/


.inviteDetails {


    padding: 60px 8%;


    background: #fff7ed;



    display: grid;


    grid-template-columns:

        repeat(3, 1fr);



    gap: 30px;


}





.detailBox {


    background: white;


    padding: 35px 25px;


    border-radius: 25px;



    text-align: center;



    box-shadow:


        0 15px 40px rgba(0, 0, 0, .08);


}



.detailBox div {


    font-size: 40px;


}



.detailBox h3 {


    margin: 15px 0;


    color: #ea580c;


}



.detailBox p {


    color: #475569;


    line-height: 1.8;


}








/*=========================================================
 MOBILE
=========================================================*/


@media(max-width:900px) {


    .invitationGrid {


        grid-template-columns: 1fr;


    }



    .inviteCard {


        padding: 35px 25px;


    }



    .inviteCard p {


        font-size: 15px;


    }



    .inviteDetails {


        grid-template-columns: 1fr;


    }



}





@media(max-width:768px) {


    .invitationHero {


        min-height: 55vh;


    }



    .invitationHeroContent h1 {


        font-size: 38px;


    }



    .invitationHeroContent h2 {


        font-size: 24px;


    }



}