@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;400&display=swap');
@import url("../fonts/fonts.css");
html, body{
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
    font-size: 100%;
    font-family: 'rangesans-regular', sans-serif;
    font-weight: 300;
    counter-reset: sec-counter;
    color:#333;
}
h1,h2,h3,h4,h5,h6{font-family: 'rangesans-bold', sans-serif;}
p,a{font-family: 'rangesans-regular', sans-serif;}
.rw0{margin-left:0; margin-right:0;}
.lr{
    padding-left:0;
    padding-right:0;
}
:root{
    /*--primary: #00B050;*/
    --primary: #09224A;
    --secondary:#3261CB;
    --pale-yellow: rgba(250, 254, 16, 0.12);
    --dark:#003019;
    --black:#000000;
    --grey:#858585;
    --white:#FFF;
    --pale-green: #E6F7EE;
    --pale-grey: #F6F6F6;
    --purple: #762691;
}
dl, ol, ul{
  margin-top: 1.2rem;
  margin-bottom: 0;
}
.spacer{width:100%; height:1px; padding:2% 0;}
/*-------custom list style----------- */
section ul{margin: 0; padding: 0; margin-left:10px;}
section ul li{list-style: none; margin-top:5px; padding-left:22px; padding-bottom:5px; position:relative; text-decoration: none;display: block;}
section ul li::after{position: absolute; left: 0; top: 5px; color: var(--primary); line-height:0.8; font-size:1.5rem !important; display:block; width:15px; height:15px; content: " "; background-image: url('../../images/right-arrow.png'); background-size:contain; }
/* ------------------- */
.mgt-70{margin-top: 70px;}
/* ----bg colors */
.pri-bg{background-color: var(--primary) !important;}
.sec-bg{background-color: var(--secondary) !important;}
.dark-bg{background-color: var(--dack) !important;}
.pale-green-bg{background-color: var(--pale-green) !important;}
.pale-grey-bg{background-color: var(--pale-grey) !important;}
.pale-yellow-bg{background-color: var(--pale-yellow) !important;}
.black-bg{background-color: var(--black) !important;}
.purple-bg{ background-color: var(--purple) !important;}
.blur-bg{ backdrop-filter: blur(10px);}
.filter-bg{filter: grayscale(1); transition: all 0.5s ease-in-out;}
.filter-bg:hover{filter: grayscale(0.2); transition: all 0.5s ease-in-out;}
/* ----------------- */
/* --text colors--- */
.pri-txt, .primary-text{color: var(--primary) !important;}
.sec-txt, .secondary-text{color: var(--secondary) !important;}
.dark-txt, .dark-text{color: var(--dack);}
.pale-green-txt, .pale-green-text{color: var(--pale-green) !important;}
.black-txt, .black-text{color: var(--black) !important;}
.white-txt, .white-text{color: var(--white) !important;}
.purple-txt, .purple-text{color: var(--purple) !important;}
/* ------------------ */
.header{ position: fixed; top: 0; left:0; width:100%; padding:0; background: var(--white); border-bottom:1px solid #eee; transition: all 0.5s ease-in-out; z-index:99999;}
.header .top{width:100%; background-color: var(--secondary); color: #fff; padding:7px; font-size:0.7rem; margin-bottom:15px;}
/*.header-bg{ background:#797979d6; backdrop-filter: blur(10px); transition: all 0.5s ease-in-out;}*/

.logos{ display:block; max-height:60px; padding:5px 0 0;}
.logos img{ max-height:50px;}
.menu{ font-size:1.1rem; padding:10px 12px; margin:14px 0; border:1px solid var(--primary); border-radius:4px;  color:var(--primary); display: none; cursor: pointer;background: #ccc;}
.navigations{ width: 100%; text-align:left;}
ul.navs{ padding:0; margin:0; position: relative;}
ul.navs li{ list-style: none; display: inline-block;}
ul.navs li a{ display: block; padding:10px 15px; text-decoration: none; color: var(--primary); border-bottom: 5px solid transparent; font-size: 1.3rem; font-weight: 400; font-family: 'rangesans-regular', sans-serif;}
ul.navs li a:hover, ul.navs li a:active{ text-decoration:none; color: var(--secondary); border-bottom: 5px solid var(--primary); transition: all 0.5s ease-in-out;}
ul.navs li div.mega-droped{position: absolute; left:0; margin:0; padding: 10px; background:var(--secondary); display: none; opacity: 0; min-width:250px; width:100%; min-height:200px; transition: all 0.5s ease-in-out; z-index: 999;}
ul.navs li:hover div.mega-droped{ display: block; opacity: 1; transition:all 0.5s ease-in-out;}
div.mega-droped .mega-box{ border:1px solid transparent; font-size: .8rem; padding:10px; margin:5px 0; color: #fff; border-radius: 7px;}
div.mega-droped .mega-box:hover{ border:1px solid #50547a; padding:10px; margin:5px 0; color:#fff; background-color: var(--primary);}
/* ------------------------------------- */

.section{ position: relative; width:100%; padding:4% 10px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.hero-section{ background-color:var(--white); background-position: center; padding:0; background-size: cover; display: block; transition:all 0.9s ease-in-out;}
/* .hero-section::after{position:absolute; bottom:0;right:0; content: ""; width:50%; height:50%; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: right bottom; background-image: url('../../images/parten-4.png')} */
.section-full{ min-height:100%;}
.section-75{ min-height:75%;}
.section-50{ min-height:50%;}
.section-25{ min-height:25%;}

/* ---hero conts ---*/
.hero2-section{height:94vh;}
.hero2-section .hero2-r-cont{position:relative; max-width:100%; height:100vh; z-index:39; background-color:#ddd;}
.hero2-r-cont .hero2-img{position:absolute; left: 5%; top:50%; transform: translateY(-50%); max-width:91%; border-radius: 72% 28% 58% 42% / 31% 50% 50% 69%; animation: rand-border-radius; animation-duration: 5s; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; background-color: #ddd; overflow: hidden; box-shadow: 2px 2px 8px #b7b2b2; transition: all .9s ease-in-out; }
.hero2-r-cont:hover .hero2-img{border-radius: 69% 31% 37% 63% / 77% 49% 51% 23%; transition: all .9s ease-in-out;}
.hero2-section .hero2-l-cont{position:absolute; top: 70%; transform: translateY(-70%); max-width:800px; padding:10px; z-index:69;}
.hero2-l-cont .title{font-size:3.6vw; font-weight:800; font-family: 'rangesans-bold', sans-serif; color:var(--dark); text-shadow:1px 1px 2px #555; line-height:1.1; padding:10px 0;}

.hero-caption{position:absolute; bottom:0; right:0; padding:3%; width: 650px; min-height:350px; background:rgba(140, 140, 140, 0.38); backdrop-filter: blur(10px);}
.caption-txt{color: var(--white); font-size: 1.4rem; max-width:500px;}
.slide-count{ width:40px; display:inline-block; padding: 7px 10px; margin-top:10px; border:1px solid #fff; color:#fff; text-align: center; margin-right:10px; text-decoration:none; cursor: pointer;}

/* ----default btns---- */
.btn-pri, .btn-sec{position:relative; display: inline-block; font-size: 1.2rem; text-align: center; overflow:hidden; padding: 10px 25px; margin:10px 0; text-decoration: none;}
.btn-pri{ border:1px solid transparent; color: var(--white); background-color: var(--primary);}
.btn-sec{border:1px solid var(--secondary); color: var(--white); background-color: var(--secondary); }
.btn-pri:hover{ color: var(--white); background-color: var(--primary);  transition: all 0.5s ease-in-out;}
.btn-sec:hover{ color: var(--white); background-color: var(--secondary);  transition: all 0.5s ease-in-out;}

.btn-pri:after, .btn-pri:before, .btn-sec:after, .btn-sec:after{
    position:absolute;
    top:0;
    left:-120%;
    background-color: rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    content:"";
    transition:all 0.5s ease-in-out;
}
 .btn-pri:before, .btn-sec:before{
    left:120%;
    background-color: rgba(255,255,255,0.6);
}
 
.btn-pri:hover:after, .btn-pri:hover:before, .btn-sec:hover:after, .btn-sec:hover:before{
    left:120%;
    transition:all 0.5s ease-in-out;
}

/*--- head-title ---*/
.title1, .title2, .title3{text-transform: uppercase; font-family: 'rangesans-bold', sans-serif; font-size: 3.5rem; line-height:1.1;}
.title2{  font-size: 3rem;}
.title3{  font-size: 2.5rem;}
.paragraph{padding: 15px 0; font-weight:200; font-size:1.2rem; line-height:1.2; color:var(--dark);}
/* ------------ */
/* -----Inner Banner-------- */
.inner-banner-bg{ position:absolute; top:0; left:0; width:100%; height:100%; transition: all .5s ease-in-out; background-attachment: scroll; background-size: cover; background-position:center; z-index:1}
.inner-banner-bg:before{ position:absolute; top:0; left:0; content:""; width:100%; height:100%; background-image: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.1));  z-index:1;}
.inner-banner-bg:hover{ transition: all 0.5s ease-in-out;}
.inner-banner-title{ position: absolute; bottom: 3%; padding:10px 10px; display: inline-block; min-width:250px; z-index:3;}
.inner-banner-title .tag{ color: var(--primary); text-shadow: 1px 1px 1px #777; text-transform:uppercase; font-size:2rem; margin-bottom:5px;}
.inner-banner-title .title{ color: var(--white); text-shadow: 1px 1px 1px #777; font-family: 'rangesans-regular', sans-serif; font-size:2.7rem;}
/* ------------------------- */
/* ------grid component--- */
.grid-4 { display: grid; grid-template-columns: 25% 25% 25% 25%;}
.grid-3 { display:grid; grid-template-columns: auto auto auto;}
.grid-2 { display: grid; grid-template-columns: auto auto;}
.grid-1 {display: grid; grid-template-columns: auto;}
.grid-item { position:relative; padding: 10px; box-shadow: 0px -5px 6px #ddd; border:1px solid #eee; border-radius: 15px; min-height:250px; margin:25px 13px; background-color: var(--white); text-wrap: wrap; transition: all 0.5s ease;}
.grid-item:hover{ background-color: var(--pale-green); transition: all .5s ease;}
.grid-item:nth-child(even) {  box-shadow: 2px 4px 6px #ddd;}
.grid-item .content{ font-size:1.4rem; color:var(--dack); line-height:1.3; padding: 0 15px; position: absolute; top: 50%; transform: translateY(-50%);}
.grid-item::after{ position:absolute; top: -27px; left: 50%; transform: translateX(-50%); font-family: 'rangesans-regular', sans-serif; width:60px; height:60px; line-height:50px; counter-increment: sec-counter; content: counter(sec-counter); border:6px solid var(--primary); color: var(--primary); font-size: 1.7rem; font-weight: 700; border-radius: 50%; background-color: var(--white); text-align:center;}
.grid-item:nth-child(even):after{position:absolute; top: 87%;}
.grid-item::before{ position: absolute; top: 52%; left:-15px; content: ""; width:110%; height:54%; border:25px solid var(--primary); border-top: 22px solid transparent; border-radius: 0 0 20px 20px; z-index: -1;}
.grid-item:nth-child(even):before{ position: absolute; top: -15px; left:-15px; content: ""; width:110%; height:59%; border:20px solid var(--primary); border-bottom: 20px solid transparent;  border-radius: 20px 20px 0 0;  z-index: -1;}
/*--------------- */
/* -------grid images-------- */
.gid-img{width:100%; display: block; height:300px; background-color: #444; margin-bottom: 15px; background-position:center; background-size: cover;}
/* -------left-border component--------- */
.left-border{display:grid; grid-template-columns: 25% 25% 25% 25%; margin-top:20px;}
.left-border .inner-item{position:relative;max-width:350px; padding: 20px 25px 30px; margin-bottom:10px; border:1px solid #eee; transition: all 0.6s ease-in-out;}
.left-border .inner-item .numbers{color: var(--primary); font-size: 3rem; line-height:1.2; font-family: 'GothamPro-Medium', sans-serif;}
.left-border .inner-item .content{font-size:1.3rem; font-family:'GothamPro-Medium', sans-serif; margin:10px 0; line-height:1.2; color:var(--dark); padding-top:15px;}
.inner-item::after{position:absolute; top:0; left: 0; content: ""; width:2px; height:100%; background-color: var(--primary);}
.inner-item::before{position:absolute; top:50%; left: 2px; transform: translateY(-50%); content: ""; border:5px solid transparent; border-left:5px solid var(--primary);}
.left-border .inner-item:hover{box-shadow: 4px 3px 16px #ddd; transition: all 0.6s cubic-bezier(.68,-0.55,.27,1.55);}
/* -------------------- */
.img-feature{position: relative; width: 100%; min-height: 600px; background-color: #00000029; background-position: center bottom; background-blend-mode: multiply; background-size: cover; box-shadow: 13px 14px 0 var(--primary); transition:all 0.5s ease-in-out;}
.img-feature:hover{box-shadow: 18px 20px 0 var(--primary); transition: all 0.5s ease-in-out;}
/* ----------grey feature ---------- */
.grey-feat{
    font-family: 'Open Sans', sans-serif;
    padding:10%;
    background-color: #ddd;
    background: radial-gradient(ellipse at top, #d1d1d1, #919090), radial-gradient(ellipse at bottom, #ccc, #858585);
    min-height:250px;
    color:#fff;
    transition: all 0.9s cubic-bezier(.05,.7,.93,.48);
    margin-bottom: 10px;
}
.grey-feat h3{font-weight:700; line-height:1; padding:5px 0;}
.grey-feat .icon{padding: 5px 0 10px;}
.grey-feat .icon img{height:50px;}
.grey-feat:hover{
    background: radial-gradient(ellipse at top, #ccc, #575656), radial-gradient(ellipse at bottom, #d1d1d1, #686767);
    transition: all 0.9s cubic-bezier(.05,.7,.93,.48);
}
.line-link{text-decoration: none; padding: 8px; border-bottom: 1px solid #555; color:#555; font-size:1.2rem; display: inline-block;}
.feat-bg-img{
    min-height:400px; background-color: #ddd;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    margin-top: 20px;
    transition: all 0.8s ease-in-out;
}
.feat-bg-img:hover{background-size: 110% 110%; transition: all 0.6s ease-in-out;}
.feat-bg-img .btm-cptn{
    position:absolute; bottom: 0; left:0; width: 90%; padding: 20px;
    background-color: var(--primary);
    color: var(--secondary); font-size: 1.2rem; line-height: 1.2;
    font-weight: 500;
    background-size: 60px 100%;
    background-position:right;
    background-repeat: no-repeat;
    background-image: url('../../images/mask.png');
    transition: all 0.8s ease-in-out;
}
.feat-bg-img:hover .btm-cptn{left:10%; transition: all 0.6s ease-in-out;}
/* ----------------------------------------- */
/* --------Statistica component----------- */

/* ---------partners component----------- */
.card-box{padding:20px; margin:10px 15px; background-color: var(--pale-grey); border-radius: 7px; text-align: center; border:1px solid #eee; transition: all 0.8s ease;}
.card-box:hover{box-shadow: 4px 4px 16px #ddd; transition: all 0.8s cubic-bezier(.68,-0.55,.27,1.55);}
.card-box .img{display:flex; align-items: center; background-color:var(--white); height:120px; overflow:hidden; padding:15px 10px; text-align:center; border-radius:6px;}
.card-box .img img{max-height: 80px; max-width: 90%; margin: auto; width: auto;}
.card-box .title{padding: 10px; font-size: 1.3rem; font-family: 'GothamPro-Medium', sans-serif; color: #777;}
.card-box .body{padding: 5px 10px 10px; font-size: 0.8rem; color: #777;}
/* -------------------------------- */
/*---------Team feature------*/
.team{position:relative;}
.team .team-box{position:relative; transform: scale(1); max-width:300px; margin: 0 auto; margin-top: 10px; border:1px solid transparent; border-radius:7px; overflow:hidden; transition: all 0.5s ease; z-index:1;}
.team .team-box:hover{transform: scale(1.05); z-index: 3; background: #f6f6f6; transition: all 0.5s ease;}
.team-box .img{background-color: var(--pale-grey); height:300px; width:100%; background-size:cover; background-position: top center; background-repeat: no-repeat; overflow:hidden; display: flex; align-items: end;}
.team-box .img img{max-width:80%; margin: 0 auto;}
.team-box .name{color: var(--dark); font-size: 1.2rem; padding:5px 8px 2px; font-weight: 500;}
.team-box .title{color: var(--grey); font-size:0.85rem; line-height:1.1; padding:2px 8px 15px;}
.team-box .img .team-captn{position:relative; width:100%; font-weight:500; background-color: #d6d2d2c2; backdrop-filter: blur(4px); padding:10px; bottom:-110%; transition: all 0.8s ease; font-size: 0.75rem;}
.team-box:hover .team-captn{position:relative; bottom:-1px; transition: all 0.5s ease;}
/* -------------------------------------- */
/* -----------------News feature------------- */
.news-list{position: relative; display: block; text-decoration: none; position:relative; width:100%; border: 0.05rem solid #fcf9f9; box-shadow: 2px 2px 4px #f1f1f1; text-decoration: none; padding: 15px 15px 40px; margin: 10px 0; transition: all .5s ease-in-out;}
.news-list::after{position:absolute; content: ""; bottom:0; left:0; width:100%; height:5px; background-image: linear-gradient(to right, #D5E618 33.3%, #56a08e 33.3%, #56a08e 66%, #005f49 66%, #005f49 100%)}
.news-list .title{font-size: 1.4rem; line-height:1.1; color: var(--primary); padding:10px 0; margin-top: 0px; font-weight: 700;}
.news-list:hover .title{color: var(--primary);}
.news-list .date, .news-list .category{font-size: 0.6rem; color: var(--grey); line-height:1; text-transform: uppercase;display: inline-block; margin-top:0;}
.news-list .thumbnail{width:100%; height: 200px; background-color: var(--grey); background-position: center; background-size:cover; margin:10px auto;}
.news-list .sub-cont{color: var(--grey); font-size:1rem;}
/* --------------newsleter component--------- */
.newsletter{position: relative; width:100%; display: block;}
.newsletter .inner{position: relative; padding:1px;}
.newsletter .inner .title{font-size:1.3rem; font-weight:600; color: var(--white); line-height: 1.1;}
.newsletter .inner .tag{font-size:0.9rem; color: var(--white); line-height: 1;}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {position: absolute; padding: 6px; right: 2px; z-index: 999;}
.newsletter-btn{ background-color: var(--secondary); color: var(--primary); border-radius: 25px; border-color: transparent; padding: 4px 12px; text-transform: uppercase; z-index:999;}
.newsletter-btn:hover{ background: var(--dark); color: var(--white); border-color: transparent;}
.input-group > .newsletter-form{color:#ddd !important; border-radius: 0; border-top-right-radius: 0; background-color: var(--primary); border-bottom-right-radius: 0; border-color: #7DB38D; z-index: 1;}
.input-group > .newsletter-form:focus {background-color: var(--primary);}
/* ------------------------------------------ */
/* -----Event List--------------------------- */
.event-list-ftr{position:relative; width:100%; padding: 5% 10% 10%; margin: 7px 0; border-radius:15px; background-color: var(--pale-grey); color: var(--dark); background-position: center; background-size: cover; overflow:hidden;}
.event-list-ftr .content{ position: relative; display: block; max-width: 300px; min-height:250px; z-index: 5;}
.event-list-ftr .content .title{position: relative; color:var(--primary); font-size:1.5rem; line-height:1.1; padding:30% 0 10px; font-family: 'GothamPro-Medium';}
.event-list-ftr .content .event-btn{text-decoration: none; cursor:pointer; display: inline-block; color: var(--white); border:1px solid #fff; padding:7px 10px; text-align:center; margin:10px 0; transition: all .5s ease-in-out;}
.event-list-ftr .content .event-btn:hover{text-decoration: none; display:inline-block; cursor:pointer; color: var(--white); background-color: var(--purple); border:1 solid var(--purple); transition: all .5s ease-in-out;}
/*-----------skin------------*/
.pale-purple-skin{position:absolute; top:0; left:0; width:100%;height:100%; background: linear-gradient(to right, #762691ad 5%, transparent); z-index: 1;}
/* ----------------------------------------- */
/* ------------cat-list------- */
.cat-list{display:block; text-align:center; margin:10px auto 5%; padding:0;}
.cat-list ul{margin: 0; padding: 0;}
.cat-list ul li{list-style: none; margin: 5px; display: inline-block; min-width:250px;}
.cat-list ul li a, .cat-list ul li label{text-decoration: none; display:block; cursor:pointer;  min-width:200px; border:1px solid #eee; font-size: 1.3rem; font-family: 'GothamPro-Medium', sans-serif; padding:15% 20px; text-align: center; color:var(--grey); background-color: var(--pale-grey); border: 1px solid var(--pale-green); border:1px solid #eee; border-radius: 5px;}
.cat-list ul li label{ min-width:180px;  padding:12% 20px;}
.cat-list ul li input[type=radio]{opacity:0; position:absolute;}
#donate:checked~.lebo, .cat-list ul li #sponsor:checked~.lebo, .cat-list ul li #mentorship:checked~.lebo{ background-color: rgb(201, 201, 201);}
.cat-list ul li a:hover{ background-color:rgb(201, 201, 201);}
/* --------------------------- */
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.f-nav-bar, .f-nav-bar-gry{ display: inline-block; text-decoration: none; padding:10px 20px 14px; background: #EC6608; color:#fff; font-size:1rem; text-decoration:none;}
.f-nav-bar-gry{ background:#F5F5F5;  color:#07C59F;}
.f-nav-bar:hover, .f-nav-bar-gry:hover{ text-decoration:none; color:inherit;}
.frm-title{ padding:10px 0; color:#EC6608;}
.form-control { font-weight: 400; line-height: 1.5; color: #333; background-color: #ddd; background-clip: padding-box; border: 1px solid #d2f5d2; border-radius: 0; transition: border-color 0s ease-in-out,box-shadow 0s ease-in-out; padding: 8px 20px 10px; background-color: #d8f0ff;}
.form-control:focus { color:#495057; background-color:#fff; border-color:#80bdff; outline:0; box-shadow:0 0 0 0 rgba(0,123,255,0) }
.submit-btns{ padding-top: 30px; margin-bottom:20px;}
.submit-button{margin: 20px auto; background-color: var(--secondary); color: var(--primary); font-size: 0.9rem; font-weight:600; padding: 10px 20px; border-radius: 0; display: block; width: 100%;}
.submit-button:hover{background-color: #b6b6b6;}
.lgn-rgt{ text-align:right;}
/*------------footer-------------*/
.footers{width:100%; padding:3% 10px 1px;}
.ft-widget{color: var(--white); padding:10px 15px;}
.ft-widget .title{font-size:1.3rem; font-weight:600; color: var(--white); line-height: 1.1; padding:10px 0;}
.footers img{max-height:60px; padding:1px 0 10px;}
.ft-widget ul{ padding:0; margin: 0;}
.ft-widget ul li{ list-style: none; display: block;}
.ft-widget ul li a{ display: block; text-decoration: none; color: var(--white); font-size: 1rem; padding: 6px 5px;}
.ft-widget ul li a:hover{ color: var(--secondary);}
/* -------------//------------- */

/* ------Popme up ----- */
.popup-wraper{  position:fixed;  top:0; left:0;  width:100%;  height:100%;  background: rgba(0,0,0,0.6); z-index: 9999;  overflow: auto;  transition: all 0.5s ease-in-out;  display: none;}
.popup-box{  position:relative; left:50%;  transform: translateX(-50%); background:#fff;  border-radius: 6px; color:#000;  padding:30px 30px;  margin:40px 0;  max-width:700px; transition: all 0.8s ease-in-out;}
.popup-box h3{font-size:1.6rem; padding:7px 0;}
.popup-box h4{font-size:1.2rem; font-weight:700; padding:7px 0;}
.popup-box h5{font-weight:600; padding:7px 0;}
.popup-box ol li{ line-height:1.4; font-size:1.05rem;}
.popup-box p{line-height:1.2; padding:7px 0;}
.pop-it{  left:50%;  transition: all 0.7s ease-in-out;}
/* -------------- */
.onesha{display: block !important;}
/* ------------ */
/* -----search box----- */
.search-box{position:relative; margin-top:15px;}
.search-body{display:none; position:absolute; top:55px; left:0; padding:10px; max-height:350px; width: 100%; border:1px solid #eee;  border-radius:5px; background:#fff; box-shadow:1px 1px 6px #111;}
.search-body:before{position:absolute; top:-7px; left:20%; width:15px; height:15px; background:#fff; border:1px solid #eee; border-right-color:transparent; border-bottom-color: transparent; content:""; transform: rotate(45deg);}
.serch-result{ max-height:330px; overflow-y: auto;}
.search-btn{border-color: var(--primary); border-right: 1px solid transparent; border-right-color: transparent; color: var(--primary); border-radius: 20px 0 0 20px;  border-top-right-radius: 0px;  border-bottom-right-radius: 0px;}
.search-input, .search-input:focus{ color: var(--primary); border-color: var(--primary); border-left: 1px solid transparent; border-left-color: transparent; border-radius: 0 20px 20px 0; border-top-left-radius: 0px;  border-bottom-left-radius: 0px;}
/* ------------CTA BOX------------ */
.cta-box{position:relative; background-color: var(--primary); padding:6% 4%; border-radius: 10px;background-position: bottom right; background-size: 50%; background-repeat: no-repeat;}
.cta-box .title{font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color:var(--white); margin-bottom: 5px;}
.cta-btns{position:relative; text-decoration: none; margin: 5px 5px 0 0; display: block; font-size: 1.1rem; font-weight: 600; color: var(--primary); margin-bottom:10px; transform: scale(1); transition: all 0.5s ease-in-out;}
.cta-btns img{height: 50px;}
.cta-btns:hover{height: 50px; transform: scale(1.02); transition: all 0.5s ease-in-out;}
.qr-code{display:block;}
/* ------------------------------- */
.footer-contact{margin:0 auto; padding:1% 1px; color:#fff;}
.footer-contact a{text-decoration: none; color:inherit;}
.social{ padding:10px 0; margin-top:10px; display:inline-flex;}
.social a{text-decoration: none; color:var(--white); padding:1px 10px; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; margin-right:10px; display:block; font-size:1.1rem; transition: all .5s ease-in-out; }
.social a:hover{text-decoration: none; background-color:var(--dark); color: var(--white); transition: all .5s ease-in-out; }
/* ------------------ */
.bottom-footer{padding:20px; color: #ddd; background-color: #173465;}
.bottom-footer .span-r{text-align: right; display: block;}
/* ------------------ */
.prog_title{text-shadow: 1px 1px 2px #333; font-size: 3.7vw; font-family: 'GothamPro-Bold', sans-serif; line-height: 1.1;}
/*----------accodions-----------*/
.accordion-flush .accordion-item{
    margin: 20px 0;
    border: 1px solid #f1f0f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 3px 3px 5px #ddd;
}
.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: #f6f6f6;
    box-shadow: none; 
}
/*--------------*/
/*----------client-logos----------*/
.client-logo{ display: flex; align-content: center; height: 80px; padding:10px; align-items: center;}
.client-logo img{ margin:0 auto; max-height:100%;}
/*--------------------------------*/
.report-list {
    border-radius: 15px;
    box-shadow: 2px 2px 5px #eee;
    margin:7px 0;
    padding:10px;
}
.center-div{
    height:100%;
    align-content:center;
    text-align:center;
}
/*----table bg color modified-----*/
.table > :not(caption) > * > * {
  padding: .5rem .5rem;
  color: inherit;
  background-color: transparent;
}
  /*---------------------*/
/* -----Keyframe animations---- */
@keyframes rand-border-radius {
    0% {
        border-radius: 72% 28% 58% 42% / 31% 50% 50% 69%;
        animation-delay: 11s;
    }
    50% {
        border-radius: 65% 35% 54% 46% / 55% 60% 40% 45%;
        animation-delay: 15s;
    }
    75% {
        border-radius: 54% 46% 62% 38% / 43% 56% 44% 57%;
        animation-delay: 18s;
    }
    100% {
        border-radius: 72% 28% 58% 42% / 31% 50% 50% 69%;
        animation-delay: 21s;
    }
} 
/* ============================ */

@media(max-width:1390px){
    .hero-section{min-height:500px;}
}

@media(max-width:992px){
    .hero-section, .hero-section:hover{  background-size: cover;}
    .hero-section .hero-r-cont { position: relative; height: 70vh;}
    .hero-l-cont .title {font-size: 2.4rem;}
    /* ------grid component--- */
    .grid-4 { display: grid; grid-template-columns: auto auto;}
    .grid-3 { display:grid; grid-template-columns:  auto auto;}
    .grid-2 { display: grid; grid-template-columns: auto;}
    .grid-1 {display: grid; grid-template-columns: auto;}
    /* ----------- */
    .paragraph {font-size: 1rem;}
}

@media(max-width:768px){
    .header { padding: 5px 0;}
    .header .top{display:none;}
    .menu{ display: inline-block;}
    .navigations{ position: fixed; top: 0; left: -280%;  width: 80%; min-height:100vh; text-align:left;  background:#3261cd; backdrop-filter: blur(10px);  padding:20px; display:block; transition: all 0.5s ease-in-out; overflow-y:auto; z-index: 9999;}
    .shownav{left: 0; transition: all 0.5s ease-in-out;}
    ul.navs li{ display: block;}
    ul.navs li a{ display: block; padding:12px 10px; color:#fff;}
    ul.navs li ul, ul.navs li:hover ul{ position: relative; display: block; opacity: 1; top:0;}
    .hero2-section{height:73vh;}
    .hero-section .hero-l-cont { position: relative; top: 50%; transform: none;}
    .hero-l-cont .title, .hero2-l-cont .title{ font-size: 2.5rem;}
    .hero-section .hero-r-cont { position: relative; height: 70vh;}
    .left-border .inner-item .numbers { font-size: 3rem;}
    .left-border .inner-item .content { font-size: 1.1rem; padding-top:15px;}
    .inner-item:first-child::after{ background-color: var(--primary);}
    .inner-item:first-child::before{ border-left:5px solid var(--primary);}
    .features{display: block;}
    .flex-box{display: block;}
    /* ------grid component--- */
    .grid-3 { display:grid; grid-template-columns: auto;}
    /* ------------- */
    .register-head{ margin-top:0;}
    .submit-btns{ padding-top: 0; margin-bottom:20px;}
    .inner-banner-title .title { font-size: 6.5vw;}
}

@media(max-width:480px){
    .logos{ padding:15px 0;}
    .logos img{ max-height:40px;}
    .hero2-section{height:65vh;}
    .hero-l-cont { position: absolute; top: 30%; transform: translateY(-30%); max-width: 400px; z-index:69;}
    .hero-r-cont{z-index: 39;}
    .hero-l-cont .title { font-size: 2rem;}
    .hero2-l-cont .title{font-size:2rem;}
    .hero-l-cont .caption, .hero2-l-cont .caption { font-size: 1.2rem;}
    .left-border .inner-item{background-color: var(--pale-green);}
    .left-border { grid-template-columns: 100%;}
    .popup-box{ position:relative; top:0%; left:50%; transform: translateX(-50%);}
    /* ------grid component--- */
    .grid-4 { display: grid; grid-template-columns: auto;}
    .newsletter .inner .title {font-size: 1.3rem;}
    .cat-list ul li{min-width:100%;}
    .top-statistic {background: linear-gradient( to right, #f0f0f0 0%, #f0f0f0 50%, #f0f0f0 50%, #f0f0f0 100%);}

    .hero-caption{width: 100%; min-height: 50px;}
    .caption-txt{ font-size: 1rem;}
    .btn-pri, .btn-sec {font-size: 1rem; padding: 2px 10px; margin: 5px 0;}
    .slide-count { width: 30px; display: inline-block; padding: 2px 10px; margin-top: 5px; margin-right: 2px;}
    .inner-banner-title .title { font-size: 6.5vw;}
    .gid-img { height: 180px;}
    .title1, .title2, .title3 {font-size: 2.5rem;}
    .bottom-footer{font-size: 0.7rem;}
    .cta-btns img {height: 40px;}
    .qr-code img{height:100px;}
    .table-bordered > :not(caption) > * {font-size: 11px;}
}