main {
    padding-bottom: 0rem !important;
}

.pb-3 {
    padding-bottom: 0rem !important;
}

.container {
    max-width: 100% !important;
    width: 100% !important;
    /*padding: 0 !important;*/
    /*margin: 0 !important;*/
}



.orange-text{
    color:#f17e3b
}



@media all and (min-width: 1024px) {

    .hero-banner {
        width: 1000px;
    }

        .hero-banner img {
            width: 1000px;
        }
   
}

@media all and (max-width:1024px) {

  
    .header-container {
        flex-wrap: wrap;
    }

    .hero-banner {
        width: 95% !important;
    }

        .hero-banner img {
            width: 100%;
        }

    .brand-banner {
        margin: 10px 0px;
        width: 100% !important;
        background: white;
    }
    .bottom-card{
        height:350px !important;
    }
    .motd p {
        max-width: 90% !important;
    }
}



    .motd {
        display: flex;
        width: 100%;
        margin-bottom: 50px;
        justify-content: center;
    }

        .motd p {
            margin-bottom: 0rem;
            background: #ffffff;
            border-radius: 10px;
            max-width: 1000px;
            padding: 10px 25px;
            text-align: center;
        }

    .hp-header {
        display: flex;
        /*background-image: url(/files/imgs/tiled-bg.jpg);*/
       /* background-size: 1350px;
        background-repeat: repeat;*/
        flex-direction: column;
    }

        .hp-header img {
        }

.header-container {
    display: flex;
    flex-wrap:wrap;
    margin: 10px;
    gap: 30px;
    /*height: 550px;*/
    justify-content: space-around;
    align-items: center;
}

    h2, h3, h4 {
        font-family: 'Monseratt' !important;
    }

.header-content {
    max-width: 400px;
    background: #376778;
    color: white;
    padding: 25px;
    border-radius: 5px;
}



.header-register {
    /*background: #fadb8b;*/
    background: #303d43;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.15s;
}

    .header-register:hover {
        /*color: #fadb8b;*/
        color: #fff;
        /*background: #343a40;*/
        background: #f17e3b;
    }


    .hp-container {
        text-align: -webkit-center;
        border-radius: 10px;
        margin: 25px 0;
        margin-bottom: 0px;
    }


    .hero-banner {
        box-shadow: rgb(0 0 0 / 40%) 6px 6px 10px 5px;
        border-radius: 15px;
    }

        .hero-banner img {
            border-radius: 15px;
        }

    .slick-active img {
        border-radius: 15px;
    }

    .brand-banner {
        margin: 10px 0px;
        width: 100%;
        background: white;
        border-top: solid black 1px;
        border-bottom: solid black 1px;
    }

        .brand-banner img {
            width: 250px;
            height: 100px;
            padding: 10px 25px;
        }

.card-container {
    display: flex;
    overflow-x: auto;
    gap: 25px;
    height: 250px;
    background: #f7f7fa
}

    .hp-card:first-child {
        margin-left: 50px;
    }

    .hp-card:last-child {
        margin-right: 50px;
    }

    .hp-card {
        margin: auto;
        height: 15rem;
        min-width: 300px;
        width: 300px;
        background: white;
        padding: 25px;
        border-radius: 15px;
        justify-content: space-between;
        box-shadow: rgb(0 0 0 / 40%) 4px 4px 8px 0px;
    }

        .hp-card i {
            font-size: 30px;
            /*background: #fadb8b;*/
            background: #f17e3b;
            padding: 10px;
            border-radius: 50%;
            /*color: #343a40;*/
            color: #fff;
        }

    .bottom-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        /*background: #343a40;*/
        gap: 10px;
        /*background-image: url(/files/imgs/tiled-bg.jpg);*/
        background-size: 1350px;
        padding: 25px;
    }

.bottom-card {
    display: flex;
    margin: auto;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
    width: 750px;
    /*min-width: 350px;*/
    height: 300px;
    padding: 25px;
    font-size: 1.4rem;
    /*border-top: 25px solid #fadb8b;*/
    border-top: 25px solid #f17e3b;
    box-shadow: rgb(0,0,0,0.8) 0 0 10px 0;
}

        .bottom-card h3 {
            font-size: 2rem;
        }

    .slick-prev:before,
    .slick-next:before {
        color: black;
        font-size: 40px;
    }

    .slick-next {
        right: 20px;
    }

    .slick-prev {
        left: 0px;
        z-index: 1;
    }

    .slick-dots li button:before {
        font-size: 14px;
        color: white !important;
    }

    .slick-active button:before {
        font-size: 14px;
        color: white !important;
        opacity: 1 !important;
    }