@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');

html {scroll-behavior: smooth; font-family: 'Manrope', sans-serif;}
*{box-sizing: border-box;outline: none; transition: all .3s;-o-transition: all .3s;-webkit-transition: all .3s;-ms-transition: all .3s; outline:initial}

body{font-size: 16px;}
h1{font-size: 70px;}
h1, h2, h3, h4 , h5, h6, strong{font-weight: 800; font-family: 'Manrope', sans-serif;}
h6{color: #52a5e3;text-transform: uppercase;}
a{color: black;line-height: initial; font-family: 'Manrope', sans-serif;}
a:hover{color:initial; text-decoration:none}
p{color: black; font-family: 'Manrope', sans-serif;}
p:last-child{margin: 0}
label{font-size: 12px;margin-bottom: 5px;text-transform: uppercase; font-family: 'Manrope', sans-serif;}
img, iframe{max-width: 100%; vertical-align: middle;}
ul{padding-left: 16px;margin: 0;}
ul li{color: black;}
input, textarea, select{border-radius: 0;border: 1px solid rgb(199 199 199);font-size: 14px;height: initial;padding: 8px 10px;width: 100%;background: #fff}
input[type=submit], button{width:auto; border:0; cursor:pointer}
textarea{height:100px;}
video{width: 100%; vertical-align: middle;}
hr{float: left; border-bottom: 1px solid #0c8c44;}
.btn{background: #52a5e3;border: 0;border-radius: 5px;padding: 10px 20px 10px 45px;font-weight: 600;position: relative;}
.btn-primary:hover{background:#000}
.border-top { border-top: 1px solid #f2f7f7!important;}

.owl-nav{position: absolute;left: 0;top: 50%;width: 100%;}
.owl-nav button{}
.owl-nav button i{text-align: center;display: block;font-size: 40px;padding: 0px;transition: all .2s;}
.owl-nav button i:hover{color:red}
.owl-nav button.owl-prev{position: absolute;left: -40px;}
.owl-nav button.owl-next{position: absolute;right: -40px;}

.owl-dots{bottom: 10px;width: 100%;text-align: center;}
.owl-dots button{margin: 0 5px;}
.owl-dots button span{width: 15px;height: 10px;display: block;background: whitesmoke;border-radius: 5px;}
.owl-dots button.active{}
.owl-dots button.active span{background: #000000;width: 25px;}
.owl-dots button span:hover{background: #58a9e6;}

.after:after{content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 80%);}
.after .container{position: relative; z-index: 9}
.after .container *{color: #fff}

.container-fluid{padding-left: 6rem;padding-right: 6rem;}

header{position:relative;padding-top: 20px;}
header .row{box-shadow: 12px 13.464px 30px 10px rgba(10, 9, 9, 0.08);padding: 10px 0px;background:#fff;position: relative;z-index: 99;}
header nav ul{padding: 0;}
header nav ul li{display: inline-block;vertical-align: middle;}
header nav ul li a{display:block;padding: 12px 20px;font-weight: 600;}
header nav ul li:last-child a{border-radius: 5px;background: #52a5e3;color: #fff;padding: 12px 25px;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;border: 0;}
header nav ul li:last-child a:hover{background:#58a9e6}
header.sticky{position:sticky;top:0;z-index:99;padding-top: 0;}
header.sticky .row{padding: 5px 0px;}
header.sticky img{width: 125px!important;}

#home{}
#home:after{content:'';display: block;width: 40%;height: 120%;background: rgb(82 165 227 / 20%);right: 0;top: -20%;position: absolute;}
#home .container-fluid{position:relative; z-index:9}
#home p{margin:0}

#brand img{margin-bottom:20px;height: 60px;}
#brand .border:hover img{transform:scale(1.2)}
#brand .owl-dots{display:none}

#gallery{background: #52a5e3;}
#gallery *{color:#fff}
#gallery .owl-carousel img{padding: 10px;background: #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;border-radius: 5px;margin-bottom: 24px;}
#gallery .btn{background:#fff; color:#0c8c44}
#gallery .btn img{width: 25px; position: absolute; left: 10px;}

#donate{background-color: #52a5e3;background-position: center center;background-size: cover;}
#donate *{color:#fff}
#donate p{margin: 0}

#helpling{}
#helpling ul{padding: 0;}
#helpling ul li{float: left;width: 25%;padding-right: 20px;list-style: none;}
#helpling ul li h5{margin: 0;font-weight: 400;}
#helpling ul li img{height: 50px;margin-bottom: 15px;display: block;}
#helpling ul li p{font-weight: 600}

footer{background: #000}
footer *{color: #fff; font-size: 16px}

.modal-dialog{max-width: 700px;}
.modal-content{padding: 50px 40px;}
.modal-content:after{content:'';background:url('images/modal-bg.jpg');display: block;position: absolute;left: 0;top: 0;width: 45%;height: 100%;background-size: cover;background-position: center center;}
.modal-content .close{position:absolute;right: 20px;top: 10px;}
.modal-content h3{margin-bottom:20px; color:#0c8c44}
.modal-content p{font-size:20px;font-weight:600;margin-bottom: 4px;}

.btn.sticky{ position: fixed; bottom: 20px; right: 30px; z-index: 999; border: 1px solid #fff; }
.btn.sticky img{filter: invert(1);width: 25px;position: absolute;left: 10px;}

@media(max-width:767px){
    header .row{padding: 5px 0px;}
    header .fa-bars{font-size: 30px}
    header .fa-bars.toggle:before{content: '\f00d';}
    br{display:none}
    nav{display:none}
    nav.toggle{display: block;position: absolute;right: 0;background: #f0f5f5;width: 200px;padding: 10px;}
    nav.toggle ul{}
    nav.toggle ul li{display:block; text-align:left}
    nav.toggle ul li a{padding: 10px 10px!important;border-bottom: 1px solid #dcdcdc;border-radius: 0!important;font-size: 14px;}
    .container-fluid{padding-left: 1rem; padding-right: 1rem;}
    .h1, h1 {font-size: 2.5rem;}
    #gallery img{padding: 5px}
    #home:after{display:none}
    .modal-content h3{font-size:24px; margin-bottom:10px;}
    .modal-content p{font-size:17px;}
    .modal-content{padding: 160px 20px 0px 20px;}
    .modal-content:after{width: 100%;height: 150px;}
}