/* ============ MAIN SLIDER SECTION ================= */



#MainSlider {
   width: 80%;
   margin-left:auto;
   margin-right:auto;
}

#MainSlider .Image-Box {
    width: 100%;
    height:70vh;
    background: linear-gradient(rgba(8.6, 25.5, 57.6,.7),rgba(4.3, 50.6, 76.1,.8));
    position: relative;
}

    #MainSlider .Image-Box .SliderLogo {
        position: absolute;
        width: auto;
        height:350px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        display:none;
    }

    #MainSlider .Image-Box .SliderImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.6;
    }


#MainSlider .carousel-item {
    position: relative;
}

#MainSlider .carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}



    #MainSlider .carousel-caption h5 {
        font-family: "Poppins", serif;
        font-size: 1.7em;
        font-weight: 600;
        letter-spacing:1.5px;
        animation: slideInDown;
        animation-duration: 4s; /* don't forget to set a duration! */
    }

    #MainSlider .carousel-caption h2 {
        font-family: "Poppins", serif;
        font-size: 2.7em;
        font-weight: 600;
        letter-spacing:1.5px;
        margin-top: 30px;
        animation: fadeInLeft;
        animation-duration: 3s; /* don't forget to set a duration! */
    }

    #MainSlider .carousel-caption a {
        font-family: "Poppins", serif;
        font-size: 1.1em;
        font-weight: 600;
        padding: 15px 50px;
        background-color: #ed1c24;
        border-color: #fff;
        border-radius: 50px;
        margin-top: 30px;
        animation: slideInUp;
        animation-duration: 3s; /* don't forget to set a duration! */
        letter-spacing: 1.5px;
    }


#MainSlider .carousel-indicators {
    padding-bottom: 20px;
}


    #MainSlider .carousel-indicators li {
        width: 18px;
        height: 18px;
        border-radius: 50%;
    }



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

    #MainSlider {
        width: 90%;
    }

        #MainSlider .Image-Box {
            height:75vh;
        }

        #MainSlider .carousel-caption {
            position: absolute;
            top: 46%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

    #MainSlider .carousel-caption h5 {
        font-size: 1.5em;
        letter-spacing: 1.5px;
    }

    #MainSlider .carousel-caption h2 {
        font-size: 2.3em;
        letter-spacing: 1.5px;
        margin-top: 25px;
    }

            #MainSlider .carousel-caption a {
                font-size: 1.05em;
                padding: 11px 40px;
                border-radius: 50px;
                margin-top: 30px;
                letter-spacing: 1.5px;
            }
}



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

        #MainSlider .Image-Box {
            height: 70vh;
        }

        #MainSlider .carousel-caption h5 {
            font-size: 1.5em;
        }

        #MainSlider .carousel-caption h2 {
            font-size: 2.2em;
            margin-top: 25px;
        }

        #MainSlider .carousel-caption a {
            font-size: 1em;
            letter-spacing: 1.3px;
        }
    }



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

        #MainSlider {
            width: 100%;
        }

        #MainSlider .Image-Box {
            height: 75vh;
        }



        #MainSlider .carousel-caption {
            width: 80%;
        }

            #MainSlider .carousel-caption h5 {
                font-size: 1.2em;
            }

            #MainSlider .carousel-caption h2 {
                font-size: 1.7em;
            }

            #MainSlider .carousel-caption a {
                font-size: 1.1em;
                padding: 10px 30px;
            }
    }

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

        #MainSlider .carousel-caption {
            width: 80%;
        }

            #MainSlider .carousel-caption h5 {
                font-size: 1.1em;
            }

            #MainSlider .carousel-caption h2 {
                font-size: 1.7em;
                margin-top: 15px;
            }

            #MainSlider .carousel-caption a {
                font-size: 1.1em;
                padding: 10px 30px;
                margin-top: 15px;
            }
    }


    /* ============ MAIN SERVICE SECTION ================= */

    #MainServices {
        font-family: 'Roboto', sans-serif;
    }

        #MainServices .MainServices {
            padding-top: 30px;
            padding-bottom: 50px;
        }


        #MainServices h1 {
            font-family: 'Roboto', sans-serif !important;
            font-size: 2.7em;
            font-weight: 400;
            padding-bottom: 30px;
            color: #14387F;
        }


        #MainServices .Card {
            padding: 20px;
            width: 350px;
            height: auto;
            position: relative;
            z-index: 0;
        }

        #MainServices .ImageFilter {
            width: 100%;
            height: 350px;
            background-color: #048FD4;
            border-radius: 10px;
            text-shadow: 0 1px 3px 1px rgba(256, 256, 256, 0.3);
        }

        #MainServices .Card .ImageBox {
            width: 100%;
            height: 100%;
            background-size: cover;
            border-radius: 10px;
            opacity: 0.8;
            transition: 0.4s ease all;
        }


        #MainServices .Card:hover .ImageBox {
            opacity: 1;
            transition: 0.4s ease all;
        }

        #MainServices .Card .Button a {
            padding: 10px 20px;
            background-color: transparent;
            border-radius: 8px;
            border-color: #fff;
            color: #fff;
            font-weight: 600;
        }

        #MainServices .Card .Button {
            position: absolute;
            background-color: #14387F;
            border-radius: 8px;
            bottom: 45%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: none;
            transition: 0.7s ease all;
        }

        #MainServices .Card:hover .Button {
            bottom: 45%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: block;
            transition: 0.7s ease all;
        }


        #MainServices .Card h2 {
            font-size: 1.3em;
            font-weight: 600;
            text-align: center;
            color: #14387F;
        }

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

        #MainServices .MainServices {
            padding-top: 20px;
            padding-bottom: 30px;
        }


        #MainServices h1 {
            font-size: 2.1em;
            font-weight: 600;
            padding-bottom: 20px;
        }


        #MainServices .Card {
            padding: 10px;
            width: 100%;
        }

        #MainServices .ImageFilter {
            width: 100%;
            height: 350px;
        }

        #MainServices .Card h2 {
            font-size: 1.5em;
        }
    }

    /* ============ MAIN ABOUT US SECTION ================= */

    #MainAboutUs {
        width: 100%;
        height: auto;
        padding-top: 2%;
        padding-bottom: 2%;
    }

        #MainAboutUs .Right {
        }

            #MainAboutUs .Right .Content h1 {
                color: #515e66;
                font-size: 1.9em;
                font-weight: 500;
                font-family: 'Roboto', sans-serif !important;
                letter-spacing: 1px;
            }

            #MainAboutUs .Right .Content p {
                padding-top: 20px;
                color: #414042;
                font-size: 1em;
                font-family: "Poppins", serif;
                font-weight: 400;
                line-height: 1.6em;
                word-spacing: 2px;
            }

            #MainAboutUs .Right .Content a {
                font-family: "Poppins", serif;
                margin-top: 20px;
                font-size: 1.05em;
                background-color: #e54117;
                color: #fff;
                border-color: #e54117;
                border-radius: 10px;
                padding: 10px 40px;
                font-weight: 500;
                cursor: pointer;
                letter-spacing: 1.5px;
            }

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

        #MainAboutUs {
            padding-top: 0px !important;
        }

            #MainAboutUs .Left {
                margin: 0px !important;
                padding: 0px !important;
            }

                #MainAboutUs .Left .ImageBox {
                    height: 500px;
                    width: 100%;
                }

            #MainAboutUs .Right {
                padding-right: 0%;
                padding: 0 25px;
            }

                #MainAboutUs .Right .Content h1 {
                    padding-top: 20px;
                }


                #MainAboutUs .Right .Content p {
                    text-align: left;
                    word-spacing: 1px;
                }

                #MainAboutUs .Right .Content a {
                    width: 90%;
                }
    }
    /* ------------------- Box Content ------------------- */


    #MainAboutUs .BoxContent {
        padding-top: 2%;
    }



        #MainAboutUs .BoxContent .Box {
            padding: 1.5%;
        }

        /* ---------- PestGuide --------- */

        #MainAboutUs .BoxContent .PestGuide .CardBox {
            background-color: #ed1c24;
            height: 380px;
            padding: 6% 5%;
            border-radius: 8px;
        }

            #MainAboutUs .BoxContent .PestGuide .CardBox .Head {
                padding-top: 1%;
            }

                #MainAboutUs .BoxContent .PestGuide .CardBox .Head h1 {
                    font-family: "Poppins", serif;
                    font-size: 1.7em;
                    font-weight: 600;
                    color: #fff;
                    letter-spacing: 1px;
                    margin-bottom: 5%;
                }

                #MainAboutUs .BoxContent .PestGuide .CardBox .Head p {
                    font-family: "Poppins", serif;
                    font-size: 1em;
                    font-weight: 400;
                    color: #fff;
                }

            #MainAboutUs .BoxContent .PestGuide .CardBox .List {
                padding-top: 2%;
            }

                #MainAboutUs .BoxContent .PestGuide .CardBox .List ul {
                    list-style: none;
                    padding-left: 0;
                }

                    #MainAboutUs .BoxContent .PestGuide .CardBox .List ul li {
                        padding-top: 4%;
                        padding-bottom: 4%;
                        border-bottom: 1px solid rgba(256, 256, 256, 0.5);
                    }

                        #MainAboutUs .BoxContent .PestGuide .CardBox .List ul li a {
                            font-family: "Poppins", serif;
                            font-size: 1em;
                            font-weight: 400;
                            color: #fff;
                            letter-spacing: 1px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }

                            #MainAboutUs .BoxContent .PestGuide .CardBox .List ul li a span {
                                color: #fff;
                            }


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

    #MainAboutUs .BoxContent .PestGuide .CardBox {
        height: 400px;
        padding: 6% 5%;
        border-radius: 8px;
    }
}

    /* ---------- News --------- */


    #MainAboutUs .News .CardBox {
        background-color: red;
        height: 380px;
        padding: 6% 5%;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #MainAboutUs .News .CardBox .Text {
            text-align: center;
        }

            #MainAboutUs .News .CardBox .Text a {
                text-decoration: none;
                font-family: "Poppins", serif;
                font-size: 2.1em;
                font-weight: 500;
                color: #fff;
                letter-spacing: 1px;
            }

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

    #MainAboutUs .News .CardBox {
        height: 400px;
        padding: 6% 5%;
        border-radius: 8px;
    }

        #MainAboutUs .News .CardBox .Text a {
            font-size: 2.1em;
        }
}

    /* ---------- PestGuideLink --------- */


    #MainAboutUs .PestGuideLink .CardBox {
        background-color: black;
        height: 380px;
        border-radius: 8px;
    }


        #MainAboutUs .PestGuideLink .CardBox .Image {
            width: 100%;
            height: 380px;
            border-radius: 8px;
        }

            #MainAboutUs .PestGuideLink .CardBox .Image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
                opacity: 0.3;
            }

        #MainAboutUs .PestGuideLink .CardBox .Card {
            position: relative;
        }

        #MainAboutUs .PestGuideLink .CardBox .Text {
            position: absolute;
            top: 23%;
            left: 0;
            padding: 6% 5%;
        }

            #MainAboutUs .PestGuideLink .CardBox .Text a {
                text-decoration: none;
            }

            #MainAboutUs .PestGuideLink .CardBox .Text h1 {
                text-decoration: none;
                font-family: "Poppins", serif;
                font-size: 2.1em;
                font-weight: 500;
                color: #fff;
                letter-spacing: 1px;
                margin-bottom: 4%;
            }


            #MainAboutUs .PestGuideLink .CardBox .Text p {
                font-family: "Poppins", serif;
                font-size: 1em;
                font-weight: 400;
                color: #fff;
            }

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

    #MainAboutUs .PestGuideLink .CardBox {
        height: 420px;
    }

        #MainAboutUs .PestGuideLink .CardBox .Image {
            height: 420px;
        }
}


    /* ---------- About Us --------- */

    #MainAboutUs .AboutUs .CardBox {
        background-color: black;
        height: 380px;
        border-radius: 8px;
    }

        #MainAboutUs .AboutUs .CardBox .Card {
            position: relative;
        }

        #MainAboutUs .AboutUs .CardBox .Image {
            width: 100%;
            height: 380px;
            opacity: 0.5;
        }


            #MainAboutUs .AboutUs .CardBox .Image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }

        #MainAboutUs .AboutUs .CardBox .Text {
            position: absolute;
            top: 14%;
            left: 0%;
            width: 100%;
            padding: 2% 3%;
        }


            #MainAboutUs .AboutUs .CardBox .Text h1 {
                font-family: "Poppins", serif;
                font-size: 1.7em;
                font-weight: 600;
                color: #fff;
                letter-spacing: 1px;
                margin-bottom: 4%;
            }

            #MainAboutUs .AboutUs .CardBox .Text p {
                font-family: "Poppins", serif;
                font-size: 1em;
                font-weight: 400;
                color: #fff;
            }

            #MainAboutUs .AboutUs .CardBox .Text h6 {
                font-family: "Poppins", serif;
                font-size: 1em;
                font-weight: 400;
                color: #fff;
            }


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

    #MainAboutUs .AboutUs .CardBox {
        height: 500px;
    }

        #MainAboutUs .AboutUs .CardBox .Image {
            width: 100%;
            height: 500px;
            opacity: 0.5;
        }
}


    /* ============ MAIN REFERANCE SECTION ================= */
    #MainReference {
        font-family: 'Roboto', sans-serif;
        padding-top: 4%;
        padding-bottom: 4%;
    }

        #MainReference .MainTitle {
            padding-bottom: 40px;
        }

            #MainReference .MainTitle h1 {
                font-family: 'Roboto', sans-serif !important;
                font-size: 2.7em;
                font-weight: 500;
                color: #515e66;
            }

        #MainReference .Card {
            width: 270px;
            height: 200px;
        }

            #MainReference .Card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        #MainReference .PageButton {
            padding-top: 100px;
        }

            #MainReference .PageButton a {
                font-size: 1.1em;
                background-color: #ed1c24;
                color: #fff;
                border-radius: 10px;
                padding: 15px 40px;
                font-weight: bold;
            }

        #MainReference .swiper-button-prev {
            display: none;
        }

        #MainReference .swiper-button-next {
            display: none;
        }


    @media only screen and (max-width: 680px) {
        #MainReference {
            padding-top: 10%;
            padding-bottom: 15%;
        }

            #MainReference .MainTitle {
                padding-bottom: 30px;
            }

            #MainReference .PageButton {
                padding-top: 70px;
            }
    }


    /* ============ MAIN PARALAX SECTION ================= */

    #MainParalax {
        background: linear-gradient(rgba(8.6, 25.5, 57.6,.3),rgba(4.3, 50.6, 76.1,.6)),url(../images/main/mainparalax.jpg);
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

        #MainParalax .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 550px;
        }

        #MainParalax .Card {
            width: 60%;
            text-align: center;
        }

            #MainParalax .Card h1 {
                font-family: 'Roboto', sans-serif !important;
                font-size: 3.1em;
                font-weight: 600;
                color: #fff;
            }

            #MainParalax .Card p {
                padding-top: 20px;
                color: #fff;
                font-size: 1.3em;
                font-family: 'Open Sans', sans-serif;
                font-weight: 500;
                line-height: 1.6em;
                word-spacing: 2px;
            }

            #MainParalax .Card .OfferButton {
                padding-top: 30px;
            }

                #MainParalax .Card .OfferButton a {
                    font-size: 1.1em;
                    background-color: #20386a;
                    color: #fff;
                    border-radius: 10px;
                    border: 1px solid rgba(256, 256, 256, 0.8);
                    padding: 10px 60px;
                    font-weight: bold;
                }

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

        #MainParalax .Card h1 {
            font-family: 'Roboto', sans-serif !important;
            font-size: 2.5em;
            font-weight: 600;
            color: #fff;
        }
    }



    @media only screen and (max-width: 1050px) {
        #MainParalax .Card {
            width: 80%;
        }
    }

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

        #MainParalax .Card {
            width: 100%;
            text-align: center;
            padding: 0px 10px;
        }

            #MainParalax .Card h1 {
                font-size: 2.7em;
            }

            #MainParalax .Card p {
                padding-top: 20px;
                font-size: 1.2em;
                line-height: 1.4em;
            }

            #MainParalax .Card .OfferButton {
                padding-top: 30px;
            }

                #MainParalax .Card .OfferButton a {
                    font-size: 1.1em;
                    padding: 10px 60px;
                }
    }


    /* ============ MAIN PRESSROOM SECTION ================= */

    #MainPressRoom {
        padding-top: 1%;
        padding-bottom: 2%;
    }

    MainPressRoom .MainTitle {
        padding-bottom: 50px;
    }

    #MainPressRoom .MainTitle h1 {
        font-family: 'Roboto', sans-serif !important;
        font-size: 2.7em;
        font-weight: 400;
        padding-bottom: 30px;
        color: #14387F;
    }


    #MainPressRoom .Card {
        padding: 20px;
    }

    #MainPressRoom .Card-Box {
        border-radius: 8px;
        border: 1px solid #e54117;
    }

    #MainPressRoom .Image {
        width: 100%;
        height: 220px;
        border-radius: 8px 8px 0 0;
    }

        #MainPressRoom .Image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }

    #MainPressRoom .Card-Box .Content {
        padding: 15px;
    }

        #MainPressRoom .Card-Box .Content small {
            color: #515e66;
            font-size: 0.9em;
            font-weight: 500;
            font-family: 'Roboto', sans-serif !important;
        }


        #MainPressRoom .Card-Box .Content h3 {
            color: #515e66;
            font-size: 1.05em;
            font-weight: bold;
            font-family: 'Roboto', sans-serif !important;
            padding-top: 10px;
            line-height: 1.5em;
            min-height: 90px;
        }

        #MainPressRoom .Card-Box .Content .DetailButton {
            padding-top: 5px;
            text-align: right;
        }

            #MainPressRoom .Card-Box .Content .DetailButton a {
                color: #e54117;
                font-size: 1.1em;
                font-weight: 500;
            }



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

        #MainPressRoom .Card {
            padding: 20px 15px;
        }

        #MainPressRoom .PageButton {
            padding-top: 50px;
        }
    }


/* ============ MAIN SERVICE ICON LIST ================= */

#MainServiceIconList {
    padding-top: 5%;
    padding-bottom: 5%;
}

    #MainServiceIconList .container-fluid {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    #MainServiceIconList .Title {
        text-align: center;
        padding-bottom: 2.5%;
    }

        #MainServiceIconList .Title h1 {
            font-family: 'Roboto', sans-serif !important;
            font-size: 2.3em;
            font-weight: 500;
            margin-bottom: 0px;
            color: #14387F;
            letter-spacing: 1px;
        }

    #MainServiceIconList .Line {
        background-color: #14387F;
        width: 80px;
        height: 4px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
    }




    #MainServiceIconList .Card {
        padding: 8px 6px;
    }

        #MainServiceIconList .Card a {
            text-decoration: none;
        }

        #MainServiceIconList .Card .CardBox {
            box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 4px;
            padding: 5px;
            text-align: center;
            border-radius: 6px;
        }

            #MainServiceIconList .Card .CardBox h1 {
                font-family: 'Roboto', sans-serif !important;
                font-size: 1.1em;
                font-weight: 500;
                margin-bottom: 0px;
                color: black;
                padding: 5px 0;
            }

        #MainServiceIconList .Card:hover .CardBox {
            background-color: #14387F;
        }

            #MainServiceIconList .Card:hover .CardBox h1 {
                color: #fff;
            }