:root {

    --primary-color: rgb(3, 9, 135); /* #020887 */
    --secondary-color: #ffffff;

    /** Top Line  */ 
    --topline-bg: #f8f9fa;
    --topline-text-color: #000000;

    /** Menu */
    --menu-bg: rgb(3, 9, 135); /* #020887 */
    --menu-color: #f8f9fa;
    --menu-hover-color: #fefbd8;
    

    /** Carousel background */
    --carousel-bg-rgb: 13, 110, 253; /* #0d6efd */
    --carousel-text-opacity: .8;

    --img-shadow: rgba(160, 36, 20,.7);

    --1animate-delay: 0.25s;    
}

/** 
xs - 0
sm - 576
md - 768
lg - 992
xl - 1200
xxl - 1400
*/

body {
    min-width: 360px;
    max-width: 1920px;
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    font-family: popins;    
    font-weight: normal;
}

.en {
    /* font-family: popins; */
}

/** Top Line Background */
.topline-bg {
    background-color: var(--topline-bg);
}

.topline-text-color {
    color: var(--topline-text-color)!important;
}

.change-svg-color {
    filter: invert(6%) sepia(79%) saturate(7334%) hue-rotate(243deg) brightness(95%) contrast(119%);
}

/** Navbar **/
.logo-width {
    width: 185px;
    height: 58px;
}

.navbar-bg {
    background-color: var(--menu-bg);    
}

#nav-line {
    background: var(--menu-color);
    height: 0.25rem;
}

.nav-link {
    border-top: 2px solid var(--menu-bg);
    border-bottom: 2px solid var(--menu-bg);
    color: var(--menu-color);
    padding-left: 1rem!important;
    padding-right: 1rem!important;
    margin-left: .2rem;
    font-size: 1.1rem;
}

.nav-link:hover {
    color: var(--menu-hover-color);
    border-bottom: 2px solid var(--menu-hover-color);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.nav-link-active, .nav-link-active:hover {
    color: var(--menu-color);
    border-bottom: 2px solid var(--menu-color);    
}

@media screen and (max-width: 991.9px) {
    .navbar-nav {
        margin: 1rem 0!important
    }
    .nav-link, .nav-link:hover, .nav-link-active, .nav-link-active:hover {
        border: 0;
    }
    .nav-link:hover {
        background: var(--menu-hover-color);
        color: var(--menu-bg);
        font-weight: bold;
    }
    .nav-link-active, .nav-link-active:hover {
        background: var(--menu-color);
        color: var(--menu-bg);
        font-weight: normal;        
    }
    .nav-item {
        margin-bottom: .25rem;
    }
}

.navbar-toggler-icon {
    width: 1.2em;
    height: 1.2em;
}

/* General */
.h-style {
    font-weight: bold;
    color: var(--primary-color);
}

.p-style {
    font-size: 1.1rem;
    font-weight: normal;    
}

.p-like-headers {
    font-size: 1.25rem;
}

.negative-margin {
    margin-left: -.6rem;
}

.btn-light {
    background: #d9e6f3;
}

/* Animation Timing */ 

.animate-quarter {
    --animate-duration: 1.25s;
}

.animate-half {
    --animate-duration: 1.5s;
}

.animate-three-quarter {
    --animate-duration: 1.75s;
}

.animate-one {
    --animate-duration: 2s;
}

/* ************** */


/* Carousel */
.minimum-height {
    min-height: 400px;
}

.height-width-fit {
    min-height: 400px;
    width: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1000px) {
    .slider-width-heigh {
      height: 400px;
    }
}

@media only screen and (max-width: 1200px) {
    .slider-width-heigh {
      height: 450px;
    }
}

@media only screen and (max-width: 1400px) {
    .slider-width-heigh {
      height: 525px;
    }
}

@media only screen and (min-width: 1401px) {
    .slider-width-heigh {
      height: 600px;
    }
}

.bg-slider-primary {
    background: rgba(var(--carousel-bg-rgb), var(--carousel-text-opacity));
}

/* ********************************* */

.carousel-caption {
    position: absolute;
    right: 20%;
    bottom: 1.25rem;
    left: 20%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}


.btn-iif-secondary, .btn-iif-secondary:link, .btn-iif-secondary:visited {
    background: #fab412;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}

.btn-iif-secondary:hover, .btn-iif-secondary:focus, .btn-iif-secondary:active {
    background: #f9963b;
    color: #000000;
    transition-timing-function: ease-in-out;
    transition: 0.25s;    
}

.btn-iif-outline, .btn-iif-outline:link, .btn-iif-outline:visited {
    background: transparent;
    border-color: #FFFFFF;
    font-weight: normal;    
    color: #FFFFFF;
    text-decoration: none;    
}

.btn-iif-outline:hover, .btn-iif-outline:focus, .btn-iif-outline:active {
    background: #f9963b;
    color: #000000;
    transition-timing-function: ease-in-out;
    transition: 0.25s;
}



/* ****************************** */





/* Home Products */
.home-products-height-width-fit {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Home About */
.about-height-width-fit {
    min-height: 200px;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Products */
.products-height-width-fit {
    /* min-height: 200px; */
    /* max-height: 400px; */
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}


/* Products details */
.products-details-header {
    background: #CFE2FF;
}
    

/* Footer */
.footer-bg-color {    
    background: var(--primary-color);
}

.p-footer-size {
    font-size: 0.8rem;
    font-weight: normal;    
}

.swal2-popup.swal2-toast {
    background:#eef9f3!important;
}

.form-control-color {
    height: calc(.5em + .75rem + calc(var(--bs-border-width) * 2));
}

.colorpick-eyedropper-input-trigger {
    display: none;
}

/* gotop */
#goTop {
    position: fixed;
    right: 15px;
    bottom: 70px;
}

#goTopBtn {
    display: none;
}

#goTopBtn:hover {
    opacity: 0.7;
}

.gototop_filter {
    filter: invert(69%) sepia(79%) saturate(539%) hue-rotate(351deg) brightness(102%) contrast(105%);
}