@charset "utf-8";
/* =========================================================================
   Mahamaya Dham Gayeshpur - responsive rules
   Breakpoints
     >= 1600px  large monitor / 4K
     1400-1599  wide desktop
     1200-1399  desktop            (base rules in style.css)
      992-1199  small laptop
      768-991   tablet (landscape / portrait)
      576-767   large phone
       <= 575   phone
       <= 400   small phone
   NOTE: --header-h is also re-measured at runtime by js/custom.js, so the
         fixed header can never overlap the page content on any device.
   ========================================================================= */


/* ================================================= >= 1600px : monitors == */
@media screen and (min-width: 1600px) {
    :root{
        --header-h: 96px;
    }
    .container{
        max-width: 1440px;
    }
    .navbar-brand img{
        height: 70px;
        max-height: 70px;
    }
    .brand_name{
        font-size: 30px;
    }
    .brand_tag{
        font-size: 14px;
        letter-spacing: 6.5px;
    }
    .f_logo{
        height: 84px;
    }
}

/* ================================================ 1400 - 1599px : wide === */
@media screen and (min-width: 1400px) and (max-width: 1599.98px) {
    .container{
        max-width: 1320px;
    }
}

/* =============================================== 1200 - 1399px : desktop = */
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    :root{
        --header-h: 88px;
    }
}

/* ============================================ 992 - 1199px : small laptop  */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    :root{
        --header-h: 82px;
    }
    .navbar-brand img{
        height: 56px;
        max-height: 56px;
    }
    .brand_name{
        font-size: 22px;
    }
    .brand_tag{
        font-size: 11px;
        letter-spacing: 4px;
    }
    .btn{
        padding: 8px 18px;
        font-size: 15px;
    }
    .owl-nav .owl-prev{
        left: -15px;
    }
    .owl-nav .owl-next{
        right: -15px;
    }
    .card_dk img{
        height: 300px;
    }
    .f_logo{
        height: 66px;
    }
    
}

/* ==================================================== <= 991px : tablet == */
@media screen and (max-width: 991.98px) {
    :root{
        --header-h: 76px;
    }
    .navbar{
        padding: 7px 0;
    }
    .navbar-brand{
        gap: 10px;
    }
    .navbar-brand img{
        height: 52px;
        max-height: 52px;
    }
    .brand_name{
        font-size: 20px;
    }
    .brand_tag{
        font-size: 10px;
        letter-spacing: 3.4px;
    }
    .btn{
        padding: 8px 16px;
        font-size: 14px;
    }
    .menu_btn{
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .owl-nav .owl-prev{
        left: 0;
    }
    .owl-nav .owl-next{
        right: 0;
    }
    .owl-nav button{
        width: 44px;
        height: 44px;
        font-size: 20px !important;
    }
    .card_dk img{
        height: 280px;
    }
    .testimonials .testi .item{
        padding: 34px 22px;
    }
    .footer_top{
        padding: 34px 0;
    }
    .f_logo{
        height: 62px;
    }
    .fb_name{
        font-size: 19px;
    }
    .contact-form{
        padding: 26px 20px;
    }
    .form_content{
        padding: 18px;
    }
    /* sticky sidebars stop sticking once the layout stacks */
    .sticky-position{
        position: static;
        top: auto;
    }
}

/* =============================================== <= 767px : large phone == */
@media screen and (max-width: 767.98px) {
    :root{
        --header-h: 70px;
    }
    .navbar{
        padding: 6px 0;
    }
    .navbar-brand img{
        height: 46px;
        max-height: 46px;
    }
    .brand_name{
        font-size: 17px;
        letter-spacing: .3px;
    }
    .brand_tag{
        font-size: 9px;
        letter-spacing: 2.6px;
    }
    .btn{
        padding: 7px 14px;
        font-size: 14px;
    }
    .menu_btn{
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .card_dk img{
        height: 250px;
    }
    .testimonials .testi .item{
        padding: 28px 18px;
    }
    .testimonials .testi .item .profile{
        padding-left: 0;
    }
    .testimonials .testi .item .profile .information{
        padding-left: 0;
    }
    .testimonials .testi .item .profile .information p{
        font-size: 19px;
    }
    .accordion{
        margin: 30px auto;
    }
    .contact-info-icon{
        height: 56px;
        width: 56px;
        min-width: 56px;
    }
    .contact-info-icon i{
        font-size: 24px;
        line-height: 56px;
    }
    .contact-info-content{
        margin-left: 14px;
    }
    .contact-info-content h4{
        font-size: 1.15em;
    }
    .image-wrapper{
        max-width: 180px;
        max-height: 180px;
    }
    .soclmedia_floating{
        bottom: 70px;
    }
    .glryimg{
        max-height: 300px;
    }
    
}

/* ===================================================== <= 575px : phone == */
@media only screen and (max-width: 575.98px) {
    :root{
        --header-h: 64px;
    }
    .navbar-brand{
        gap: 8px;
    }
    .navbar-brand img{
        height: 42px;
        max-height: 42px;
    }
    .brand_name{
        font-size: 15px;
    }
    .brand_tag{
        font-size: 8px;
        letter-spacing: 2px;
    }
    .menu_btn{
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .offcanvas{
        max-width: 84%;
        width: 300px;
    }
    .contact-info-icon .fa-mobile{
        font-size: 30px;
    }
    .contact-info-icon .fa-envelope{
        font-size: 20px;
    }

    /* ---- HERO -----------------------------------------------------------
       The banner is shown complete (never cropped). On a phone the picture
       is only ~215px tall, so the caption drops underneath it instead of
       covering the whole photo.                                            */
    .hero{
        height: 100dvh;
    }
    .hero_media{
        height: auto;
    }
    .hero img{
        height: auto;
        object-position: left;
    }
    
    .hero .cont_overlay{
        position: static;
        padding: 0;
        display: block;
    }
    .hero .baner_content{
        max-width: 100%;
        width: 100%;
        background: #FFF3B0;
        border-radius: 0;
        padding: 16px 15px;
        text-align: center;
    }
    .hero .baner_content h1{
        font-size: 17px;
        margin-bottom: 8px;
    }
    .hero .baner_content p{
        font-size: 13px;
    }

    .py-5{
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .section_title{
        margin-bottom: 12px;
    }
    .card_dk img{
        height: 230px;
    }
    .owl-nav .owl-prev{
        left: 0;
    }
    .owl-nav .owl-next{
        right: 0;
    }
    .owl-nav button{
        width: 40px;
        height: 40px;
        font-size: 17px !important;
    }
    .devi_slider .owl-nav .owl-prev{
        left: 5px;
    }
    .devi_slider .owl-nav .owl-next{
        right: 5px;
    }

    /* ---- footer ------------------------------------------------------- */
    .footer_top{
        padding: 28px 0;
    }
    .sitemap_title{
        font-size: 18px;
        margin-bottom: 16px;
    }
    .footer_top .fcard h3{
        font-size: 14px;
    }
    .footer_top .fcard .fcard_toggle{
        font-size: 14px;
        padding: 10px 12px;
        pointer-events: auto;
        cursor: pointer;
    }
    .footer_top .fcard .fcard_toggle i{
        display: inline-block;
    }
    .footer_top .fcard .fcard_toggle:not(.collapsed) i{
        transform: rotate(180deg);
    }
    .footer_top .fcard .collapse:not(.show){
        display: none;
    }
    .footer_top .fcard .collapse.show{
        display: block;
    }
    .footer_top .fcard .f_link li a{
        font-size: 13px;
        padding: 9px 12px;
    }
    .footer_brand{
        gap: 10px;
        margin-bottom: 14px;
    }
    .f_logo{
        height: 54px;
    }
    .fb_name{
        font-size: 17px;
    }
    .fb_tag{
        font-size: 10px;
        letter-spacing: 3px;
    }
    .contact_info .text{
        font-size: .95rem;
    }
    .social a span{
        height: 36px;
        width: 36px;
        line-height: 36px;
        font-size: 16px;
    }
    .footer_bottom p{
        font-size: 13px;
    }

    .contact-form{
        padding: 20px 16px;
    }
    .contact-form h2{
        font-size: 1.5em;
    }
    .glryimg{
        max-height: 260px;
    }
    .soclmedia_floating{
        bottom: 62px;
        right: 6px;
    }
    .soclmedia_floating a{
        width: 30px;
        height: 30px;
        font-size: 15px;
        line-height: 1.9;
    }
    .evt_detail_spacer{
        display: none;
    }
    /* left content column on the Latest Events sidebar pages - scrollable
       within one screen's height on phones */
    .col-sm-8.col-lg-9{
        height: 100dvh;
        overflow: auto;
    }
}

/* =============================================== <= 400px : small phone == */
@media only screen and (max-width: 400px) {
    :root{
        --header-h: 60px;
    }
    .navbar-brand img{
        height: 38px;
        max-height: 38px;
    }
    .brand_name{
        font-size: 13px;
    }
    .brand_tag{
        font-size: 7px;
        letter-spacing: 1.6px;
    }
    .menu_btn{
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .card_dk img{
        height: 210px;
    }
    .image-wrapper{
        max-width: 150px;
        max-height: 150px;
    }
    .hero .baner_content h1{
        font-size: 15px;
    }
    .hero .baner_content p{
        font-size: 12px;
    }
    .hero img{
        height: auto;
    }
}

/* ==================== landscape phone : keep the header slim ============= */
@media only screen and (max-height: 480px) and (orientation: landscape) {
    :root{
        --header-h: 58px;
    }
    .navbar-brand img{
        height: 40px;
        max-height: 40px;
    }
}


/* ======================================================================== */
/*  CLIENT ROUND 2  -  responsive rules for the new home page sections      */
/* ======================================================================== */

/* ---- large desktops / monitors ---------------------------------------- */
@media screen and (min-width: 1600px) {
}

/* ---- laptops ----------------------------------------------------------- */
@media screen and (max-width: 1199.98px) {
     .testimonials .testi .item{ padding:22px 16px 18px; }
     .testimonials .testi .item .profile .information p{ font-size:17px; }
     .testimonials .testi .item > p{ font-size:14px; }
}

/* ---- tablet ------------------------------------------------------------ */
@media screen and (max-width: 991.98px) {
     .join_serve .section_title{ text-align:center; }
     .join_serve p{ text-align:center; }
     .js_points{ max-width:520px; margin-left:auto; margin-right:auto; }
     .js_actions{ display:flex; justify-content:center; padding-top:10px; }
     .js_media{ max-width:620px; margin:0 auto; }
     .maharaj_slider .owl-nav .owl-prev{ left:10px; }
     .maharaj_slider .owl-nav .owl-next{ right:10px; }
}

/* ---- phones ------------------------------------------------------------ */
@media only screen and (max-width: 767.98px) {
     .dev_avatar{ width:74px; height:74px; font-size:26px; }
     .devotee_card{ padding:22px 14px 20px; }
     .devotee_card h3{ font-size:17.5px; }
     .join_serve p{ font-size:15px; line-height:1.7; }
     .js_points li{ font-size:14.5px; padding-left:26px; }
     .js_actions .btn{ flex:1 1 auto; text-align:center; }
     .devotees_slider .owl-nav button.owl-prev,
     .devotees_slider .owl-nav button.owl-next{ width:40px; height:40px; font-size:17px !important; }
     .devotees_slider .owl-nav .owl-prev{ left:0; }
     .devotees_slider .owl-nav .owl-next{ right:0; }
}

@media only screen and (max-width: 575.98px) {
     .testimonials .testi .item{ padding:24px 18px 20px; }
     .testimonials .testi .item > p{ font-size:14.5px; }
     .js_media.js_noimg .js_placeholder{ min-height:220px; }
     /* the hero caption sits under the picture on phones - keep the
        typewriter overlay in the normal flow so nothing is clipped */
     .hero .tw.tw_on .tw_live{ position:static; }
     .hero .tw.tw_on .tw_ghost{ display:none; }
     .ftr_bottom_row p{
        max-height: 110px;
     }
     .js_text .section_title{
        background: #fed619;
     }
}

/* ---- very small phones -------------------------------------------------- */
@media only screen and (max-width: 400px) {
     .brand_text{ font-size:13px; letter-spacing:0; }
     .dev_avatar{ width:66px; height:66px; font-size:23px; }
     .js_points li{ font-size:14px; }
}

/* ---- carousel gutters shrink with the screen --------------------------- */
@media only screen and (max-width: 767.98px) {
     .testi.owl-carousel,
     .devotees_slider.owl-carousel{ padding:0 46px; }
}
@media only screen and (max-width: 575.98px) {
     .testi.owl-carousel,
     .devotees_slider.owl-carousel{ padding:0 42px; }
}

/* ---- round 3 responsive ------------------------------------------------ */
@media screen and (max-width: 991.98px) {
     /* the banner is square - keep the subject in frame and lift the text */
     .join_serve{
          background-image:url('../images/join-serve-banner.png');
          background-position:center bottom;
          min-height:0;
          display:block;
          height: 100dvh;
     }
     .join_serve .container{
        padding: 0 !important;
     }
     .join_serve .js_text{
          padding:26px 20px;
     }
         .join_serve .section_title {
        text-align: left;
    }
    .join_serve p{
        text-align: left;
        font-size: 13px;
    }
    .js_points li{
        font-size: 13px;
    }
}
@media only screen and (max-width: 575.98px) {
     /* dedicated portrait crop for phones */
     .join_serve{
          background-image:url('../images/join-serve-mobile.png');
     }
}
@media only screen and (max-width: 767.98px) {
     .soclmedia_floating a{
          width:48px;
          height:48px;
          font-size:22px;
     }
}
@media only screen and (max-width: 575.98px) {
     .soclmedia_floating{
          right:10px;
          bottom:14px;
          gap:10px;
     }
     .soclmedia_floating a{
          width:46px;
          height:46px;
          font-size:21px;
     }
}

/* ---- round 3 fixes ------------------------------------------------------ */
@media only screen and (max-width: 767.98px) {
     /* the inline 50px container padding is far too wide on a phone */
     .join_serve .container{ padding:30px 15px !important; }
     .join_serve .js_text{ padding:0px 16px; height: 210px;
        overflow: auto;}
}