*{
    margin: 0;
    padding: 0;
}

    body{max-width: 100%;
        /* background-image: url("../wallpaper/sunrise.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply; */
        background-color: #748995;}

    .nav{height: 60px;
    background-color:#748995;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 40px 0 40px;
    align-items: center;
   background-color: transparent;
    backdrop-filter: blur(15px);
    
}

.menu a{color: #fff5e1;
padding: 10px;
letter-spacing: 1px;
text-decoration: none;
font-family:my-font;
    font-weight:600;
}

.menu a:hover{
border-bottom: 1px solid #fff8e1;}

.my-btn{background-color: #002950;
    padding: 10px 10px;
    border-radius: 15px;
    text-decoration: none;
    color: #fff8e1;
    border:none;
}

 .sidebar{display: none;} 

#menu-icon{display:none;}

.sidebar{background-color: #fff8e10c;
    list-style: none;
    display: flex;
    display: none;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 60px;
    right: 5px;
    padding: 10px 20px;
    z-index: 999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 1px rgb(0, 0, 0);
    backdrop-filter: blur(20px);}

.my-btn a{color: #fff8e1;
    text-decoration: none;
}
.my-btn:hover{padding: 15px;
    transition:0.5s;
}

/* home-sec-1 */

.home{height: 90vh;
   
    background-image: url("../img/ram mandir new.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: #1e1a4288;
    color: #fff8e1;
    text-align: center;
    align-content: center;
    

}

.my-h4{font-family: my-font;}

/* home-sec-2 */

.d-flex-row{min-height: 70vh;
    width: 100%;
justify-content: center;
background-image: url("../img/5.jpg");
background-size: cover;
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: multiply;
 background-color: #16232ad8;
display: flex;
flex-direction: column;
padding: 50px;
gap: 70px;
box-sizing: border-box;
color: #fff8e1;
}




.flex-col-1{
display: flex;
flex-direction: row;
justify-content: space-evenly;
border-radius: 20px;}

.my-img{border-radius: 20px;}
.my-img:hover{padding: 20px;
transition: 0.7s;
}

.flex-col-2{text-align: center;
    text-align: justify;
    color: #fff8e1;
    font-family: my-font;
    padding: 20px;
    backdrop-filter: blur(100px);
    border-radius: 20px;
}

.flex-col-2 h2{text-align: center;
padding: 10px;
font-family: my-font;
color: #fff8e1;
}

hr{border: none;
border-bottom: 1px dotted #fff8e1;}

    

@keyframes slideup{0% {transform: translateY(0px);}
25% {transform: translateY(-20px);}
50% {transform: translateY(0px);}
75% {transform: translateY(-5px);}
100% {transform: translateY(0px);}}

.my-logo{animation-name: slideup;
animation-duration: 5s;
animation-timing-function:ease-in-out;
animation-fill-mode: none;}



/* card */

.carousel {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    justify-content: space-evenly;
    /* padding-bottom: 50px; */
    background-image: url("../img/4.jpg");
background-size: cover;
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: multiply;
 background-color: #16232ad2;
 gap: 50px;

}

.carousel-head {
    font-size: 40px;
    color: #fff8e1;
    text-align: center;
    font-family: my-font;
    padding-top: 70px;
    
}

.carousel-para {
    text-align: center;
    font-style: italic;
    font-size: 20px;
    color: #fff8e1;
    font-family: my-font;
}

.carousel-row2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.card-detail {display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #3a464e;
    color: #fff8e1;
    width: 260px;
    border-radius: 20px;
    padding: 20px;
    margin-top: -10px;
    position: relative;
    font-family: my-font;
    
    
}

.card-head{font-size: medium;}


.card-img {
    border-radius: 20px 20px 0 0;
    transition: 0.5s;
}

.carousel-col-card{display: inline-block;}

.myslider {
    margin: 0;
    padding: 0;
}

.slider-container {
    display: flex;
    min-height: 30vh;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

.slider-container i{background-color: hsl(210, 45%, 12%);
    border-radius: 50%;
    color: #fff8e1;
font-size: 30px;
}

#next {
    position: absolute;
    right: 50px;
    top: 50%;
}

#previous {
    position: absolute;
    left: 50px;
    top: 50%;
}

.d-none {
    display: none;
}

.slider-img {
    height: 50vh;
    border-radius: 12px;
}


/* home-sec-3 */

.sec3-row {
    color: #cdd5b9;
    text-align: center;
    font-size: 30px;
    font-family: my-font;
}

#sec3-row-text {
    font-style: italic;

}

.home-sec-3 {
    min-height: 100vh;
    background-color: #324149;
    background-image: url("../img/Ram_Raja_Temple.png");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 30px;
}


.home-sec3-row2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
}

.home-sec3-col {
    width: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
}

.home-sec3-col-img {
    border-radius: 30px 30px 0 0;
    box-shadow: 1px 3px 3px #000000;
    transition: 0.5s;
}

.home-sec3-col-img:hover {
    padding: 10px;
}

.home-sec3-p {
    min-height: 180px;
    width: 260px;
    display: flex;
    padding: 20px;
    color: #fff8e1;
    border-radius: 15px;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    backdrop-filter: blur(100px);
    justify-content: space-between;
    margin-top: -30px;
    
}

/* .home-sec3-btn {
    color: #cdd5b9;
    background-color: #0D1F2D;
    padding: 15px;
    border: none;
    border-radius: 15px;
    margin-top: 20px;
} */

.home-sec3-btn:hover {
    padding: 17px;

}

.d-flex-row {
    display: flex;
    flex-direction: column;
    min-height: 40vh;
}




/* home-sec-4 */

.home-sec-4 {
    min-height: 80vh;
    background-color: #222c32;
    background-image: url("../img/3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
 

}

.home-sec-4-head {
    color: #fff8e1;

}

.home-sec-4-row1 {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
 
.home-sec-4-head{ font-size: 40px;
padding-bottom: 30px;
font-family: my-font;}



.home-sec-4-cards {
    min-height: 90px;
    width: 100px;
    color: #fff8e1;
    background-color: transparent;
    backdrop-filter: blur(90px);
    padding: 40px;
    text-align: center;
    border: none;
    border-radius: 30px;
    flex-wrap: wrap;

}

.home-sec-4-cards:hover{padding: 45px;
transition: 0.7s;}


/* Footer */


.footer {height: 250px;
    display: flex;
    flex-direction: column;
    background-color: #1b282fd1;
    background-image: url("../img/footer.jpg");
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    font-family: my-font;
    background-blend-mode: multiply;
    justify-content: center;
    color: #fff8e1;
    font-family: sans-serif;
    padding-top: 10px;
    
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-left: 10px 0;
    padding-bottom: 10px;
    font-family: my-font;
    backdrop-filter: blur(1px);
}

.footer-col {
    display: flex;
    flex-direction: column;
    /* gap: 15px; */
    align-items: center;
    justify-content: center;
    width: 30%;
}

#copyright {
    width: fit-content;
    padding-top: 10px;
    
}

#developer {
    width: fit-content;
    padding-top: 10px;
}

.line {
    border: none;
    border-bottom: 1px dotted #002950;
    opacity: 0.5;
}

.link {
    
    padding: 5px;
    height: 10px;
    transition: 0.5s;
}

.link:hover {
    padding: 10px;

}

.map {
     border-radius: 10px;
}

.name {
    color: #fff8e1;
}

.name:hover {
    color: #dcbe12;
    padding: 10px;
}

.heading1 {
    margin-bottom: 20px;

}    






/* booking.html */
.booking-room{min-height: 100vh;
    min-width: 100%;
    background-color:#768a94;
    background-image: url("../img/13.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-blend-mode: multiply ;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff8e1;
   }

    h3{text-align: center;
    padding-bottom: 20px;}

    .booking-sec-1-row1{font-size: 30px;}

    .booking-row2{display: flex;
    flex-direction: row;
    
    gap: 40px;}

    .booking-sec-1-row2{background-color:transparent;
        font-size: large;
        color: #fff8e1;
    padding: 20px 40px;
    border-radius: 20px;
    border: 1px solid #fff8e1;
    backdrop-filter: blur(100px);
    margin-left: 100px;
    font-family: my-font;
        position:relative;
        z-index:1;    }


    .my_input{min-width: 300px;
    min-height: 20px;
    border-radius: 20px;
    border: none;
    background-color: #0d2950;
    color: #fff8e1;
    padding: 7px 15px;
    margin: 5px;}

    .my-video{border-radius: 30px 30px 0 0;
        
    }

    .booking-notes{min-height: 100px;
        width: 53%;
        background-color: #768a94;
    color: #fff8e1;
    padding: 10px;
    border-radius: 20px;
    margin-top: -10px;
    position: absolute;}


    /* facilities.css */

    .facilities-sec-1{min-height:  100vh;
        background-color: #768a94;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-image: url("../img/13.jpg");
        background-repeat: repeat;
        background-size: cover;
        background-blend-mode: multiply;
        padding: 20px;
        gap: 20px;
        align-items: center;
    color: #002950;}
    
    .facilities-sec-1-row1{
        width: 70vw;
        background-color: transparent;
        text-align: center;
        border-radius: 20px;
        padding: 10px;
    color: #fff8e1;}

    .facilities-sec-1-row2{display: flex;
        flex-direction: row;
         gap: 30px;
        justify-content: center;}
    
    .facilities-sec-1-col1{display: flex;
    flex-direction: column;
    gap: 10px;
    }

    .facilities-sec-1-col1-head{min-height: 175px;
        width: 40vw;
    /* background-color: #fff8e1; */
    background-color: transparent;
    color: #fff8e1;
    backdrop-filter: blur(70px);
    padding: 15px 15px;
    border-radius: 30px;
    text-align: justify;
    /* border: 1px solid #fff8e1; */
    font-family: my-font;
    }

    .facilities-sec-1-col1-head:hover{border-bottom: 1px solid #002950; 
        transition: 1s;
        transform: scale(1.05);}


    .facilities-sec-1-col2{display: flex;
    flex-direction: column;
    gap: 10px;}



    /* about.css */

    .about-sec-1{background-color: #fff8e1;
    min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 30px;
color: #fff8e1;
        background-color: #768a94;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-image: url("../img/13.jpg");
        background-repeat: repeat;
        background-size: cover;
        background-blend-mode: multiply;
        font-family: my-font;
}

.about-sec-1-row1{text-align: center;

padding: 20px;
border-radius: 30px;

}

.about-sec-1-row2{
    display: flex;
flex-direction:row;
padding: 30px;
align-content: space-evenly;
gap: 30px;
backdrop-filter: blur(70px);
}

.about-sec-1-col{min-height: 40vh;
width: 40vw;
align-items: center;
text-align: justify;}

.about-sec-1-row3{display: flex;
flex-direction: row;
justify-content: space-evenly;}

.about-sec-1-card{min-height: 100px;
width: 250px;
border: 1px solid #002950;
padding: 10px;
border-radius: 30px;
text-align: center;
align-content: center;
color: #002950;}



.msg{
    width: 100%;
    background-color: #fff8e1;
    color: #002950;
    padding: 10px;
    box-shadow: 4px 4px 6px #000000a4;
    border-radius: 8px;
    margin-top: 8px;
}

.alert{
    color: #00550d;
}

.error{
    color: #ff4561;
}


/* contact.css */
@font-face{
    font-family:  'my-font';
    src: url('../fonts/JosefinSans-Thin.ttf');
}
@font-face{
    font-family: 'my-font2';
    src: url('../fonts/JosefinSans-Light.ttf');
}

#my-title{
    font-family: 'my-font';
    font-size: 40px;
}



.contact-sec-1{min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;}

.contact-sec-1-row1{min-height: 30vh;
    width: 100%;
    background-color: #000000b3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../wallpaper/view-beautiful-rainbow-nature-landscape.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-position:center;
    color:#fff8e1;
    letter-spacing: 1.5px;
   font-family: sans-serif;


}

.contact-sec-1-row2{background-color: #768a94;
                    min-height: 20vh;
                     width: 100%;
                    align-items: center;
                     display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: rgb(13, 41, 80);
                     text-align: center;
                    color: #fff8e1;
                font-family: my-font;}

#contact-hr{border: none;
border: 1px solid rgb(13,41,80);
}

.contact-sec-1-row3{min-height: 20vh;
                    display: flex;
                    width: 100%;
                    flex-direction: row;
                     align-items: center;
                    justify-content: center;
                    background-color: #768a94   ;
                    text-align: center;
                    padding-bottom: 30px;
                    color: #fff8e1;
                     font-family: my-font;
}

.contact-sec-1-row3-cards{border-right: 1px solid #002950;
    color: rgb(13,41,80);
    color: #fff8e1;
    padding: 0 50px;}

#card-3{border: none;}


/* booking-info.php */

.booking-info{min-height: 50vh;
background-color: #768a94;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
color: #fff8e1;
background-color: #768a94;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-image: url("../img/13.jpg");
        background-repeat: repeat;
        background-size: cover;
        background-blend-mode: multiply;
        font-family: my-font;
        backdrop-filter: blur(70px);
}

.booking-info-input{color: #002950;
    padding: 8px;
    width: 300px;
    border-radius: 20px;
    background-color: transparent;
    color: #fff8e1;
    }

.booking-info-row1{font-size: larger;
    min-height: 200px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff8e1;
    border-radius: 20px;
    box-shadow: 2px 2px 3px 1px #0d2950;
    backdrop-filter: blur(10px);
}
    
.booking-info-row2{gap: 20px;}




.submit-otp{min-height: 30vh;
    background-color: #fff8e1;
    color: #002950;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
gap: 20px;}
                    

/* admin-login */

.admin{height: 100vh;
background-color: #212e36ef;;
background-image: url('../img/13.jpg');
background-repeat: repeat;
background-size: cover;
background-position: top center;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
color: #fff8e1;}

.admin-form{height: 350px;
    width: 450px;
    background-color: transparent;
    padding-top: 50px; 
    border: none;
    box-shadow: 1px 0 1000000px #768a94;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    font-family: my-font;
    
}

.admin-input{width: 400px;
    height: 30px;
padding: 5px;
border-radius: 50px;
color: #fff8e1;
background-color: transparent;
border: none;
border-bottom: 1px solid #ffffff;}

.admin-btn{width: 400px;
height: 40px;
margin-left: 20px;
font-family: my-font;
border-radius: 30px;
font-size: large;
color: #fff8e1;
background:transparent;
font-weight: 600;
cursor: circle;
position: relative;
z-index: 1;
overflow: hidden;
}

.admin-btn::before{content: '';
    position: absolute;
    background-color: #768a94   ;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: 0.5s;
}
.admin-btn:hover::before{
    width: 100%;}

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

.form-group i{
    position: absolute;
    top: 50%;
    right: 10px;
}

.admin-form h3{font-size: 25px;}

.submit-otp{height:55vh;
    background-color:#768a94;
    color:#fff8e1;
    font-family:my-font;
}















    

/* MEDIA Query */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 80.0625em) {

    /* nav bar */
    #menu{display: none;} 
    .sidebar{background-color: #768a94;
        list-style: none;
        display: none;
        /* display: none; */
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 60px;
        right: 5px;
        padding: 10px 20px;
        z-index: 999;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 1px rgb(0, 0, 0);
        width:350px;
        text-align:left;
       
        
        
    } 
    .sidebar li{padding: 5px;}
    .sidebar a{text-decoration: none;
    font-family: sans-serif;
    color: #fff8e1;
    font-size: 15px;
    text-decoration: none;
    
    }
    #menu-icon{display:flex;}
    .sidebar a:hover{background-color: #ffffff;
    width: 100%;}
    
    .mobile-btn{background-color: #002950;
        border: none;
        padding: 5px;
        border-radius: 10px;

    }

    
    .home{width: 100%;}
    .my-logo{height: 100px;}
    .my-h4{font-size: 10px;}
    .my-btn{padding: 10px;
    font-size: 10px;}

    /* sec 2 */
    .d-flex-row{width: 100%;}
    .flex-col-1{display: flex;
        flex-wrap: wrap;
        gap: 10px;}

    .flex-col-1 img{height: 200px;}


/* sec 3 */
    .home-sec-3{padding: 15px;
    gap: 20px;}
    .sec3-head{font-size: 15px;
    font-family: my-font;}
    .home-sec3-row2{display: flex;
    flex-wrap: wrap;}

    .home-sec3-row2 img{height: 250px;
        width: 350px;}
    .home-sec3-p{min-height: 80px;
        width: 330px;
        padding: 10px;
        justify-content:space-between;   }
        
        
    .home-sec3-p p{font-size: 15px;
    font-family: my-font2;}

    /* carousel */
    .carousel{display: flex;
    flex-direction:column;
    gap: 10px;
    padding: 20px;}
    .carousel-head {
        font-size: 20px;
    }

    .carousel-para{font-size: 15px;
    }

    .slider-img{height: 30vh;}

    .carousel-row2{display: flex;
    gap:60px;
    flex-direction: column;}
    .card-img{height: 250px;
                width: 370px;}
    .carousel-col-card{min-height:40vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;}
    .card-detail{font-size: 15px;
            width: 330px;}

        /* sec-4 */
    .home-sec-4{padding:20px;}
    .home-sec-4-head{font-size: 25px;}
    .home-sec-4-row1{display: flex;
        flex-wrap: wrap;
        align-items: center;
    justify-content: center;}

/* booking.php */
    .booking-room{padding-bottom: 40px;
        min-height: 100vh;
        
    }
    .booking-row2{
        
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        
    }
    .booking-sec-1-row2{font-size: small;
        min-height: 400px;
        width: 200px;
        margin-left:0;
        display:block;
        
    }
    .my_input{min-width:200px;}
    
    
    .video-container{min-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;}
    .booking-row2 video{height: 210px;}

    .booking-notes{position: relative;
        height: 150px;
        width: 350px;}


    /* our facilities */

    #my-title{font-size: 30px;}

    /* about.php */

    .about-sec-1-row2{display: flex;
    flex-direction: column;}
    
    .about-sec-1-col{font-size: 15px;
    width: fit-content;}
    .about-sec-1-col img{height: 200px;}
    


    /* contact.php */

    .contact-sec-1-row1{min-width: 400px;}
    .contact-sec-1-row2{min-width: 400px;}
    .contact-sec-1-row3-cards{font-size: 12px;
        padding:15px;
        border:none;
    }
    .contact-sec-1-row3{width: 300px;
        display:flex;
        flex-direction:column;
    }
    .contact-para{font-size: 15px;}
    .contact-para1{width: 250px;}
    #card-3{width: fit-content;}

    /* footer */
    .footer{min-height:550px;}
    .footer-row{display: flex;
        flex-direction: column;
    gap: 20px;}
    #logo img{height: 100px;}
    #social-icon h4{font-size: 18px;}
    .social-icon-img img{height: 20px;}
    #map iframe{
                height: 200px;
                width: 360px;}
    #copyright p{font-size: 12px;}
    #developer p{font-size: 12px;}

    .admin-form{height: 250px;
    width: 350px;}

    .admin-input{width: 300px;}
    .admin-btn{width: 300px;
    font-size: 15px;}
    
    .booking-info-row1{width:350px;}
    
    

}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 1200px) {
    
    
}
    




   
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

    .facilities-sec-1-row2{
        flex-direction: column;
    }
    .facilities-sec-1-col1-head{
        width: 80vw;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


}