:root {
    --headBg: rgb(245, 246, 246);
}

body {
    scroll-behavior: smooth;
    background-color: var(--headBg);
}

/* Nav Start */
.img-nav {
    width: 80px;
    margin: 0px 10px;
}

.img-nav:hover {
    transform: scale(1.07);
    transition: 0.7s;
}

.img-home:hover {
    transform: scale(1.07);
    transition: 0.7s;
}

nav .container-fluid {
    background-color: white;
}

.navbar-brand {
    font-family: serif;
    letter-spacing: 2px;
}

.nav-item a {
    font-family: serif;
    position: relative;
}

@media screen and (min-width:992px) {
    .nav-item a::before {
        position: absolute;
        content: "";
        width: 0%;
        height: 2px;
        background-color: black;
        left: 7px;
        bottom: 8px;
    }

    .nav-item a:hover:not(.dropdown-menu li a)::before {
        width: 80%;
        transition: 0.6s;
    }
}

.dropdown-menu {
    background-color: rgba(225, 225, 225, 0.502);
}

.dropdown-menu li a:hover {
    background-color: rgb(0, 0, 0);
    color: white;
}

.cart:hover {
    transform: translate(7px, -0px);
    transition: 0.5s;
}

@media screen and (max-width:992px) {
    .cart {
        text-align: center;
    }
}

/* Nav End */

/* Header start */
@media screen and (min-width:992px) {
    header {
        height: 90vh;
    }
}

.container-fluid h2 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.container-fluid p {
    font-family: serif;
}

body {
    background-color: white;
}

div .filter {
    filter: drop-shadow(10px 10px 7px rgba(43, 51, 54, 0.498));
}

/* Header End */

/* About Start */
.aboutText {
    text-align: justify;
}

@media screen and (min-width:1200px) {
    .aboutImage {
        height: 630px !important
    }
}

/* About End */

/* Event Start */
@media screen and (min-width:0px) {
    .eventImage {
        height: 270px;
    }
}

@media screen and (min-width:576px) {
    .eventImage {
        height: 320px;
    }
}

@media screen and (min-width:768px) {
    .eventImage {
        height: 380px;
    }
}

@media screen and (min-width:992px) {
    .eventImage {
        height: 520px;
    }
}

@media screen and (min-width:1200px) {
    .eventImage {
        height: 650px;
    }
}

@media screen and (min-width:1400px) {
    .eventImage {
        height: 700px;
    }
}

/* Event End */

/* Gallery Start */
.mainImage img {
    width: 400px;
    height: 250px;
}

.myarrow {
    position: relative;
    bottom: 140px;
    width: 450px;
}

.nextIcon,
.prevIcon {
    color: black;
    transition: 0.6s;
}

.nextIcon {
    float: right;
}

.nextIcon:hover {
    transform: translate(10px);
}

.prevIcon:hover {
    transform: translate(-10px);
}

.smallImage img {
    display: none;
}

@media screen and (min-width:768px) {
    .smallImage img {
        display: block;
        width: 100px;
        height: 65px;
    }

    .mainImage img {
        width: 450px;
        height: 250px;
    }

    .myarrow {
        bottom: 140px;
        width: 500px;
    }
}

@media screen and (min-width:992px) {
    .smallImage img {
        width: 150px;
        height: 75px;
    }

    .mainImage img {
        width: 650px;
        height: 400px;
    }

    .myarrow {
        position: relative;
        width: 700px;
        bottom: 220px;
    }
}

@media screen and (min-width:1200px) {
    .smallImage img {
        width: 150px;
        height: 95px;
    }

    .mainImage img {
        width: 750px;
        height: 450px;
    }

    .myarrow {
        position: relative;
        width: 800px;
        bottom: 250px;
    }
}

@media screen and (min-width:1400px) {

    .smallImage img {
        width: 170px;
        height: 100px;
    }

    .mainImage img {
        width: 850px;
        height: 500px;
    }

    .myarrow {
        position: relative;
        width: 900px;
        bottom: 270px;
    }
}

/* Gallery End */

/* Content Start */
.contentDiv {
    background-color: rgb(235, 234, 234);
}

.contentDiv:hover .contentIcon {
    color: rgb(59, 57, 57);
}

/* Content End */

/* Footer Start */
.footerImg1 {
    display: none;
}

.footerImg2 {
    width: 25%;
}

@media screen and (min-width:992px) {
    .footerImg2 {
        display: none;
    }

    .footerImg1 {
        display: inline;
    }
}

@media screen and (min-width:1200px) {
    .footerImg1 {
        width: 50%;

    }
}

/* Footer End */

/* preloader Start */
#preloader {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background-color: white;
    transition: 0.6s;
}

#preloader::before,
#preloader::after {
    position: absolute;
    content: "";
    border: 4px solid black;
    border-radius: 50%;
    animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader::after {
    animation-delay: -0.5s;
}

@keyframes animate-preloader {
    0% {
        width: 10px;
        height: 10px;
        top: calc(50% - 5px);
        left: calc(50% - 5px);
        opacity: 1;
    }

    100% {
        width: 100px;
        height: 100px;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
        opacity: 0;
    }
}

/* preloader End */

/* scrollup btn Start */
#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 20px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: black;
    /* Set a background color */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    font-size: 15px;
    /* Increase font size */
    transition: 0.5s;
}

#myBtn:hover {
    background-color: #2f2e2e;
    transform: translate(0px, -10px);
}