/* Start Banner 01 */
.main-banner-1 {
    position: relative;
    background-color: #0171bc;
    color: #fff;
border-top:1px solid #ccc;
    /* Style to margin bottom section >> Remove When Take This section in Website */
    border-top: 1px solid #ccc;
    /* margin-bottom: 30px; */
    margin-top: 15px;
}
.main-banner-1 .inner-details h1 { font-size: 30px; margin-bottom: 15px; }
.main-banner-1 .inner-details h2 { font-size: 25px;}
.main-banner-1 .inner-details h3 { font-size: 23px; margin-bottom: 15px;    padding-bottom: 0px;
    color: #FFF; }
.main-banner-1 .inner-details p { font-size: 15px; line-height: 1.6; }
.main-banner-1 .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    color: #fff;
    font-size: 14px;
    padding: 10px 35px;
    box-shadow: 0 2px 2px #000000a8;
    width: 200px;
    white-space: normal;
    transition: background-color 0.3s ease-in-out;
}
.main-banner-1 .inner-details .btn:hover {
    background-color: #ff1a2b;
}
.main-banner-1 .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.main-banner-1 .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}
/* End Banner 01 */

/* Start Banner 02 */
.main-banner-2 {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    padding: 50px 0;
    background-color: #0171bc;
    color: #fff;

    /* Style to margin bottom section >> Remove When Take This section in Website */
    margin-bottom: 30px;
}
.main-banner-2 .inner-details {
    width: 50%;
    margin: auto;
    text-align: center;
    
}
.main-banner-2 .inner-details h1 { font-size: 30px; margin-bottom: 15px; }
.main-banner-2 .inner-details h2 { font-size: 25px;}
.main-banner-2 .inner-details h3 { font-size: 23px; margin-bottom: 15px;     padding-bottom: 0px;  color:#FFF; }
.main-banner-2 .inner-details p { font-size: 15px; line-height: 1.6; }
.main-banner-2 .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    box-shadow: 0 2px 2px #000000a8;
    color: #fff;
    font-size: 14px;
    padding: 10px 35px;
    width: 200px;
    white-space: normal;
    transition: background-color 0.3s ease-in-out;
}
.main-banner-2 .inner-details .btn:hover {
    background-color: #ff1a2b;
}

.main-banner-2 .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.main-banner-2 .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}
/* End Banner 02 */

/* Start Banner 03 */
.main-banner-3 {
    position: relative;
    background-image: url('../img/banner-1.jpg');
    background-color: #0171bc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #fff;

    /* Style to margin bottom section >> Remove When Take This section in Website */
    margin-bottom: 30px;
    margin-top:15px;
}
.main-banner-3 .inner-details {
    width: 40%;
    margin-right: auto;
    text-align: left;
    background-color: #ffffffc4;
    color: #222;
    padding: 20px;
}
.main-banner-3 .inner-details h1 { font-size: 30px; margin-bottom: 15px; }
.main-banner-3 .inner-details h2 { font-size: 25px;}
.main-banner-3 .inner-details h3 { 
    font-size: 25px;
    margin-bottom: 15px;
    color:#222;
}
.main-banner-3 .inner-details p { font-size: 15px; line-height: 1.6; }
.main-banner-3 .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    box-shadow: 0 2px 2px #000000a8;
    color: #fff;
    font-size: 14px;
    /*padding: 10px 0;*/
    width: 40%;
    white-space: normal;
    transition: background-color 0.3s ease-in-out;
    text-align: center;
}
.main-banner-3 .inner-details .btn:hover {
    background-color: #ff1a2b;
}
.main-banner-3 .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.main-banner-3 .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}
/* End Banner 03 */

/* Start Banner 04 */
.main-banner-4 {
    position: relative;
    background-image: url('../img/banner-01.jpg');
    background-color: #0171bc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;

    /* background-color: rgba(0, 0, 0, 0.692); */
    color: #fff;

    /* Style to margin bottom section >> Remove When Take This section in Website */
    margin-bottom: 30px;
}
.main-banner-4 .inner-details {
    width: 50%;
    margin-right: auto;
    background-color: #ffffffc4;
    color: #222;
    padding: 20px;
}
.main-banner-4 .inner-details h1 { font-size: 30px; margin-bottom: 15px; }
.main-banner-4 .inner-details h2 { font-size: 25px;}
.main-banner-4 .inner-details h3 { font-size: 25px; margin-bottom: 15px; color: #222;}
.main-banner-4 .inner-details p { font-size: 15px; line-height: 1.6; }
.main-banner-4 .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    color: #fff;
    font-size: 14px;
    padding: 10px 35px;
    box-shadow: 0 2px 2px #000000a8;
    width: 200px;
white-space: normal;
    transition: background-color 0.3s ease-in-out;
}
.main-banner-4 .inner-details .btn:hover {
    background-color: #ff1a2b;
}
.main-banner-4 .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.main-banner-4 .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}

/* End Banner 04 */

/* Start Banner 02 */
.main-banner-5 {
    position: relative;
    background-image: url('../img/banner-01.jpg');
    background-color: #0171bc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 50px 0;

    background-color: rgba(0, 0, 0, 0.692);
    background-blend-mode: overlay;
    color: #fff;

    /* Style to margin bottom section >> Remove When Take This section in Website */
    margin-bottom: 30px;
}
.main-banner-5 .inner-details {
    width: 50%;
    margin: auto;
    text-align: center;
}
.main-banner-5 .inner-details h1 { font-size: 30px; margin-bottom: 15px; }
.main-banner-5 .inner-details h2 { font-size: 25px;}
.main-banner-5 .inner-details h3 { font-size: 23px; margin-bottom: 15px; padding-bottom:0px; color:#FFF;}
.main-banner-5 .inner-details p { font-size: 15px; line-height: 1.6; }
.main-banner-5 .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    color: #fff;
    font-size: 14px;
    padding: 10px 35px;
    box-shadow: 0 2px 2px #000000a8;
    width: 200px;
white-space: normal;
    transition: background-color 0.3s ease-in-out;
}
.main-banner-5 .inner-details .btn:hover {
    background-color: #ff1a2b;
}

.main-banner-5 .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.main-banner-5 .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}

/* End Banner 05 */

/* Banner Linear Gradient */
.banner-linear {
    background-image: linear-gradient(to bottom, #0171bcdc, #016cb4d0, #0168ac9f, #0163a58a, #025f9d6b) , url('../img/banner-01.jpg');
    background-size: 100% 100%;
    padding: 50px;
    color: #fff;
    text-align: center;
}
.banner-linear .inner-details .btn {
    font-family: 'Lato', sans-serif;
    background-color: #C7202D;
    color: #fff;
    font-size: 14px;
    padding: 10px 35px;
    box-shadow: 0 2px 2px #000000a8;
    width: 200px;
white-space: normal;
    transition: background-color 0.3s ease-in-out;
}
.banner-linear .inner-details .btn:hover {
    background-color: #ff1a2b;
}

.banner-linear .inner-details .btn-yellow {
    background-color: #FFCB08;
    color: #000;
    box-shadow: 0 2px 2px #000000a8;

    transition: background-color 0.3s ease-in-out;
}
.banner-linear .inner-details .btn-yellow:hover {
    background-color: rgb(255, 226, 119)
}


@media only screen and (min-width:300px) and (max-width:992px) {
    .main-banner-1 { padding: 20px 0; }
    .main-banner-1 img {display: none}
    .main-banner-1 .inner-details { width: 100%; margin: 0; }
    .main-banner-1 .inner-details .btn { margin-bottom: 15px; }

    /* banner-2 */
    .main-banner-2 .inner-details {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    .main-banner-2 .inner-details .btn { margin-bottom: 15px; }
    .main-banner-2 .inner-details .btn {
        margin-bottom: 15px;
    }

    /* banner-3 */
    .main-banner-3 .inner-details {
        width: 100%;
        background-color: #0171bc;
        color: #fff;
    }
    .main-banner-3 .inner-details .btn { padding: 10px 25px; width: 57%; }
    .main-banner-3 .inner-details .btn { margin-bottom: 15px; }
    .main-banner-4 .inner-details {
        width: 100%;
        background-color: #0171bc;
        color: #fff;
    }

    /* banner-4 */
    .main-banner-4 .inner-details .btn { margin-bottom: 15px; }
    .main-banner-5 { background-color: #0171bc; }
    .main-banner-5 .inner-details { width: 100%; }
    .main-banner-5 .inner-details .btn { margin-bottom: 15px; }

    .bgi-none { background-image: none !important; }

    /* banner Linear */
    .banner-linear {
        padding: 20px 0;
        background-image: none;
        background-color: #0171bc;
        text-align: left;
    }
    .banner-linear .inner-details .btn { margin-bottom: 15px; }
        .main-banner-1,.main-banner-2,.main-banner-3,.main-banner-4,.main-banner-5{
        margin-top:0px;
    }

}