*{
    margin:0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
    border: border-box;   
}
/* .navbar{
    height: 100px;
    width: 100%;
    background-color: rgba(227, 235, 237, 0.786);
}
.logo{
    background-image: url("../img/logo2.png");
    height:100px;
    width: 150px;
    background-size: cover;
    opacity: 1.5;
    margin-left: 10px;
     
}  */
.shyam{
    height: 150px;
    width: 100%;
    background-color: transparent;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.shyam1 h2{
       font-size: 35px;
       /* font-family: Georgia, serif; */
       font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 30px;
       color: rgb(81, 39, 120);
}

.shyam2{
    font-size: 1.5rem;
    color: rgb(97, 81, 113);
    display: flex;
    justify-content: center;
    align-items:center ;
    margin-top: 7px;
}
.peacock1{
    background-size: cover;
    height: 150px;
    width: 150px;
    transform: scaleX(-1);
}
.peacock2{
    background-size: cover;
    height: 150px;
    width: 150px;
}
.background{
    background-image: url("../img/mandap11.jpg");
    position: relative;
    height:900px;
    width: 100%;
    background-size:cover;
    border-top-left-radius: 45.5%;
    border-top-right-radius: 45.5%;
    margin-top: 30px;
    opacity: 1.5    ;
    z-index: 1;
}
.box1{
    height:auto;
    width: 100%;
    margin-top:-3%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}                                                                                                           
.box11{
    position: relative;
    /* top:-80px; */
    height: auto;
    width: 90%;
    /* background-color:rgb(167, 150, 170); */
    background-color:rgb(191, 172, 195);
    /* margin-left: 100px; */
    z-index: 2;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.5);
}
/* .box12{
    margin-top: 10px;
    padding-top: 12px;
} */
.box11 h2{
    font-size: 35px;
    margin-left: 15px;
    margin-top: 12px;
} 
.box11 i{
    font-size: 35px;
    margin-top: 20px;
    color: rgb(87, 50, 89);
}
.box11 h5{
    font-size: 1.8rem;
    margin-left: 15px;
    margin-top: 9px;
    color: rgb(127, 65, 91);
}
.box11 p{
    font-size: 1.5rem;
    margin-top: 9px;
    letter-spacing: 1.5px;
    line-height: 25px;
    margin-left: 15px;
    margin-bottom: 5px;
}
.div1{
    height:20px;
    width: 80%;
    background-color: rgb(168, 125, 186);
    /* margin-left: 130px; */
    margin-top: 7px;
    border-bottom-left-radius:2rem;
    border-bottom-right-radius:2rem;
}
.div2{
    height:20px;
    width: 75%;
    background-color: rgb(217, 198, 225);
    /* margin-left: 170px; */
    border-bottom-left-radius:2rem;
    border-bottom-right-radius:2rem;
}
.box2{
    display: flex;
    background-color:rgba(234, 227, 227, 0.607) ;
    margin-top: 25px;
    padding-bottom: 30px;
}
.box3{
    height: auto;
    width: 50%;
}
.div3{
    position: relative;
    height: 270px;
    width: 270px;
    margin-top: 50px;
    z-index: 1;
    margin-left: 90px;
    background-image:url("../img/entry1.jpg");
    background-size: cover;
    text-shadow: 0 0px 40px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
    transition: 1s;
}
.div3:hover{
    transform: scale(1.2);
}
.box4{
    height: 200px;
    width: 260px;
    /* margin-left: 240px; */
}
.div4{
    position: relative;
    height: 270px;
    width: 270px;
    z-index: 2;
    top:-50px;
    margin-left: 300px;
    background-image: url("../img/mandap_new.jpeg");
    background-size: cover;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
    transition: 1s;
}
.div4:hover{
    transform: scale(1.2);
}
.div5{
    position: relative;
    height: 270px;
    width: 270px;
    z-index: 1;
    top:-50px;
    margin-left: 90px;
    background-image: url("../img/photobooth.jpg");
    background-size: cover;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
    transition: 1s;
}
.div5:hover{
    transform: scale(1.2);
}
.div3 span{
    position:absolute;
    bottom:10px;
    left:10px;
    color: cornsilk;
    font-size: 25px;
}
.div4 span{
    position:absolute;
    bottom:10px;
    left:170px;
    color: rgb(246, 246, 246);
    font-size: 25px;
}
.div5 span{
    position:absolute;
    bottom:10px;
    left:10px;
    color: cornsilk;
    font-size: 25px;
}
.box5{
    height: auto;
    width: 50%;
    background-color: transparent;
    border-radius: 2rem;
    margin-top: 50px;
    margin-right: 10px;
    
}
.box5:hover{
    background-color: rgba(145, 142, 142, 0.607);
}
.div6 h2{
    font-size:35px;
    margin-left: 15px;
    margin-top: 12px;
    margin-bottom: 20px;
    font-style: italic;
}
.div7 p{
    font-size: 1.5rem;
    margin-top: 9px;
    letter-spacing: 1.5px;
    line-height: 25px;
    margin-left: 15px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.bold{
    font-weight: bolder;
    font-size: 1.5rem;
}
.box6{
    height: 160px;
    width: 100%;
    margin-top: 35px;
    background-color:rgba(234, 227, 227, 0.607);
}
.box6:hover{
    background-color:rgba(145, 142, 142, 0.607) ;
}
.div8 h2{
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
    font-family:monospace;
    color: rgb(209, 100, 61);
}
.div9{
    text-align: center;
    margin-top: 10px;
    font-size: 1.2rem;
}
.dividerout{
    height: 50px;
    width: 100%;
    display:flex ;
    justify-content: center;
}
.divider{
    background-image: url("../img/divider.png");
    background-size: cover;
    height: 50px;
    width: 180px;
    padding-right: 60px;
}
.box7{
    display:flex;
    justify-content: space-evenly;
    background-color: rgba(234, 227, 227, 0.607);
    padding-top: 20px;
    padding-bottom: 20px;
}
.service1{
    position: relative;
    height: 500px;
    width: 300px;
    background-size: cover;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
}
.service1:hover{
    opacity: 0.7;
}
.s1{
    height: 100%;
    width: 100%;
    position: absolute;
    top:10px;
    background-color:transparent;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 25px;
    /* color: aliceblue; */
    margin-top: 15px;
    opacity: 0;
    transition: 0.6s;
}
.s1:hover{
    opacity:1;
    color: rgb(255, 255, 255);
    font-weight: bolder;
}
.s1 >*{
    transform: translateY(25px);
    transition: transform 0.6s;
}
.s1 >*{
    transform: translateY(0px);
}
.box8{
    height: 1000px;
    width: 100%;
    background-color:rgba(234, 227, 227, 0.607);
}
.g1{
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    /* margin-top: 15px; */
    padding-top: 25px;
}
.g2{
    display: none;
}
.g11{
    height: 300px;
    width: 450px;
    background-size: cover;
    background-position: center center;
    border-radius: 1.2rem;
    margin-left: 5px;
    margin-right: 5px;
} 

/* .g11:hover{
    transform:translate(-50%,-50%) ;
    animation: animate linear  5s infinite;
}
@keyframes animate{
    0%{
        transform: translate(-50%,-50%) skewY(5deg);
    }
    50%{
        transform: translate(-50%,-50%) skewY(-5deg);
    }
    100%{
        transform: translate(-50%,-50%) skewY(5deg);
    }
} */
.box9{
    height: 450px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 25px;
    background-color: rgba(234, 227, 227, 0.607);
}
iframe{
     height: 400px;
     width: 80%;
}
.footer{
    height: 500px;
    width: 100%;
    background-color: rgb(156, 200, 217);
    display: flex;
    justify-content: space-evenly;
    align-items: center; 
    position: relative;
}
/* .footer:hover{
    background-color: rgb(110, 146, 160);
} */
.f1{
    height: 350px;
    width: 450px;
    background-image: url("../img/logo12.png");
    background-size: cover;
}
.f2{
    height: 350px;
    width: 450px;
    /* background-color: aliceblue; */
}
.f2 h2{
    font-size: 35px;
    margin-bottom: 10px;
}
.f2 p{
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 1.5px;
    line-height: 25px;
    padding-top: 10px;
}
a{
    text-decoration: none;
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 1.5px;
    line-height: 25px;
    padding-top: 10px;
    color: black;
}
hr{
    margin-top: 10px;
}
.f3{
    height: 350px;
    width: 450px;
    /* background-color: rgb(63, 86, 105); */
}
.f3 h2{
    font-size: 35px;
    margin-bottom: 10px;
}
.f3 p{
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 1.5px;
    line-height: 25px;
    padding-top: 10px;
}
.f4{
    position: absolute;
    bottom:5px;
}
.f4 p{
    text-align: center;
    font-weight: bolder;
    font-size: 20px;
}
.underlinetext:hover{
    text-decoration: underline;
}
#readMoreToggle,
.read-more-btn{
    display: none;
}

/*correct till here for desktop*/



@media (max-width: 768px){

/* Header layout */
.shyam{
    flex-direction: row;
    align-items: center;
    /* gap: 5px; */
}

/* Title text */
.shyam1 h2{
    text-align: center;
    line-height: 1.2;
}

/* Force two-line structure */
.shyam1 h2 span{
    display: block;
    text-align: center;
}

/* Punchline */
.shyam2{
    text-align: center;
    line-height: 1.4;
    font-size: 1.2rem;
}
.peacock1{
    background-size: cover;
    height: 150px;
    width: 150px;
    transform: scaleX(-1);
}

/* Peacock right */
.peacock2{
    background-size: cover;
    height: 150px;
    width: 150px;
}

}


@media (max-width: 768px){

.background{
    height: 50vh;
    background-size: cover;
    background-position: center top;
    width: 100%;
}
}


@media screen and (max-width: 768px){

.box1{
    height:auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top:-8%;
    justify-content: space-evenly;
    align-items: center;
}  
.box11{
    /* position: absolute; */
    height: auto;
    width: 80%;
    top: 20%;
    bottom: -20%;
    margin-left: 0px;
}
.box12{
    margin-top: 4px;
    padding-top: 5px;
}
.box11 i{
    font-size: 25px;
    margin-top: 20px;
    color: rgb(87, 50, 89);
}
.box11 h5{
    font-size: 1.5rem;
    margin-left: 15px;
    margin-top: 9px;
    color: rgb(127, 65, 91);
}
.box11 h2{
    font-size: 20px;
    margin-left: 10px;
    margin-top: 4px;
}

.box11 p{
    font-size: 0.85rem;
    line-height: 1.3;
}
}


@media screen and (max-width: 768px){

.box2{
    height: auto;
    flex-direction: column;
    align-items: center;
}

.box3{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}
.box5{
    width: 100%;
    height: auto;
}
.div3{
    z-index: 2;
    margin-left: 0px;
    margin-bottom: 10px;
    background-position: center;
}
.box4{
    height: 270px;
    width: 270px;
    margin-left: 0px;
    margin-bottom: 10px; ;
}
.div4{
    z-index: 1;
    top: 0px;
    margin-left: 0px;
}
.div5{
    z-index: 0;
    top:0px;
    margin-left: 0px;
}
.div7{
    width: 95%;
    text-align: center;
}

.div7 p{
    font-size: 0.95rem;
}
.box5{
    position: relative;
    /* border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem; */
    margin-left: 10px;
}
.box5 .div7{
    max-height: 180px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.read-more-btn{
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;

    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 20px;
    cursor: pointer;
}
/* Expand text on click */
#readMoreToggle:checked ~ .div7{
    max-height: 2000px; /* large enough to show all text */
}

/* Optional: change button text */
#readMoreToggle:checked + .div6 + .div7 + .read-more-btn{
    content: "- See less";
}
}


@media screen and (max-width: 768px){

.box7{
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.service1{
    width: 100%;
    height: 200px;
    background-position: center center;
    /* left: 15px; */
    /* right: 15px; */
}
.s1{ 
    text-align: center;
}
}


@media screen and (max-width: 768px){

.box8{
    height: auto;
    width: 100%;
    background-color:rgba(234, 227, 227, 0.607);
}
.g1{
    height: auto;
    flex-direction: column;
    align-items: center;
}
.g11{
    width: 90%;
    height: 280px;
    background-size: cover;
    background-position: center ;
    margin-bottom: 10px;
}
}


@media screen and (max-width: 768px){

/* .box9{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 25px;
    background-color: rgba(234, 227, 227, 0.607);
} */

iframe{
    width: 95%;
    height: auto;
    margin-bottom: 50px;
}
}


@media screen and (max-width: 768px){

.footer{
    flex-direction: column;
    height: auto;
    width: 100%;
    /* gap: 25px; */
    text-align: center;
    /* padding-left: 10px;
    padding-right: 10px; */
}

.f1,
.f2,
.f3{
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    padding-bottom: 10px;
}
.underlinetext{
    padding-left: 10px;
    padding-right: 10px;
}
.f4{
    position: static;
    margin-bottom: 10px;
}
}


@media (min-width: 769px) and (max-width: 1020px){

.background{
    height: 50vh;
    background-size: cover;
    background-position: center top;
    width: 100%;
}
.box1{
    height:auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top:-8%;
    justify-content: space-evenly;
    align-items: center;
}  
.box11{
    height: auto;
    width: 80%;
    top: 20%;
    bottom: -20%;
    margin-left: 0px;  
}

.box2{
    flex-direction: column;
}
.box3{
    display: flex;
    justify-content: space-evenly;
    height: auto;
    width: 95%;
}
.div3{
    margin-top: 50px;
    z-index: 1;
    margin-left: 15px;
    margin-right: 15px;
    background-position: center;
}
.box4{
    height: 200px;
    width: 260px;
    /* margin-left: 240px; */
}
.div4{
    z-index: 1;
    top: 0px;
    margin-top: 50px;
    margin-left: 0px;
    margin-right: 15px;
}
.div5{
    z-index: 1;
    top:0px;
    margin-top: 50px;
    margin-left: 10px;
    left: 15px;
    margin-right: 15px;
    background-position: center;
}
.div3 span,
.div4 span,
.div5 span{
    left: 10px;
}
.box5{
    height: auto;
    width: 100%;
    /* margin-right: 10px;
    margin-left: 10px;    */
}
.div6{
    margin-right: 10px;
    margin-left: 10px;
}
.box7{
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.service1{
    height: 260px;
    width: 98%;
    background-position: center center;
    margin-left: 10px;
    margin-right: 10px;
}
.box8{
    height: auto;
    width: 100%;
    background-color:rgba(234, 227, 227, 0.607);
}
/* .g1{
    flex-wrap: wrap;
    justify-content: center;
} */
.g1{
    display: none;
}
.g2{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    /* margin-left: 15px;
    margin-right: 15px; */
}
.g21{
    width: 90%;
    height: 270px;
    background-size: cover;
    background-position: center center;
    border-radius: 1.2rem;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}


.f1{
    height: 320px;
    background-position: center;
    margin-left: 10px;
    padding-right: 10px;
}
.f2,
.f3{
    margin-left: 10px;
    padding-right: 10px;
    width: 45%;
}
.f4{
    margin-top: 50px;
    margin-bottom: 10px;
}
}


@media (min-width: 1021px) and (max-width: 1190px){
.box3{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}
.div3{
    z-index: 2;
    margin-left: 0px;
    margin-bottom: 10px;
}
.box4{
    height: 270px;
    width: 270px;
    margin-left: 0px;
    margin-bottom: 10px; ;
}
.div4{
    z-index: 1;
    top: 0px;
    margin-left: 0px;
}
.div5{
    z-index: 0;
    top:0px;
    margin-left: 0px;
}
}