/* ==============  ABOUT US PAGE ============= */

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

    /* --------- Top Row -------- */

    /* ----- Title ----- */

    #AboutUs .Top .Title {
        display: flex;
        align-items: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


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


        #AboutUs .Top .Title h2 {
            color: black;
            padding-left: 15px;
        }

/* ----- Logo ----- */

    #AboutUs .Top .LogoBox {
        text-align: right;
        padding-top: 3%;
        position:relative;
    }

    #AboutUs .Top .LogoBox .Image {
       position:absolute;
       top:20%;
       right:7%;
       width:60%;
       height:auto;
    }

        #AboutUs .Top .LogoBox .Image img{
            width:100%;
            height:auto;
            object-fit:cover;
        }

/* ----- Text ----- */

    #AboutUs .Top .TextBox {
        padding-top:2%;
    }

    #AboutUs .Top .TextBox .Text{
        float:right;
    }

        #AboutUs .Top .TextBox .Text p{
           font-size:1em;
           text-align:justify;
        }


/* --------- Down Row -------- */

    #AboutUs .Down {
        padding-top:2%;
    }

        /* ----- Title ----- */

        #AboutUs .Down .Title {
            display: flex;
            justify-content:end;
            align-items: center;
            padding-right:0 !important;
        }


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


            #AboutUs .Down .Title h2 {
                color: black;
                margin-right:1%;
            }

/* ----- TextBox ----- */

        #AboutUs .Down .TextBox {
            padding-top:3%;
        }

            #AboutUs .Down .TextBox .Text p {
                font-size: 1em;
                text-align: justify;
            }

/* ----- ImageBox ----- */

        #AboutUs .Down .ImageBox {
            padding-top: 3%;
            position:relative;
        }

        #AboutUs .Down .ImageBox .Image{
            width:100%;
            height:auto;
        }

            #AboutUs .Down .ImageBox .Image img{
                width: 100%;
                height: 100%;
                object-fit:cover;
            }

            #AboutUs .Down .ImageBox .Line {
                position: absolute;
                bottom: 0;
                right: 0;
                height: 14px;
                width: 80%;
                background-color: #f5a706;
                border-radius:10px 0 0 3px;
            }



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

    #AboutUs .Top .Title .Line {
        width: 86.5%;
    }

    #AboutUs .Top .LogoBox .Image {
        top: 30%;
        right: 17%;
        width: 53%;
    }

}

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

    #AboutUs .Top .Title .Line {
        width: 82.5%;
    }
}

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

    #AboutUs .Top .Title .Line {
        width: 80.5%;
    }
}


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

        #AboutUs .Top .Title .Line {
            width: 60.5%;
        }

        #AboutUs .Top .LogoBox {
            padding-top: 2%;
            padding-bottom: 8%;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            #AboutUs .Top .LogoBox .Image {
                position: relative;
                width: 65%;
                height: auto;
            }

        #AboutUs .Down {
            padding-top: 5%;
        }

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

            #AboutUs .Down .Title h2 {
                color: black;
                margin-right: 3%;
            }
    }



    /* ===================== CATALOG SECTION =================== */

    #Catalog {
        padding-top: 4%;
        padding-bottom: 5%;
    }

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

        #Catalog .Title {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 4em;
            font-weight: 300;
            color: #414042;
            letter-spacing: 2px;
        }

        #Catalog .CardBox {
            padding: 12px 6px;
        }

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

            #Catalog .CardBox .Card {
                height: 420px;
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                padding: 4%;
                border: 2px solid #fff;
                transition: 0.5s ease all;
            }

            #Catalog .CardBox:hover .Card {
                border: 2px solid #414042;
                transition: 0.5s ease all;
            }

            #Catalog .CardBox .Card .Image {
                height: 250px;
                width: 100%;
            }

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

            #Catalog .CardBox .Card h1 {
                font-family: 'Montserrat', sans-serif !important;
                padding-top: 15px;
                color: #414042;
                font-size: 1em;
                font-weight: 600;
                height: 70px;
                text-align: center;
            }

            #Catalog .CardBox .Card .DownloadIcon {
                padding-top: 1%;
                text-align: center;
            }

                #Catalog .CardBox .Card .DownloadIcon i {
                    color: #414042;
                    font-weight: 600;
                    font-size: 1.6em;
                }

                #Catalog .CardBox .Card .DownloadIcon h5 {
                    font-family: 'Montserrat', sans-serif !important;
                    color: #414042;
                    font-weight: 700;
                    font-size: 0.9em;
                }



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

        #Catalog .container-fluid {
            width: 98%;
        }
    }


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


        #Catalog {
            padding-top: 7%;
            padding-bottom: 5%;
        }
    }