:root{
  --red: #f00;
  --white: #fff;
  --black: #000;
  --text-dark: #172b43;
  --text-light: #69798d;
}


html, body{font-family: 'Bai Jamjuree', sans-serif; font-weight: 400;}
a, a:hover, a:focus, a:active{text-decoration: none;}
input:focus, select:focus, button:focus{box-shadow: none !important; outline: none !important;}
ul{padding: 0; margin: 0;}
p{font-size: 16px;}
img{max-width: 100%; width: auto;}

.btn-know-more{ color: var(--white); background: linear-gradient(45deg, #9a9fff, #6245fe); padding: 15px 45px; border-radius: 30px; margin-top: 30px; display: inline-block; font-size: 18px; transition: all 1s ease;}
.btn-know-more:hover{ color: var(--white); background: linear-gradient(45deg, #6245fe, #9a9fff);}

h1, h2, h3, h4, h5, h6{font-family: 'Bai Jamjuree', sans-serif !important; }
/*--common end--*/


/*--offcanvas-css--*/
#sidebar{opacity: 0;}
#sidebar.sidebar-wrapperd-box{opacity: 1;}
.sidebar-offcanvas-menu .outer {height: 100%; background: #ffffff; overflow: auto; padding: 0 0 20px;}
.sidebar-offcanvas-menu .inner {padding: 0px;}
.sidebar-offcanvas-menu #sidebar {position: fixed; top: 0px; bottom: 0px; width: 300px; left: -300px;}
.sidebar-offcanvas-menu .sidebar-top-header {padding: 15px; background: #000;}
.sidebar-offcanvas-menu .sidebar-top-header:after{content: ''; display: table; width: 100%;}
.sidebar-offcanvas-menu .sidebar-close-btn {text-align: right; float: right; padding:0;}
.sidebar-offcanvas-menu .sidebar-logo {float: left;}
.sidebar-offcanvas-menu .sidebar-logo img {max-width: 152px; margin: 0 auto;}
.sidebar-offcanvas-menu .sidebar-close-btn a {color: #fff; font-size: 30px; text-align: right; padding: 10px 0 0; cursor: pointer;}
.sidebar-offcanvas-menu ul.sidebar-menu, 
.sidebar-offcanvas-menu ul.sidebar-menu ul#menu-sidebar-menu-desktop {padding: 0; margin: 0;}
.sidebar-offcanvas-menu ul.sidebar-menu li {display: block; transition: all .3s ease-in; -webkit-transition: all .3s ease-in;}
ul.sidebar-menu li a {color: #000;display: inline-block;text-transform: capitalize; padding: 10px 15px; font-size: 14px;}
ul.sidebar-menu > li {border-bottom: #0000004f 1px dashed;}
ul.sidebar-menu > li > ul > li {border-bottom: #0000004f 1px solid;}
ul.sidebar-menu > li a {position: relative;}
ul.sidebar-menu > li > ul {padding: 0; margin: 0; display: none;}
ul.sidebar-menu > li > ul > li a { padding-left: 25px;}
ul.sidebar-menu > li > ul > li > ul > li a { padding-left: 35px;}

ul.sidebar-menu li.active > a, 
ul.sidebar-menu li:hover > a {color: #58ABB7;}
.sidebar-offcanvas-menu .sidebar-wrapper {position: relative; height: 100%; overflow: auto;}
.sidebar-offcanvas-menu ul.sidebar-menu li.menu-item-has-children {position: relative; }

ul.sidebar-menu li.menu-item-has-children:before {content: '\f107'; font-family: 'FontAwesome';position: absolute; right: 10px; top: 10px; z-index: 1; }
ul.sidebar-menu li.menu-item-has-children:hover:before{content: '\f106';}

/*--offcanvas-css-end--*/

/*--header-css--*/
.main-navbarbox{padding: 15px 0; background: var(--black); position: fixed; left: 0; top:0; z-index:99; width: 100%;}


.mobile-menubtn {display: none; }
.btnmmenu {max-width: 30px; margin: 0 5px 0 auto; display: inline-block; vertical-align: middle; }
.btnmmenu span {width: 30px; height: 2px; background-color: #fff; display: block; margin: 6px 0; }

.logo-boxin {left: 15px;top: -2px;width: 100%;position: relative;}
.logo-boxin a {display:block;max-width: 200px;position: absolute;top: -7px;left: 0;}

.desktop-menuboxin{text-align: right; padding-right: 100px;}
.desktop-menuboxin ul li {position: relative; display: inline-block; border-right: solid 1px #fff;}
.desktop-menuboxin ul li:last-child{border-right: 0;}
.desktop-menuboxin ul li a {display: block; color: var(--white); padding: 7px 15px; font-size: 15px; font-weight: 600; text-transform: uppercase;}
.desktop-menuboxin ul li.active > a,
.desktop-menuboxin ul li:hover > a {color: var(--red)}
.desktop-menuboxin ul li.menu-item ul,
.desktop-menuboxin ul li.menu-item ul li ul{position: absolute; width: 250px; text-align: left;background-color: #fff;z-index: 9999; box-shadow: 3px 0 0 0 rgb(76 88 103 / 20%), -3px 0 0 0 rgb(76 88 103 / 20%);
    -moz-box-shadow: 3px 0 0 0 rgba(76, 88, 103, 0.2), -3px 0 0 0 rgba(76, 88, 103, 0.2);
    -webkit-box-shadow: 3px 0 0 0 rgb(76 88 103 / 20%), -3px 0 0 0 rgb(76 88 103 / 20%);}
.desktop-menuboxin ul li.menu-item ul:before {content: ''; position: absolute; bottom: -3px; left: -3px; right: -3px; height: 3px; background-color: rgba(76, 88, 103, 0.2);
}
.desktop-menuboxin ul li.menu-item ul li ul{left: 100%; top: 0}
.desktop-menuboxin ul li.menu-item ul li{display: block; padding: 0;}
.desktop-menuboxin ul li.menu-item ul li a{font-size: 16px; padding: 10px 15px;}
.desktop-menuboxin ul li.menu-item:hover > ul,
.desktop-menuboxin ul li > ul li.menu-item:hover ul{display: block;}

.desktop-menuboxin ul li > ul .menu-item-has-children > a:after,
.desktop-menuboxin > ul > .menu-item-has-children > a:after {content: '\f0d7'; font-family: 'FontAwesome'; display: block; text-align: center; position: absolute; width: 100%; bottom: -8px; left: 0; opacity: 0;}
.desktop-menuboxin ul li > ul .menu-item-has-children > a:after{content: '\f0da'; top: 10px; left: auto; right: 15px; width: auto;}
.desktop-menuboxin ul .menu-item-has-children:hover a:after{opacity: 1;}
.donate-menu {background: var(--red); padding: 19px 20px 20px; color: var(--white); font-size: 18px; font-weight: 600; position: absolute; right: 0; top: 0px; }

/*--end--*/


.hero-banner{height: 85vh; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.hero-banner h1{font-size: 65px; color: var(--white); margin: 0;display: flex; height: 100%;display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700;}

.bann-sec {overflow: hidden; background-image: linear-gradient(to right, #f00 50%, #000 50%); }
.bann-sec p{margin: 0; padding: 10px 15px; text-align: center; font-size: 40px; color: #fff; font-weight: 600; }


.sec-1{padding: 20px 0;}
.sec-1 p{font-size: 25px; line-height: 35px; font-weight: 600; text-align: center;}

.sec-2 .row{display: flex; flex-wrap: wrap;}
.sec-2 .rgt-text{padding: 100px 30px; color: var(--white); background-color: var(--red);}
.sec-2 .rgt-text h3{font-size: 45px; margin: 0; font-weight: 600; max-width: 500px; font-style: italic;}

.sec-3{padding: 30px 0;}
.sec-3 .sec-heading{text-align: center;}
.sec-3 .sec-heading h3{font-size: 45px; font-weight: 600; margin: 0 0 30px;}
.sec-3 .row{display: flex; flex-flow: row wrap;}
.sec-3 .sec-box{padding: 40px 20px; text-align: center; background-color: var(--red); color: var(--white); height: 100%; display: flex; align-items: center; flex-direction: column;}
.sec-3 .row > div{padding-left: 7px; padding-right: 5px;}
.sec-3 .row > div:nth-child(even) .sec-box{background-color: var(--black);}
.sec-3 .sec-box h4{font-size: 54px; font-weight: 600;}
.sec-3 .sec-box p{font-size: 20px; font-weight: 600;}
 

.sec-4 .row{background-color: var(--red); }
.sec-4 .row{display: flex; flex-wrap: wrap;}
.sec-4 .lft-img{background-repeat: no-repeat; background-size: cover;}
.sec-4 .rgt-text{padding: 150px 30px; color: var(--white); text-align: center; max-width: 700px; margin: 0 0 0 auto;}
.sec-4 .rgt-text h3{font-size: 45px; margin: 0 0 10px; font-weight: 600;font-style: italic;}
.sec-4 .rgt-text a{font-size: 15px; display: inline-block; padding: 10px 25px; color: var(--white); background: var(--black);}

.call-action{padding: 40px 0; text-align: center; background-color: var(--black);}
.call-action h3{color: var(--white); font-size: 36px; font-weight: 400; margin: 0 0 20px;}
.call-action a{font-size: 15px; display: inline-block; padding: 10px 25px; color: var(--white); background: var(--red);}

.newslatter{padding: 50px 0; }
.newslatter .col-md-6{float:none; margin: auto; max-width: 450px;}
.newslatter h5{font-size: 24px; font-weight: 500; color: var(--black);text-align:center;}
.newslatter form label{font-weight: 300; font-size: 18px; color: var(--black); display: block; text-align:center;}
.newslatter form input{border: 0; border-bottom: solid 1px var(--black); box-shadow: none; border-radius: 0;}
.newslatter form button{font-size: 15px; display: block; padding: 10px 25px; color: var(--white); background: var(--red); border: 0; width: 100%;}


footer{text-align: center;background: var(--black); padding: 15px;}
footer p{color: var(--white); margin-bottom: 0;}

.donate-area{max-width: 600px; margin: auto; padding: 30px 15px 150px;}
.donate-area h3{font-size: 32px; font-weight: 600;font-family: 'Oswald', sans-serif; }
.donate-area p{line-height: 27px; margin-bottom: 15px;}

.donateBtn{position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; background: #000; padding: 30px; text-align: center; box-shadow: 0 0 10px #ccc;}
.donateBtn button{background: #ff0000; color: #fff; padding: 15px 70px; font-size: 18px; text-transform: uppercase;}
.donateBtn button:hover{background: #e72727; color: #fff;}

.modal-body label{font-size: 16px; font-weight: 400;}
.modal-body input, .modal-body select{height: 42px; border: solid 1px #ccc; box-shadow: none;}
.modal-body input[type="radio"],
.modal-body input[type="checkbox"]{height: auto;}
.modal-body button{background: #77318e; color: #fff; padding: 10px 30px; font-size: 15px; text-transform: uppercase;border: 0}
.modal-body button:hover{background: #c92688; color: #fff;}


.page-heading {margin-top: 70px; text-align: center; padding: 20px;}
.page-heading h1 {font-size: 58px; font-weight: 700; text-transform: uppercase; margin: 0; }

.accordion-faq{padding: 20px;}
.accordion-faq .accordion-item {margin-bottom: 20px;}
.accordion-faq .accordion-item h4{font-size: 18px;font-weight: 600; color: #e21c21;}
.accordion-faq .accordion-item p{font-size: 18px;font-weight: 500; color: #333;}


.who-sec{margin-top: 60px; padding: 30px 60px;}
.who-sec .container {max-width: 970px;}
.who-sec h1{font-size: 70px; text-align: right; font-weight: 600; margin-top: 0; text-transform: uppercase;}
.who-sec h4{font-size: 30px; font-weight: 600; color: var(--red); margin-bottom: 15px; text-transform: uppercase; }
.who-sec p{font-size: 20px; font-weight: 600; margin-bottom: 30px;}
.who-sec img{margin: 0 0 0 auto; text-align: right; display: block;}


.contact-sec {margin-top: 65px; }
.contact-sec .row {display: flex; flex-flow: row wrap; }
.contact-sec .rgt-col {padding: 0; }
.contact-form {padding: 100px 20px; max-width: 560px; margin: 0 auto; }
.contact-form h3 {margin: 0 auto 10px; text-align: center; font-size: 38px; font-weight: 500; }
.contact-form p {text-align: center; margin-bottom: 30px; font-size: 19px; }
.contact-form form label {font-weight: 400; font-size: 19px; }
.contact-form form input,
.contact-form form textarea{border: 0; box-shadow: none; border-radius: 0; resize:none; border-bottom: solid 1px #000; }

.contact-form form input:hover,
.contact-form form textarea:hover{border-bottom: solid 2px #000;}

.contact-form form .form-btn{text-align: center;}
.contact-form form .form-btn button{font-size: 15px; display: inline-block; padding: 10px 25px; color: #0e2973; background: transparent; border: 0;}
.contact-form form .form-btn button:hover{color: var(--white); background: #0e2973; }


@media (max-width: 1199px){
    .desktop-menuboxin{padding-top: 0;}
    .desktop-menuboxin ul li a{padding: 10px 8px;}
} 


@media (max-width: 991px){  
    /*--header-css--*/
    /*.main-navbarbox{position: relative;}*/
    .desktop-menubox {display: none;}
    .header-btn-in{display: inline-block; padding: 8px 0px;}
    .mobile-menubtn {display: block; vertical-align: middle; text-align: right;}
    .mobile-menubox div.btnbox {width: 40px; text-align: center; height: 33px; margin: 29px 0 0 auto; cursor: pointer;}
    .mobile-menubox div.btnbox span {display: block; width: 34px; height: 2px; background-color: #393939; margin: 6px auto; }
    .logo-boxin a{max-width: 160px;}
    .donate-menu{display: none;}
    .donate-btn{background: var(--red); padding: 7px 20px; color: var(--white); font-size: 15px; font-weight: 600;}
    /*--end--*/

    .hero-banner h1{font-size: 42px; padding: 15px; text-align: center;}
    .bann-sec p{font-size: 30px;}
    .sec-1 p{font-size: 20px; line-height: 30px;}
    .sec-2 .rgt-text h3{font-size: 30px;}

    .sec-3 .sec-heading h3{font-size: 30px;}
    .sec-3 .row{gap: 10px 0; justify-content: center;}
    .sec-3 .sec-box{margin-bottom: 15px;}

    .sec-4 .rgt-text{padding: 100px 20px;}

    .page-heading{padding-bottom: 0px;}
    .page-heading h1{font-size: 24px;}
    .contact-sec{padding-bottom: 30px;}
    .contact-form{padding: 40px 0;}
    .contact-form form label{font-size: 16px;}

    .who-sec{padding: 30px 0;}
    .who-sec h1{font-size: 36px; text-align: center;}
    .who-sec h1 br{display: none;}
    .who-sec img{margin: 30px auto;}
    .who-sec h4{font-size: 24px;}
    .who-sec p{font-size: 16px;}
}  

@media (max-width: 767px){
    p{font-size: 14px;}

    .main-navbarbox .navbar{box-shadow: 0 0 10px #ccc; padding: 10px;}
    .main-navbarbox .navbar-brand{max-width: 150px;}
     
    .hero-banner{height: auto; padding: 100px 0; background-position: center; background-attachment: inherit;}
    .hero-banner h1{font-size: 35px; padding: 15px; text-align: center;}
    .bann-sec{background-image: linear-gradient(to bottom, #f00 50%, #000 50%);}
    .bann-sec p{font-size: 24px;}

    .sec-2 .lft-img{display: none;}
    .sec-2 .rgt-text{padding: 40px 20px; text-align: center;}
    .sec-2 .rgt-text h3{font-size: 24px;}

    .sec-3 .sec-box{max-width: 270px; margin: auto;}
    .sec-3 .sec-box h4{font-size: 36px;}
    .sec-3 .sec-box p{font-size: 18px;}

    .sec-4 .row{display: block;} 
    .sec-4 .rgt-text{padding: 40px 20px;}
    .sec-4 .lft-img{display: none;}
    .sec-4 .rgt-text h3{font-size: 36px;}

    .contact-sec{padding-bottom: 0;}
    .call-action h3{font-size: 24px;}
    .contact-sec .row{display: block;}

    .accordion-faq{padding: 20px 0;}
}