/*----------------------------------------*/
/*  1. Theme default CSS
/*----------------------------------------*/
:root{
    --primary:#0764a9;
    --secondry:#f96a1c;
}
html, body {height: 100%;}
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
input:focus {box-shadow: none; outline: 0}
textarea {box-shadow: 0; outline: 0}


img {
    max-width:100%;
    height:auto;
    border:0; 
    vertical-align:top;
}
.fix {overflow:hidden}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
     
}
h4{font-size: 18px; line-height: 16px}
a {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-decoration:none; 
    color: #666
}
a:hover {text-decoration: none;}
a:active, a:hover, a:focus {outline: 0 none; text-decoration: none}
ul{
    list-style: outside none none;
    margin: 0;
    padding: 0;
     
}
.block {display: block;}
.padding {padding-bottom: 10px}
.clear{clear:both}
::-moz-selection {background: #b3d4fc; text-shadow: none}
::selection {background: #b3d4fc; text-shadow: none}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
::-webkit-input-placeholder {opacity: 1 !important;filter: alpha(opacity=100)}
:-moz-placeholder {opacity: 1 !important;filter: alpha(opacity=100)}
::-moz-placeholder {opacity: 1 !important;filter: alpha(opacity=100)}
:-ms-input-placeholder {opacity: 1 !important;filter: alpha(opacity=100)}


body {
    color: #111;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    overflow-x: hidden;
}
.mt-10{
    margin-top: 12rem !important;
}
/*-------Color Style--------*/
.bg-blue{
    background-color: #0764a9;
}
.txt-blue{
    color:var(--primary)
}
.sponsor-section {
  padding: 10px 10px;
  
  border-radius: 16px;
}

.section-title {
  font-weight: 600;
  margin-bottom: 24px;
  color: #222;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 20px;
}

.sponsor-card {
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  color: #444;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.sponsor-card i {
  font-size: 28px;
  color:var(--primary);
  margin-bottom: 10px;
  display: block;
}

.sponsor-card span {
  font-size: 14px;
  font-weight: 500;
}

.sponsor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  background: var(--primary);
  color: #fff !important;
}

.sponsor-card:hover i {
  color: #fff;
}

/* Highlight Login */
.sponsor-card.highlight {
  background: linear-gradient(135deg, #ff7a18, #ffb347);
  color: #fff;
}

.sponsor-card.highlight i {
  color: #fff;
}
 
.mega-menu a:hover{
    color: #0764a9;
}
.section-blue, .login-btn, .header-login-register > button, .mobile-menu-area, .mobile-menu-area .mean-nav, .button-default, .button-default.button-border:hover, .about-text > a:hover, .single-item:hover .button-default, .follow-links > a:hover, .subscribe-form > button:hover, .social-icons > a:hover, .campaign-details-bar .button-default:hover, .comment-container .post-info > a, .post-reply .button-default:hover, .section-border .donate-text-button > a, .button a.button-default:hover, .button button.button-default:hover, .contact-service-info:hover, .contact-button > button:hover, .image-information,.image-information:after, .single-sidebar-widget .tags li a:hover, .blog-area.with-sidebar .single-item:hover .button-default, .preview-2 .nivo-directionNav a.nivo-prevNav:hover:before, .preview-2 .nivo-directionNav a.nivo-nextNav:hover:before{
    background: #fff;
}
.header-login-register li:hover a, .progress-bar.style, #scrollUp:hover {
    background-color: #0764a9;
}
.mainmenu ul.sub-menu, .header-login-register li:hover a, .about-carousel .owl-dot.active, .login-btn, .header-login-register > button, .button-default, .button-default.button-border:hover, .progress.style, .single-item:hover .button-default, .social-icons > a:hover, .campaign-details-bar .button-default:hover, .post-reply .button-default, .button a.button-default, .button button.button-default, .contact-service-info:hover span.image, .contact-button > button:hover, .title-text-content:after, .shortcode-area i {
    border-color:#fff;
}
.header-login-register > button:after, .section-border .donate-text-button > a:after {
    border-color: rgba(0, 0, 0, 0) #0764a9 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.single-help-item:hover h4 a {color: #0764a9;}
.footer-area {border-top: 2px solid #435061;}
.about-carousel .owl-dot.active {border-color: #D4F2F9}

.slider-banner-area .preview-2 .nivo-directionNav a.nivo-prevNav:hover:before, .slider-banner-area .preview-2 .nivo-directionNav a.nivo-nextNav:hover:before{
    border: 1px solid #cf5c7c !important;
    color: #cf5c7c
}
.nivo-controlNav a.active, .nivo-controlNav a:hover {
  background-color: #f17183;
}
.container { width: 1200px}
.container, .row, .col-md-12, .col-md-10, .col-md-9, .col-md-8, .col-md-6, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .as-mainwrapper, .header-logo-menu, header {
    transition: all 0.3s ease 0s
}
 
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
.breadcrumb>.active {
    color: #777;
}
.btn-group .btn{
    margin-bottom: 0.5rem;
}
.mt-n10{
    margin-top: -10px;
}
 
.section-margin {margin: 100px 0 100px 0}
.section-padding {padding: 60px 0 60px 0}
.section-padding-top {padding: 100px 0 0 0}
.section-padding-bottom {padding: 0 0 100px 0}

.section-dark {background:#172254}
.section-title {padding-bottom: 61px;}
.section-title h2 {
    border-bottom: 2px solid #e5e5e5;
    display: inline-block;
    font-size: 24px;
    line-height: 17px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    text-transform: uppercase;
}
.section-title.large h2 {font-size: 40px}
.section-title.large h2 {
    font-size: 40px;
    line-height: 28px;
    padding-bottom: 27px;
}
.section-title h2 span {font-family: 'Open Sans', sans-serif;}
.section-title p {font-weight: 300; margin-bottom: 0}
.bg-white {background: #fff}
.carousel-style-one.owl-theme .owl-controls .owl-nav div {
    color: #999999;
    display: inline-block;
    font-size: 60px;
    height: 60px;
    left: -110px;
    line-height: 59px;
    margin: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 0;
    position: absolute;
    text-align: center;
    top: 39%;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width: 36px;
}
 
 
 
 
.mega-menu h6{
    font-size: 16px;
    font-weight: 600;
}
/*------Margin left-------*/
.ml-0 { margin-left: 0px }
.ml-10 { margin-left: 10px }
.ml-15 { margin-left: 15px }
.ml-20 { margin-left: 20px }
.ml-30 { margin-left: 30px }
.ml-40 { margin-left: 40px }
.ml-50 { margin-left: 50px }
.ml-60 { margin-left: 60px }
.ml-70 { margin-left: 70px }
.ml-80 { margin-left: 80px }
.ml-90 { margin-left: 90px }
.ml-100 { margin-left: 100px }
/*------Margin right-------*/
.mr-0 { margin-right: 0px }
.mr-10 { margin-right: 10px }
.mr-15 { margin-right: 15px }
.mr-20 { margin-right: 20px }
.mr-30 { margin-right: 30px }
.mr-40 { margin-right: 40px }
.mr-50 { margin-right: 50px }
.mr-60 { margin-right: 60px }
.mr-70 { margin-right: 70px }
.mr-80 { margin-right: 80px }
.mr-90 { margin-right: 90px }
.mr-100 { margin-right: 100px }
/*------Margin Top-------*/
.mt-0 { margin-top: 0px }
.mt-10 { margin-top: 10px }
.mt-15 { margin-top: 15px }
.mt-20 { margin-top: 20px }
.mt-30 { margin-top: 30px }
.mt-40 { margin-top: 40px }
.mt-50 { margin-top: 50px }
.mt-60 { margin-top: 60px }
.mt-70 { margin-top: 70px }
.mt-80 { margin-top: 80px }
.mt-90 { margin-top: 90px }
.mt-100 { margin-top: 100px }
/*------Margin Bottom-------*/
.mb-0 { margin-bottom: 0px }
.mb-10 { margin-bottom: 10px }
.mb-15 { margin-bottom: 15px }
.mb-20 { margin-bottom: 20px }
.mb-30 { margin-bottom: 30px }
.mb-40 { margin-bottom: 40px }
.mb-50 { margin-bottom: 50px }
.mb-60 { margin-bottom: 60px }
.mb-70 { margin-bottom: 70px }
.mb-80 { margin-bottom: 80px }
.mb-90 { margin-bottom: 90px }
.mb-100 { margin-bottom: 100px }
/*------Padding left-------*/
.pl-0 { padding-left: 0px }
.pl-10 { padding-left: 10px }
.pl-15 { padding-left: 15px }
.pl-20 { padding-left: 20px }
.pl-30 { padding-left: 30px }
.pl-40 { padding-left: 40px }
.pl-50 { padding-left: 50px }
.pl-60 { padding-left: 60px }
.pl-70 { padding-left: 70px }
.pl-80 { padding-left: 80px }
.pl-90 { padding-left: 90px }
.pl-100 { padding-left: 100px }
/*------Padding right-------*/
.pr-0 { padding-right: 0px }
.pr-10 { padding-right: 10px }
.pr-15 { padding-right: 15px }
.pr-20 { padding-right: 20px }
.pr-30 { padding-right: 30px }
.pr-40 { padding-right: 40px }
.pr-50 { padding-right: 50px }
.pr-60 { padding-right: 60px }
.pr-70 { padding-right: 70px }
.pr-80 { padding-right: 80px }
.pr-90 { padding-right: 90px }
.pr-100 { padding-right: 100px }
/*------Padding Top-------*/
.pt-0 { padding-top: 0px }
.pt-10 { padding-top: 10px }
.pt-15 { padding-top: 15px }
.pt-20 { padding-top: 20px }
.pt-30 { padding-top: 30px }
.pt-40 { padding-top: 40px }
.pt-50 { padding-top: 50px }
.pt-60 { padding-top: 60px }
.pt-70 { padding-top: 70px }
.pt-80 { padding-top: 80px }
.pt-90 { padding-top: 90px }
.pt-100 { padding-top: 100px }
.pt-110 { padding-top: 110px }
/*------Padding Bottom-------*/
.pb-0 { padding-bottom: 0px }
.pb-10 { padding-bottom: 10px }
.pb-15 { padding-bottom: 15px }
.pb-20 { padding-bottom: 20px }
.pb-30 { padding-bottom: 30px }
.pb-40 { padding-bottom: 40px }
.pb-50 { padding-bottom: 50px }
.pb-60 { padding-bottom: 60px }
.pb-70 { padding-bottom: 70px }
.pb-80 { padding-bottom: 80px }
.pb-90 { padding-bottom: 90px }
.pb-100 { padding-bottom: 100px }
.pb-110 { padding-bottom: 110px }
.pb-120 { padding-bottom: 120px }
.pb-130 { padding-bottom: 130px }
/*------Padding  Top Bottom-------*/
.ptb-0 { padding-top: 0px; padding-bottom: 0px }
.ptb-10 { padding-top: 10px; padding-bottom: 10px }
.ptb-15 { padding-top: 15px; padding-bottom: 15px }
.ptb-20 { padding-top: 20px; padding-bottom: 20px }
.ptb-30 { padding-top: 30px; padding-bottom: 30px }
.ptb-40 { padding-top: 40px; padding-bottom: 40px }
.ptb-50 { padding-top: 50px; padding-bottom: 50px }
.ptb-60 { padding-top: 60px; padding-bottom: 60px }
.ptb-70 { padding-top: 70px; padding-bottom: 70px }
.ptb-80 { padding-top: 80px; padding-bottom: 80px }
.ptb-90 { padding-top: 90px; padding-bottom: 90px }
.ptb-100 { padding-top: 100px; padding-bottom: 100px }
.ptb-110 { padding-top: 110px; padding-bottom: 110px }
.ptb-120 { padding-top: 120px; padding-bottom: 120px }
.ptb-130 { padding-top: 130px; padding-bottom: 130px }
.block {display: block}
.text-area p {line-height: 28px;}
/*----------------------------------------*/
/*  2. Header CSS (Header Logo Menu)
/*----------------------------------------*/
.header-logo-menu.stick {
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}
.header-logo-menu.stick .mainmenu ul li a{
    color: #111 !important;
}
.header-logo-menu.stick .social-icons a{
    border: 2px solid #0764a9;
    color: #0764a9;
}
.header-logo-menu.stick .social-icons a:hover{
    background-color: #0764a9;
    border: 2px solid #0764a9;
    color: #fff;
}
.as-mainwrapper.wrapper-boxed .header-logo-menu.stick {width: 1200px;}
.logo img {
    transition: all 0.3s ease 0s;
}
.text-blue{
    color: #0764a9;
}
/*----------------------------------------*/
/*  2.1.1 Header Logo
/*----------------------------------------*/
.logo > a {display: inline-block;}
.logo {padding: 11px 0;  transition: all 0.3s ease 0s}
.header-logo-menu.stick .logo {padding: 6px 0}
/*----------------------------------------*/
/*  2.1.2 Header Mainmenu
/*----------------------------------------*/
.menu-dark {background: #000 none repeat scroll 0 0;}
.menu-dark.stick {background: #000 none repeat scroll 0 0;}
.menu-button-wrapper {float: left; display: flex; align-items: center;}
.mainmenu-area, .header-login-register { display: inline-block; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
.header-fixed .stick .header-login-register > button:hover::after {
    border-color: rgba(0, 0, 0, 0) #d6d6d6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.header-fixed .stick .header-login-register > button:hover {
    border-color: #d6d6d6;
    color: #666666;
}
.header-logo-menu.stick .mainmenu-area {padding: 0}
.mainmenu ul#nav li {
    display: inline-block;
    margin-right: 33px;
    position: relative;
    transition: all 0.3s ease 0s
}
.mainmenu ul#nav > li > a {
    color: #fff;
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 45px;
    text-decoration: none;
    
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.stick .mainmenu ul#nav > li > a {
    line-height: 80px;
}
.mainmenu li > a > i {
    margin-left: 6px;
    position: relative;
    top: -1px;
}
.menu-border {
    border-top: 3px solid transparent;
}
/*------------------------------------------*/
/*  Dropdown Menu
/*------------------------------------------*/
.mainmenu ul.sub-menu, .mainmenu ul.sub-menu ul.inside-menu {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  left: -23px;
  margin: 0;
  padding: 14px 21px 16px;
  position: absolute;
  text-align: left;
  top: 100%;
  width: 190px;
  z-index: -99;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0 0 0;
        -ms-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
    -webkit-transition: all 0.6s ease 0s;
            transition: all 0.6s ease 0s;
}
.mainmenu ul#nav li ul.sub-menu > li  {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}
.mainmenu ul#nav li ul.sub-menu > li a, .mega-menu a {
    color: #444444;
    display: block;
    font-size: 13px;
    font-weight: 300;
    
    text-transform: capitalize;
}
.mainmenu ul#nav li:last-child, .header-fixed .mainmenu ul#nav li:last-child {margin-right: 0}
.mainmenu > nav > ul#nav > li:hover ul.sub-menu, .mainmenu ul.sub-menu li:hover ul.inside-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
    z-index: 9999;
}
.mainmenu ul.sub-menu ul.inside-menu {
    left: 169px;
    top: -2px;
    width: 195px;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
    -webkit-transition: all 0.6s ease 0s;
            transition: all 0.6s ease 0s;
}
.mainmenu ul.sub-menu li:hover ul.inside-menu {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    z-index: 9999;
}
.mainmenu li > .sub-menu i {
    float: right;
    font-size: 17px;
    position: relative;
    top: 10px;
}
.mainmenu ul#nav li ul.inside-menu li {display: block}
/*----------------------------------------*/
/*  Mega Menu
/*----------------------------------------*/
.mega-menu {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    left: -23px;
    margin: 0;
    padding: 26px 21px 20px;
    position: absolute;
    text-align: left;
    top: 100%;
    z-index: -99;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
    -webkit-transition: all 0.6s ease 0s;
            transition: all 0.6s ease 0s;
}
.mainmenu nav > ul > li:hover .mega-menu {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    z-index: 9999;
}
.mega-menu h3 {
    color: #0764a9;
    font-size: 14px;
    padding-bottom: 10px;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 1px;
    font-family: "Poppins", sans-serif;
}
.mega-menu h3:after {
    background: #0764a9 none repeat scroll 0 0;
    bottom: 8px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 25px;
}
.mm-5-column {
    /*left: -369px;*/
    width: 850px;
}
.mm-4-column {
    left: -263px;
    width: 650px;
}
.mm-3-column {
  left: -177px;
  width: 532px;
}
.col-2{width: 50%}
.col-3{width: 33.333%}
.col-4{width: 25%}
.col-5{width: 20%}
/*----------------------------------------*/
/*  2.3 Header Login Register
/*----------------------------------------*/
.header-login-register a {
    border: 2px solid #d6d6d6;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
     
}
.header-login-register li:hover a {
    color: #ffffff;
}
.header-login-register ul a i {
    font-size: 15px;
    
}
.login {
    display: inline-block;
    margin-left: 34px;
}
.login li {
    position: relative;
}
.login-form {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14);
    opacity: 0;
    filter: alpha(opacity=0);
    padding: 15px 21px 30px 19px;
    position: absolute;
    right: 0;
    text-align: left;
    top: 62px;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 0 0;
        -ms-transform-origin: 0 0 0;
        transform-origin: 0 0 0;
        -webkit-transition: all 0.6s ease 0s;
        transition: all 0.6s ease 0s;
    width: 213px;
    z-index: -99;
}
ul.login li:hover .login-form {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
    z-index: 9999;
}
.header-login-register h4 {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 9px;
    padding-bottom: 11px;
}
.form-box {
    border: 1px solid #f3f3f3;
    border-radius: 3px;
    height: 38px;
    margin-bottom: 10px;
    position: relative;
}
.form-box:after {
    background: #f3f3f3 none repeat scroll 0 0;
    content: "";
    height: 26px;
    left: 32px;
    position: absolute;
    top: 5px;
    width: 1px;
}
.form-box > input {
    border: 0 none;
    color: #ababab;
    font-size: 12px;
    margin-left: 12px;
    width: 73%;
}
.form-box i {
    color: #909090;
    font-size: 14px;
    padding: 11px 0 0 10px;
}
.register-form > form {margin-top: 11px}
.button-box > span {padding-left: 8px}
.login-btn {
    border: 2px solid #00aff0;
    color: #ffffff;
    float: right;
    line-height: 28px;
    padding: 0 22px;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.header-login-register .login > li:hover a {
    color: #ffffff;
}
.header-login-register > button {
    border: 2px solid #00aff0;
    color: #ffffff;
    display: inline-block;
    font-family: "playfair_displaybold";
    font-size: 16px;
    line-height: 28px;
    margin-left: 12px;
    padding: 0 9px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s
}
.header-login-register > button:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-style: solid;
    border-width: 4px;
    bottom: 9px;
    content: "";
    height: 0;
    left: -10px;
    position: absolute;
    width: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}
.header-login-register > button:hover:after, .header-three .header-login-register > button:hover:after, .header-four .header-login-register > button:hover:after{
    border-color: rgba(0, 0, 0, 0) #d6d6d6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.header-login-register > button:hover, .login-btn:hover, .header-three .header-login-register > button:hover, .header-four .header-login-register > button:hover, .header-fixed .header-login-register .button-box button:hover {
    border: 2px solid #d6d6d6;
    color: #666;
    background: transparent
}
/*----------------------------------------*/
/*  2.1.3 Mobile Menu
/*----------------------------------------*/
.mobile-menu-area {display: none}
.mean-container .mean-bar:after {display: none}
.mean-container .mean-nav ul li a:hover {
    background: #fff;
}
.mean-container a.meanmenu-reveal span {background: #0764a9}
.mean-container .mean-nav ul li a {
    background: #ffffff none repeat scroll 0 0;
    color: #444;
    display: block;
}
.mean-container .mean-nav ul li a.mean-expand {background: none; top: -4px;}
.mean-container .mean-nav ul li a.mean-expand:hover {background: none}
.mean-container .mean-nav ul li li a {
    color: #4e4f54;
    opacity: .90;
    filter: alpha(opacity=90);
    border-top: 0;
}
.mean-container .mean-nav ul li li{background: #fff}
.mean-container a.meanmenu-reveal {color: #444}
.meanmenu-reveal.meanclose:hover {color: #000}
.mean-container a.meanmenu-reveal:hover span {background: #000}
.mean-last {margin-bottom: 20px}
.mobile-menu {position: relative}
.mean-container .mean-bar:before {
    color: #0764a9;
    content: "MENU";
    font-size: 18px;
    font-weight: 600;
    left: 0;
    position: absolute;
    top: 11px;
}
 
 
/*----------------------------------------*/
/*  6. Campaigns Area
/*----------------------------------------*/
 
.overlay-hover:hover .overlay-effect > a:before{opacity: 1; filter: alpha(opacity=100);}
 
 
 
.single-footer-widget > a {display: inline-block; margin-top: 16px;}
.contact-title {
    display: inline-block;
    float: left;
    font-family: "playfair_displayregular";
    margin-right: 30px;
    overflow: hidden;
    width: 70px;
}
.contact-text {
    display: inline-block;
    line-height: 20px;
    overflow: hidden;
    color: #fff
}
.dividers {
    border-bottom: 1px solid #5a5a5a;
    margin-bottom: 20px;
    padding-bottom: 40px;
}
.social-icons a {
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 30px;
    line-height: 27px;
    margin-right: 10px;
    text-align: center;
    width: 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.social-icons a:last-child {margin-right: 0}
.social-icons > a:hover {
    color: #0764a9;
}
/*----------------------------------------*/
/*  13. Footer Area
/*----------------------------------------*/
.footer-area {padding: 20px 0 20px;}
.footer-area span {color: #f1f1f1;}
.footer-area span a {
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s
}
.footer-area span a:hover{border-bottom: 1px solid;}
.footer-menu a {color: #f1f1f1;}
.footer-menu li {display: inline-block;}
.footer-menu ul {text-align: right;}
.footer-menu ul li {
    border-left: 1px solid #999999;
    line-height: 14px;
    margin-left: 15px;
    padding-left: 20px;
}
.footer-menu ul li:first-child {
    border: 0 none;
    margin: 0;
    padding: 0;
}
/*----------------------------------------*/
/*  14. Home Two Start
/*----------------------------------------*/
/*----------------------------------------*/
/*  14.1 Home Two Header
/*----------------------------------------*/
.header-fixed {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
}
.header-two .header-logo-menu.stick {background: #271B52 none repeat scroll 0 0;}
.header-fixed .header-logo-menu.stick .logo {padding: 15px 0;}
.header-fixed .header-logo-menu.stick .mainmenu-area {padding: 20px 0;}
.header-fixed .header-login-register {float: right; padding: 34px 0;}
.header-fixed .mainmenu ul#nav > li > a {
    color: #fff;
    line-height: 60px;
    padding-right: 17px;
    position: relative;
}
.header-fixed .stick .mainmenu ul#nav > li > a {
    color: #666;
}
.header-two .stick .mainmenu ul#nav > li > a {
    color: #fff;
}
.header-fixed .mainmenu ul#nav > li:last-child > a {padding-right: 0}
.header-fixed .mainmenu ul#nav li {margin-right: 17px;}
.header-fixed .mainmenu-area {padding: 18px 0;}
.header-fixed .mainmenu ul#nav > li > a:after {
    background: #ffffff none repeat scroll 0 0;
    content: "";
    height: 16px;
    position: absolute;
    right: 0;
    top: 39%;
    width: 1px;
}
.header-fixed .mainmenu ul#nav > li:last-child > a:after{display: none}
.header-fixed .mainmenu > nav > ul#nav ul.sub-menu {
    left: 0;
    top: 62px;
}
.header-fixed .mainmenu ul.sub-menu, .header-fixed .login-form {top: 66px; width: 215px;}
.header-fixed .header-login-register a, .header-fixed .header-login-register button:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: #ffffff;
    color: #ffffff;
}
.header-fixed .stick .header-login-register a {
    border-color: #d6d6d6;
    color: #d6d6d6;
}
.header-fixed .header-login-register button:hover:after {
    border-color: rgba(0, 0, 0, 0) #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
/*----------------------------------------*/
/*  14.2 Home Two Container Wrapper
/*----------------------------------------*/
.container-wrapper {position: relative;}
/*----------------------------------------*/
/*  14.2.1 Home Two Slider
/*----------------------------------------*/
.container-wrapper .banner-content h1:after {display: none;}
.container-wrapper .banner-content h1 {padding-bottom: 32px;}
.button-default.button-yellow:hover, .button-default.button-dark:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: #ffffff;
}
.button-default.button-dark {
    background: #333333 none repeat scroll 0 0;
    border-color: #333333;
}
.button-default.button-border.dark-hover:hover {
    background: #333333 none repeat scroll 0 0;
    border-color: #333333;
}
.container-wrapper .banner-content h1 {
    -webkit-animation: 2000ms ease-in-out 0s normal none 1 running zoomInRight;
        animation: 2000ms ease-in-out 0s normal none 1 running zoomInRight;
}
.container-wrapper .banner-content p {
    -webkit-animation: 1500ms ease-in-out 0s normal none 1 running zoomInRight;
        animation: 1500ms ease-in-out 0s normal none 1 running zoomInRight;
}
.container-wrapper .banner-readmore {
    -webkit-animation: 1300ms ease-in-out 0s normal none 1 running zoomInUp;
        animation: 1300ms ease-in-out 0s normal none 1 running zoomInUp;
}
.slider-container-wrapper .slider-area .banner-content h1 {
    -webkit-animation: 1500ms ease-in-out 0s normal none 1 running bounceInLeft;
        animation: 1500ms ease-in-out 0s normal none 1 running bounceInLeft;
}
.slider-container-wrapper .slider-area .banner-content p {
    -webkit-animation: 2000ms ease-in-out 0s normal none 1 running bounceInLeft;
        animation: 2000ms ease-in-out 0s normal none 1 running bounceInLeft;
}
.slider-container-wrapper .slider-area .banner-content .banner-readmore {
    -webkit-animation: 2500ms ease-in-out 0s normal none 1 running bounceInLeft;
        animation: 2500ms ease-in-out 0s normal none 1 running bounceInLeft;
}
.slider-four .banner-content h1 {
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running rotateInDownLeft;
        animation: 1000ms ease-in-out 0s normal none 1 running rotateInDownLeft;
}
.slider-four .banner-content p {
    -webkit-animation: 1500ms ease-in-out 0s normal none 1 running lightSpeedIn;
        animation: 1500ms ease-in-out 0s normal none 1 running lightSpeedIn;
}
.slider-four .banner-content .banner-readmore {
    -webkit-animation: 2000ms ease-in-out 0s normal none 1 running flash;
        animation: 2000ms ease-in-out 0s normal none 1 running flash;
}
/*----------------------------------------*/
/*  14.2.2 Home Two Featured
/*----------------------------------------*/
.featured-two {background: #271B52;}
.container-wrapper .featured-carousel .section-title h2 {
    font-size: 20px;
    padding-bottom: 9px;
}
.container-wrapper .featured-text, .container-wrapper .featured-text h1 {color: #ffffff;}
.container-wrapper .donate-text > span {color: #999999;}
.container-wrapper .progress.style {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.container-wrapper .donate-bar-item .button-default:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: #999999;
}
/*----------------------------------------*/
/*  14.3 Home Two Volunteer
/*----------------------------------------*/
.volunteers-area.home-two {padding-top: 100px;}
.home-two .single-volunteer-item {
    background: #ffffff none repeat scroll 0 0;
    -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s
}
.home-two.volunteers-area .single-volunteer-item {
    margin-bottom: 30px
}
.home-two .single-volunteer-item:after {display: none;}
.home-two .volunteer-text > p {padding: 0 10px;}
.home-two .single-volunteer-item p {color: #ffffff;}
/*----------------------------------------*/
 
/*----------------------------------------*/
.header-top {
    color: #ffffff;
    font-size: 13px;
    border: 1px #efefef solid;  
}
.header-top i {
    font-size: 30px;
    line-height: 36px;
     
    color: #0764a9;
}
.header-top .social-icons i {
    color: #ffffff;
    font-size: 14px;
    -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s
}
.header-top .social-icons a {
    border: 0 none;
    margin-right: 0;
    width: 25px;
}
.header-top .social-icons a:hover {background: transparent}
.header-top .social-icons a:hover i {color: #687DD8;}
.header-top span {padding-right: 22px;
    font-size: 12px;
    text-transform: uppercase;
    color: #adadad !important;}
.header-top span:last-child {padding-right: 0;}
 
.header-top-right .btn-link:focus, .header-top-right .btn-link:hover {
    text-decoration: none;
    color: #687DD8;
    border-color: rgba(255, 255, 255, 0.2)
}
.language-menu, .header-top .social-icons {display: inline-block;}
.header-top-right {float: right}
.header-top button {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 0;
    border-bottom: 0;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 20px;
}
.header-top-right span {padding-right: 0;}
.header-top-right i {font-size: 14px; margin-left: 3px;}
.header-top-right .social-icons {margin-right: 16px;}
.header-three .header-login-register > button {
    background: #687dd8 none repeat scroll 0 0;
    border-color: #687dd8;
}
.header-three .header-login-register > button:after {
    border-color: rgba(0, 0, 0, 0) #687dd8 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.header-three .mainmenu-area {margin-right: 22px;}
/*----------------------------------------*/
/*  15.2 Home Three Slider
/*----------------------------------------*/
.slider-container-wrapper .banner-content .slide-2 h1 {
    font-size: 40px;
    margin-bottom: 0;
    padding-bottom: 30px;
}
.content-top .slider-area .text-content {
    display: block;
    top: 5%;
    position: absolute;
    left: 0;
    right: 0
}
 
 
/*----------------------------------------*/
/*  15.3 Home Three Help Area
/*----------------------------------------*/
.help-area-three {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-top: -235px;
    position: relative;
    z-index: 2;
}
/*----------------------------------------*/

  
.header-logo-menu.stick.semi-transparent, .gallery-img, .gallery-img .hover-effect {
  background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0;
}

.footer-widget-area{
    overflow-x: hidden;
}
.hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 0px 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero:before {
    content: "";
    background: 
 color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    inset: 0;
    z-index: 2;
}
.video-container {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}
.video-container .overlay-div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000040;
    display: flex;
    justify-content: center;
    align-items: center;
}
.video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 12%);
}
.hero .container {
    position: relative;
    z-index: 3;
}
.hero h1 {
    margin: 0;
    color: #fff;
    font-size: 45px;
    font-weight: 700;
    text-shadow: 1px 1px 5px #000;
    font-family: "Poppins", sans-serif;
}
.hero h2 span {
    color: var(--accent-color);
}
.hero p {
    margin: 10px 0 0 0;
    font-size: 16px;
    color:#fff;
}
video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.btnButton{
   background-color: #0764a9 !important;
    border-color: #0764a9 !important;
    color: #fff;
    padding: 10px 15px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    border: none;
    border-radius: 10px;
    cursor:pointer !important;
}
.btnButton:hover{
    text-decoration: underline;
}
.btnButton2{
   background-color: #f96a1c ;
    border-color: #f96a1c !important;
    color: #fff;
    padding: 10px 15px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    border: none;
    border-radius: 10px;
}
.btnButton2:hover{
     text-decoration: underline;
    
}
.btn-sec{
    position: relative;
}
.btn-sec .btnButton::after{
    position: absolute;
    border-color: rgba(0, 0, 0, 0) #b92232 rgba(0, 0, 0, 0) rgba
#00000000
(0, 0, 0, 0);
}
.bg-gray{
    background-color: #efefef;
}
.form-label {
    margin-bottom: .5rem;
    font-size: 16px; 
    color: #111;
    font-weight: 500;
}
.featured-text h1 span{
    color:#b92232 ;
}
.modal-body {
  border-radius: 0;
  padding: 0;
}
.modal-content {
  border-radius: 0;
}



.page-width {
	max-width: 900px;
	margin: 0 auto;
	
}
.splide {
	max-width: 800px;
	margin: 0 auto;
}
.splide__slide 
	img {
		max-width: 100%;

}
.splide__arrow--prev {
	margin-left: -50px;
}
.splide__arrow--next {
	margin-right: -50px;
}
.splide__pagination {
	margin-bottom: -35px;
}
.splide__pagination__page.is-active {
	background: green;
}
.contact-details{
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 18px;
}
.contact-details ul{
    display: flex;
    align-items: center;
}
.contact-details ul li{
    display: inline-block;
    margin: 10px;
}
.contact-details ul li:last-child{
     
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
     
}
.donation-div{ 
    background-color: #435061;
    padding: 20px 0px;
    color: #b7b7b7; 
}
.left-div{
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px #b7b7b7 solid;
}
.left-div i{
    font-size: 50px;
    color: #b7b7b7;
}
.right-div h4{
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.right-div p{
    font-size: 12px;
}
.owl-item:before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    background-image: linear-gradient(20deg, #0066ccd1, #fff0) !important;
    z-index: 1;
    opacity: 0;
    transition: 0.4s ease;
}
.owl-item:hover:before {
    opacity: 1;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.btn-div{
    position: absolute;
    bottom: 30px;
    z-index: 9;
    text-align: center;
}
.btn-div button{
    border: none;
    background-color: #0764a9;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.owl-carousel .owl-item:hover .btn-div button{
    background-color: #f96a1c;
}

.heading-txt {
    margin-top: -40px;
    font-size: 19px;
    color: #fff;
    padding-bottom: 0px;
}
.resource-block{
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.resource-block img{
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.counter {
    position: relative;
    background-color:#f5f5f5;
    padding: 20px;
    height: 150px;
    border: 1px #0764a9 solid;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.count-title {
    font-size: 40px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: left;
}

.count-text {
    font-size: 16px; 
    margin-top: 10px;
    margin-bottom: 0;
    text-align:left;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
.section-blue{
    background-color:#00aff030;
}
.counter h2::after{
    position: absolute;
    content: '%'; 
}
.child-sponsor-div{
    padding: 50px 0px;
    position: relative;
}
.child-sponsor-div::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 86.5%;
    background-color: #00000073;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
}
.child-sponsor-div video {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.inner-div{
    position: absolute;
    top: 40%;
    left: 5%;
    z-index: 9;
    color: #fff;
}
.inner-div p{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 15px;
}
.inner-div a{
    font-size: 16px;
    color: #fff;
}


 

.single-item-carousel img{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.single-item-carousel .owl-item:hover:before {
    opacity: 0;
}
.subscribe-area {
background-image: linear-gradient(to top, #f96a1c 0%, #f96a1c 100%);
} 
.mb-15 {
    margin-bottom: 15px;
}

.subscribe-text span {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
     
}
.subscribe-text h2 {
    color: #fff;
    font-size: 36px;
    font-weight:500;
    margin-bottom: 0;
    margin-top: 6px;
}
.subscribe-wrapper {
    overflow: hidden;
}

.subscribe-form {
}
.subscribe2-wrapper .subscribe-form input {
     
    border: 1px solid #fff; 
    display: inline-block;
    font-size: 15px;
    font-weight: 300;
    height: 40px; 
    width: 100%;
    cursor: pointer;
   
}
 
.subscribe2-wrapper .subscribe-form button {
    background:#172254;
    border: none;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    padding: 12px 46px;
    transition: all 0.3s ease 0s;
}
.subscribe2-wrapper .subscribe-form button i {
    font-size: 18px;
    padding-left: 5px;
}

.footer-widget-area ul li{
    margin-bottom: 10px;
}
.footer-widget-area ul li a{
    color: #fff;
}
.footer-widget-area ul li a:hover{
    text-decoration: underline;
}
.footer-widget-area h5{
    color:#fff;
}
.video-thumb {
  position: relative;
  cursor: pointer;
}
.video-thumb {
  position: relative;
  cursor: pointer;
}

.video-thumb img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Play button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  width: 70px;
  height: 70px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breadcrumb-sec{
    padding: 10px 0px;
}
.breadcrumb-sec ul li{
    display: inline-block;
    margin-right: 10px;
     
}
.breadcrumb-sec ul li:after{
    content: '>';
    margin-left: 10px; 
}
.breadcrumb-sec ul li:last-child::after{
    display:none;
    content: '>';
    margin-left: 10px; 
}
.content-div{
    padding: 50px 0px;
    background-color: #eff5ff;
    position: relative;
}
.content-div h1{
    margin-bottom: 20px;
    font-weight: 600;
}
.content-div p{
    font-size: 16px;
    margin-bottom: 50px;
}
.filter-div{
    position: absolute;
    top: 84%;
    background-color: #fff;
    padding: 30px;
    width: 100%;
    left: 0px;
    right: 0;
    border: 1px #efefef solid;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.filter-div .btn{
    width: 100%;
}
.filter-div i{
    font-size: 24px;
}
.filter-div .btn-primary{
    background-color: #0764a9;
    border-color: #0764a9;
}
.nav .nav-item button.active {
  background-color: transparent;
  color:var(--secondry) !important;
}
.nav .nav-item button.active::after {
  content: "";
  border-bottom: 4px solid var(--secondry);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  border-radius: 5px 5px 0 0;
}
.chip-group {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  list-style: none;
  padding: 0;
}

.chip {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s;
}

.chip.active {
  background:var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.child-card {
  transition: 0.3s;
}
.sponsor-section .card{
    border: none;
    background: #efefef;
    border-radius: 20px;
    position: relative;
}
.sponsor-section .card .tag{
    position: absolute;
    top: 20px;
    left: 20px;
    background:var(--primary);
    padding: 0px 20px;
    border-radius: 10px;
    color: #fff;
}
.sponsor-section .card h5{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.sponsor-section .card img{
    border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    -moz-border-radius: 20px 20px 0px 0px;
    -ms-border-radius: 20px 20px 0px 0px;
    -o-border-radius: 20px 20px 0px 0px;
}
.sponsor-section .btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sponsor-section .btn-outline-primary{
    border-color: var(--secondry);
    color: var(--secondry);
}
.sponsor-section .btn-primary:hover{
    border-color: var(--primary);
    color: var(--primary);
    background: none;
}
.sponsor-section .btn-outline-primary:hover{
    background-color: var(--secondry);
    color:#fff;
}
.provide-div{
    padding: 120px 100px;
    background-color:var(--primary);
    text-align: center;
    color: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.provide-div h2{
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #fff; 
}
.provide-div .icon{
    background-color: #1e358a;
    width: 50px;
    height: 50px;
    margin: 0px auto;
    border-radius: 10px;
    margin-bottom: 20px;
    line-height: 50px;
    font-size: 20px;
    color: #83c6f7;
}
.provide-div h4{
    font-size: 18px;
    line-height: 25px;
}
.recieve-div{
    padding: 70px 0px;
}
.recieve-div .inner-div2{
    padding: 50px;
}
.recieve-div .inner-div2 h3{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}
.recieve-div .inner-div2 p{
    font-size: 17px;
    font-weight: 400;
}
.recieve-div .inner-div3 .div1{
    text-align: center;
    background:var(--primary);
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.childstory-div .right-side{
    background-color: var(--primary);
    padding: 40px; 
}
.childstory-div .right-side h3{
    font-size: 28px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
}
.childstory-div .right-side p{
    font-size: 15px;
    color: #fff;
}
.child-story-div img{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.child-story-div .child-details p {
    font-size: 16px;
    margin-bottom: 20px;
}
.child-story-div .child-details ul{
    margin: 0;
    padding: 0;
    
}
.child-story-div .child-details ul li{
    list-style: none;
    display:block;
    font-size: 18px;
}
.sticky-section {
  padding: 80px 0;
}

/* Layout */
.sticky-layout {
  display: grid;
    grid-template-columns: 52% 45%;
    gap: 25px;
    align-items: flex-start;
}

/* Left Sticky Column */
.sticky-left {
  position: sticky;
  top: 120px; /* adjust for header height */
  
   
}

.sticky-left h2 {
  margin-bottom: 15px;
  font-size: 18px;
}

.sticky-left .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

/* Right Scroll Content */
.scroll-right {
  display: flex;
  flex-direction: column;
   
}

.content-box {
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  min-height: 220px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
  .sticky-layout {
    grid-template-columns: 1fr;
  }

  .sticky-left {
    position: relative;
    top: 0;
  }
}
.child-details .nav-link{
    color: #000;
} 
.checkout-div h1{
    font-size: 24px;
}

.checkout-div a{
    font-size: 16px;
}
.checkout-div a i{
    color: var(--primary);
    margin-left: 10px;
}
.checkout-div h4{
    margin-bottom: -25px;
}
.sign{
    color: var(--primary);
}
label span{
    color: #f00;
}
.donate-detail p {
    margin-top: 0px;
    margin-bottom: 0rem !important;
}
.card-bottom-div{
    opacity: 0;
    margin-top: -50px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.card:hover .card-bottom-div{
    opacity: 1;
    margin-top: -20px;
}
.about-sponsor-div{
    padding: 50px 0px;
}
.about-sponsor-div .children-img{
    position: relative;
      
}
.about-sponsor-div .children-img img{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.about-sponsor-div .children-img::before{
    position: absolute;
    top: 0;
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-image: linear-gradient(20deg, #000000d1, #fff0) !important;
    z-index: 9;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.about-sponsor-div .children-img .innertxt{
    position: absolute;
    bottom: 40px;
    left: 50px;
    color: #fff;
    z-index: 9;
    width: 80%;
    border-left: 1px var(--primary) solid;
    padding-left: 15px;
}
.about-content-div h3{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}
.about-content-div p{
    font-size: 16px;
    margin-bottom: 20px;
}
.about-content-div i{
    color: var(--primary);
}
 


.video-thumbnail-wrapper {
      position: relative;
      cursor: pointer;
      overflow: hidden;
      border-radius: 8px;
    }

    .video-thumbnail-wrapper img {
      transition: transform 0.3s;
      width: 100%;
      display: block;
    }

    .video-thumbnail-wrapper:hover img {
      transform: scale(1.05);
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: transform 0.3s, background 0.3s;
    }

    .play-icon:hover {
      transform: translate(-50%, -50%) scale(1.1);
      background: var(--secondry);
    }

    .play-icon::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }

    .modal-video {
      width: 100%;
      height: 100%;
    }
    .child-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

 
.gender-btn.active {
  background: var(--secondry);
  border: 1px solid var(--secondry);
  color: #fff;
}
.video-thumbnail-wrapper {
      position: relative;
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
    }

    .video-thumbnail-wrapper img {
      width: 100%;
      transition: transform 0.3s;
    }

    .video-thumbnail-wrapper:hover img {
      transform: scale(1.05);
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: transform 0.3s, background 0.3s;
    }

    .play-icon:hover {
      transform: translate(-50%, -50%) scale(1.1);
      background: var(--secondry);
    }

    .play-icon::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }

    .modal-video {
      width: 100%;
      height: 100%;
    }

    .swiper {
      padding: 20px 0;
    }

    .swiper-slide {
      width: 250px;
    }

    @media (max-width: 576px) {
      .swiper-slide {
        width: 180px;
      }
    }
    .join-us-div h3{
        font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    }
    .join-us-div i {
    color: var(--primary);
}

/*=======================================*/
.space-medium {
    padding-top: 80px;
    padding-bottom: 80px;
}
.feature-left {
    margin-bottom: 40px;
}
.feature-left .feature-icon {
    font-size: 40px;
    color: var(--primary);
    display: inline-block;
    float: left;
    padding-right: 31px;
    padding-top: 0px;
}
.feature-left .feature-content {
    font-size: 20px;
    padding-top: 5px;
}
.section-title p {
    margin-bottom: 0;
    font-size: 15px !important;
}
.service-form {
    background-color: #fafbfb;
    border: 1px solid #e4e8ea;
    padding: 40px 40px 20px 40px;
}
.service-form-group {
    position: relative;
}
.form-icon {
    position: absolute;
    right: 14px;
    bottom: 15px;
    font-size: 13px;
}
.service-form-group .form-control {
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    height: 56px;
    padding: 14px 18px;
    line-height: 1.42857143;
    border: 1px solid #d2d8db;
    background-color: #fff;
    letter-spacing: 0px;
    margin-bottom: 14px;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
    -webkit-appearance: none;
}
.service-form-group .form-select {
    border-radius: 0px;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    height: 56px;
    padding: 14px 18px;
    line-height: 1.42857143;
    border: 1px solid #d2d8db;
    background-color: #fff;
    letter-spacing: 0px;
    margin-bottom: 14px;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
    -webkit-appearance: none;
}
.donate-div{
    position: relative;
}
.donate-div .donate{
    position: absolute;
    top:0;
    left:0; 
    right:0;
    background-color:#0000008a;
    height: 100%;
}

/*===================================*/
.donation-amount button.active {
      background-color:var(--primary);
      color: white;
      border-color: var(--primary);
    }
    .donation-amount button {
      min-width: 80px;
    }
    .other-amount {
      max-width: 150px;
      margin-top: 15px;
    }
.btn-outline-primary{
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover{
    background: var(--secondry);
    border-color: var(--secondry);
}
.donate-div-content{
    padding: 70px 0px; 
}
.donate-div-content h2{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}
.donate-div-content p{
    font-size: 16px;
    font-weight: 300;
}
.fund-div{
    padding: 70px 0px;
}
.fund-div h2{
    font-size: 36px;
    font-weight: bold;
}
.fund-div ul li{
    list-style: none;
    display: inline-block;
    background-color: var(--primary);
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.fund-div ul li a{
    color: #fff;
}
.fund-div ul li:hover{
    background-color: var(--secondry);
}
.donate-inner-text h1{
     font-size: 36px;
     font-weight: bold;
    color: #fff;
}
.donate-inner-text p{
     font-size: 16px;
      margin-top: 20px;
    color: #fff;
}
.donate-inner-text2{
    position: absolute;
    top:40%;
}
.donate-inner-text2 h1{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
}
.gift-div{
    padding: 0px 0px;
}
.gift-div .card{
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.gift-div .card img{
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -ms-border-radius: 5px 5px 0px 0px;
    -o-border-radius: 5px 5px 0px 0px;
    
}
.popular-div-sec{
    padding: 70px 0px;
    background-color:#eff5ff;
}
.popular-div-sec h2{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
}
.popular-div-sec .card img{
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -ms-border-radius: 5px 5px 0px 0px;
    -o-border-radius: 5px 5px 0px 0px;
}
.otherway-div{
    padding: 70px 0px;
}
.icon-div{
    width: 45px;
    height: 45px;
    background:var(--primary);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.sunday-pray-vdiv{
    padding:100px
}
.sunday-pray-vdiv h3{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
}
.btnButton a{
    color:#fff;
}