/*==================================================
RESPONSIVE.CSS
==================================================*/

/*=====================================
Large Devices
======================================*/

@media (max-width:1400px){

.hero-content h1{
    font-size:60px;
}

.navbar-brand img{
    height:72px;
}

}

/*=====================================
Laptop
======================================*/

@media (max-width:1200px){

.navbar-nav .nav-link{
    padding:10px 10px;
    font-size:15px;
}

.btn-donate{
    padding:12px 22px;
}

.hero-content h1{
    font-size:54px;
}

.hero-content p{
    font-size:17px;
}

.hero-image img{
    max-width:520px;
}

}

/*=====================================
Tablet
======================================*/

@media (max-width:991px){

.top-bar{
    display:none;
}

.navbar{
    padding:14px 0;
}

.navbar-brand img{
    height:65px;
}

.navbar-collapse{
    display:none!important;
}

.navbar-toggler{

    border:none;
    box-shadow:none;
    font-size:34px;
    color:var(--primary);

}

.hero-section{

    padding:70px 0;

}

.hero-content{

    text-align:center;
    margin:auto;

}

.hero-content h5{

    font-size:24px;

}

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:16px;
    margin:25px 0;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;

}

.btn-outline-custom{

    margin-left:0;

}

.hero-image{

    margin-top:60px;
    text-align:center;

}

.hero-image img{

    max-width:500px;
    margin:auto;

}

.hero-shape{

    width:450px;
    height:450px;
    right:-220px;
    top:-220px;

}

}

/*=====================================
Mobile
======================================*/

@media (max-width:767px){

.navbar-brand img{

    height:55px;

}

.hero-section{

    padding:55px 0;

}

.hero-content h5{

    font-size:22px;

}

.hero-content h1{

    font-size:38px;
    line-height:1.15;

}

.hero-content p{

    font-size:15px;

}

.btn-primary-custom,
.btn-outline-custom{

    width:100%;
    text-align:center;

}

.hero-buttons{

    flex-direction:column;
    align-items:stretch;

}

.hero-image{

    margin-top:40px;

}

.hero-image img{

    max-width:100%;

}

.hero-shape{

    display:none;

}

.offcanvas{

    width:280px;

}

.mobile-nav li a{

    font-size:16px;

}

}

/*=====================================
Small Mobile
======================================*/

@media (max-width:576px){

.container{

    padding-left:18px;
    padding-right:18px;

}

.navbar{

    padding:12px 0;

}

.navbar-brand img{

    height:48px;

}

.hero-content h5{

    font-size:20px;

}

.hero-content h1{

    font-size:32px;

}

.hero-content p{

    font-size:14px;

}

.btn-primary-custom,
.btn-outline-custom{

    padding:14px 20px;
    font-size:15px;

}

}

/*=====================================
Extra Small
======================================*/

@media (max-width:420px){

.hero-content h1{

    font-size:28px;

}

.hero-content h5{

    font-size:18px;

}

.hero-content p{

    font-size:13px;

}

.navbar-toggler{

    font-size:30px;

}

}

/*=====================================
Landscape Phones
======================================*/

@media (max-height:500px){

.hero-section{

    padding:40px 0;

}

.hero-content h1{

    font-size:42px;

}

.hero-image{

    margin-top:25px;

}

}

@media(max-width:991px){

.about-content{

    padding-left:0;
    margin-top:30px;

}

.about-images{

    padding-right:0;

}

.about-small-image{

    width:180px;

}

.experience-box{

    left:15px;

    bottom:15px;

}

}

@media(max-width:576px){

.about-small-image{

    position:relative;

    width:100%;

    right:auto;

    bottom:auto;

    margin-top:20px;

    border:0;

}

.experience-box{

    position:relative;

    left:auto;

    bottom:auto;

    margin-top:20px;

    display:inline-block;

}

}