@media(max-width:1180px){
    #eventLists .eventBox{
        flex-direction: column;
    }
    #eventLists .eventBox .imgBox{
width: 100%;    }
}
@media (max-width:1040px) {
    #header .navLinks{
        font-size: 16px !important;
    }
    #about .img1 {
             left: 10px;
    }
}
@media (max-width:991px) {
    #header .buttons div:first-child {
padding-block: 8px;    }  
#header .navItems{
    padding-block: 0px;
}
#header .navBar{
    position: absolute;
    top: 0px;
    right: 0px;
    background:#131c2d;
transition: opacity ease .5s ;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
   height: 100vh;
   width: 100vw;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
#header .navBar.show{
    display: flex !important;
    pointer-events: all;
    opacity: 1;
}
.navItems{
    width: 100%;
    text-align: center;
}
.navItems:hover{
  background-color: #172135;
}
#header .navBar .navItems.Active .navLinks{
    color: white;
}
#header .navBar .navLinks{
    color: white;
    padding: 8px;
    display: block !important;
}
/*  */
#header .dropDownMenu{
    box-shadow:  none !important;
    background-color: #172135;
    text-align: center;
    position: static !important;
    width: 100%;
    max-height: 0px;
    transition: max-height ease .5s !important;
    overflow: hidden;
    transform: scaleY(1) !important;
    opacity: 1 !important;
    transform-origin: top top;
}
#header .dropDownMenu li a{
    opacity: .5;
}
#header .navItems  .dropDownMenu li:hover a{
    opacity: 1;
    color: white !important;
}
#header .navItems  .dropDownMenu li:hover{
    background-color: #131c2d !important;
}
#header .navItems:hover .dropDownMenu{
    max-height: 1000px;
}
/*  */
#counter .box .digit {
    font-size: 80px;
}
#counter .digitText {
    font-size: 20px !important;
}
/* about */
#about .imgContainer {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}
#about .imgContainer .img1,#about .imgContainer .img2{
    position: static !important;
    width: 100%;
    height: 100%;
    max-height: 350px;
    max-width: 100%;
}
#vision .right{
    padding: 0px 10px;
}
#counter .odd{
    background-color: rgb(243, 243, 243);
}
#testimonials .testimonialBox{
    max-width: 100%;
}
#aboutDetails .right {
    width: 375px;
}}
/* media query (768) for small screen desktop - laptops */
@media (max-width:767px) {
    .sectionHeading {
        margin-bottom: 26px;
    }
    .sectionHeading span {
        font-size: 100px;
        margin-bottom: -75px;
    }
    .sectionHeading p{
        margin-bottom: 0px !important;
    }
    .sectionHeading h2{
        font-size: 36px;
    }
    #slider  p{
    font-size: 18px !important;
    }
    #slider a{
        margin-top: 18px !important;
        padding: 8px 22px;
        font-size: 14px !important;
    }
    #slider h1 {
        font-size: 60px;
        line-height: 65px;
    }
    #counter .box .digit {
        font-size: 80px;
    }
    #counter .digitText {
        font-size: 18px !important;
    }
    #counter .col-md-3, #counter .digitText{
        background-color: white;
    }
    #counter .col-md-3:nth-child(2),
    #counter .col-md-3:nth-child(3),
    #counter .col-md-3:nth-child(3) .digitText,
    #counter .col-md-3:nth-child(2) .digitText{
        background-color: rgb(243, 243, 243);
    }
    #testimonials .owl-nav {
        bottom: 20px;
        left: 75%;
        display: flex;
    }
    /* about page */
    #aboutDetails .right .box {
    width: 100%;
    max-width: 450px;}
    #aboutDetails .right .box3 {
    bottom: 15%;
    right: 16%;
}
#pageSlide .overlay{
    padding-left: 15px !important;
}
}
/* media query (576) for tablate n other high resolution mobiles */
@media (max-width:576px) {
    .sectionHeading {
        margin-bottom: 26px;
    }
    .sectionHeading span {
        font-size: 72px;
        margin-bottom: -50px;
    }
    .sectionHeading h2{
        font-size: 32px;
    }
    #slider .overlay h1 {
        font-size: 52px;
        line-height: 60px;
    }
    #slider .imgContainer img{
        max-height: inherit;
    }
    #slider  p{
        font-size: 16px !important;
        }
        #slider a{
            margin-top: 16px !important;
            padding: 8px 22px;
            font-size: 14px !important;
        }
        #slider h1 {
            font-size: 40px;
            line-height: 50px;
        }
        #about .imgContainer {
        grid-template-columns: 1fr;
        }
        #about p.font-24{
            font-size: 18px !important;
            font-weight: 600;
        }
        #about p{
            font-size: 14px;
        }
        #slider a{
            padding: 6px 12px;
        }
        #counter .col-md-3:nth-child(2) .digitText{
            background-color: #f3f3f3;
        }
        #counter .col-md-3:nth-child(3) .digitText,
        #counter .col-md-3:nth-child(3){
            background-color: #ffffff;
        }
        #counter .odd{
            background-color: #f3f3f3;
        }
        #aboutDetails .right .box{
            max-width: 300px;
            left: 50%;
            transform: translateX(-50%) scale(1);
        }
        #aboutDetails .right .box:hover{
            transform: translateX(-50%) scale(1.1) !important;
        }
        #aboutDetails .right .box1{
            max-width: 280px;
            min-height: 200px;
            max-height: 200px;
        }
        #aboutDetails .right .box2{
            max-width: 260px;
            min-height: 200px;
            max-height: 200px;
            top: 10%;
        }
        #aboutDetails .right .box3{
            bottom: 25%;
            max-width: 225px;
            min-height: 200px;
            max-height: 200px;
        }
        #pageSlide h1 {
            font-size: 45px;
        }
        #aboutDetails .right {
            width: 300px;
        }
        #testimonials .owl-item{
            padding: 12px !important;
        }
        #eventLists .eventBox .imgBox {
            height: 225px;}
            #singleEvent #lightgallery li  a{
                height: 200px !important;}
}
/* media query (420) for mobiles screen  */
@media (max-width:450px) {
    #slider p{
        display: none;
    }
    #slider .imgContainer img{
        min-height: 260px;
    }
    .sectionHeading p {
        font-size: 16px;
    }
    .sectionHeading h2 {
        font-size: 26px;
    }
}
