@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.body-bg{
    background-color: #FFFFFF;
}

.info-div{
    background: #fe8c00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.nav-bg:hover{
    background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f83600, #fe8c00);
    box-shadow: -3px 2px 7px 0px rgba(197, 196, 196, 0.3);
}

.nav-link:hover{
    color: #FFFFFF;
}

.brand-text{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    color: #8B0000;
}

.brand-bg{
    background-color: #FF0000;
}

.icon-color{
    color: #C0C0C0;
}

.icon-color:hover{
    color: #FF0800;
}
.banner{
    height: 60vh;
    background: #283048;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.banner-profile{
    height: 30vh;
    background: #283048;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.carousel-caption{
    margin-bottom: 10vh;
}
.carousel-caption-2{
    margin-bottom: 6vh;
}
.carousel-caption-profile{
    margin-bottom: 10vh;
}
.carousel-heading{
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 62px;
}
.welcome-text{
    color: #3D0C02;
}

.welcome-bg{
    background-image: url('Image/welcome-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.card {
    height: 340px;
    width: 300px;
    /*background-color: #990000;*/
    background: #fe8c00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f83600, #fe8c00);
    border: 0;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center !important
}

.card::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    top: -50%;
    background-color: #ffffff;
    transform: skewY(345deg);
    transition: 2s ease-in
}

.card:hover::before {
    top: -50%;
    transform: skewY(390deg)
}

.card .image {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.card .image img {
    max-width: 95%;
    transition: 2s ease-in
}

.card:hover .image img {
    width: 80%
}

.about-product {
    position: absolute;
    color: #fff;
    bottom: -30px !important;
    text-align: center;
    left: 20%;
    transition: 2s ease-in
}

.card:hover .about-product {
    bottom: 20px !important
}

.buy-now {
    color: #fff;
    /*background-color: #FF0000 !important;*/
    background: rgb(84,84,81);
    background: radial-gradient(circle, rgba(84,84,81,1) 21%, rgba(0,0,0,1) 85%);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: #FFFFFF !important;
    width: 100px;
    margin-top: 5px
}

.enquiry-now {
    color: #fff;
    /*background-color: #FF0000 !important;*/
    background: rgb(255,53,13);
    background: radial-gradient(circle, rgba(255,53,13,1) 21%, rgba(139,5,5,1) 85%);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: #FFFFFF !important;
    width: 100px;
    margin-top: 5px
}

.buy-now:focus {
    box-shadow: none
}

.buy-now:hover {
    color: #fff;
    background-color: #e84040 !important;
    border-color: #e84040 !important
}

.enquiry-now:focus {
    box-shadow: none
}

.enquiry-now:hover {
    color: #fff;
    background-color: #e84040 !important;
    border-color: #e84040 !important
}

.products-section{
    background-image: linear-gradient(to right bottom, #ffffff, #fafafa, #f6f4f5, #f2eeef, #eee9e9);
}

.product:hover{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.product_view_bg{
    background-color: #F5F5F5;
}
.distributor-title{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
}
.distributor-p{
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        text-align: justify;
        color: #010B13;
}
.why-us-div{
    background-color: #FF0000;
}
.footer-bg{
    background-color: #010B13;
}

/*mobile-layout*/
@media only screen and (max-width: 600px) {
    .brand-text{
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #8B0000;
    }
    .mobile{
        display: none;
    }
    .email{
        display: none;
    }
    .banner{
        height: 20vh;
        background: #283048;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .banner-profile{
        height: 20vh;
        background: #283048;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .carousel-caption{
        margin-bottom: 2vh;
    }
    .carousel-text{
        display: none;
    }
    .carousel-heading{
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 800;
        font-style: normal;
        font-size: 18px;
    }
    .card:hover .image img {
        width: 80%
    }
    .buy-now {
        color: #fff;
        /*background-color: #FF0000 !important;*/
        background: rgb(84,84,81);
        background: radial-gradient(circle, rgba(84,84,81,1) 21%, rgba(0,0,0,1) 85%);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-color: #FFFFFF !important;
        width: 100px;
        margin-top: 5px;
        
    }
    .certificate-image{
        width: 100%;
    }
    .distributor-image{
        width: 100%;
    }
    .distributor-title{
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 26px;
    }
    .client-image{
        width: 150px;
    }
  }