/* general CSS */

body {
    color: #72869b;
    font-size: 15px;
    background-color: white;
    font-family: 'Rokkitt', 'serif';
    overflow-x: hidden;
}

/* Login css */

.bg {
    background: url("../images/loginbanner.jpg") no-repeat center;
    background-size: cover;
    height: 100vh;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
}

.login {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 360px;
    margin-top: -180px;
    margin-left: -175px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 7px;
    border: 3px solid #fff;
}

.login .in {
    border: none;
    border-bottom: 1px solid #fff;
    display: block;
    width: 285px;
    margin-left: 10px;
    font-size: 14px;
    color: white;
    padding: 10px;
    background: transparent;
    line-height: normal;
}

.login .form-group {
    position: relative;
    margin-bottom: 35px;
}

.login .in:focus {
    outline: none;
}

.login label {
    color: white;
    font-size: 14px;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    font-weight: 100;
}

.login h3 {
    font-weight: bold;
    color: white;
}

.login .in:focus ~ label,
.login .in:valid ~ label {
    top: -20px;
    color: white;
}

.login .bar {
    position: relative;
}

.login .bar:before,
.login .bar:after {
    content: "";
    height: 2px;
    bottom: 1px;
    position: absolute;
    background: black;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.login .bar:before {
    left: 50%;
}

.login .bar:after {
    right: 50%;
}

.login .in:focus ~ .bar:before,
.login .in:focus ~ .bar:after {
    width: 50%;
}

.login .in:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

.login a {
    color: white;
}

/* end of login css */

/* Menu bar */

.topa {
    display: inline-block;
    background: black;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 999;
}

.navbar {
    padding: 10px 15px;
}

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: #0f4693;
    border-radius: 5px;
}

.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:focus,
.navbar .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #0f4693;
}

.navbar .navbar-nav > li > a.nav-link {
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px 5px 40px;
}

.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > li > a:hover {
    color: #0f4693;
}

.dropdown-menu > a:focus,
.dropdown-menu > a:hover {
    color: white;
    text-decoration: none;
    background-color: #0f4693;
}

.navbar-nav .dropdown-menu {
    left: 15px;
}

/* general css*/

.bg-shade-pink {
    height: 100%;
    background-color: #febfbd;
}
.bg-shade-orange {
    height: 100%;
    background-color: #fdddaa;
}
.bg-shade-green {
    height: 100%;
    background-color: #b1e8ca;
}
.content {
    margin-top: 50px; /* header with the header height */
}
.rounded-social-icons li a i {
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 31px;
    font-size: 12px;
}
.icon-bg-yellow i {
    width: 25px;
    color: #000;
    padding-left: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 10px;
    background-color: yellow;
}
.our-boxes {
    position: relative;
    top: -100px;
    /*    box-shadow: 5px 5px 21px #000;
*/
}
.px10{
    padding-left: 10px;
    padding-right: 10px;
}

.social-icons li a {
    color: #fff;
    font-size: 14px;
}
.my3 {
    margin-top: 3%;
    margin-bottom: 3%;
}
.my5 {
    margin-top: 5%;
    margin-bottom: 5%;
}
.my30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
.my40 {
    margin-top: 40px;
    margin-bottom: 40px;
}
.my20 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.vision-box p {
    word-spacing: -2px;
    text-align: justify;
}
.vision-box {
    padding: 40px;
}
.vision-box h3 {
    font-size: 24px;
    font-weight: 600;
}
.about_p p {
    margin-top: 15px;
    font-size: 16px;
    text-align: justify;
    line-height: 1.6;
}

.logo img {
    width: 240px;
}

.bg-dark-blue {
    background-color: #125d89e8;
}
.banner {
    background: url("../images/home-banner.jpg") no-repeat center;
    background-size: cover;
    height: 80vh;
    position: relative;
}
.home-bg-gradient {
    background-image: -webkit-linear-gradient(0deg, #4db3eecc 0%, hsl(202deg 68% 54% / 73%) 100%);
    height: 80vh;
}

.banner_content h1 {
    font-weight: 600;
    color: #fff;
    margin-top: 10%;
}
.text-dark-blue {
    color: #125d89e8;
}

.sec-title h3 {
    text-transform: uppercase;
    color: #125d89e8;
    display: inline-block;
    line-height: 26px;
    font-weight: 600;
}

.sec-title h3::before {
    margin-right: 10px;
    content: url("../images/line1.png");
}

.sec-title h3::after {
    margin-left: 10px;
    content: url("../images/line1.png");
}

.social-icons li a i {
    padding-right: 10px;
}

.banner2 {
    background: url(../images/productbg.png) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
}
.products h3 {
    font-size: 36px;
    color: #fff;
    margin-top: 0;
    font-weight: 800;
    padding-bottom: 19px;
    text-align: center;
    text-transform: uppercase;
}
.products .btn {
    background-color: #337ab7;
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 2%;
}

.footer {
    background-color: #242424;
    color: #fff;
}

/*Divisions*/
.products h3 {
    padding-bottom: 0px;
}

.border-radius-5 {
    border-radius: 5px !important;
}
.gallery_product {
    margin-bottom: 20px;
}

.filter-button {
    font-size: 18px;
    border: 1px solid #125d89e8;
    border-radius: 5px;
    text-align: center;
    color: #125d89e8;
    margin-bottom: 30px;
}
.filter-button:hover {
    font-size: 18px;
    border: 1px solid #125d89e8;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #125d89e8;
}
.btn-default:active .filter-button:active {
    background-color: #125d89e8;
    color: white;
}

/*careers*/

.form-styles label {
    font-weight: 600;
}
.form-styles input {
    line-height: 1.42857143;
    padding: 6px 12px;
    height: 34px;
}
input[type="file"] {
    display: block;
    padding: 2px 10px;
}

/*contact*/

.address ul li i {
    margin-right: 10px;
    color: #125d89e8;
}
.address ul li {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*banners*/

.banner3 {
    background: url(../images/crumb01.png) no-repeat center;
    min-height: 180px;
    background-size: cover;
    text-align: center;
}

.bg-blue {
    padding: 0px;
    background-color: #6cbae8;
}

/* Buttons */

.btn-white {
    color: black !important;
    background-color: white;
    border-radius: 2px;
    font-weight: bold;
    padding: 5px 10px;
}

.btn-white:hover,
.btn-white:focus {
    box-shadow: 5px 5px 15px 7px black;
    border: none;
}

/* Tables */

/* Data tables */

/* End of  general css */

/* Padding */

.py10{
    padding-top: 10px;
    padding-bottom: 10px;
}

.py20{
    padding-top: 20px;
    padding-bottom: 20px;
}

.p0 {
    padding: 0px;
}

.p5 {
    padding: 5px;
}

.p10 {
    padding: 10px;
}

.p15 {
    padding: 15px;
}

.p20 {
    padding: 20px;
}

.p25 {
    padding: 25px;
}

.p30 {
    padding: 30px;
}

.p35 {
    padding: 35px;
}

.p40 {
    padding: 40px;
}

.p45 {
    padding: 45px;
}

.p50 {
    padding: 50px;
}

.pt0 {
    padding-top: 0px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt25 {
    padding-top: 25px;
}

.pt30 {
    padding-top: 30px;
}

.pt35 {
    padding-top: 35px;
}

.pt40 {
    padding-top: 40px;
}

.pt45 {
    padding-top: 45px;
}

.pt50 {
    padding-top: 50px;
}

.pb0 {
    padding-bottom: 0px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb25 {
    padding-bottom: 25px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb35 {
    padding-bottom: 35px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb45 {
    padding-bottom: 45px;
}

.pb50 {
    padding-bottom: 50px;
}

.pr0 {
    padding-right: 0px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.pr25 {
    padding-right: 25px;
}

.pr30 {
    padding-right: 30px;
}

.pr35 {
    padding-right: 35px;
}

.pr40 {
    padding-right: 40px;
}

.pr45 {
    padding-right: 45px;
}

.pr50 {
    padding-right: 50px;
}

.pl0 {
    padding-left: 0px;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl25 {
    padding-left: 25px;
}

.pl30 {
    padding-left: 30px;
}

.pl35 {
    padding-left: 35px;
}

.pl40 {
    padding-left: 40px;
}

.pl45 {
    padding-left: 45px;
}

.pl50 {
    padding-left: 50px;
}

/* Margin */

.m0 {
    margin: 0px;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

.m25 {
    margin: 25px;
}

.m30 {
    margin: 30px;
}

.m35 {
    margin: 35px;
}

.m40 {
    margin: 40px;
}

.m45 {
    margin: 45px;
}

.m50 {
    margin: 50px;
}

.mt0 {
    margin-top: 0px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt40 {
    margin-top: 40px;
}

.mt45 {
    margin-top: 45px;
}

.mt50 {
    margin-top: 50px;
}

.mb0 {
    margin-bottom: 0px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb45 {
    margin-bottom: 45px;
}

.mb50 {
    margin-bottom: 50px;
}

.mr0 {
    margin-right: 0px;
}

.mr5 {
    margin-right: 0px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr25 {
    margin-right: 25px;
}

.mr30 {
    margin-right: 30px;
}

.mr35 {
    margin-right: 35px;
}

.mr40 {
    margin-right: 40px;
}

.mr45 {
    margin-right: 45px;
}

.mr50 {
    margin-right: 50px;
}

.ml0 {
    margin-left: 0px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.ml35 {
    margin-left: 35px;
}

.ml40 {
    margin-left: 40px;
}

.ml45 {
    margin-left: 45px;
}

.ml50 {
    margin-left: 50px;
}

/*media Queries*/

/* for medium screen */

@media (min-width: 992px) and (max-width: 1199px) {
    .bg-blue {
    padding: 0px 8px;
    background-color: #6cbae8;
}
    .social-icons{
        justify-content: center !important;
    }
    .center-r{
        text-align: center !important;
    }
    .icon-r{
        display: none;
    }
    .sec-title h3::before{
        display: none;
    }
    .sec-title h3::after{
        display: none;
    }
}

/* for small screen */

@media (min-width: 768px) and (max-width: 991px) {
    .bg-blue {
    padding: 0px 8px;
    background-color: #6cbae8;
}
    .social-icons{
        justify-content: center !important;
    }
    .center-r{
        text-align: center !important;
    }
    .icon-r{
        display: none;
    }
    .sec-title h3::before{
        display: none;
    }
    .sec-title h3::after{
        display: none;
    }
}

/* for Ipad */

@media (width: 768px) and (height: 1024px) {
    .bg-blue {
    padding: 0px 8px;
    background-color: #6cbae8;
}
    .social-icons{
        justify-content: center !important;
    }
    .center-r{
        text-align: center !important;
    }
    .icon-r{
        display: none;
    }
    .sec-title h3::before{
        display: none;
    }
    .sec-title h3::after{
        display: none;
    }
}

/* for mobile screen landscape */

@media (min-width: 577px) and (max-width: 767px) {
    .bg-blue {
    padding: 0px 8px;
    background-color: #6cbae8;
}
    .social-icons{
        justify-content: center !important;
    }
    .center-r{
        text-align: center !important;
    }
    .icon-r{
        display: none;
    }
    .sec-title h3::before{
        display: none;
    }
    .sec-title h3::after{
        display: none;
    }
}

/* for mobile screen portrait */

@media (min-width: 300px) and (max-width: 576px) {
.bg-blue {
    padding: 0px 8px;
    background-color: #6cbae8;
}
.social-icons{
    justify-content: center !important;
}
.center-r{
    text-align: center !important;
}
    .icon-r{
        display: none;
    }
    .sec-title h3::before{
        display: none;
    }
    .sec-title h3::after{
        display: none;
    }
}