/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap');


/*font-family: 'Tajawal', sans-serif;*/

.disable-home{display: none !important; visibility: hidden !important;}

body{font-family: 'Tajawal', sans-serif; padding: 0 !important; margin: 0 !important;}

h1, h2, h3, h4, h5, h6, p, span, b, strong{font-family: 'Tajawal', sans-serif;}
p{font-size: 16px; line-height: 1.5; }

.logo{background-color: #FFF; margin: 0 !important; padding: 0 !important;}
.logo img{height: 100%; width: auto;}
.navbar .logo{padding: 0 !important; margin: 0 !important; height: 78px !important;}
header {
    background-color: #3a3a3a !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 80px;
    border: 0px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#block-socialmedialinks{margin-top: 20px;}
header .search-block-form{margin-top: 20px;}
header #search-block-form .btn-primary{background-color: #c53739; border-color: #fff;}
#block-socialmedialinks .social-media-links--platforms li{

    background-color: #FFF;
    border-radius: 50%;
    padding: 4px;
    height: 30px;
    width: 30px;
    vertical-align: middle;
    display: inline-flex;}
#block-socialmedialinks .social-media-links--platforms li a{margin: auto;}
#block-socialmedialinks .social-media-links--platforms svg{font-size: 22px; color: #666;}

#search-block-form input{border-radius: 0 !important;}
.my-menu{
background-color: #c53739 !important;
    height: auto !important;
    border-bottom: 2px solid #FFF;
}

.top-contacts{margin-top: 5px;}
.top-contacts *{color: #FFF; font-size:12px; line-height: 0.8; letter-spacing: 2px; }

.slideshow{clear: both; padding: 0 !important;}
.slideshow img{width:100%;}

.serv-container {margin-bottom: 15px; padding: 5px; border:solid 1px #DDD; overflow: hidden;}
.serv-container h3 {
    min-height: 56px;
}
.serv-container h3 a{color: #3a3a3a;}
.serv-container .body {
    min-height: 67px;
}

.page-header{
    color: #c53739;
    border-bottom: solid 2px rgb(197 55 57 / 63%);
}
ul.sf-menu.sf-style-black { float: right;}
.block-title{text-align: center; font-weight: bold;}

/*Reset Sliders Shape*/

.views_slideshow_controls_text{position: absolute; bottom: 50%; z-index: 9; width: 100%;}

.views_slideshow_controls_text_pause a{display: none; }
.views_slideshow_controls_text:hover .views_slideshow_controls_text_pause a{
    margin: auto;
    float: none;
    position: absolute;
    left: 50%;
    background-image: url(../images/pause.png);
}

.views_slideshow_controls_text_previous{margin-right: -30px;}
.views_slideshow_controls_text_previous a{background-image: url(../images/right-arrow.png); background-size: contain; background-repeat: no-repeat;}

.views_slideshow_controls_text a {
    text-indent: -9999px;
    display: inline-block !important;
    background-color: transparent;
    width: 50px;
    height: 50px;
}
#block-home-slider{direction:ltr;}
.views_slideshow_controls_text .views_slideshow_controls_text_next {float: left; margin-left: -30px;}
.views_slideshow_controls_text .views_slideshow_controls_text_next a {
background-image: url(../images/left-arrow.png); background-size: contain; background-repeat: no-repeat;
}


.page-node-type-page .region-content{margin-top: 15px; background-color: #fdfdfd; border-radius: 15px;
-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
padding: 20px;}
.page-node-type-page table{width: 100% !important; border:none !important;}
.page-node-type-page table tr{background-color: transparent !important;}
.page-node-type-page th, .page-node-type-page th *{line-height: 3; text-align: center; color: #FFF;}
.page-node-type-page td{border: none !important;}


.product-container .title{min-height: 50px;}
.product-container .title a{display:block;}
.product-container{border:solid 1px #DDD; overflow: hidden; margin-bottom: 15px;}
.product-container .image{width: auto;
    text-align: center;
    overflow: hidden;
    display: block;
    margin: auto;
height: 230px;}
.product-container .image img{    height: 100%;
    width: auto;
    margin: auto;
    vertical-align: middle;}

.product-container .title a{display: block; text-align: center; color: #124280; font-weight: bold;}
.product-container .body *{color: #666;}
.product-container .body{padding: 7px; margin: 10px auto; min-height: 80px;}
.product-container .more{text-align: center; margin-bottom: 10px; overflow: hidden;}
.product-container .more a{margin: auto; padding: 0px 15px;  width: 30%; color: #FFF; background-color: #124280; }

.top-products h2{text-align: center;}
.top-products .skin-default{position: relative;}
.top-products .more a{background-color: transparent !important; color: #333;}
.top-products .more {
background-color: transparent !important;
border:solid 1px #CCC; 
-webkit-border-radius: 7px !important;
border-radius: 7px !important; 
padding: 5px 10px;
width: 60%;
margin: 7px auto;
}

.node--type-page{clear:both;}

.page-node-39 .field--name-body{

    display: inline-flex;
    width: 60%;
    flex-direction: row;
    margin-top: 25px;
}

.page-node-39 .field--type-webform{
    display: inline-flex;
    width: 35%;
    flex-direction: row;
    margin-right: 15px;
}

.page-node-39 .field--type-webform input{border-radius: 0;}
.page-node-39 .field--type-webform label{font-weight: bold; color: #135C94;}
.rtecenter {
    text-align: center;
}

footer.footer {
    background: #3a3a3a !important;
    margin: 0;
}
footer.footer * {
    color: #FFF;
}
footer tr {
    padding: 5px 1px;
}
footer th {
    background-color: #c4393c;
    outline: solid 1px #001451;
    padding: 10px 0;
}

.bx-wrapper{direction: ltr;}

.whatsap-support {
    position: fixed;
    bottom: 2%;
    right: 2%;
    height: 60px;
    width: 60px;
}
.whatsap-support img {
    width: 100%;
    height: auto;
}

/* Start The Responsive */

@media (min-width: 240px) and (max-width: 767px) {
    html,body{overflow-x:hidden;}
    
    .field--name-body img{width: 100%; height: auto;}
}

@media (min-width: 250px) and (max-width: 550px) {

   
}

@media (min-width: 768px) and (max-width: 3000px) {
    
  
}

@media (min-width: 992px) and (max-width: 1199px) {
    
   
}