@charset "utf-8";
/* CSS Document */
/* -----------------------------------------------------------------------
Mosaic OnBoarding
----------------------------------------------------------------------- */

/* responsive.css */
/*********** RESPONSIVE **************//*************************************/
/* Custom, iPhone Retina */
@media (max-width : 320px) {
    h2.title { font-size:24px; }
    .img-frame { margin: 0px !important;}
    .footer-menu .navbar-nav>li { display: block; margin: 15px; }
    .ph img { display: none;}
    .slider-content { }
    #blog .post-thumb-inner { width: 100%; float: none; }
    #blog .post-blog-content-inner { width: 100%; float: none;}
    .main-logo { margin-right:0px;}
    #carousel-slider img { background-size: cover; }
    #carousel-slider h2 { color: #ee4408; font-size:30px; font-weight: 600; letter-spacing: -0.8px; }
    #carousel-slider h1 { color: #0b1228; font-size:36px; font-weight: 800; letter-spacing: -0.8px; }
    #carousel-slider .slider-content p { display: none; }
    .contact-box { background: #f5f5f5; position: relative; padding: 60px ; box-shadow: 0px 0px 15px rgb(5 5 5 / 8%); border-radius: 10px;}
    ul.markak { display: grid;
      grid-template-columns: repeat(auto-fill, 44%);
      justify-content: space-between;
      grid-gap: 20px; list-style: none; margin: 0; padding: 0;}
    .main-heading.s-behind-t p { font-size: 13vw; bottom: 8px; }
    .main-heading.s-behind-t h2 { font-size: 36px; }
    .main-heading h2 span:after { bottom: 8px; }
    
    .service-content h3 { font-size: 18px; }
    .service-content span.read-more-btn {  }
    .service-item .service-content { bottom: -30px; }
    
    h2.post-title { font-size: 1.4rem; max-width: 70%; padding-left: 0; }
    
    #gallery-1 .gallery-item { width: 100% !important; padding: 0; }
    
}
/* Extra Small Devices, Phones */
@media (max-width : 480px) {

    .main-menu-css li a:hover {
        display: inline-block;
        text-align: left;
        padding-left: 0;
    }

    .main-heading h1,
    .main-heading h1 span {
        font-size: 55px;
        line-height: 48px;
    }

    h2.title { font-size:40px; }
    .img-frame { margin: 0px !important;}
    #services p { margin-left: 10px; margin-right: 10px; font-size: 20px; }
    h3.subtitle { font-size: 24px; }
    .navbar-nav { padding-top: 50px; }
    .testimonials-box { padding: 0px; }
    .testimonials-content { padding: 50px 30px; }
    .footer-menu .navbar-nav>li { display: block; margin: 15px; }
    .ph img { display: none;}
    
    footer .footer-infobox { text-align: left; }
    #header {  padding-top: 10px; padding-bottom: 10px; }
    .main-logo { margin-right:0px;}
    .main-menu-css li a { height:auto !important; padding-top: 10px; padding-bottom: 10px; }
    .main-menu-css li a:hover { height:auto !important; padding-top: 10px; padding-bottom: 10px; }
    #blog .post-thumb-inner { width: 100%; float: none; }
    #blog .post-blog-content-inner { width: 100%; float: none;}
    
    #carousel-slider img { background-size: cover; }
    #carousel-slider h2 { color: #ee4408; font-size:30px; font-weight: 600; letter-spacing: -0.8px; }
    #carousel-slider h1 { color: #0b1228; font-size:36px; font-weight: 800; letter-spacing: -0.8px; }
    #carousel-slider .slider-content p { display: none; }
    .contact-box { background: #f5f5f5; position: relative; padding: 60px ; box-shadow: 0px 0px 15px rgb(5 5 5 / 8%); border-radius: 10px;}
    ul.markak { display: grid;
      grid-template-columns: repeat(auto-fill, 44%);
      justify-content: space-between;
      grid-gap: 20px; list-style: none; margin: 0; padding: 0;}
    .main-heading.s-behind-t p {  }
    .main-heading.s-behind-t h2 { font-size: 36px; }
    
    .service-content h3 { font-size: 18px; }
    .service-content span.read-more-btn {  }
    .service-item .service-content { bottom: -30px; }
    
    h2.post-title { font-size: 1.4rem; max-width: 70%; padding-left: 0; }
    
    .main-heading-box { top: calc(90% - 60px);
    right: calc(50% - 60px); }
    
    #gallery-1 .gallery-item { width: 100% !important; padding: 0; }
    
    .main-heading h2 span:after { bottom: -16px !important; left: 0 !important; }
    
}


/* Small Devices, Tablets */
@media (max-width : 768px) {
    h2.title { font-size:30px; }
    .img-frame { margin: 0px !important;}
    #services p { margin-left: 10px; margin-right: 10px; font-size: 20px; }
    h3.subtitle { font-size: 24px; }
    .navbar-nav { padding-top: 25px; padding-bottom: 25px; }
    .testimonials-box { padding: 0px; }
    .testimonials-content { padding: 50px 30px; }
    .ph img { display: none;}
    
    footer .footer-infobox { text-align: left !important; margin: 20px; }
	#header {  padding-top: 10px; padding-bottom: 10px; }
    .main-logo { margin-right:0px; width: 70%; }
    #blog .post-thumb-inner,
    #search .post-thumb-inner,
    #archive .post-thumb-inner { width: 100%; float: none; }
    
    #blog .post-blog-content-inner,
    #search .post-blog-content-inner,
    #archive .post-blog-content-inner { width: 100%; float: none;}
    
    #blog article .entry-content,
    #search article .entry-content,
    #archive article .entry-content { width: 100%; padding: 0px 0px 0px 0px ;}
    
    #carousel-slider img { background-size: cover; }
    #carousel-slider h2 { color: #ee4408; font-size:30px; font-weight: 600; letter-spacing: -0.8px; }
    #carousel-slider h1 { color: #0b1228; font-size:36px; font-weight: 800; letter-spacing: -0.8px; }
    #carousel-slider .slider-content p { display: none; }

    #carousel-slider .slider-content {
        position: absolute;
        z-index: 1000;

        display: block;
        width: 100%;
        top: 30%;
        left: 10%;
    }
    #gallery-1 .gallery-item { width: 100% !important; padding: 0; }
    
    
    .main-heading h2 span:after { bottom: -16px !important; left: 0 !important; }
    

}

@media (min-width: 992px) {
    
    
    
    
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	
}
/* Large Devices, Wide Screens */
@media (max-width : 1200px){
	
}


.responsiveCal {
 
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
 
}
 
.responsiveCal iframe {
 
position: absolute; top:0; left: 0; width: 100%; height: 100%;
 
}