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


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center,
dl, dt, dd, ool, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 2;
    padding: 5;
  border: 0;
    font-size: 14px;
    font: inherit;
    vertical-align: baseline;
	font-family: 'Almarai', sans-serif; 
}



* {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

      .footer{background-color: #f1fafe; height:140px;
    margin-top:auto !important;
    position:relative;
      width: 100%;
      text-align: center;}

    @media  all and (max-width: 992px){
    .footer{background-color: #f1fafe; height:170px;}
    }
    .header-footer-text{
      font-weight: normal;
    }

    .left-margin{
    margin-left: 86%;
    }


    .col-6.col-md-3.product {
        position: relative; 
    }


.box-soon { 
width: 90%;
background: #ffffff;
border-radius: 10px;
}

.arrow { 
width: 90%;
}


/* The Modal (background) */
.modal {
  padding-top: 50px;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
	
}








body {
    direction:ltr;
    background-color: #f1fafe;
    font-family: 'Open Sans', sans-serif;
   font-size: 12px;
    color: #707070;
    font-weight: 400;
    line-height: 1.75;
}

img{max-width: 100%;}

.app-whatsapp-btn{
	padding: 5px;
    border-radius: 10px;
    color: #ffffff;
    border:  2px solid #6FDA44;
	background: #6FDA44;
}
.app-whatsapp-btn:hover{
    background: #46CC00;
    color: #ffffff;
    border:  2px solid #6FDA44;
}

.h3 {
  padding: 8px;
  margin: -1px;
  color: #EB5A74;
  font-size: 13px;
	    font-weight: 700;
}


.app-store-btn{
    padding: 12px 30px;
	font-family: 'Almarai', sans-serif; 
    font-weight: 700;
	 width: 300px;
}
.whatsapp{
	    padding: 12px 30px;
	font-family: 'Almarai', sans-serif; 
    font-weight: 700;
    border-radius: 30px;
    color: #ffffff;
    border:  2px solid #ffffff;
	background: #00a3ff;
	 width: 300px;
}
.whatsapp:hover{
    background: #0d95e1;
    color: #ffffff;
	    border:  2px solid #ffffff;
}




.footerw{
	  padding: 10px 15px 5px 15px;
    color: #0A78A5;
}


.Copyright{
    color: #A1A1A1;
}



.featuresSVG{width: 100% !important;}

a, .btn{transition: all 2s ease; -webkit-transition: all 2s ease;}

p+p{margin-top: 20px;}


.outline-btn, .solid-btn, .primary-solid-btn{
    padding: 10px 25px;
    font-family: 'Open Sans', sans-serif
}

.primary-solid-btn{
    border-color: #27B7F2;
    background: #27B7F2;
    color: #ffffff;
}
.primary-solid-btn:hover{
    background: transparent;
    color: #f1fafe;
    border-color: #27B7F2;
}
.solid-btn{
    color: #fff;
    background: #27B7F2;
    border: 2px solid #ffffff;
    border-radius: 30px;
}

.solid-btn:hover{
    background: transparent;
    color: #27B7F2;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.outline-btn{
    border-radius: 30px;
    color: #27B7F2;
    display: inline-block;
    border: 2px solid #27B7F2;
}
.outline-btn:hover{
    color: #fff;
    background: #27B7F2;
    -webkit-box-shadow: 0 20px 30px 0 rgba(67,37,204,.2);
    box-shadow: 0 20px 30px 0 rgba(67,37,204,.2);
}

.primary-bg h1, .primary-bg p{
    color: #fff;
}
.white-bg h1, .white-bg p{
    color: inherit;
}
.google-play-btn, .app-store-btn{
    padding: 12px 30px;
	font-family: 'Almarai', sans-serif; 
    font-weight: 700;
}
.google-play-btn{
    background: #ffffff;
    border-color: #ffffff;
    color: #6730e3;
    border-radius: 30px;
}
.google-play-btn:hover{
    background: transparent;
    color: #ffffff;
}


.app-store-btn-footer{
	padding: 8px 0px 0px 0px;
	margin: 5px;
	width: 120px;
	height: 40px;
    border-radius: 24px;
    color: #FFFFFF;
	background: #00a3ff;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.app-store-btn-footer:hover{
    background: #0d95e1;
    color: #FFFFFF;
}
	


.app-store-btn-next{
	padding: 8px;
	margin: 5px;
	width: 40px;
	height: 40px;
    border-radius: 24px;
    color: #FFFFFF;
	background: #00a3ff;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.app-store-btn-next:hover{
    background: #0d95e1;
    color: #FFFFFF;
}


.whatsapp-btn{
    border-radius: 30px;
    color: #ffffff;
    border:  2px solid #ffffff;
	background: #6FDA44;
    padding: 6px 20px;
	font-family: 'Almarai', sans-serif; 
    font-weight: 700;
}
.whatsapp-btn:hover{
    background: #ffffff;
    color: #379BF2;
    border:  2px solid #ffffff;

}



@media all and (max-width:1199px){

  .container{max-width: inherit; width:100%;}

}

.container{width:100%;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto}


.affix-contact {
    background-color: #00abe1;
  border-top: 5px solid #f1fafe;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}



.affix-contact-header {
    background-color: #F4F4F4;
  border-bottom: 1px solid #D7D7D7;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.product h2 a {font-size: 14px; display: block; background-color: #FFFFFF; color:#368CB7; padding: 10px; text-align: center;border-radius:0px 0px 14px 14px}


.affix-contact-footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
	
    background-color: #FFFFFF;
  border-top: 1px solid #D7D7D7;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}




.affix-contact-details {
	padding: 0px;
    background-color: #FFFFFF;
	color: #0A78A5;
    border: 1px solid #D7D7D7;
	border-radius:14px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	
}





.affix-contact-Days {
	padding: 10px;
    background-color: #FFFFFF;
	color: #0A78A5;
    border: 0.1px solid #D7D7D7;
	border-radius:0px;
	font-size: 14;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	
}


.white-bg.affix, .custom-nav.affix{
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
}

.white-bg.affix ul li a{
    color: #081d43 !important;
    opacity: 0.8;
}
.white-bg.custom-nav ul li a:hover{
    opacity: 1;
}
.bg-transparent ul li a{
    color: #ffffff;
    opacity: 0.8;
}
.bg-transparent ul li a:hover, .white-bg.affix ul li a:hover{
    opacity: 1;
}
.bg-transparent.affix{
    background: #27B7F2 !important;
}


.bg-transparent.affix-contact{
    background: #27B7F2 !important;
	padding: 12px;
}



.header-text-details {

    text-align: center;



    font-size: 35px;

    color: white;

    font-weight: 600;



}


    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }




.feature img {

  width:24px;

  display:block;

  height:22px;

  text-decoration:none;

}



.feature:after {

  content: '''';

  position: absolute;

  width: 0px;

  height: 78%;

  background-color: #ccc;

  top: 12px;

  right: 34%;

}



.feature:before {

  content: '''';

  position: absolute;

  width: 0px;

  height: 78%;

  background-color: #ccc;

  top: 12px;

  left: 34%;

}



.feature{

  position: relative;

}



.feature .row .col-4 {


}

.feature .row .col-4:nth-child(9), .feature .row .col-4:nth-child(8), .feature .row .col-4:nth-child(7){

  border-bottom: none;

}

.feature .row .col-4 .row.label-border-bottom {

  align-items: center;

}



.feature .row .col-4 .row.label-border-bottom {

  align-items: center;

margin: 0;

}

.feature .row {

  margin: 0 0;

}

.feature {}





.feature .row .col-4 .row.label-border-bottom p {

  flex: 0 0 67%;

  text-align: right;
	width: 110px !important;
	padding-right: 5px ;
font-size: 12px;
}

.feature .row .col-4 .ml-2.mb-2.m-1 {

  flex: 0 0 20%;

}

.feature .row .col-4 .row.label-border-bottom {display: flex;}



/* .label-border-right{

  border-right: 1px solid #ccc;

  padding: 10px 10px 10px 10px;

} */



/* .label-border-bottom{

  border: 1px solid #ccc; 

  border-width: 0 0 0 0;

  border-bottom: 1px solid #ccc;  

  padding: 5px 20px 0 10px;

} */





/* Common CSS

    ========================================================================== */

h1,h2,h3,h4,h5,h6{font-weight: 700;}

h1{font-size: 24px; margin-bottom: 20px;}

h2{font-size: 18px;}

ol, ulx { list-style: none; }

a, .btn { transition: all 0.5s ease; }

a:active, a:hover, a:focus, .btn:focus, .btn:active, .btn:hover { outline: 0; }



a { color: #ffffff; text-decoration: none; }

a:focus, a:hover { color: #333333; text-decoration: none; }



.btn-sml{height: 26px; font-size: 14px; padding: 0 10px; line-height: 26px;}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus,.btn-primary:focus{box-shadow: none;}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary:focus{background-color: #EB5A74; border-color: #EB5A74; color: #fff;}



.btn-gray, .btn-gray:hover, .btn-gray:focus{background-color: #f1fafe; color: #fff;}



header, footer{background-color: #f1fafe; padding:10px 0;}

header{border-bottom: 1px #f1fafe solid;}

.product,.contactPerson{margin-bottom: 30px;}

.product img{display: block; height: 160px; width: 100%; object-fit: cover;border-radius:14px 14px 0px 0px}




h2 a, .productName{font-size: 14px; display: block;  color: #4AC4F2; padding: 6px; text-align: center;border-radius:14px 14px 0px 0px}


.shadow {
box-shadow:  10px;
	border-radius:14px;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }


.col-6.col-md-3.product p button {
    right: 15px !important;
    bottom: 43px !important;
    border-radius: 10px 0px 0px 0px;
    width: 45px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff !important;
	font-weight: bold;
    position: absolute;
}

.btn-primary-mainchalet {
	margin-bottom: 10px;
	font-weight: bold;
    color: #fff;
    background-color: #EB5A74 !important;
    border-color: #EB5A74 !important;
	width: 100%;
}


.btn-primary-mainchalet:hover {
    color: #fff;
    background-color: #E00E45 !important;
    border-color: #E00E45 !important;
}


.btn-primary {
	font-weight: bold;
    color: #fff;
    background-color: #379BF2 !important;
    border-color: #379BF2 !important;
	width: 100%;
}


.btn-primary:hover {
    color: #fff;
    background-color: #0A78A5 !important;
    border-color: #0A78A5 !important;
}


footer{border-top: 1px #f1fafe solid;}

.footeritem{min-width: 120px; text-align: center; font-size: 12px; font-weight: bold;}

.footeritem img{display: block; margin: 20px auto;}

.footeritem span{display: block; padding-top: 8px;}



.toparrows{border-bottom: 1px #f1fafe solid;}



.week label{display: block; font-size:15px; color:#7E7E7E; font-weight: bold;}

.prodDetails span{font-size: 18px; font-weight: bold; color: #0d95e1;}



.heading1{border:1px #f1fafe solid; font-size: 16px;  height: 45px; text-align: center;border-radius:0px 0px 0px 0px; padding: 10px}

.heading{ border:1px #f1fafe solid; font-size: 14px;  height: 45px; text-align: center;border-radius:14px 14px 0px 0px; padding-top: 10px;}

.cardWidget {background-color: #f1fafe; border:0px; font-size: 16px; color: #ffffff; padding:0px; text-align: center;border-radius:12px 12px 10px 10px}

.bulleted{padding-left:20px; margin: 10px 0; list-style: disc; }

.rtlcontent{direction: rtl; text-align: right; padding-right: 20px;}









.num{position: absolute; background-color: rgba(0,0,0,0.3); z-index: 1; font-size: 20px; color: #fff; padding: 5px 10px;}

/*.share{position: absolute; z-index: 2; bottom: 150px; right: 15px;}*/

/*.carousel-control-prev-icon,

.carousel-control-next-icon{border-radius:5px; display: inline-block; padding: 5px; width: 40px; height: 50px; background-color: #000000; background-size: 12px 21px; background-position: center;}*/

/*.carousel-control-prev-icon{ border-bottom-left-radius: 0; border-top-left-radius: 0;margin-left: 60px;}

.carousel-control-next-icon{border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: 60px;}*/



.mainTitle{font-size: 20px; color: #f1fafe;}

.frame{background-color: #f1fafe; border: 1px #f1fafe solid; padding: 10px; border-radius: 10px;}





.framebay{background-color: #f1fafe; border: 1px #f1fafe solid; padding: 5px; border-radius: 10px; margin: 20px 0px 10px 0px; }



.framebook{background-color: #f1fafe; border: 1px #f1fafe solid; padding: 5px; border-radius: 10px; margin: 10px 0px 10px 0px; }





.btns .btn{width: 48%;}

.contactPerson h3{color: #f1fafe; font-size: 14px;}

.userPic{height: 110px; width:110px; object-fit: cover;}



  .pagination li a  {position: relative;

    display: block;

    padding: .5rem .75rem;

    margin-left: -1px;

    line-height: 1.25;

    color: #007bff;

    background-color: #fff;

    border: 1px solid #dee2e6;}

    .pagination li.active a{

      z-index: 1;

      color: #fff;

      background-color: #007bff;

      border-color: #007bff;

    }

    .pagination li.disabled a{

     color: #6c757d;

    pointer-events: none;

    cursor: auto;

    background-color: #fff;

    border-color: #dee2e6;

    }

  .carousel-item img{width: 100%; height: 520px; object-fit: inherit;border-radius:0px 0px 0px 0px;}

  .fa-facebook-official{color: #4064ad;}

  .fa-twitter-square{color: #1c9deb;}

  .fa-linkedin-square{color: #2464ae;}

  .fa-pinterest-square{color:#e00018;}

  .shareMedia a{display: inline-block; margin: 5px;}

  .shareMedia .fa{font-size: 25px;}



.carousel-item video{width: 100%; height: 520px; object-fit: inherit;border-radius:0px 0px 0px 0px;}

@media all and (min-width:575px){

    .footeritem{min-width: 170px;}

    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }

    

    .feature img {

      width:24px;

      display:block;

      height:22px;

      text-decoration:none;

    }

}



@media all and (max-width: 992px){

  .product img{height: 160px;}

  .carousel-item img{height: 350px;border-radius:0px 0px 0px 0px; margin-bottom: 10px}

    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }


  

  .feature img {

    width:24px;

    display:block;

    height:22px;

    text-decoration:none;

  }



  .col-4 {



    padding: 0 5px;

  }

  .feature .row .col-4 .row.label-border-bottom {

    flex-wrap: inherit;

  }

}




.white-bg.affix, .custom-nav.affix{
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
}

.white-bg.affix ul li a{
    color: #081d43 !important;
    opacity: 0.8;
}
.white-bg.custom-nav ul li a:hover{
    opacity: 1;
}
.bg-transparent ul li a{
    color: #ffffff;
    opacity: 0.8;
}
.bg-transparent ul li a:hover, .white-bg.affix ul li a:hover{
    opacity: 1;
}
.bg-transparent.affix{
    background: #27B7F2 !important;
}


.bg-transparent.affix-contact{
    background: #27B7F2 !important;
	padding: 12px;
}



.navbar{
    transition: all .3s ease-in-out;
}
@media (min-width: 320px) and (max-width: 992px){
    .navbar{
        background: #f1fafe !important;
        padding: .95rem 1rem;
    }

    .white-bg.affix, .custom-nav.affix, .navbar.white-bg{
        background: #ffffff !important;
        border-bottom: 1px solid #ebebeb;
    }
    .white-bg.custom-nav ul li a, .custom-nav ul li a{
        color: #081d43 !important;
    }
    .white-bg.navbar .navbar-toggler span{
        color: #f1fafe;
    }
	



@media all and (max-width: 400px){

  .product img{height: 160px;}

  .carousel-item img{height: 500px;border-radius:0px 0px 0px 0px}

    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }


  

  .feature img {

    width:24px;

    display:block;

    height:22px;

    text-decoration:none;

  }

}



@media all and (max-width: 992px){

  .product video{height: 200px;}

  .carousel-item video{height: 500px;border-radius:0px 0px 0px 0px; margin-bottom: 10px}

}





@media all and (max-width: 400px){

  .product video{height: 120px;}

  .carousel-item video{height: 290px;border-radius:0px 0px 0px 0px}



    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }


  

  .feature img {

    width:24px;

    display:block;

    height:22px;

    text-decoration:none;

  }



 

}











@media all and (max-width: 640px){

   #select-delivery-date-input .datepicker-days thead th{font-size: 18px;}

   .prodDetails label{font-size:14px; }

   .prodDetails span{font-size: 16px;}



    .feature {

      background-color: #FAFAFA;

      font-size: 16px;

      color: #0A78A5;

      padding: 10px 10px 10px 10px;

      text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 4px -1px 4px -1px;
    }


  

  .feature img {

    width:24px;

    display:block;

    height:22px;

    text-decoration:none;

  }



  .col-4 {


    padding: 0 5px;

  }

  .feature {

      padding: 10px 10px 10px 10px;

  }



}



body > .dropdown-menu{display: none!important;}

#select-delivery-date-input table.table-condensed{width:100%;}

/*#select-delivery-date-input .datepicker-days .table-condensed thead{background-color: #f1fafe;}*/

#select-delivery-date-input .datepicker-days table.table-condensed{background-color: #f1fafe;}



.site-logo{

  width: 120px;

}