body, html {
    font-family: 'Open Sans', sans-serif!important;
    overflow-x: hidden!important;
    width: 100vw !important;
}

/* Ellipsis based on lines */

.ellipsis-1, .ellipsis-2, .ellipsis-3, .ellipsis-4, .ellipsis-5, .ellipsis-6, .ellipsis-7, .ellipsis-8, .ellipsis-9, .ellipsis-10 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.ellipsis-1 {-webkit-line-clamp: 1;}
.ellipsis-2 {-webkit-line-clamp: 2;}
.ellipsis-3 {-webkit-line-clamp: 3;}
.ellipsis-4 {-webkit-line-clamp: 4;}
.ellipsis-5 {-webkit-line-clamp: 5;}
.ellipsis-6 {-webkit-line-clamp: 6;}
.ellipsis-7 {-webkit-line-clamp: 7;}
.ellipsis-8 {-webkit-line-clamp: 8;}
.ellipsis-9 {-webkit-line-clamp: 9;}
.ellipsis-10 {-webkit-line-clamp: 10;}

.img-contain {object-fit: contain; width: 100%;}
.img-cover {object-fit: cover; width: 100%;}

/* END Ellipsis based on lines */

@media only screen and (min-width: 994px) {
    .mega-menu-cus-style-sub-nav {
        border: solid 1px #eee;
        background-color: #FFF;
        -webkit-box-shadow: 0px 13px 20px -14px rgba(0,0,0,0.16);
        -moz-box-shadow: 0px 13px 20px -14px rgba(0,0,0,0.16);
        box-shadow: 0px 13px 20px -14px rgba(0,0,0,0.16);
    }
    .mega-menu-cus-style-sub-nav:hover {
        /*background-color: #eee;*/
    }
    .mega-menu-cus-style-sub-nav p {
        font-size: 12px;
        font-weight: 500;
    }
    .submenu-bg-custom {
        background-color: #f8f8f8 !important;
    }
}

@media only screen and (max-width: 994px) {
    .mega-menu-cus-style-sub-nav p {
        font-size: 14px;
        font-weight: 500;
    }

    .mega-menu-cus-style-sub-nav:hover {
        padding-left: 5px;
        transition: 0.5s ease;
    }

    .mega-menu-cus-style-sub-nav {
        background-color: transparent;
    }
    .submenu-bg-custom {
        background-color: #FFF!important;
    }
}

/* Remove some buttons from the fancybox pop-up */
.fancybox-button--fullscreen,
.fancybox-button--play,
.fancybox-button--thumbs {display:none!important;}

/* Scroll bar styling ---------------------------------------------------------*/
/* width */
::-webkit-scrollbar {
    width: 5.5px;
    height: 5.5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #dadada;
    border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #192456;
    border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #141d46;
    -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */
    transition: 2s;
}
/* END Scroll bar styling ---------------------------------------------------------*/

.hamburger-menu-word {vertical-align: text-top; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: #192456;}
.custom-menu-btn {margin-top: 5px;}
.u-header-toggler {width: inherit; height: inherit; background-color: #595959d6;}
.hamburger {padding: 3px 0 5px 10px;}
.hamburger-box {width: 20px;  height: 25px; margin-top:5px;}
.hamburger--slider .hamburger-inner:before {top: 8px;}
.hamburger--slider .hamburger-inner:after {top: 16px;}
.hamburger--slider.is-active .hamburger-inner:after {transform: translate3d(0,-16px,0) rotate(-90deg);}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {background-color: #FFF; height: 2px;}
.g-bg-black-opacity-0_8 {background-color: rgba(0, 0, 0, 0.9) !important;}
.g-bg-gray-light-v6 {background-color: #fbfbfb !important;}

@media (max-width: 426px) {
    .g-font-size-11--sm {font-size: 11.5px!important;}
}

.g-bg-instagram, .g-bg-instagram--hover:hover {background-color: #DD2A7B!important;}
.g-bg-behance--hover:hover {background-color: #000000!important;}
.g-bg-snapchat--hover:hover {background-color: #FFFC00!important;}
.g-bg-tumblr--hover:hover {background-color: #34465D!important;}
.g-bg-whatsapp, .g-bg-whatsapp--hover:hover {background-color: #4FCE5D!important;}


/* Gray Gradient */
.g-bg-gray-lineargradient-cus {
    background-repeat: repeat-x;
    background-image: linear-gradient(0deg, #fff, #f7f7f7);
}

/* Gray Gradient 180 */
.g-bg-gray-lineargradient-cus-180 {
    background-repeat: repeat-x;
    background-image: linear-gradient(180deg, #fff, #f7f7f7);
}

/* Primary Gradient */
.g-bg-primary-lineargradient-cus {
    background-repeat: repeat-x;
    background-image: linear-gradient(0deg, #fff, rgba(225, 235, 255, 0.42));
}

/* Primary Gradient 180 */
.g-bg-primary-lineargradient-cus-180 {
    background-repeat: repeat-x;
    background-image: linear-gradient(180deg, #fff, #e1ebff);
}

.g-bg-bluewhite-gradient-opacity-v1,
.g-bg-bluewhite-gradient-opacity-v1--after::after {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 0%, rgba(0, 0, 0, 0.02) 100%);
    background-repeat: repeat-x;
}

/* Primary Gradient Ellipse */
.g-bg-primary-radialgradient-ellipse {
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fff 22%, #e6f3ff);
    background-repeat: no-repeat;
}

.g-bg-primary-radialgradient-ellipse-inverse {
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #e6f3ff 22%, #FFF);
    background-repeat: no-repeat;
}

/* Gold Gradient Ellipse */
.g-bg-gold-radialgradient-ellipse {
    background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fff 22%, rgba(255, 232, 145, 0.41));
    background-repeat: no-repeat;
}

.cus-height-150-product img {
    height: 150px;
    object-fit: contain;
}

.cus-height-200-product img {
    height: 200px;
    object-fit: contain;
}

/* For datepicker */
.ui-datepicker .ui-datepicker-header {padding:0!important;}
.ui-datepicker .ui-datepicker-title {line-height: 50px!important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    width: 50px!important;
    height: 50px!important;
    top: 0!important;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    top: 20%!important;
    left: 60%!important;
}

@media only screen and (max-width: 430px) {
    .cus-height-200-product {
        min-height: 160px!important;
        max-height: 160px!important;
        overflow: hidden;
    }
    .ui-datepicker .ui-datepicker-title {line-height: 45px!important;}
    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        width: 45px!important;
        height: 45px!important;
        top: 0!important;
    }
}

/* SWIPER CSS */
.swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.gallery-top {
    width: 100%;
}
.gallery-top img {
    height: 400px;
    object-fit: contain;
}
.gallery-thumbs {
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs img {
    height: 120px;
    object-fit: contain;
}
.gallery-thumbs .swiper-slide {
    width: 25%;
    opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}

.swiper-height-50vh {height:50vh;}
.swiper-text-center-all {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
   /* height:50vh; Change this if the height of the slider changes */
}
.swiper-text-center-bg {background-color: rgba(0,0,0,0.5);}

.swiper-text-no-text {padding-top: 84px!important;}

.cus-dawa-home-bs {
    height: 255px;
    object-fit: contain;
}

@media screen and (max-width: 1025px) {
    .cus-dawa-home-bs {
        height: 210px;
    }
}

@media screen and (max-width: 769px) {
    .gallery-top img {
        height: 300px;
    }
    .gallery-thumbs img {
        height: 90px;
    }
}

@media screen and (max-width: 426px) {
    .cus-height-200-product img {
        height: 180px;
    }
    .swiper-text-no-text {padding-top: 48.8px!important;}}