



/* PHONE */
/* RESPONSIVE*/
@media (max-width: 767px) {
 /* LOGO TOP  */
 #top h1 a img {
    margin: 10px;
    max-height: 30px;
    width: 90px;
    margin-left: 1px;
 }
 /* whastapp logo */
 .bottom_right {
    bottom: 50px;
    right: 0px;
 }
 #drawer-account  {
    display: none !important;
 }

/*................ HOME .............................  */

 /* Home Page */
 .navbar-fixed-bottom .easydrawer[data-easydrawer-id="drawer-account"]  {
    display: none !important;
 }
    .fa-search {
    color: white;
    }
    .navbar-fixed-top {
        border-width: 0;
    }
    div .count_info {
        display: flex;
        align-items: center; 
        justify-content: center; 
        padding-bottom: 50px;
        padding-left: 60px;
    }
    div .count_part {
        padding-left: 50px;
    }
    .home-mission img {
    height: 300px;
    }
    .home-cat .text_wrapper .content_text h3 {
        font-size: 15px !important;
    }
    .home-cat .text_wrapper:hover .content_text h3 {
        transform: translateY(60px); 
    }
    body.homepage .home-cat .text_wrapper {
        --strip-height: 130px;
    }
    body.homepage .home-cat .text_wrapper .link a {
        margin-top: 6px;
    }
    body.homepage #slider {
        display: none;
    }
    body.homepage #slider-mobile {
        display: block;
        width: 100%;
        min-height: 520px;
        position: relative;
        display: flex;
        align-items: flex-end;
        background-image:
            linear-gradient(180deg, rgba(1, 32, 96, 0) 0%, rgba(1, 32, 96, 0) 38%, rgba(1, 32, 96, 0.78) 55%, rgba(1, 32, 96, 0.95) 70%, rgba(1, 32, 96, 1) 100%),
            url('/image/cache/data/theme/banners/slideshow/home/hero-banner_150224175411-2400x900_0.jpg');
        background-size: cover, cover;
        background-position: center top, right top;
        background-repeat: no-repeat, no-repeat;
    }
    body.homepage #slider-mobile .slider-mobile-image {
        display: none;
    }
    body.homepage #slider-mobile .slider-mobile-text {
        background: transparent;
        padding: 0 20px 50px;
        width: 100%;
    }
    body.homepage #slider-mobile .slider-mobile-text h1 {
        color: #ffffff;
        font-size: 32px !important;
        line-height: 1.2;
        margin: 0 0 30px;
        font-weight: 700;
        text-transform: none;
    }
    body.homepage #slider-mobile .slider-mobile-text .btn {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #ffffff !important;
        font-weight: 600;
    }
    body.homepage #slider-mobile .slider-mobile-text .btn:hover {
        background: #2F9084 !important;
        border-color: #2F9084 !important;
        color: #ffffff !important;
    }

      
/* ..............ABOUT US PAGE ...................... */

.col-sm-12 .center-column  {  /*remove white padding left about us page and whote top */
    margin: -50px 0px -20px 0px;
}


/* about top */
.about-top img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
}
.about-top h1 {
    font-size: 30px !important;
}
.about-top .col-md-6 {
    padding: 290px 10px 20px 0px; 
}
.about_us .about-top p {
    width: 360px;
    text-align: justify;
}
/* light section */
.superior .col-md-6:last-child  {
    padding: 30px 10px 0px 10px;
}
/* mission section */
.mission-img img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: 75% center;
}
.mission .col-md-6 {
  padding: 290px 0px 0px 0px !important;    
}
.mission h2 {
    font-size: 26px !important;
}
.mission-img img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0) 76%, rgba(0,0,0,0) 100%);
    margin-right: -9px;
}
.mission h2 {
    margin: 15px 0px -10px 0px;
} 
    
.mission h3 {
     margin: 10px 0px 40px 0px;
}
/*expert pop up */
.modal-career .close, .modal-expert .close{
        z-index: 5 !important;
        position: absolute;
        right: -2px;
        top: -3px;
        background: #000000;
        border: 2px solid #fff;
        border-radius: 100px;
        width: 30px;
        height: 30px;
        box-shadow: -3px 5px 13px rgba(60, 69, 95, 0.2);
}
div .modal-expert .modal-body h2   {
        font-size: 26px !important;
} 
.expert-div .btn-expert:focus {
    outline: none;
  }   
/* bottom sec  */
.program {
        margin-bottom: 10px;
}
   
/* ......................CONTACT US PAGE........................ */
    .contactus {
    display: flex;
    flex-direction: column;
    }
    .contactus h1 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 30px !important;
    }
    .contactus .contact_wrapper {
        padding-bottom: 20px;
    }
    .contactus img {
        width: 350px;
    }
    .contactus>div:last-child {
        padding-left: 0px;
        padding-right: 0px;
        display: flex;
        justify-content: center;
    }


    #form1 .box-content {
        padding: 40px 7.5% 40px;
    }
    .form-builder form {
        display:flex;
        flex-direction: column;
    }
    .form-field h4 {
        padding-bottom: 10px;
    }
    #form1 .form-field.html-field {
        padding-bottom: 0px;
    }
    
    /* form contact us */
    #contactno {
        width: 330px;
    }
    #Name {
        width: 330px;
    }
    #email {
        width: 330px;
    }
    .form-builder textarea {
        width: 330px !important;
    }
    #form1 .g-recaptcha, #form1 .submit7.form-field .field-block{
        display: flex;
        justify-content: flex-start;
    }


/* ..........................SUPPORT PAGE............................... */
    body.info-7 .support_page h2 {
        font-size: 26px !important;
        padding-top: 50px;
        margin-bottom: 0;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-align: left;
    }
    body.info-7 .col-sm-12 .center-column {
        margin-top: 0;
    }
    
    div .support_page h3 {
        font-size: 20px !important;
        width: 350px;
        margin-top: -30px;
    }
    
     div .support_page p{
        font-size: 15px;
        margin-bottom: 30px;
    }
    .white_sect .row {
        display: flex;
        align-items:center;
        flex-direction: column-reverse;
    }
    .light_sect .row {
        display: flex;
        align-items:center;
        flex-direction: column;
    }
    .talk_sect .btn-default {
        width: 50%;
    }
    .breadcrumb {
        border-radius: 0px;
    }




    /* ......................CAREER PAGE ...............................*/
    .cosmic_career h2 {
        font-size: 26px !important;
        margin-bottom: 10px;
        margin-top: 40px;
    }
    
    .career_section .title-car {
        font-size: 26px !important;
        margin-top: -30px;
        margin-bottom: 10px !important;
    }
    
    .table-career tr {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }
    
    .btn-career {
        margin: -20px 0px 0px 0px;
    }

    .career_section {
        width: 100%;
    }
    /* career popup */

    .blog-article .blog_article_wrapper:before {
        height: 330px;
    }
    .articleHeader h1 {
        font-size: 20px !important;
        color: white !important;
        margin-top: 30px !important;
    }
    
    .articleHeader p {
        margin-bottom: 30px !important;
    }
    .blog-article #blogArticle {
        padding:55px 20px 30px;
    }
    .commentList li p {
        margin: 30px 10px 0px -70px;
    }
    #articleRelated ul.article_list{
        display: flex;
        justify-content: center;
        margin-bottom: 0px;
    }
    #articleRelated ul.article_list>li {
        width: 350px;
        margin-bottom: 30px;
    }


    /* career popup */
    .modal-career .modal-body {
        margin-top: -15px !important;
    }



    /* ............................NEWS PAGE............................................. */
    .blog-category #blog_category #blogCatArticles h3 {
        font-size: 18px !important;
    }
    .blog_article_wrapper #blogArticle .articleHeader h1{
        padding-bottom: 15px;
    }
    .blog-category #blog_category #blogCatArticles {
        display: flex;
        flex-direction: column;
        margin: 70px auto 20px;
    }
    .blog-category #blog_category .articleCat {
        width: 100%;
    }
    .blog-category #blog_category #blogCatArticles {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .blog-category .articleContent>.container>.row>.blog_cat_content {
        padding: 45px 15px 10px 15px;
    }
    div .pagination {
        padding-bottom: 30px;
    }
    .blog-category div .col-sm-12 .center-column {
        padding: 50px 10px 10px 15px !important;
    }
    .responsive .main-content .pattern>.container, .responsive .standard-body .main-content .pattern>.container {
        overflow-x: hidden;
        overflow-y: hidden;
    }
    body.info-7.responsive .main-content .pattern>.container,
    body.info-7.responsive .standard-body .main-content .pattern>.container {
        overflow-y: visible;
    }
    


    /* ..................................PRODUCT PAGE .........................................*/


    /* top part */
    .child_category:before {
        background: rgba(0,0,0,0.25);
    }
    .path-190 .child_category {
        padding: 55px 0px;
    }
    .product-category .breadcrumb .parent_category{
        background-size: 100%;
        background-position: top;
        padding-top: 380px;
        padding-bottom: 40px;
    }
    .product-category .breadcrumb #title-page {
        font-size: 26px !important;
        margin-top: 10px;
    }
    .product-category .breadcrumb .parent_category p {
        font-size: 15px;
    }
    .product-category .breadcrumb .parent_category .clearfix {
        float: left;
        width: 350px;
    }
    /* .home-cat div:hover>.text_wrapper>.content_text{
        transform: none;
    } */
    .homepage .container .box.home-cat .col-sm-3:nth-child(4) h3{
        font-size: 15px !important;
    }
    .homepage .container .box.home-cat .col-sm-3 p {
        display: none;
    }
    .responsive .center-column .tab-content {
        margin: none !important;
    }
    #tab-description>* {
        font-size: 15px;
        margin: 10px;
        padding-top: 10px;
    }
    .htabs {
        margin-bottom: -15px;
        margin-left: 10px;
    }
    
    /* category */
    .product-grid .product {
        display: flex;
        margin-bottom: 60px;
        flex-direction: row;
        margin-top: -40px !important;
    }
    .product-category .pagination {
        display : none;
    }

    /* related product */

 
    .related_product .product-grid .product {
        border: 1px solid #ddd; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
        border-radius: 8px; 
        padding: 10px; 
        margin: 10px auto; 
        width: calc(90% - 20px);  
    }
    
    .related_product .owl-stage {
    padding-bottom: 40px;
    padding-top: 40px;
    margin-top: 50px;
    }

    .box.related_product {
        padding: 30px 0;
    }


}
@media (min-width: 768px) {
    body.homepage #slider-mobile {
        display: none;
    }
}
@media (max-width: 960px) {
    .footer-panel h4:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
    .responsive ul.megamenu > li.click:before,
    .responsive ul.megamenu > li.hover:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
    .responsive ul.megamenu > li.active .close-menu:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
}
