/*
    Theme Name: Riyadh Sustainability
    Description: Riyadh Sustainability Theme 
    Author: Riyadh Sustainability
    Version: 1.0
*/
@font-face {
    font-family: 'Cairo-Bold';
    src: url('fonts/Cairo-Bold.ttf');
}
@font-face {
    font-family: 'Cairo-SemiBold';
    src: url('fonts/Cairo-SemiBold.ttf');
}
@font-face {
    font-family: 'Cairo-Regular';
    src: url('fonts/Cairo-Regular.ttf');
}
html {
  scroll-behavior: smooth;
}
body{
  font-family: 'Cairo-Regular';
}
a{
  text-decoration: none;
}
.form-control:focus , .form-select:focus{
    box-shadow: 0 0 0 .15rem rgb(0 134 61 / 35%);
    border-color: #8bc34a !important;
}
.form-check-input:focus{
    box-shadow: 0 0 0 .15rem rgb(0 134 61 / 35%);
}
.form-check-input:focus , .form-select:focus{
    box-shadow: 0 0 0 .15rem rgb(0 134 61 / 35%);
}
.form-select{
    background-color: #f2f2f2;
    border: 1px solid #c0c0c0;
}
.btn-site{
  background: #6eb81e;
  color: #fff;
  font-family: 'Cairo-Bold';
  padding: 5px 30px;
  font-size: 25px;
  border-radius: 10px;
}
.btn-site:hover{
  background: #009145;
  color: #fff;
}
.btn-site:disabled{
    background: #6eb81e;
    color: #fff;
    font-family: 'Cairo-Bold';
    padding: 5px 30px;
    font-size: 25px;
    border-radius: 10px;
    opacity: 0.5;
    cursor: no-drop;
}
.splash-screen{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    inset: 0;
    background: #f1f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.splash-screen img{
    width: 160px;
    margin-bottom: 10px;
}
.splash-screen .loader{
    width: 25px;
}
.py-70{
  padding-top: 70px;
  padding-bottom: 70px;
}
.py-100{
  padding-top: 100px;
  padding-bottom: 100px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  transition: 0.5s ease;
}
.header .navbar-brand img{
    width: 300px;
}
.header .navbar-nav .nav-link{
    font-size: 17px;
    margin-left: 5px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    color: #fff;
}
.header .navbar-nav .nav-link:hover , .header.sticky .navbar-nav .nav-link:hover{
    color: #6eb81e !important;
}
.header .search img{
    width: 22px;
}
.header .nav-lang a{
    font-size: 18px;
    color: #fff;
}
.header .friend-link{
  color: #fff;
  border:1px solid #fff;
  border-radius: 10px;
  padding: 5px 15px;
  font-size: 18px;
}
.header .friend-link:hover{
  background: #009145;
  color: #fff;
}
.top-header{
    transition: 0.3s;
}
.top-header a {
  border-radius: 20px 50px 50px 20px;
  padding: 5px 5px 5px 20px;
  color: #fff;
  font-family: 'Cairo-SemiBold';
  font-size: 14px;
    width: 170px;
}
.top-header .bg-air{
  background: linear-gradient(90deg, rgba(124,188,0,0.02853641456582634) 0%, rgba(124,188,0,0.24702380952380953) 25%, rgba(124,188,0,0.499124649859944) 50%, rgba(124,188,0,1) 100%);
}
.top-header .bg-nois{
  background: linear-gradient(90deg, rgba(199,73,75,0.02573529411764708) 0%, rgba(199,73,75,0.24702380952380953) 25%, rgba(199,73,75,0.499124649859944) 50%, rgba(199,73,75,1) 100%);
}

.top-header a img{
  width: 30px;
  height: 30px;
}
.header.sticky{
  background: #fff;
  padding-top: 0px;
  box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%);
}
.header .navbar-brand .color , .header.sticky .navbar-brand .white{
  display: none;
}
.header.sticky .navbar-brand .color , .header .navbar-brand .white{
  display: block;
}
.header .navbar-brand .white{
  display: block;
}
.header.sticky .navbar-nav .nav-link{
  color: #333333 !important;
}
.header.sticky .search img{
  filter: brightness(0);
}
.header.sticky .nav-lang a{
   color: #333333 !important;
}
.header.sticky .friend-link{
  color: #333333 !important;
  border:1px solid #333333;
}
.header.sticky .friend-link:hover{
  background: #333;
  color: #fff !important;
}
.navbar-nav .dropdown-menu{
    border-radius: 0;
    border: 0;
    border-top: 4px solid #7cbc00;
    background: #f1f2f2;
    padding-top: 0;
    padding-bottom: 0;
    transition: 0.3s;
    box-shadow: 0px 0px 2px 0px rgb(192 192 192 / 90%);
}
.navbar-nav .dropdown-menu .dropdown-item{
  border-right: 4px solid transparent;
  transition: 0.3s;
}
.navbar-nav .dropdown-menu li{
  border-bottom: 2px solid #d5d7d6
}
.navbar-nav .dropdown-menu li:last-child{
    border-bottom: 0;
}
.navbar-nav .dropdown-item:focus, .navbar-nav .dropdown-item:hover , .navbar-nav .dropdown-item.active:hover{
  background: #f6faed;
  border-right: 4px solid #7cbc00;
  color: #000;
}
.navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active{
    background: #f1f2f2;
    color: #000;
}
.nav-link.dropdown-toggle.show{
  color: #6eb81e;
}
.search-box{
    position: fixed;
    top: -80px;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0px 1px 6px 0px #666;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
    opacity: 0;
}
.search-box.show{
    top: 0;
    opacity: 1;
}
.search-box button{
    font-size: 20px;
    position: absolute;
    top: 0;
    left: -33px;
    height: 40px;
    display: grid;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #198754;
}
.search-box .close{
    position: absolute;
    top: 0;
    right: -26px;
    font-size: 20px;
    color: #fff;
    background: #cc0e00;
    border: 1px solid #cc0e00;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding: 0 10px;
    width: 38px;
    height: 40px;
    display: grid;
    align-items: center;
    justify-content: center;
}
.search-box .close:hover{
    background: #e01e0f;
}
.search-box .form-control{
    border-radius: 0 !important;
    height: 40px;
}
.intro{
    height: 100vh;
    background: #000;
}
.intro .item{
    height: 100vh !important;
    position: relative;
    background-position: 80% 50% !important;
    background-size: cover !important;
}
.intro .video-slider{
    width: 100%;
    position: absolute;
    height: 100%;
    inset: 0;
    z-index: 1;
    object-fit: cover;
}
.intro .intro-text{
  width: 50%;
  position: relative;
  z-index: 2;
}
.intro .intro-text h2{
  color: #fff;
  font-size: 40px;
  line-height: 60px;
  font-family: 'Cairo-Bold';
}
.intro .intro-text p{
    color: #fff;
    font-size: 22px;
    margin-bottom: 5px;
}
.intro .intro-text label{
    color: #fff;
    font-size: 25px;
    font-family: 'Cairo-Bold';
}
.intro-slider .img-fluid{
    position: absolute;
    inset: 0;
}
.intro-slider.owl-carousel .owl-nav button{
  margin: 0 50px;
  position: absolute;
  right: 39%;
  bottom: 43px;
  align-items: center;
  transition: 0.3s;
  z-index: 9;
}
.intro-slider .owl-nav button.owl-next{
    transform: scaleX(-1);
  right: auto;
  left: 39%;
}
.intro-slider.owl-carousel .owl-nav button img{
    width: 50px;
}
.intro-slider .owl-nav button:hover{
    scale: 1.1;
    filter: brightness(0);
}
.intro-slider .owl-dots{
  position: absolute;
  right: 0;
  left: 0;
  bottom: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.intro-slider .owl-dots .owl-dot{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 0 3px;
  transition: 0.3s;
}
.intro-slider .owl-dots .owl-dot.active , .intro-slider .owl-dots .owl-dot:hover{
  background: #6eb81e;
  border: 1px solid #6eb81e;
}
/*.intro .img-mobile{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    display: none !important;
}*/
.about-us{
  background: #f1f2f2;
}
.about-us .about-text{
  width: 57%;
}
.about-us .about-text p{
  color: #666666;
  font-size: 24px;
  margin-bottom: 30px;
  text-align: justify;
  text-transform: capitalize;
}
.about-us .about-text a{
  font-family: 'Cairo-Regular';
}
.about-us img{
  position: absolute;
  height: 95%;
  bottom: 0;
  left: 0;
}
.slider {
  width: 100%;
  height: 75vh;
  display: flex;
  overflow: hidden;
}
.slide {
  min-width: 120px;
  flex: 1 1;
  transition-property: flex-grow, color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
  padding: 1em;
  position: relative;
  cursor: pointer;
    background-position: 0 50% !important;
    background-size: cover !important;
    transition: 0.6s;
}
.slide .content{
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  padding: 15px 35px 15px 15px;
  position: relative;
}
.slide.slide--expanded .content{
    opacity: 1;
    transition: 0.5s;
    visibility: visible;
    color: #fff;
}
.slide .content h2{
    font-family: 'Cairo-Bold';
}
.slide.slide--expanded{
    cursor: inherit;
}
.slide .content h2{
    opacity: 0;
    transition: 0.3s;
    color: #fff;
}
.slide.slide--expanded .content h2{
    opacity: 1;
}
.slide .content p{
    font-size: 20px;
    opacity: 0;
    transition: 0.3s;
    color: #fff;
}
.slide h3{
    font-family: 'Cairo-Bold';
    color: #fff;
    font-size: 25px;
    transition: 0.3s;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    margin: 30px;
    position: absolute;
    left: 10px;
    top: 20px;
}
.slide:hover{
    min-width: 135px;
}
.slide:hover h3{
    transform: rotate(180deg) scale(1.1);
    left: 20px;
}
.slide.slide--expanded h3{
    opacity: 0;
    margin: 0;
}
.slide.slide--expanded p{
    width: max-content;
    max-width: 850px;
    opacity: 1;
}
.slide--expanded {
  flex: 100 1;
}
.display-mobile{
    display: none;
}
.display-mobile .mobile-slide-link{
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-family: 'Cairo-SemiBold';
    display: block;
    padding: 10px;
    border-radius: 10px;
    background-size: cover !important;
}
.display-mobile .modal-content{
    background: none !important;
}
.display-mobile .content-mobile{
    border-radius: 25px;
    background-size: cover !important;
}
.display-mobile .content-mobile h2{
    color: #fff;
    font-family: 'Cairo-Bold';
    font-size: 20px;
}
.display-mobile .content-mobile p{
    color: #fff;
    font-size: 18px;
}
.modal{
    background: rgba(255, 251, 251, 0.19);
    backdrop-filter: blur(3px);
}
.display-mobile .btn-outline-success{
    color: #ffffff;
    border: 2px solid #ffffff;
}
.snapchat .modal-content{
    background: none !important;
}
.content-slider{
    display: none;
}
.content-slider p{
    font-size: 18px;
    color: #666666;
    margin-bottom: 40px;
    text-align: center;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    display: none;
}
.content-slider-1{
    display: block;
}
.mobile-apps{
  background: #f1f2f2;
}
.mobile-apps p{
  font-size: 35px;
  color: #414042;
  font-family: 'Cairo-Bold';
}

.app-block .thumbnail-app{
    width: auto;
    height: 450px;
}

.title{
  color: #414042;
  font-size: 40px;
  font-family: 'Cairo-Bold';
  text-align: center;
  margin-bottom: 50px;
  background: url(images/title-bg.svg) no-repeat;
  background-size: 100%;
  background-position: 0 55%;
}
.title span{
  background: #fff;
  padding: 0 30px;
}

.achievement .slider-achievement .item:before{
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 28%);
    border-radius: 20px;
}

.slider-achievement img{
  height: 600px;
  object-fit: cover;
  border-radius: 20px;
}
.text-achievement{
  position: absolute;
  bottom: 40px;
  right: 40px;
}
.text-achievement h3{
  color: #fff;
  font-size: 35px;
  font-family: 'Cairo-Bold';
  margin-bottom: 30px;
}
.btn-outline-success{
  color: #6eb81e;
  border: 2px solid #6eb81e;
  font-size: 25px;
  font-family: 'Cairo-SemiBold';
  padding: 5px 30px;
  border-radius: 0;
}
.slider-achievement.owl-carousel .owl-nav button{
  color: #6eb81e;
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 45px;
  transition: 0.3s;
}
.slider-achievement.owl-carousel .owl-nav button.owl-next{
  right: auto;
  left: -60px;
}
.slider-achievement.owl-carousel .owl-nav button:hover{
    color: #333;
}
.slider-achievement:hover a{
    color: #fff;
    border: 2px solid #6eb81e;
    background: #6eb81e;
}
.sharing{
    background: #e6e6e6;
}
.sharing .slider-sharing .item a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    margin-bottom: 10px;
    padding: 7px;
    border: 2px solid transparent;
    height: 100px;
}
.sharing .slider-sharing .item a img {
    max-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: auto;
}
.sharing .slider-sharing .item a:hover {
    border: 2px solid #00863d;
}
.sharing .title span{
    background: #e6e6e6;
}
.slider-sharing.owl-carousel .owl-nav button{
  color: #6eb81e;
  position: absolute;
  right: -60px;
  top: 50%;
  font-size: 45px;
  transform: translateY(-50%);
  transition: 0.3s;
}
.slider-sharing.owl-carousel .owl-nav button:hover{
    color: #333;
}
.slider-sharing.owl-carousel .owl-nav button.owl-next{
  right: auto;
  left: -60px;
}
.news-slider .item img{
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: contain;
    border-radius: 30px;
}
.news-slider .item h3 a{
    color: #333333;
    font-size: 30px;
    font-family: 'Cairo-Bold';
}
.news-slider .item p{
    color: #333333;
    font-size: 25px;
    display: inline;
    text-align: justify;
}
.news-slider .item a.more{
    color: #6eb81e;
    font-size: 25px;
}
.news-slider .item a.more:hover{
    color: #28a745;
}
.news-slider.owl-carousel .owl-nav button{
    margin: 0 50px;
    position: absolute;
    right: 50%;
    bottom: 50px;
    z-index: 2;
    transition: 0.3s;
}
.news-slider.owl-carousel .owl-nav button img{
    width: 50px;
}
.news-slider .owl-nav button.owl-next{
    transform: scaleX(-1);
    left: 26%;
    right: auto;
}
.news-slider .owl-nav button:hover {
    scale: 1.1;
    filter: brightness(0);
}
.news-slider.owl-carousel .owl-dots{
  position: absolute;
  right: 59%;
  bottom: 67px;
  display: flex;
}
.news-slider.owl-carousel .owl-dot{
  width: 17px;
  height: 17px;
  background: #c0c0c0;
  border-radius: 50%;
  margin: 0 5px;
  transition: 0.3s;
}
.news-slider.owl-carousel .owl-dot.active{
  background: #00863d;
}
.news-slider.owl-carousel .owl-nav .owl-next i{
  margin-right: 3px;
}
.news-slider.owl-carousel .owl-nav .owl-prev i{
  margin-left: 3px;
}
.form-control{
    background: #f2f2f2;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    color: #414042;
    height: 43px;
    text-align: right;
}
.form-control::placeholder {
  color: #8d8d8d;
}
.form-control::-ms-input-placeholder {
  color: #8d8d8d;
}
.form-contact textarea.form-control{
    height: 155px;
}
.form-contact button{
    background: #6eb81e;
    font-size: 20px;
    font-family: 'Cairo-Bold';
}

.form-contact button:hover{
    background: #018345;
}
.footer{
  padding-top: 70px;
  background: #00863d url(images/back-footer.svg) no-repeat;
  background-size: 62%;
  background-position: 0;
}
.links-footer h3{
  color: #fff;
  font-size: 18px;
  font-family: 'Cairo-Bold';
  margin-bottom: 7px;
}
.links-footer ul li a{
  color: #fff;
}
.links-footer ul li a:hover{
    color: #000;
}

.logo-footer a img{
  height: 90px;
  width: auto;
}
.social-links{
    margin-top: -27px;
}
.social-links ul li a{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00863d;
  font-size: 18px;
  width: 27px;
  height: 27px;
  background: #fff;
  border-radius: 5px;
}
.social-links ul li a:hover{
    background: #333333;
    color: #fff;
}
.copyright{
  background: #4d4d4d;
  margin-top: 50px;
}
.copyright label{
  font-size: 15px;
}
.header.sticky .top-header, .inner-header .top-header{
    background: #333333;
    padding-bottom: 1rem;
}
/*.gap-header{
    margin-top: 82px;
}
*/
.header.inner-header {
    position: sticky;
    background: #fff;
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%);
}

.inner-header .navbar-nav .nav-link ,
.inner-header .nav-lang a{
    color: #333333;
}
.inner-header .search img {
    filter: brightness(0.3);
}
.inner-header .friend-link {
    border: 1px solid #333333;
    color: #333333;
}
.inner-header .navbar-brand .color{
    display: block;
}
.breadcrumb-page{
    background: #00863d url('images/breadcrumb-back.webp') no-repeat;
    padding: 50px 0;
    background-size: contain;
}
.breadcrumb-page a , .breadcrumb-page .breadcrumb-item.active{
    font-size: 18px;
    color: #fff;
}
.breadcrumb-page i{
    font-size: 25px;
    color: #fff;
    line-height: 33px;
}
.breadcrumb-page .breadcrumb-item+.breadcrumb-item::before {
    content: '\f104';
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    margin-top: 2px;
}
.header-page {
    padding: 120px 0;
    background-position: center !important;
    background-size: cover !important;
}
.header-page:after{
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(90deg, rgba(35,31,32,0) 0%, rgba(35,31,32,0.1657913165266106) 50%, rgba(0,0,0,0.1741946778711485) 100%);
}
.header-page h1{
    color: #6eb81e;
    font-size: 50px;
    margin-bottom: 25px;
    font-family: 'Cairo-Bold';
    position: relative;
    z-index: 1;
}
.header-page p{
    color: #fff;
    font-size: 32px;
    margin-bottom: 0;
    font-family: 'Cairo-Bold';
    max-width: 50%;
    position: relative;
    z-index: 1;
}
.content-strategy{
    background: #f1f2f2;
}
.about-program .title span{
    background: #f1f2f2;
}
.about-program p{
    color: #666666;
    font-size: 22px;
    text-align: justify;
    margin-bottom: 30px;
}
.box-statistics{
    background: #378d73;
    border-radius: 40px;
    padding: 37px 30px;
}
.about-program .col-xl-3:nth-child(even) .box-statistics{
    background: #77b37f;
}
.box-statistics img{
    height: 120px;
    width: auto;
}
.box-statistics h3{
    color: #fff;
    font-size: 50px;
    font-family: 'Cairo-Bold';
}
.box-statistics label{
    color: #fff;
    font-size: 35px;
}
.sections-startegy .title-section{
    color: #666666;
    font-size: 25px;
}
.sections-startegy .flip-box {
  width: 100%;
  height: 340px;
  perspective: 1000px;
  display: table;
  margin: auto;
}
.sections-startegy .flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.sections-startegy .flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.sections-startegy .flip-box-front, .sections-startegy .flip-box-back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 25px;
  padding: 15px;
}
.sections-startegy .flip-box .flip-box-front , .sections-startegy .flip-box-back{
    background: #cd9f10;
}
.sections-startegy .flip-box .flip-box-front img{
    height: 60px;
    width: auto;
    margin-bottom: 5px;
}
.sections-startegy .flip-box .flip-box-front h3{
    color: #fff;
    font-size: 19px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 60%);
    height: 66px;
}
.sections-startegy .flip-box-back {
    color: white;
    transform: rotateY(180deg);
}
.sections-startegy .flip-box-back img{
    height: 80px;
    width: auto;
}
.sections-startegy .flip-box-back p{
    color: #fff;
    font-size: 15px;
    padding-top: 15px;
    margin: 15px 0 0 0;
    border-top: 1px solid rgb(255 255 255 / 60%);
    height: 220px;
    text-align: center;
}
.sections-startegy .owl-stage-outer{
    padding: 25px 0;
}
.slider-startegy .owl-item:nth-child(2) .flip-box .flip-box-front,
.slider-startegy .owl-item:nth-child(2) .item .flip-box .flip-box-back
{
    background: #9a1749;
}
.slider-startegy .owl-item:nth-child(3) .flip-box .flip-box-front,
.slider-startegy .owl-item:nth-child(3) .item .flip-box .flip-box-back
{
    background: #39b6e0;
}
.slider-startegy .owl-item:nth-child(4) .flip-box .flip-box-front,
.slider-startegy .owl-item:nth-child(4) .item .flip-box .flip-box-back
{
    background: #01739d;
}
.slider-startegy .owl-item:nth-child(5) .flip-box .flip-box-front,
.slider-startegy .owl-item:nth-child(5) .item .flip-box .flip-box-back
{
    background: #a25618;
}
.slider-startegy .owl-item:nth-child(6) .flip-box .flip-box-front,
.slider-startegy .owl-item:nth-child(6) .item .flip-box .flip-box-back
{
    background: #5aaa30;
}
.slider-startegy.owl-carousel .owl-nav button {
    color: #6eb81e;
    position: absolute;
    right: -40px;
    top: 50%;
    font-size: 30px;
    transform: translateY(-50%);
    transition: 0.3s;
}
.slider-startegy.owl-carousel .owl-nav button.owl-next {
    right: auto;
    left: -40px;
}
.slider-startegy.owl-carousel button.disabled{
    opacity: 0.2;
}
.slider-future .flip-box {
  width: 90%;
  height: 448px;
  perspective: 1000px;
  display: table;
  margin: auto;
}
.slider-future .flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.slider-future .flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.slider-future .flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 20px;
  border-radius: 25px;
}
.slider-future .flip-box .flip-box-front {
    background-size: cover !important;
    display: flex !important;
}
.slider-future .flip-box-back {
    background-color: #5db032;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
.slider-future .flip-box h3{
    color: #fff;
    font-size: 50px;
    font-family: 'Cairo-Bold';
    display: table;
    margin: auto;
}
.slider-future .flip-box-back h3{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
    display: block;
}
.slider-future .flip-box-back p{
    font-size: 18px;
    border-bottom: 1px dotted #fff;
    padding-bottom: 15px;
    margin-bottom: 10px;
    width: 100%;
    text-align: right;
    position: relative;
    padding-right: 20px;
}
.slider-future .flip-box-back p:before{
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 3px;
}
.slider-future .flip-box-back p:last-child{
    margin-bottom: 0;
    border-bottom: 0;
}
.slider-future .owl-nav button{
    width: 50px;
    transition: 0.3s;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}
.slider-future .owl-nav button.disabled{
    display: none;
}
.slider-future .owl-nav button.owl-next{
    left: 0;
    position: absolute;
}
.slider-future .owl-nav button:hover{
    transform: scale(1.2);
}
.slider-future .item{
    padding: 40px 0;
}
.projects-content .title span{
 background: #f1f2f2;
}
.projects-content{
    background: #f1f2f2;
}
.projects-content ol{
    padding: 0;
}
.projects-content ol li{
    background: #e5e7e8;
    color: #666666;
    font-size: 22px;
    border-radius: 15px;
    padding: 16px;
    margin-bottom: 20px;
    list-style-type: none;
    counter-increment: item;
    position: relative;
    padding-right: 85px;
    box-shadow: 5px 5px 5px 0px #d8d8d8;
}
.projects-content ol li:before{
    content: counter(item);
    background-color: #666666;
    color: #fff;
    position: absolute;
    width: 50px;
    height: 30px;
    text-align: center;
    border-radius: 7px;
    line-height: 30px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: Cairo-SemiBold;
}
.projects-page .sharing .title span{
    background: #e6e6e6;
}
.reports-page .card-report .report-img{
    border-radius: 30px;
    border: 1px solid #8d8d8d;
    background: #f0f1f1;
    text-align: center;
    padding: 50px 25px;
}
.reports-page .card-report .report-img img{
    height: 200px;
    width: auto;
    object-fit: contain;
}
.reports-page .card-report h2{
    color: #4d4d4d;
    font-size: 20px;
    font-family: 'Cairo-Bold';
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border: 1px solid #8d8d8d;
    border-top: 0;
    height: 100px;
    display: flex;
    align-items: center;
    padding: 50px 25px 25px 25px;
    margin-top: -25px;
}
.reports-pdf{
    border-radius: 60px;
    padding: 70px;
    background: #f6f6f6;
    text-align: center;
}
.btns-report a{
    font-size: 20px;
}
.btns-report a img{
    height: 30px;
    margin-left: 5px;
}
.months-tab a{
    background: #a7a7a7;
    font-size: 20px;
    border-radius: 10px;
    color: #fff;
    display: block;
}
.months-tab a:hover{
    background: #6eb81e;
    color: #fff;
}
.months-tab a.active{
    background: #00863d;
    color: #fff;
}
.card-event{
    height: 220px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin-bottom: 40px;
    border-radius: 40px;
}
.card-event img.img-fluid{
    height: 220px;
    width: 100%;
    border-radius: 40px;
    position: absolute;
    inset: 0;
    object-fit: cover;
}
.card-event .date-ev{
    position: relative;
    padding: 0 40px;
}
.card-event .date-ev h2{
    font-size: 20px;
    font-family: Cairo-Bold;
    color: #fff;
    line-height: 33px;
    margin-bottom: 10px;
/*    height: 100px;*/
}
.card-event .date-ev label{
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    margin-top: 5px;
    border-top: 1px solid rgb(255 255 255 / 70%);
}
.card-event .color-card{
    position: absolute;
    width: 100%;
    height: 70px;
    background: #cd9f10;
    bottom: -15px;
    right: 0;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    z-index: -1
}
.card-event .color-card.color-1 , .card-event .color-1 p{
    background: #cd9f10;
}
.card-event .color-card.color-2 , .card-event .color-2 p{
    background: #5db032;
}
.card-event .color-card.color-3 , .card-event .color-3 p{
    background: #01749e;
}
.card-event .color-card.color-4 , .card-event .color-4 p{
    background: #8d1542;
}
.card-event .color-card.color-5 , .card-event .color-5 p{
    background: #a55718;
}
.card-event .color-card.color-6 , .card-event .color-6 p{
    background: #3ab9e4;
}
.card-event p{
    position: absolute;
    inset: 0;
    background: #cd9f10;
    font-size: 14px;
    color: #fff;
    font-family: Cairo-Bold;
    padding: 10px;
    align-items: center;
    border-radius: 40px;
    width: 100%;
    height: 230px;
    margin: 0;
    transition: 0.3s;
    display: flex;
    opacity: 0;
}
.card-event:hover p{
    opacity: 1;
}
.event-no{
    display: none;
    color: #414042;
    font-size: 28px;
    font-family: Cairo-Bold;
}
.event-no img{
    height: 188px;
    width: auto;
    max-width: 100%;
    margin-bottom: 10px;
}
.form-label{
    font-size: 20px;
    color: #333333;
    font-family: Cairo-Bold;
}
.share-data-app .form-label span{
    color: #666666;
}
.share-data-app .form-label i{
    color: #d73c46;
    font-style: normal;
}
.share-data-app .form-control{
    background: #f1f2f2;
    border: 1px solid #a7a7a7;
    height: 45px;
    border-radius: 10px;
    text-align: right;
    font-family: Cairo-Bold;
    padding: 10px;
}
.share-data-app textarea.form-control{
    height: 150px;
}
.form-check-label{
    font-size: 18px;
    cursor: pointer;
}
.form-check .form-check-input{
    border: 2px solid #a7a7a7;
    margin-top: 7px;
}
.form-check-input:checked {
    background-color: #7cbc00;
    border:2px solid #00863d;
}
.send-msg{
    background: #f1f2f2;
    border: 1px solid #a7a7a7;
    border-radius: 10px;
    display: none;
    opacity: 0;
    transition: 0.3s;
}
.send-msg.show{
    display: block;
    opacity: 1;
}
.send-msg img{
    display: table;
    width: 40px;
    margin: auto;
}
.send-msg label{
    font-size: 30px;
    color: #333333;
    font-family: Cairo-Bold;
    margin: 20px 0;
}
.send-msg p{
    font-size: 28px;
    color: #333333;
}
.send-msg h5{
    font-size: 25px;
    color: #333333;
    font-family: Cairo-Bold;
}
.card-news{
    border: 1px solid #a5a8aa;
    border-radius: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
    top: 0;
}
.card-news *{
    transition: all 0.3s ease;
}
.card-news:hover{
    border: 1px solid #00863d;
}
.card-news img{
    height: 300px;
    border-radius: 25px;
    border-bottom: 1px solid #a5a8aa;
    width: 100%;
    object-fit: cover;
}
.card-news:hover{
    top: -10px;
}
.card-news h2{
    font-size: 18px;
    font-family: Cairo-Bold;
    height: 80px;
    line-height: 25px;
    overflow: hidden;
    margin-bottom: 0;
}
.card-news:hover h2{
    color: #00863d;
}
.card-news time{
    color: #8d8d8d;
}
.screen-reader-text{
    display: none;
}
.pagination .nav-links{
    display: flex;
    margin-bottom: 60px;
}
.pagination .page-numbers .page-link , .pagination .next , .pagination .prev{
    background: #d9d9d9;
    color: #8b8b8b;
    font-size: 22px;
    border: 0;
    margin: 0 4px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-family: Cairo-Bold;
    border-radius: 7px;
}
.pagination .dots{
    color: #5daf32;
    font-size: 20px;
}
.pagination .next{
    margin-left: 0;
    font-size: 25px;
}
.pagination .prev{
    margin-right: 0;
    font-size: 25px;
}
.pagination .page-numbers.current .page-link ,
.pagination .page-numbers .page-link:hover,
.pagination .next:hover ,
.pagination .prev:hover
{
    background: #5daf32;
    color: #fff;
}
.single-news .title span{
    display: block;
    color: #4d4d4d;
    width: 80%;
    margin: auto;
    font-size: 30px;
    line-height: 40px;
}
.single-news .thumbnail-news img{
    border-radius: 50px;
    max-height: 700px;
    max-width: 100%;
    width: auto;
    margin: 0 auto 20px auto;
    display: table;
}
.single-news .thumbnail-news time , .single-achievement .thumbnail-news label{
    color: #8d8d8d;
    display: block;
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
}
.single-news .post-content p{
    color: #4d4d4d;
    font-size: 20px;
    text-align: justify;
}
.single-news .post-content p a{
    color: #00863d;
    text-decoration: underline;
}
.single-news .post-content p a:hover{
    color: #89c340;
}
.single-news .post-content h3{
    font-size: 20px;
    font-family: Cairo-Bold;
    color: #554d4d;  
}
.single-news .post-content ul{
   padding-right: 20px;
}
.single-news .post-content ul li{
    color: #4d4d4d;
    font-size: 20px;
    list-style: none;
    position: relative;
    margin-bottom: 7px;
}
.single-news .post-content ul li:before {
    content: '';
    background-color: #64c000;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    right: -20px;
    top: 9px;
}
.single-news .post-content img{
    max-width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 30px;
}
.single-news .post-content .wp-block-media-text>.wp-block-media-text__content{
    padding-right: 0;
}
.src-post{
    background: #f4f4f4;
}
.src-post{
    color: #4d4d4d;
    font-size: 20px;
}
.src-post a{
    color: #4d4d4d;
    text-decoration: underline;
}
.single-news .ach-title{
    display: block;
    margin-bottom: 30px;
    color: #8d8d8d;
    text-align: left;
    font-family: 'Cairo-SemiBold';
    font-size: 22px;
}
.app-card{
    border: 1px solid #a7a9ab;
    border-radius: 30px;
    padding: 20px;
    position: relative;
    z-index: 1;
    background: #fff;
}
.app-card img{
    width: 170px;
    height: auto;
    margin-top: -90px;
    object-fit: contain;
}
.app-card .app-info h2{
    color: #4d4d4d;
    font-size: 20px;
    font-family: Cairo-Bold;
}
.app-card .app-info p{
    color: #4d4d4d;
    font-size: 18px;
    text-align: justify;
    overflow: hidden;
}
.single-apps .app-card .app-info p{
    height: auto;
}
.app-card .app-info a{
    font-family: 'Cairo-Regular';
}
.single-apps .app-info img{
    height: 120px;
    width: auto !important;
    object-fit: contain !important;
}
.app-link{
    background: #e6e6e6;
    border-radius: 30px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border: 1px solid #a7a9ab;
    border-top: 0;
    padding: 45px 0 20px 0;
    position: relative;
    top: -25px;
    z-index: 0;
}
.app-link a img{
    width: 160px;
}
.single-apps .app-card img {
    margin-top: 0;
}
.app-info img{
    margin-bottom: 20px;
}
.single-apps .app-card .app-info h2{
    font-size: 26px;
    margin-bottom: 20px;
}

.single-apps .app-card .app-info label{
    color: #4d4d4d;
    font-size: 20px;
    font-family: Cairo-Bold;
    margin-bottom: 20px;
}

.app-link label{
    color: #4d4d4d;
    font-size: 20px;
    font-family: Cairo-Bold;
}

.single-apps .app-card img{
    width: 250px;
    object-fit: contain;
}

.others-apps{
    border: 1px solid #a7a9ab;
    border-radius: 30px;
    padding: 20px 30px;
    background: #f1f2f2;
}
.block-app img{
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 20px;
}

.others-apps h3{
    color: #4d4d4d;
    font-size: 20px;
    font-family: Cairo-Bold;
    border-bottom: 1px solid #a7a9ab;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.block-app h5{
    color: #4d4d4d;
    font-size: 20px;
    font-family: Cairo-Bold;
}
/*.others-apps .block-app:nth-child(even){
    border-bottom: 1px dotted #a7a9ab !important;
}*/

.others-apps a{
    font-family: 'Cairo-Regular';
}
.others-apps .border-top{
    border-top: 1px solid #a7a9ab !important;
}

.friend-page .intro-friend p{
    color: #333333;
    font-size: 20px;
    text-align: justify;
    font-family: Cairo-Bold;
}

.friend-tabs h3{
    color: #018345;
    font-size: 24px;
    margin: 0px 0 8px 0;
    font-family: Cairo-Bold;
}
.friend-tabs h3 img {
    width: 30px;
    height: auto;
}

.header-tabs .nav-tabs .nav-link{
    color: #333333;
    font-size: 20px;
    text-align: center;
    transition: 0.3s;
    border-radius: 0;
    border-top-right-radius: 11px;
    border-top-left-radius: 11px;
    background: #f1f2f2;
    font-family: Cairo-Bold;
    border: 1px solid #b0b0b0;
    border-bottom: 1px solid #00863d;
}
.header-tabs .nav-tabs .nav-link.active{
    background: #1a9250;
    color: #fff;
    border: 1px solid #018345;
}
.header-tabs{
    border-bottom: 2px solid #00863d;
    margin-bottom: 20px;
}

.loadingContact{
    text-align: center;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo-SemiBold';
}

.loadingContact i{
    font-size: 25px;
    margin-left: 5px;
}

.loadingContact i.fa-circle-exclamation{
    color: #c5372f;
}

.loadingContact i.fa-circle-check{
    color: #00863d;
}

.navbar-toggler{
    color: #333;
    font-size: 30px;
    border-color: #fff;
    border-radius: 10px;
    background: #fff; 
}

.header.sticky .navbar-toggler ,
.header.inner-header .navbar-toggler{
    border-color: #333;
}

.loader {
  width: 40px;
  padding: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff0e00;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.page-404 .title{
    background: none;
    margin-bottom: 20px;
}
.page-404 .thumbnail-news img{
    width: 300px;
    border-radius: 0;
}

.contact-us-page .form-div i{
    position: absolute;
    bottom: 34px;
    right: 10px;
    font-size: 25px;
    color: #dadada;
}
.contact-us-page .form-control{
    padding-right: 40px;
}
.contact-us-page i.fa-comment{
    bottom: 67% !important;
}

.file-upload-container {
    background-color: #989898;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
}

.file-upload-container p{
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.file-upload-icon {
    font-size: 20px;
    color: #fff;
    font-family: 'Cairo-SemiBold';
    margin-right: 10px;
}

.file-upload-text {
    color: #fff;
    font-size: 20px;
    flex-grow: 1;
    cursor: pointer;
}

#fileInput {
    display: none;
}

.contact-us-page .wpcf7-spinner{
    display: table;
    margin: auto;
}

.contact-us-page .wpcf7-not-valid-tip{
    position: absolute;
    width: 300px;
}

.contact-us-page p .btn-site{
    border: 0;
    width: 200px;
    transition: 0.3s;
    margin-bottom: 10px;
}

.wpcf7 form .wpcf7-response-output{
    background: #eff0f0;
    border-radius: 15px;
    text-align: center;
    padding: 10px 0 !important;
    margin: 0 !important;
    font-size: 20px;
}

.wpcf7 form.sent .wpcf7-response-output{
    background: url(images/cheked.svg)no-repeat;
    background: #eff0f0 url(images/cheked.svg) no-repeat;
    background-size: 35px;
    background-position: center 10px;
    padding: 60px 0 30px 0 !important;
}

.interactive-map{
    background: #f1f2f2;
    height: 1150px;
}

.interactive-map .title span{
    background: #eeefef;
}

.map-tabs .btn-map{
    background: #a7a7a7;
    color: #fff;
    font-size: 15px;
    border-radius: 13px;
    height: 58px;
    border: 0;
    transition: 0.3s;
}
.map-tabs .btn-map:hover{
  background: #4d4d4d;
}

.map-tabs .col:nth-child(5) .btn-map.active{
  background: #01749e;
}
.map-tabs .col-3:nth-child(6) .btn-map.active{
  background: #cd9f10;
}
.map-tabs .col-3:nth-child(7) .btn-map.active{
  background: #a55718;
}
.map-tabs .col-3:nth-child(8) .btn-map.active{
  background: #00a091;
}
.map-tabs .col-3:nth-child(9) .btn-map.active{
  background: #00863d;
}
.map-tabs .btn-map img{
  height: 28px;
  width: auto;
  border-left: 1px solid #fff;
}

.map-tabs .btn-map span{
  cursor: pointer;
}

.title-map img{
  height: 40px;
}

.title-map{
  font-size: 28px;
  color: #414042;
  position: relative;
    font-family: Cairo-Bold;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.title-map:before{
  content: '';
  position: absolute;
  width: 105px;
  height: 5px;
  background: #3ab9e4;
  border-radius: 5px;
  bottom: 0;
  right: 0;
}

.info-maps{
    width: 50%;
}

.info-maps h3{
  font-size: 20px;
  color: #3ab9e4;
    font-family: Cairo-Bold;
}

.info-maps h3 i{
    font-size: 25px;
}

.data-div{
    margin-bottom: 40px;
}

.data-div img{
    width: 40px;
    height: 40px;
    margin-left: 10px;
    object-fit: scale-down;
}

.data-div label{
  color: #868686;
  display: block;
  font-family: Cairo-Bold;
    font-size: 18px;
}

.data-div span{
  color: #414042;
  font-family: Cairo-Bold;
  font-size: 18px;
}

.info-maps .title-point img{
    width: 25px;
}

.about-sta{
    color: #666666;
    font-size: 18px;
    font-family: 'Cairo-SemiBold';
}

.tooltip{
    background: #414042;
    font-family: 'Cairo-SemiBold';
    font-size: 16px;
    border-radius: 8px;
}

.point{
  cursor: pointer;
}
.st1{
    transition: 0.3s;
}
.st1:hover{
  fill: #474747;
}

.map-img{
  position: absolute;
  top: 0;
  left: 0;
  height: 1150px;
  width: 100%;
  z-index: 1;
}

.map-img svg{
    height: auto;
    width: 100%;
}

.title , .map-tabs , .title-map , .info-maps{
  position: relative;
  z-index: 2;
}
.info-maps{
  display: none;
}
.info-stat-1{
  display: block;
}

.point.active circle , .point.active ellipse{
  fill: #60B8E0;
}

.register-license a img{
    width: 270px;
}


/*Media Css*/

@media (min-width: 1898.9px){
    .slide h3{
        font-size: 33px;
    }
    .slide .content h2{
        font-size: 50px;
    }
    .slide .content p{
        font-size: 28px;
        max-width: 1220px;
    }
    .sharing .slider-sharing .item a {
        height: 130px;
    }
    .links a {
        height: 120px;
    }
    .links a label {
        font-size: 23px;
    }
    .links a img {
        max-height: 100px;
    }
}

@media (max-width: 1500px){
    .intro-slider .owl-nav{
        bottom: 3%;
    }
    .box-statistics h3{
        font-size: 30px;
    }
}

@media (max-width: 1420px){
    .slide.slide--expanded p {
        width: auto;
        max-width: inherit;
    }
}

@media (max-width: 1399.9px){

    .slider-future .flip-box-back p {
        font-size: 15px;
    }
    .box-statistics h3 {
        font-size: 25px;
    }
    .header .friend-link{
        margin-left: 25px;  
    }
    .news-slider.owl-carousel .owl-dots{
        bottom: 16px;
    }
    .news-slider.owl-carousel .owl-nav button{
        bottom: 0;
    }
    .news-slider .owl-nav button.owl-next {
        left: 25%;
    }
    .intro-slider.owl-carousel .owl-nav button{
        right: 32%;
    }
    .intro-slider .owl-nav button.owl-next {
        right: auto;
        left: 32%;
    }
     .header .navbar-nav .nav-item{
        border-bottom: 1px solid #eaeaea;
     }

     .navbar-collapse{
        background: #fff;
        border-radius: 25px;
     }
    .header.inner-header .navbar-collapse {
        border-radius: 0;
        margin-top: 7px;
    }

    .header .navbar-nav .nav-link {
        font-size: 18px;
        color: #333;
        padding: 15px;
    }
    .header .friend-link{
        color: #333;
        margin-bottom: 7px;
        border: 0;
    }
    .search{
        float: left;
        padding-top: 7px;
    }
    .header .search img {
        filter: brightness(0.3);
    }
    .header .nav-lang{
        float: left;
        padding-left: 20px;
        padding-top: 7px;
    }
    .header .nav-lang a {
        color: #333;
    }
    .header .navbar-nav{
        margin-bottom: 15px;
    }
}

@media (max-width: 1351px){

    .header .navbar-nav .nav-link{
        font-size: 16px;
        margin-left: 10px;
    }
    .app-card .app-info h2{
        height: 50px;
    }
    .app-card .app-info p{
        height: 170px;
    }
}

@media (max-width: 1199.9px){
    .about-us .about-text p{
        font-size: 20px;
    }
    .mobile-apps p{
        font-size: 28px;
    }
    .btn-site{
        font-size: 20px;
    }
    .slider-achievement img{
        height: 400px;
    }
    .text-achievement h3{
        font-size: 28px;
    }
    .title{
        font-size: 30px;
    }
    .news-slider .owl-nav button.owl-next {
        left: 18%;
    }
    .news-slider.owl-carousel .owl-dots{
        right: 62%;
    }
    .footer{
        background-size: cover;
    }
    .reports-page .card-report h2{
        font-size: 16px;
    }
}

@media (max-width: 1180px){
    .header .navbar-nav .nav-link{
        font-size: 14px;
        margin-left: 0;
    }
    .intro .intro-text {
        width: 100%;
    }
}

@media (max-width: 1050px){
    .slider-achievement.owl-carousel .owl-nav button ,
    .slider-sharing.owl-carousel .owl-nav button {
        right: -45px;
        font-size: 45px;
    }
    .slider-achievement.owl-carousel .owl-nav button.owl-next ,
    .slider-sharing.owl-carousel .owl-nav button.owl-next{
        right: auto;
        left: -45px;
    }
}

@media (max-width: 1024px){
    .news-slider .item p{
        font-size: 22px;
    }
}

@media (max-width: 991.9px){
    .slide h3 {
        font-size: 20px;
        margin: 15px;
    }

    .slide {
        min-width: 80px;
    }
    .news-slider .owl-nav{
        bottom: -5px;
        left: inherit;
    }
    .news-slider .item img{
        margin-bottom: 15px;
    }
    .about-us img{
        height: 65%;
    }

    .container-lg{
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    .mobile-apps p {
        font-size: 22px;
    }
    .news-slider .item{
        text-align: center;
        margin-bottom: 50px;
    }
    .news-slider .item h3 a{
        font-size: 25px;
    }
    .news-slider .item p {
        font-size: 19px;
    }
    .logo-footer{
        margin: 25px 0;
    }
    .news-slider.owl-carousel .owl-nav button {
        left: auto;
        right: 30%;
    }
    .news-slider .owl-nav button.owl-next {
        left: 30%;
        right: auto;
    }
    .news-slider.owl-carousel .owl-dots {
        right: 45%;
    }
/*    .header.sticky .navbar-brand img {
        width: 90px;
    }*/
    .header-page p{
        max-width: 100%;
    }
    .breadcrumb-page {
        background-size: cover;
    }
    .reports-page .card-report .report-img{
        padding: 20px;
    }
    .friend-tabs h3{
        font-size: 20px;
    }
    .title-apps{
        text-align: center;
        margin-top: 40px;
    }
    .app-card .app-info h2 , .app-card .app-info p{
        height: auto;
    }
}

@media (max-width: 768px){

    .slide .content{
        padding: 10px;
    }
    .slide.slide--expanded p {
        font-size: 18px;
    }
    .news-slider .item h3{
        margin-top: 15px;
    }
    .news-slider .item h3 a {
        font-size: 20px;
    }
    .news-slider .item p , .news-slider .item a.more {
        font-size: 18px;
    }
    .twitter{
        margin: 20px 0;
    }
    .intro .intro-text{
        text-align: center;
        padding: 0 20px !important;
    }
    .intro .intro-text h2{
        font-size: 22px;
        line-height: 40px;
    }
    .intro .intro-text p , .intro .intro-text label{
        font-size: 25px;
    }
    .about-us img{
        position: relative;
        width: 75%;
        height: auto; 
        display: table;
        margin: 0 auto 30px auto;
    }
    .about-us .about-text {
        width: 100%;
        text-align: justify;
    }
    .mobile-apps p {
        font-size: 18px;
        margin-top: 30px;
    }
    .mobile-apps{
        text-align: center;
    }
    .text-achievement h3 {
        font-size: 20px;
    }
    .btn-outline-success{
        font-size: 18px;
    }
    .news-slider.owl-carousel .owl-dots {
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        width: 100%;
    }
    .news-slider .item {
        text-align: center;
        margin-bottom: 35px;
    }
    .news-slider .item {
        margin-bottom: 50px;
    }
    .news-slider.owl-carousel .owl-nav button {
        bottom: -10px;
        right: 25%;
    }
    .news-slider .owl-nav button.owl-next {
        left: 25%;
        right: auto;
    }
    .intro-slider.owl-carousel .owl-nav button{
            right: 25%;
    }
    .intro-slider .owl-nav button.owl-next {
        right: auto;
        left: 25%;
    }
    .about-us .about-text a{
        display: table;
        margin: auto;
    }
    .search-box .close{
        right: -20px;
    }
    .search-box button{
        left: -20px;
    }
    .header-page h1{
        font-size: 40px;
    }
    .header-page p{
        font-size: 25px;
    }
    .box-statistics img{
        height: 70px;
    }
    .box-statistics label {
        font-size: 25px;
    }
    .slider-future.owl-carousel .owl-nav button{
        color: #6eb81e;
        position: absolute;
        right: -20px;
        top: 50%;
        font-size: 60px;
        transform: translateY(-50%);
    }    
    .slider-future.owl-carousel .owl-nav button.owl-next{
        right: auto;
        left: -10px;
    }
    .slider-future .flip-box{
        width: 300px;
        height: 400px;
    }
    .months-tab{
        position: relative;
    }
    .months-tab:after{
        content: '';
        width: 50px;
        height: 100%;
        background: linear-gradient(-90deg, rgba(199, 73, 75, 0.02573529411764708) 0%, rgb(255 255 255 / 25%) 25%, rgb(255 255 255 / 50%) 50%, rgb(255 255 255) 100%);        left: -12px;
        position: absolute;
        left: -15px;
        top: 0;
    }
    .months-tab .row{
        display: grid !important;
        grid-auto-flow: column;
        scroll-behavior: smooth;
        overflow-y: auto;
        overscroll-behavior-x: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .months-tab a{
        width: 120px;
    }
/*    .app-card{
        flex-direction: column-reverse;
        text-align: center;
    }
*/    .single-apps .app-card img{
        display: none;
    }
    .app-info img{
        height: 100px !important;
        display: block !important;
        margin: 0 auto 30px;
    }
    .app-link label{
        margin-bottom: 20px;
    }
    .download_app{
        display: table;
        margin: auto;
    }
    .register-license{
        display: table;
        margin: auto;
    }
    .social-links{
        float: none !important;
        display: table;
        margin: 20px auto 0 auto;
    }   
    .intro .video-slider{
        display: none !important;
    }
    .intro .item{
        background-position: center !important;
    }
    .title{
        font-size: 27px;
    }
}

@media (max-width: 660px){
    .slide {
        min-width: 50px;
    }
    .slide h3 {
        font-size: 18px;
        margin: 5px;
    }
}

@media (max-width: 575.9px){
    .intro-slider .owl-nav {
        bottom: 30px;
    }
    .title {
        font-size: 26px;
        background-position: 0 95%;
        padding-bottom: 15px;
    }
    .title span {
        padding: 0 10px;
        font-size: 24px;
        background: none;
    }
    .sharing .title span , .about-program .title span{
        background: none;
    }

    .btn-outline-success{
        font-size: 20px;
    }
    .slide.slide--expanded p {
        font-size: 16px;
    }
    .slider-future .flip-box h3{
        font-size: 35px;
    }
    .header-page{
        padding: 30px 0;
    }
    .header-page h1{
        font-size: 40px;
        margin-bottom: 15px;
    }
    .header-page p{
        font-size: 25px;
    }
    .content-strategy {
        padding-top: 30px;
    }
    .form-msg .verify img{
        margin: 10px 0;
    }
    .search-box{
        top: auto !important;
        bottom: 0;
        padding: 0 30px;
    }
    .news a.btn-outline-success {
        margin-top: 30px !important;
    }
    .verify input{
        margin: 10px 0;
    }
    .title-contact{
        margin-bottom: 15px !important;
    }
    .logo-footer a img {
        height: 70px;
    }
    .news-slider.owl-carousel .owl-nav button{
        right: 15%;
    }
    .news-slider .owl-nav button.owl-next {
        left: 15%;
        right: auto;
    }
    .about-program .col-xl-3:nth-child(even) .box-statistics{
        margin-top: 40px;
    }
    .box-statistics img {
        height: 150px;
    }
    .box-statistics label {
        font-size: 35px;
    }
    .box-statistics h3 {
        font-size: 50px;
    }
    .sections-startegy .title-section{
        padding-top: 40px;
        text-align: center;
    }
    .slider-future.owl-carousel .owl-nav button{
        right: -10px;
    }    
    .slider-future.owl-carousel .owl-nav button.owl-next{
        right: auto;
        left: -10px;
    }

    .projects-content ol li {
        font-size: 18px;
        padding: 15px;
        margin-bottom: 40px;
        box-shadow: 0px 5px 5px 0px #d8d8d8;
        text-align: center;
    }
    .projects-content ol li:before {
        text-align: center;
        right: 0;
        left: 0;
        top: 0;
        transform: translateY(-50%);
        margin: auto;
    }
    .projects-content ol li:last-child{
        margin-bottom: 0;
    }
    .reports-page .card-report h2{
        justify-content: center;
        text-align: center;
    }
    .reports-pdf{
        padding: 30px;
        border-radius: 40px;
    }
    .card-event{
        height: 250px;
    }
    .card-event img.img-fluid {
        height: 250px;
        width: 100%;
    }
    .send-msg label{
        font-size: 22px;
    }
    .send-msg p {
        font-size: 18px;
    }
    .send-msg h5 {
        font-size: 22px;
    }
    .single-news .title span{
        font-size: 22px;
        line-height: 28px;
        width: 100%;
    }
    .app-card{
        text-align: center;
    }
    .single-apps .app-card .app-info h2 {
        font-size: 22px;
    }
    .header-tabs .nav-tabs{
        display: flex;
        justify-content: center;
    }
    .intro,
    .intro .item{
        height: 100svh !important;
    }
    .mobile-apps .icon-dwon img{
        width: 150px;
    }
    .news-slider.owl-carousel .owl-nav button{
        display: none;
    }

}

@media (max-width: 500px){
    .container-lg{
        padding-left: 1.8rem !important;
        padding-right: 1.8rem !important;
    }
    .slide .content h2 {
        font-size: 22px;
    }
    .slide-tabs .tab-pane a img {
        height: 200px;
    }
    .news-slider .item h3 a{
        font-size: 20px;
    }
    .news-slider .item p{
        font-size: 18px;
    }
    .footer{
        background-size: cover;
        background-position: left bottom;
    }
    .intro-slider .owl-nav{
        bottom: 35px;
    }
    .slider-achievement img {
        height: 280px;
    }
    .text-achievement {
        bottom: 20px;
        right: 20px;
    }
    .logo-footer{
        margin: 15px 0 0 0;
    }
    .copyright {
        margin-top: 25px;
    }
    .slide:hover {
        min-width: 75px;
    }
    .intro-slider.owl-carousel .owl-nav button{
            right: 10%;
    }
    .intro-slider .owl-nav button.owl-next {
        right: auto;
        left: 10%;
    }
    .header-page h1{
        font-size: 25px;
    }
    .header-page p{
        font-size: 18px;
    }
    .breadcrumb-page a, .breadcrumb-page .breadcrumb-item.active {
        font-size: 16px;
    }
    .card-news img {
        height: 200px;
    }
    .app-card .app-info h2{
        font-size: 18px;   
    }
    .app-card .app-info p {
        font-size: 16px;
        text-align: center;
    }
    .single-apps .app-info p{
        text-align: justify;
    }
    .single-apps .app-card img{
        width: 100%;
    }
    .friend-tabs h3{
        text-align: center;
    }
    .form-label{
        font-size: 16px;
    }
    .main-sections .slider .slide{
        display: none !important;
    }
    .main-sections .slider{
        height: auto;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        padding: 0 30px;
        margin-bottom: 30px;
    }
    .display-mobile{
        display: block;
    }
    .title{
        margin-bottom: 30px;
    }
    .btn-outline-success {
        font-size: 16px;
    }
    .inner-slider .content p{
        display: none;
    }
    .content-slider p{
        display: block;
    }
    .inner-slider .slider{
        height: 50vh;
    }
    .inner-slider .slide h3 {
        font-size: 16px;
    }
    .inner-slider .slide .content h2 {
        font-size: 16px;
    }
    .inner-slider .slide{
        align-items: center !important;
        justify-content: center !important;
    }
    .inner-slider .slide .content h2{
        text-align: center;
    }
    .py-70{
        padding-top: 35px;
        padding-bottom: 35px;
    }
    .header-tabs .nav-tabs .nav-link{
        width: 120px;
    }
    .friend-page .intro-friend p{
        font-size: 18px;
    }
    .slider-achievement.owl-carousel .owl-nav button, 
    .slider-sharing.owl-carousel .owl-nav button,
    .slider-future.owl-carousel .owl-nav button{
        font-size: 25px;
        right: -15px;
    }
    .slider-achievement.owl-carousel .owl-nav button.owl-next, 
    .slider-sharing.owl-carousel .owl-nav button.owl-next,
    .slider-future.owl-carousel .owl-nav button.owl-next{
        left: -15px;
    }
    .news-slider.owl-carousel .owl-nav button {
        bottom: -15px;
    }
    .news-slider{
        margin-bottom: 40px;
    }
    .about-us .about-text p {
        font-size: 18px;
    }
    .single-news .title{
        background-position: bottom;
    }
    .single-news .thumbnail-news time, .single-achievement .thumbnail-news label{
        font-size: 16px;
    }
    .slider-future .flip-box{
        width: 100%;
        padding: 0 25px;
    }
    .slider-sharing{
        padding: 0 25px;
    }
    .sections-startegy{
        padding: 0 15px;
    }
    .about-program .title {
        background-position: 0 70px;
    }
    .about-program p,.single-news .post-content p{
        font-size: 18px;
    }
    .intro-slider.owl-carousel .owl-nav button,.news-slider.owl-carousel .owl-nav button{
        display: none;
    }
    .news-slider.owl-carousel .owl-dot,.intro-slider.owl-carousel .owl-dot{
        width: 13px;
        height: 13px;
    }
    .single-news .post-content .wp-block-media-text>.wp-block-media-text__content{
        padding: 0;
    }
    .single-news .post-content .is-layout-flex{
        flex-direction: column;
    }
    .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
        width: 100% !important;
    }
    .single-news .post-content img{
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .card-news h2{
        height: auto;
    }
    .about-us img{
        width: 100%;
    }
    .news-slider .item h3{
        margin-top: 0;
    }
}

@media (max-width: 440px){
    .news-slider.owl-carousel .owl-nav button {
        right: 3%;
    }
    .news-slider .owl-nav button.owl-next {
        left: 3%;
        right: auto;
    }
    .box-statistics img {
        height: 70px;
    }
    .box-statistics label {
        font-size: 30px;
    }
        .box-statistics h3 {
        font-size: 30px;
    }
    .sections-startegy .flip-box-back img{
        height: 45px;
    }
    .sections-startegy .flip-box-back p {
        font-size: 14px;
        padding-top: 10px;
        margin: 10px 0 0 0;
    }
    .breadcrumb-page{
        padding: 30px 0;
    }
    .copyright label {
        font-size: 13px;
    }
    .btns-report a {
        font-size: 14px;
    }
    .btns-report a img {
        height: 25px;
    }
    .single-news .title span{
        font-size: 18px;
    }
    .single-news .thumbnail-news img {
        border-radius: 20px;
    }
    .title{
        margin-bottom: 18px;
    }
    .single-news p{
        font-size: 17px;
    }
    .single-news h3 {
        font-size: 18px;
    }
    .app-link a img {
        width: 120px;
    }
    .friend-page .intro-friend p{
        font-size: 16px;
    }
    .card-event p{
        height: 101%;
    }
    .single-news .thumbnail-news time, .single-achievement .thumbnail-news label{
        margin-bottom: 10px;
    }
    .header .navbar-brand img {
        width: 240px;
    }
}