:root{--primary:#0575bb;--secondary:#011a2a;}

* { box-sizing: border-box; margin: 0; padding: 0;}
body { font-family: "Quicksand", sans-serif; font-size: 16px !important; font-weight: 500;}
.P40{padding: 40px 0;}
p{font-size: 16px;}

.heading-section h2{ font-size: 30px; font-weight: 700; position: relative; padding-bottom: 10px;}
.heading-section h2:before{ position: absolute; bottom: 0; content: '';
    left: 45%; width: 95px; height: 3px; background: var(--primary);}

/* header start here */

header{position: fixed; width: 100%; top: 0; z-index: 10; background: #fff; transition: ease all 0.3s;}
header.sticky{top: -45px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
header a{text-decoration: none; color: #000; font-weight: 700;}
._upper-head{border-bottom: 1px solid #f3f1f1; padding: 7px 0; position:relative;}
.top-head{display: flex; justify-content: space-between;}
._socials-contact,._contact{list-style: none; padding: 0; display: flex; gap: 15px; margin: 0; align-items: center;}
._contact i{color: var(--primary);}
._socials-contact i{background: var(--primary); color: #fff; width: 30px; height: 30px; transition: ease all 0.3s;
    display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid var(--primary);}
._socials-contact i:hover{background: #fff; color: var(--primary);}


.main-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    align-items: center;
}
.main-head #cssmenu > ul > li{ padding: 8px 10px;}
.main-head #cssmenu ul li a{font-size: 14px;}
.main-head #cssmenu.small-screen{ position: absolute; top: 0;}
.main-head #cssmenu.small-screen #menu-button{ padding: 50px 0 0 0;}
.main-head #cssmenu > ul > li.has-sub > a:after{background: var(--primary); top:6px;}
.main-head #cssmenu > ul > li.has-sub > a:before{top: 3px;background: var(--primary);}
.main-head #cssmenu ul ul{background: var(--primary); color: #fff; margin-top: 8px; width: 290px;}
.main-head #cssmenu ul ul li a{color: #fff;}
.main-head #cssmenu ul ul li:hover{background: #055b91;}


/* header end here */


/* banner start here */

.ngo-banner{background: url(../images/banner.jpg) no-repeat; background-size: cover; padding: 170px 0 50px 0;}
.request-form input,.request-form select,.request-form textarea{ width: 100%;
    border: none; padding: 6px; background: #f4f4f4; margin: 5px 0;}
.request-form{padding: 21px 20px; background: #fff; border-radius: 10px; width: 75%;
    box-shadow:  #ffffff69 18px 18px;}
    ._common-btn,.call-back{margin-top:25px;}
._common-btn .submit,._common-btn a ,._common-btn button{ width: auto; background: var(--primary); color: #fff; transition: ease all 0.3s;
    padding: 7px 30px; border-radius: 30px; text-transform: uppercase; font-weight: 500; 
    text-decoration: none; border: 1px solid var(--primary);}
._common-btn .submit:hover,._common-btn a:hover,._common-btn botton:hover{background: transparent; color: var(--primary);}
.request-form .form-group{ margin-bottom: 0px; padding: 0 15px;}
.request-form h3{ text-align: center; font-size: 20px; text-transform: uppercase; font-weight: 600;
    margin: 5px 0 15px 0;}
.banner-content {color: #fff;}
.banner-content .banner-title{ background: var(--primary); padding: 5px 15px; border-radius: 5px; text-transform: uppercase;}
.banner-content h1{ font-size: 49px; font-weight: 700; margin: 10px 0; position: relative; color: #fff;}
.banner-content h1:before{ position: absolute; bottom: -15px; left: 0; width: 199px; height: 5px;
    content: ''; background: url(../images/wave-layer.png) no-repeat;background-size: cover;}
.banner-content h1 span{color: #38b2ff;}
.include-service h3{ font-size: 26px; padding-top: 15px; margin-bottom: 15px; color: #fff;}
.include-service ul{ list-style: none; padding: 0; margin: 0; line-height: 30px;}
.include-service ul li{position: relative; padding-left: 30px; font-size: 18px;}
.include-service ul li:before{position: absolute; content: ''; width: 16px; height: 16px; 
background: url(../images/check-icon.png) no-repeat; background-size: cover; bottom: 7px;}

/* banner end here */

/* registration mode start here */

.mode-card{background: url(../images/vector1.png) no-repeat; background-size: cover; text-align: center;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; padding: 35px 15px; margin-top: 30px; border-radius: 10px;}
.mode-card h3{font-size: 19px; font-weight: 700; margin: 15px 0 8px 0;}
.mode-card h3 span{display: block;}
.mode-card p{margin: 0;}

/* registration mode end here */

/* services start here */

.services{background: url(../images/services-bg.jpg) no-repeat; background-size: cover;}
.services-card{ text-align: center; background: #fff; padding: 15px; border-radius: 10px; 
    border: 1px solid #f3eeee; margin-top: 20px; transition: ease all 0.3s;}
    .services-card:hover{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.services-card h3{font-size: 20px; font-weight: 700; margin: 10px 0;}
.services-card h3 span{display: block;}
.services-card p{font-size: 14px;}
.services-card a{color: var(--primary); text-transform: uppercase; font-weight: 700;}
.carts { display: none;}

/* services end here */


/* factors start here */
.NGO-registration{ padding: 40px 0 250px 0;}
.NGO-registration .heading-section h2:before{left: 0;}
.factors ul{ list-style: none; padding: 10px 0 0 0; margin: 0;}
.factors ul li{display: flex; align-items: center; background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin: 12px 0; padding: 10px 15px; border-radius: 12px;}
.factors ul li img{ width: 70px; height: 70px; background: #f7f7f7; padding: 15px; margin-right: 20px;border-radius: 10px;}
.factors ul li h3{ font-size: 20px; font-weight: 600;margin: 0 0 8px 0;}
.factors ul li p{ font-size: 14px; margin: 0;}
.NGO-registration .side-img img{ border-radius: 55px 0px 55px 0px;}
.NGO-registration .side-img{position: relative; z-index: 1;}
.NGO-registration .side-img:before{position: absolute; right: -35px; bottom: -40px; content: ''; width: 204px;
     height: 380px; border: 10px solid var(--primary); z-index: -1;}

/* factors end here */

/* can help start here */

.can-help {background: url(../images/canHelp-Black-bg.jpg) no-repeat; background-size: cover;}
.howCan-card{background: url(../images/canHelp-bg.jpg) no-repeat; background-size: cover; height: 100%;
    padding: 40px 50px; border-radius: 0px 12px 12px 0px;}
.howCan-card .heading-section h2:before{left: 0;}
.can-top img{border-radius: 12px 0px 0px 12px;}
.can-top .col-md-6{padding: 0;}
.can-top{margin-top: -240px;}
.about{color: #fff; text-align: center; background: #00000059; transition: ease all 0.3s;
    padding: 25px 20px; border: 1px solid #dddddd26; border-radius: 15px; margin-top: 60px;}
.about:hover{background: #0575bb6b;}
.about h3{ font-size: 20px; margin: 15px 0; color: #fff;}
.about p{color: #fff;}

/* can help end here */

/* why choose start here */

.why-choose-card{ display: flex;align-items: center; margin-top: 25px; position: relative;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; padding: 20px 10px; border-radius: 0px 12px 12px 0px;}
.why-choose-card h3{font-size: 20px; padding-left: 20px; font-weight: 700;}
.why-choose-card:before{ position: absolute; top: 0; left: 0; content: ''; width: 62px;
    height: 100%; z-index: -1; background: var(--primary);}
.why-choose a{ border: 1px solid #000; padding: 9px 20px 13px 3px; transition: ease all 0.3s;
        border-radius: 30px; text-decoration: none; color: #000; font-weight: 700;}
.why-choose a:hover{background: #000; color: #fff;}

/* why choose end here */

/* news latter start here */

.news-letter{background: #011a2a; color: #fff; padding: 30px 0;}
.news-title{display: flex;align-items: center;}
.news-title h2{ font-size: 40px; font-weight: 700; padding-left: 20px; text-transform: uppercase; margin: 0; color: #fff;}
.news-title h2 span{ font-size: 17px; font-weight: 400; display: block; margin-top: 7px;}
._connect-inpt{display: flex; align-items: center; position: relative;}
._connect-inpt a{position: absolute; right: 5px;text-decoration: none;background: var(--primary);color: #fff;
    padding: 10px 15px;border-radius: 30px;border: 1px solid var(--primary);
    transition: ease all 0.3s;text-transform: uppercase;font-weight: 700;}
._connect-inpt a:hover{background: transparent;}
._connect-inpt input{ width: 100%;padding: 15px 22px;border-radius: 30px;border: 1px solid #484848;
    background: transparent;color: #fff;}

/* news latter end here */

/* footer start here */

footer{background: url(../images/footer-bg.jpg) no-repeat; background-size: cover; padding-top: 40px; color: #fff;}
footer a{text-decoration: none;}
footer ul{list-style: none; padding: 0; margin: 0;}
footer h3{ font-size: 24px; font-weight: 500; position: relative; padding-bottom: 15px;
    margin-bottom: 25px;color: #fff; }
footer h3:before{position: absolute; bottom: 0; left: 0; background: var(--primary); 
    width: 50px; height: 3px; content: '';}
    footer p{color: #fff;}
.ft-about ul{display: flex; align-items: center; gap: 10px;}
.ft-about p{margin: 20px 0; color: #fff;}
.ft-about ul li i{ font-size: 24px;background: var(--primary);color: #fff;width: 40px;height: 40px;
    display: flex;justify-content: center;align-items: center;border-radius: 7px; border: 1px solid var(--primary);
transition: ease all 0.3s;}
.ft-about ul li i:hover{background: transparent;}
.ft-links ul li{padding: 7px 0;}
.ft-links ul li i{color: #ffca08; padding-right: 6px;}
.addrs ul li a,.ft-links ul li a{color: #fff; transition: ease all 0.3s;}
.addrs ul li a:hover,.ft-links ul li a:hover{color: var(--primary); padding-left: 5px;}
.addrs ul li{display: flex; align-items: start; padding: 7px 0;}
.addrs ul li span{display: block; color: #fff;}
.addrs ul li .add-content{padding-left: 15px;}
._copyright p{ margin: 0; font-size: 14px; text-align: center; padding: 15px 0;
    border-top: 1px solid #2c2c2c; margin-top: 30px;}

/* footer end here */


/* adding style start here */

#main{padding-top: 113px;}

._languages{ position: absolute; top: 0px; left: 45%; }
._popup-modal .modal-dialog{ max-width: 430px;}
._popup-modal .modal-header{ padding: 0;    text-align: center;}
._popup-modal .modal-content button.close{background-color: transparent !important; padding: 1px 9px;}
._popup-modal .modal-body{ padding: 15px 35px;}
._popup-modal .modal-footer button{width:100%;}

/* adding style end here */



@media only screen and (max-width: 767px) {
    header.sticky{top: -76px;}
    .main-head #cssmenu ul li a{font-size: 16px; }
    .main-head #cssmenu ul ul li a{font-weight: 600; color: #000;}
    .main-head #cssmenu ul ul{background: unset;}
    .main-head #cssmenu > ul > li { padding: 15px 10px; }
    header #cssmenu.small-screen #menu-button{color: var(--primary);}
    header #cssmenu.small-screen #menu-button:after { border-top: 2px solid var(--primary);}
    header #cssmenu.small-screen #menu-button:before{background: var(--primary);}
    header #cssmenu.small-screen #menu-button.menu-opened:before,
    header #cssmenu.small-screen #menu-button.menu-opened:after{  background: var(--primary);}
    header #cssmenu.small-screen .submenu-button:before,
    header #cssmenu.small-screen .submenu-button:after{background: var(--primary);}
    .top-head{ flex-wrap: wrap; gap: 8px;}
    #cssmenu.small-screen>ul{ background: #fff; padding-top: 10px; height: 100vh; overflow: scroll;}
    .main-head #cssmenu ul ul li:hover{background: unset;}
    .main-head #cssmenu.small-screen{ top: 83px; left: 0;}
    .ngo-banner .row{flex-direction:column-reverse;}
    .ngo-banner{ padding: 180px 0 50px 0;}
    .banner-content .banner-title{font-size: 12px;}
    .banner-content h1{ font-size: 29px; margin: 20px 0;}
    .banner-content h1:before{width: 110px;}
    .include-service h3{font-size: 20px;}
    .include-service ul li{font-size: 16px;}
    .request-form{ width: 97%; margin-top: 20px;}
    .heading-section h2{font-size: 26px;}
    .heading-section h2:before{left: 37%;}
    .NGO-registration .side-img{margin-top: 25px;}
    .NGO-registration .side-img:before{bottom: -23px;width: 100px; right: -30px;
        height: 230px; border: 5px solid var(--primary);}
    .side-img img,.can-top img{width: 100%; border-radius: 0px;}
    .howCan-card{ padding: 25px 15px; border-radius: 0;}
    .can-top .row{flex-direction: column-reverse;}
    .about{ margin-top: 35px;}
    .news-title h2{ font-size: 28px;}
    .news-title h2 span{font-size:12px;}
    .news-title{margin-bottom: 25px;}
    ._connect-inpt input{ padding: 10px 22px;}
    ._connect-inpt a{ right: 5px; padding: 8px 15px; font-size: 12px;}
    .copyright p{ margin: 0;margin-top: 0px; padding: 10px 0; font-size: 10px; }
  }