/* ============ MAIN CATEGORY SWIPER SECTION ================= */

.MainCategorySwiper .swiper {
    width: 100%;
    height: 170px;
}

.MainCategorySwiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.MainCategorySwiper .swiper-button-next {
    top: 44%;
    right: 0px;
    color: #017cba;
}

    .MainCategorySwiper .swiper-button-next::after {
        font-size: 2em !important;
    }

.MainCategorySwiper .swiper-button-prev {
    top: 44%;
    left: 0px;
    color: #017cba;
}

    .MainCategorySwiper .swiper-button-prev::after {
        font-size: 2em !important;
    }


@media only screen and (max-width: 995px) {

    .MainCategorySwiper .swiper-button-next {
        display: none;
    }

    .MainCategorySwiper .swiper-button-prev {
        display: none;
    }
}


/* ----- Style ---------- */

/* =============== MAIN USEFUL MODELS  ====================== */

#MainCategory {
    padding-top: 3%;
    padding-bottom: 1%;
    font-family: 'Montserrat', sans-serif;
    background: #fefefe;
}

    #MainCategory .container-fluid {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }


    #MainCategory .swiper-slide .CardBox .OrangeBox {
        position: absolute;
        top: 0%;
        right: 0%;
        opacity: 0;
        transition: 0.5s ease all;
    }

    #MainCategory .swiper-slide .CardBox:hover .OrangeBox {
        opacity: 1;
        transition: 0.5s ease all;
    }

    #MainCategory .swiper-slide .CardBox .OrangeBox img {
        width:70px;
    }


        #MainCategory .Content .CardBox a {
            text-decoration: none;
        }

    #MainCategory .Content .CardBox {
        padding:20% 15%;
        background: #fff;
        border-radius: 25px;
        transition: 0.5s ease all;
    }

        #MainCategory .Content .CardBox:hover {
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            transition: 0.5s ease all;
        }


        #MainCategory .Content .CardBox .Card .Image {
            width: 100%;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s ease all;
        }

        #MainCategory .Content .CardBox:hover .Card .Image {     
            transition: 0.5s ease all;
        }

        #MainCategory .Content .CardBox .Card .Image img {
            width: 50%;
            height: auto;
            object-fit: cover;
        }

        #MainCategory .Content .CardBox .Card h4 {
            font-size: 1.3em;
            font-weight: 600;
            color: #414042;
            font-family: 'Montserrat', sans-serif;
            padding-top: 20px;
            text-align: center;
        }

        #MainCategory .Content .CardBox .Card .Text p {
            font-size: 0.9em;
            font-weight: 400;
            color: #414042;
            font-family: 'Montserrat', sans-serif;
            padding-top: 10px;
            text-align: center;
        }



@media only screen and (max-width: 1470px) {
    #MainCategory .container-fluid {
        width: 98% !important;
    }
}


@media only screen and (max-width: 1300px) {

    #MainCategory .swiper-slide .CardBox .OrangeBox img {
        width: 50px;
    }
}



@media only screen and (max-width: 680px) {


}



/* ============ MAIN REFERENCE SWIPER SECTION ================= */

.MainReferenceSwiper .swiper {
    width: 100%;
    height: 170px;
}

.MainReferenceSwiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.MainReferenceSwiper .swiper-button-next {
    top: 44%;
    right: 0px;
    color: #414042;
}

    .MainReferenceSwiper .swiper-button-next::after {
        font-size: 2em !important;
    }

.MainReferenceSwiper .swiper-button-prev {
    top: 44%;
    left: 0px;
    color: #414042;
}

    .MainReferenceSwiper .swiper-button-prev::after {
        font-size: 2em !important;
    }


@media only screen and (max-width: 995px) {

    .MainReferenceSwiper .swiper-button-next {
        display: none;
    }

    .MainReferenceSwiper .swiper-button-prev {
        display: none;
    }
}


/* ----- Style ---------- */


#MainReference {
    padding-top: 1%;
    padding-bottom: 1%;
    font-family: 'Montserrat', sans-serif;
}

#MainReference .container-fluid {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

    #MainReference .Top {
        text-align: center;
    }

    #MainReference .Title {
        font-size: 2.5em;
        font-weight: 600;
        color: #414042;
        font-family: 'Montserrat', sans-serif;
    }

    #MainReference .Slogan {
        font-size: 2.7em;
        font-weight: 600;
        color: #414042;
        font-family: 'Montserrat', sans-serif;
    }



    #MainReference .Content  {
        padding-top:60px;
    }

        #MainReference a {
            text-decoration: none;
        }

    #MainReference .Content .swiper-slide {
        height: auto !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }


        #MainReference .Content .swiper-slide .Image {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #MainReference .Content .swiper-slide .Image img {
                width: 65%;
                height: auto;
                object-fit:cover;
            }

                #MainReference .Content .swiper-slide .Image .Color {
                   /* display: none;*/
                    transition: 5ms ease all;
                }
/*
            #MainReference .Content .swiper-slide:hover .Image .Color {
                display:block;
                transition: 5ms ease all;
            }*/


         /*   #MainReference .Content .swiper-slide:hover .Image .Grey {
                display: none;
                transition:5ms ease all;
            }*/




@media only screen and (max-width: 1470px) {

    #MainReference .container-fluid {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
    }

    #MainReference .Title {
        font-size: 1.8em;
    }

    #MainReference .Slogan {
        font-size: 2.7em;
    }

    #MainReference .Content .swiper-slide .Image img {
        width: 48%;
    }
}


@media only screen and (max-width: 1300px) {
}



@media only screen and (max-width: 780px) {

    #MainReference .Title {
        font-size: 1.8em;
        font-weight:600;
    }

    #MainReference .Slogan {
        font-size: 2.1em;
    }

    #MainReference .Content .swiper-slide .Image img {
        width: 85%;
        height: auto;
        object-fit: cover;
    }
}



/* ============ MAIN FEATURE PRODUCT SECTION ================= */

.MainUsefulModelsSwiper .swiper {
    width: 100%;
    height: 170px;
}

.MainUsefulModelsSwiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.MainUsefulModelsSwiper .swiper-button-next {
    top: 44%;
    right: 0px;
    color: #017cba;
    display: none;
}

    .MainUsefulModelsSwiper .swiper-button-next::after {
        font-size: 3em !important;
    }

.MainUsefulModelsSwiper .swiper-button-prev {
    top: 44%;
    left: 0px;
    color: #017cba;
}

    .MainUsefulModelsSwiper .swiper-button-prev::after {
        font-size: 3em !important;
    }


@media only screen and (max-width: 995px) {

    .MainUsefulModelsSwiper .swiper-button-next {
        display: none;
    }

    .MainUsefulModelsSwiper .swiper-button-prev {
        display: none;
    }
}


/* ----- Style ---------- */

/* =============== MAIN USEFUL MODELS  ====================== */

#MainUsefulModels {
    padding-top: 4%;
    padding-bottom: 1%;
    font-family: 'Montserrat', sans-serif;
    background: #fefefe;
}

    /* #MainUsefulModels .container-fluid {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }*/
    #MainUsefulModels .Title {
        display: flex;
        justify-content: end;
        align-items: center;
        padding-right: 0 !important;
    }


    #MainUsefulModels .Title .Line {
        width: 70%;
        height: 2.3px;
        background-color: black;
        opacity: 0.7;
        padding-right: 0 !important;
    }


    #MainUsefulModels .Title h2 {
        color: black;
        font-size: 1.7em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        margin-right: 1%;
    }



    #MainUsefulModels .ContextBox .Content h1 {
        font-size: 2.1em;
        font-weight: 600;
        color: #00567d;
        font-family: 'Montserrat', sans-serif;
    }


    #MainUsefulModels .ContextBox .Content .RedLine {
        height: 2px;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        background: #cc3333;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #MainUsefulModels .ContextBox .Content .CardBox {
        padding: 0px;
        width: 100%;
        padding:30px;
    }

        #MainUsefulModels .ContextBox .Content .CardBox a {
            text-decoration: none;
            width:100%;
            height:100%;
        }


            #MainUsefulModels .ContextBox .Content .CardBox .Card .Image {
                width: 100%;
                height: 300px;
                background: #fff;
                border-radius: 8px;
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                /*            padding: 15px;*/
                transition: 0.5s ease all;
            }
            /*
        #MainUsefulModels .ContextBox .Content .CardBox:hover .Card .Image {
            padding: 5px;
            transition: 0.5s ease all;
        }*/

                #MainUsefulModels .ContextBox .Content .CardBox .Card .Image img {
                    border-radius: 25px;
                    width: auto;
                    height: 50%;
                    max-width:100%;
                    object-fit: cover;
                    transition: 0.4s ease all;
                }

        #MainUsefulModels .ContextBox .Content .CardBox .Card:hover .Image img {
            opacity: 0.5;
            transition: 0.4s ease all;
        }

        #MainUsefulModels .ContextBox .Content .CardBox .Card h2 {
            font-size: 1.1em;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            color: #131414;
            padding-top:8%;
        }

        #MainUsefulModels .ContextBox .Content .CardBox .Card h1 {
            font-size: 1.03em;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            color: #5a5756;
            letter-spacing: 0.5px;
        }

        #MainUsefulModels .ContextBox .Content .CardBox .Card .Image {
            position: relative;
        }

            #MainUsefulModels .ContextBox .Content .CardBox .Card .Image .DetailButton {
                position: absolute;
                top: 10%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 100%;
                text-align: center;
                opacity: 0;
                transition: 0.4s ease all;
            }

                #MainUsefulModels .ContextBox .Content .CardBox .Card .Image .DetailButton span {
                    font-size: 1.1em;
                    font-weight: 800;
                    color: #fff;
                    font-family: 'Montserrat', sans-serif;
                    padding: 8px 14px;
                    text-align: center;
                    border: 1px solid #fff;
                    background: #017cba;
                }

        #MainUsefulModels .ContextBox .Content .CardBox .Card:hover .Image .DetailButton {
            top: 50%;
            opacity: 1;
            transition: 0.4s ease all;
        }


        #MainUsefulModels .ContextBox .Content .CardBox .Card .Image .NewButton {
            position: absolute;
            top: 3%;
            right: 2%;
            text-align: center;
            opacity: 0.7;
        }

            #MainUsefulModels .ContextBox .Content .CardBox .Card .Image .NewButton span {
                font-size: 0.9em;
                font-weight: 600;
                color: #fff;
                font-family: 'Montserrat', sans-serif;
                padding: 5px 8px;
                text-align: center;
                border: 1px solid #fff;
                background: #f5a706;
            }




@media only screen and (max-width: 1470px) {
    .MainUsefulModelsSwiper .swiper-button-prev::after {
        font-size: 2em !important;
    }

    .MainUsefulModelsSwiper .swiper-button-next::after {
        font-size: 2em !important;
    }

    #MainUsefulModels .ContextBox .Content h1 {
        font-size: 2.4em;
    }


    #MainUsefulModels .ContextBox .Content .CardBox {
        padding: 20px;
    }



        #MainUsefulModels .ContextBox .Content .CardBox .Card .Image {
            height: 230px;
        }


        #MainUsefulModels .ContextBox .Content .CardBox .Card h4 {
            font-size: 1.1em;
            padding-top: 15px;
        }
}


@media only screen and (max-width: 1300px) {


    #MainUsefulModels .ContextBox .Content h1 {
        font-size: 2.3em;
    }


    #MainUsefulModels .ContextBox .Content .CardBox {
        padding: 20px;
    }



        #MainUsefulModels .ContextBox .Content .CardBox .Card .Image {
            height: 200px;
        }


        #MainUsefulModels .ContextBox .Content .CardBox .Card h4 {
            font-size: 1.1em;
            padding-top: 15px;
        }
}



@media only screen and (max-width: 680px) {


        #MainUsefulModels .Title .Line {
            width: 50%;
        }


        #MainUsefulModels .Title h2 {
            font-size: 1.5em;
            margin-right: 1%;
        }

    #MainUsefulModels .ContextBox .Content h1 {
        font-size: 2.3em;
    }


    #MainUsefulModels .ContextBox .Content .CardBox {
        padding: 20px;
    }



        #MainUsefulModels .ContextBox .Content .CardBox .Card .Image {
            height: 260px;
        }



        #MainUsefulModels .ContextBox .Content .CardBox .Card h4 {
            font-size: 1.1em;
            padding-top: 15px;
        }
}