/* @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
/* @font-face {
  font-family: ltbukraregular;
  src: url("../fonts/29ltbukraregular.otf");
} */



:root {
  scroll-behavior: smooth;
}
/* //////////////////////////////// */


html {
  scroll-behavior: smooth;
}

*{
  /* font-family: "ltbukraregular" ; */
  /* font-family: "Almarai", sans-serif; */
   font-family: "Tajawal", sans-serif !important;
  /* font-family: "Bebas Neue", sans-serif;
  font-style: normal; */
}

body{
  position: relative;
  min-height: 100dvh;
  /* background-color: #F5F5F5; */
  /* background-color: #f8f8f8; */
}



@media (max-width: 1200px) {
  .\!container {
    max-width: 90% !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }

  .container {
    max-width: 90%;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

/* Hero Slider Styles */
.heroSwiper {
  height: 100%;
  width: 100%;
}

.heroSwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: max-content;
  margin-top: 15px;
}

.heroSwiper .swiper-slide h1 {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.8s ease;
}

.heroSwiper .swiper-slide p {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.8s ease 0.2s;
}

.heroSwiper .swiper-slide .btnHero {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.8s ease 0.4s;
}

.heroSwiper .swiper-slide img {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.8s ease 0.3s;
}

.heroSwiper .swiper-slide-active h1,
.heroSwiper .swiper-slide-active p,
.heroSwiper .swiper-slide-active .btnHero,
.heroSwiper .swiper-slide-active img {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Pagination with Vertical Line Design */
.hero-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero-pagination-container {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-vertical-line {
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

.hero-pagination-bullet {
  transition: all 0.3s ease;
  opacity: 0.6;
  font-size: 20px;
  position: relative;
  z-index: 2;
  padding: 0.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  position: relative;
  cursor: pointer;
}
.hero-pagination-bullet::after{
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #fff;
  left: 0;
  transition: all .3s ease;
}
.hero-pagination-bullet:hover {
  opacity: 1;
}

.hero-pagination-bullet.active {
  opacity: 1;
}
.hero-pagination-bullet.active::after{
  width: 4px;
  left: -1px;
}

.hero-prev-btn,
.hero-next-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background-color: transparent;
}

.hero-prev-btn-h,
.hero-next-btn-h {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background-color: transparent;
}

.hero-prev-btn:hover,
.hero-next-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}
.heroNavArrowsH{
  /* display: none; */
  justify-content: start;
}
[dir="rtl"] .heroNavArrows{
  flex-direction: row-reverse;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hero-controls {
    right: 1rem !important;
    transform: translateY(-50%) scale(0.8);
  }
  
  .hero-pagination-container {
    display: none;
  }
  .heroNavArrowsSide{
    display: none;
  }
  .heroNavArrowsH{
    display: flex;
  }
  .heroNavArrows{
    justify-content: start;
  }
  .hero-prev-btn-h,
  .hero-next-btn-h {
    width: 40px !important;
    height: 40px !important;
  }
  
  .hero-vertical-line {
    bottom: 12px;
  }
}

@media (max-width: 480px) {
  .hero-controls {
    transform: translateY(-50%) scale(0.7);
  }
  
  .hero-pagination-container {
    min-height: 160px;
  }
  
  .hero-pagination {
    gap: 1rem;
  }
  
  .hero-pagination-bullet {
    font-size: 12px;
    width: 30px;
    height: 30px;
  }
  
  .hero-prev-btn-h,
  .hero-next-btn-h {
    width: 35px !important;
    height: 35px !important;
  }
}

@media (max-width: 900px) {
  .\!container {
    max-width: 95% !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }

  .container {
    max-width: 95%;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (max-width: 450px) {
  .\!container {
    max-width: 100% !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .container {
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}



.action{
  transition: all .3s ease;
}

.action:active{
  scale: 0.9;
}


.headerHome{
  position: relative;
  top: 0px;
  right: 0;
  width: 100%;
  min-height: 500px;
  z-index: 1;
  height: calc(100vh - 100px);
}

.textHomeHeroF{
  padding-top: 60px;
  padding-bottom: 25px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;

}

.textHomeHeroFPage{
  min-height: 300px;
}

.textHomeHero{
  position: relative;
  width: 100%;
  height:100%;
}

.textHomeHero h1{
  padding-right: 15px;
  position: relative;
}
.textHomeHero h1::after{
  content: " ";
  position: absolute;
  height: 100%;
  width: 3px;
  background-color: #00C7C7;
  right: 0;
  top: 0;
}

@media (max-width:991px) {
  .headerHome{
    min-height: 450px;
    max-height: 500px;
  }
  .textHomeHeroF{
    height: 450px;
  }
  .textHomeHeroFPage{
    min-height: 300px;
    height: auto;
    padding-bottom: 15px;

  }
}

@media (max-width:770px) {
  .textHomeHeroF{
    height: auto;
    padding-top: 55px;
    padding-bottom: 55px;
  }
  .textHomeHeroFPage{
    padding-bottom: 15px;
  }
  .headerHome {
    min-height: 400px;
    height: auto;
    max-height: unset;
  }
    .textHomeHeroFPage{
    min-height: 260px;
  }
}

/* ////////////////////////////////////////// */


@media (max-width:700px) {
  .lineDownH{
    display: none;
  }

  .sLinkSide{
    left: 15px;
  }
}

@media (max-width:500px) {
  .sLinkSide{
    display: none;
  }
}

.lineDownH{
  width: 1px;
  height: 70px;
  background-color: #ffffff71;
}

.btnHero{
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  width: max-content;
  padding: 8px 20px;
  border-radius: 50px;
  backdrop-filter: blur(7px);
  color: #595959;
}

.btnHero svg{
  transition: .3s;
}
.btnHero:hover svg{
  transform: translateX(-5px);
}

/* تحسين حركة الأسهم للموقع العربي */
[dir="ltr"] .btnHero:hover svg {
  transform: translateX(5px) scaleX(-1);
}

.bgHeader{
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* background-color: #054157ad; */
  /* background: linear-gradient(257deg, rgba(0,0,0,0.8911939775910365) 0%, rgba(0,0,0,0.711922268907563) 70%, rgba(0,0,0,0.16290266106442575) 100%); */
  pointer-events: none;
  /* mix-blend-mode: soft-light; */
}

.headerPage .bgHeader{
    background-color: #0541578c;
}

.backHeader {
  position: absolute;
  background-color: #12022e;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  /* border: 1px solid red; */
}
.bluerHomeContant{
  max-width: 700px;
  min-width: 600px;
  width: 100%;
}
.bgbluerHomeContant{
  position: relative;
  z-index: 5;
  -webkit-backdrop-filter:  blur(20px);
  backdrop-filter: blur(20px);
  background-color: #9e9e9e27;
}

.textV{
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.circleArrowLang{
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: all .3s ease;
  transition-delay: .4s;
}


.navMenuList{
  display: flex;
  align-items: center;
}



.navList{
  font-size: 16px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-position 0.3s ease-in-out;
}
.navList.active{
  backdrop-filter: blur(10px);
  color: #00C7C7;
}
.navList.active::after{
  content: '';
  position: absolute;
  height: 3px;
  width: 100%;
  left: 0;
  bottom:0;
  background-color: #00C7C7;
  transition: all ease-in-out .3s;
  border-radius: 30px;
}
.navList:hover{
  background-position: top; 
}

.phonePop{
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  background-color: #07284B;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #BDBDBD;
}
.phonePop svg{
  width: 18px;
  height: 18px;
}


/* ///////////// */

.textdown{
  border:none;
  position: relative;
  padding: 5px 5px;
  padding-bottom:6px;
  /* font-weight: bold; */
}
.textdown:hover{
  border: none;
}

/* .textdown a{
  display: flex;
  transition: all .3s ease;
}
.textdown:hover a{
  transform: translateY(3px);
} */


.textdown::after{
  content: '';
  position: absolute;
  width: 0px;
  height: 3px;
  right: 0%;
  bottom:0;
  background-color: #00C7C7;
  transition: all ease-in-out .3s;
  border-radius: 30px;
}
.textdown:hover::after{
  width: 100%;
  left: 0;
}


/* /////////////////////// */


.headerSideFollow{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}


.iconS{
  width: 18px;
  height: 15px;
  color: #fff;
  font-size: 18px;
}

.iconS svg{
  width: 20px;
  height: 20px;
  transition: 0.3s;
}

.iconS:hover{
  color: #F8A300 ;
  transform: rotate(10deg);
}



.footerDown .iconS:hover{
  color: #fff;
}

.bgHeaderHome{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.nevTop{
  height: 35px;
  z-index: 2;
  width: 100%;
  background-color: #07284B;
}

.ItemNavTop{
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 0;
  height: 35px;
  color: #fff;
  font-size: 15px;
  padding: 0 10px;
}
.leftItemNavTopc{
  height: 35px;
  padding: 0 10px;
}

.rightNavTop{
  display: flex;
}



/* ///////////////////////////////////////////// */

.sectionPage{
  padding-bottom: 120px;
}
.sectionB{
  background-color: #F7F7F7;
  padding: 50px;
}
.navbar{
  width: 100%;
  z-index: 3;
  transition: all .3s ease;
  background-color: #fff;
  box-shadow: rgba(139, 139, 139, 0.103) 0px 2px 4px;
  color: #000;
  position: sticky;
  top: 0;
  z-index: 88;
  height: 65px;
  display: flex;
  align-items: center;
}

.lineH{
  width: 1px;
  height: 60px;
  background-color: #d9d9d9de;
}

.lineN{
  height: 100%;
  width: 1px;
  background-color: #fff;
  transform: rotate(-20deg);
}
.lineND{
  height: 100%;
  width: 1px;
  background-color: #000;
}
.headerPage{
  position: relative;
  min-height: 300px;
  height: auto;
  margin: auto;
  margin-bottom: 30px;
  width: 100%;
  top: 0;
}

.breadcrumbH{
  display: flex;
  margin-top: auto;
  gap: 8px;
}
.breadcrumbH a:hover{
  transition: all .3s ease;
}
.breadcrumbH a:hover{
  color: #00C7C7;
}
.headerTextPage{
  padding-top: 0px;
  min-height: auto;
}
.headerTextPage .textHomeHero{
  margin-top: auto;
}


.textHeaderPage{
  text-align: center;
  margin-top: 100px;
  max-width: 700px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bgImgHeaderPage{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bgImgHeaderPage img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.iconpage1{
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: contain;
  top: 80px;
  right: 130px;
  opacity: 50%;

}
.iconpage2{
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: contain;
  bottom: -30px;
  left: 0;
  opacity: 50%;
}

@media (max-width:991px) {
  .sectionB{
    padding: 20px;
  }
}

/* ///////////////////////////////// */

.logo{
  width: auto;
  height: 30px;
  min-height: 30px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.navbar.scrolled .logo{
  height: 30px;
  min-height: 30px;
}

@media (max-width:500px) {
  .logo{
  height: 35px;
  min-height: 35px;
  }
  .navbar.scrolled .logo{
  height: 35px;
  min-height: 35px;
}
}

/* ///////////////////////////////////// */

.cardDonationHeader{
  width: 100%;
}

.cardD{
  background-color: #fff;
  color: #000;
  width: 100%;
  max-width: 390px;
  margin-right: auto;
  padding: 20px 25px;
  border-radius: 20px;
  min-height: 300px;
}

.modal .cardD{
  position: relative;
  margin: auto;
  min-width: 400px;
  -webkit-overflow-scrolling: touch;
}



.modal .modal__container {
  max-height: 100vh;
  display: flex;
  align-items: center;
}

.modal .cardD {
  max-height: 96vh; 
  overflow-y: auto; 
  overflow-x: hidden; 
}


.modal .cardD::-webkit-scrollbar {
  width: 5px;
}

.modal .cardD::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal .cardD::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.modal .cardD::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* تنسيق السكرول لمتصفح Firefox */
.modal .cardD {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.closeBtn{
  position: absolute;
  top: 15px;
  left: 20px;
  cursor: pointer;
  z-index: 8;
}

@media (max-width: 768px) {
  .modal .cardD {
      /* max-height: 80vh; */
      -webkit-overflow-scrolling: touch; 
  }

  .modal .modal__container {
      align-items: flex-end; 
      padding-bottom: 0;
  }
}

@media (max-width:440px) {
  .modal .cardD{
    min-width: auto;
  }
}

@media (max-width:400px) {
  .modal .cardD{
    padding: 20px 15px;
  }
}




.titleCardD{
  padding-right: 12px;
  position: relative;
}

.titleCardD::before{
  content: " ";
  position: absolute;
  height: 100%;
  width: 5px;
  background-color: #F8A300 ;
  right: 0;
  border-radius: 20px;
}

.textU{
  color: #F8A300 !important;
}

.textG{
  color: #F8A300  !important;
}

.textGD{
  color: #04EAE9 !important;
}

.textB{
  color: #04EAE9 !important;
}

.textBb{
  color: #07284B !important;
}

.bgG{
  background-color: #F8A300  !important;
}

.bgGB{
  background-color: #07284B !important;
}


.searchIcon{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: #000;
  transition: .3s ease;
  cursor: pointer;
}

.searchIcon:hover{
  border: 1px solid #F8A300;
  color: #F8A300;
}

.searchIcon:active{
  scale: 0.9;
}

/* Search Dropdown Styles */
.search-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background-color: #07284b98;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-dropdown.translate-y-0 {
  transform: translateY(0);
}

.search-dropdown input {
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  font-family: "Tajawal", sans-serif;
  color: #fff;
  outline: none;
}

.search-dropdown input:focus {
  border-color: #04EAE9;
  background-color: transparent;
}

.search-dropdown input::placeholder {
  color: #c6c6c6;
  font-family: "Tajawal", sans-serif;
}

.search-dropdown button {
  transition: all 0.3s ease;
}

.search-dropdown button:hover {
  transform: scale(1.1);
}

#closeSearch:hover {
  color: #dc2626 !important;
  transform: rotate(90deg) scale(1.1);
}

.searchNav {
  transition: all 0.3s ease;
}

.searchNav:hover {
  color: #04EAE9;
  transform: scale(1.1);
}

.btnDonation{
  display: flex;
  align-items: center;
  color: #fff;
  gap: 5px;
  padding: 5px 40px;
  background-color: #F8A300 ;
  border: 1px solid #F8A300 ;
  border-radius: 5px;
  /* width: max-content; */
  height: max-content;
  cursor: pointer;
}

.btnDonationShare{
  background-color: #E6F0EC;
  border: 1px solid #E6F0EC;
  color: #07284B !important;
  gap: 10px;
  padding: 5px 20px;
  /* font-weight: 600; */
}

.btnDonation img{
  width: 20px;
  height: 20px;
}
.btnDonationShare  i{
  font-size: 21px;
}

.btnDonation span{
  transform: translateY(-2px);
}



/* ///////////////////////form donation////////////////////// */

.inputDL{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inputD{
  padding: 8px 10px;
  border: 1px solid #07284B0D;
  outline: none;
  background-color: #07284B0D;
  font-size: 15px;
  border-radius: 5px;
  color: #F8A300 ;
}

.donationNumbers{
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.donationNum{
  padding: 10px 20px; 
  border: 1px solid #07284B0D;
  background-color: #07284B0D;
  border-radius: 5px;
  color: #07284B;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}

.donationNum:hover{
  border: 1px solid #07284B;
  background-color: #07284B0D;
}

.donationNum.active{
  background-color: #F8A300 ;
  color: #fff;
}

.btnG{
  width: 100%;
  padding: 10px 20px;
  background-color: #F8A300 ;
  color: #fff;
  border-radius: 5px;
  transition: all .3s ease;
  font-size: 17px;
}

.cardPaymintImg{
  background-color: #07284B0D;
  border-radius: 10px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.cardPaymintImg img{
  width: 70px;
  height: 40px;
  object-fit: contain;
}


.cardPaymintImg.active {
  border: 2px solid #F8A300 ;
  /* أضف أي تنسيقات إضافية تريدها للحالة النشطة */
}

/* //////////////////////////////////////// */

.sectionAb{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.rightSecAb{
  width: 50%;

}

.leftSecAb{
  width: 40%;
}

.imgLeftSAb{
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-right: auto;
  margin-left: auto;
  border-radius: 0 60px 0 60px;
  border: 5px solid #fff;
}
.imgLeftSAb::after{
  content: " ";
  background-color: #00C9C8;
  position: absolute;
  top: 20px;
  left: -20px;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 0 60px 0 60px;
}
.imgLeftS .bgLISA::before {
  content: unset;
}
.imgLeftSAb .imgbgAb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 60px 0 60px;

}


.playV{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 1;
  background-color: #26262697;
  color: #fff;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.playV svg{
  width: 40px;
  height: 40px;
  transition: all .3s ease;
}

.bgLISA:hover .playV svg{
  transform: scale(1.1);
}
.bgLISA{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.bgLISA::before{
  content: " ";
  background-color: #03222d36;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 60px 0 60px;
}

.logoBgAb{
  position: absolute;
  width: 75px;
  object-fit: contain;
  left: 13px;
  top: 13px;
}

.btnArrow{
  background-color: #07284B;
  padding: 10px 30px;
  border-radius: 50px;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  gap: 6px;
  width: max-content;
  align-items: end;
}

.btnArrow i{
  font-size: 18px;
}

.btnArrow svg{
  transition: all .3s ease;
  color: #04EAE9;
}

.btnArrowB{
  background-color: #04EAE9;
  color: #07284B;
}

.btnArrowB svg{
  color: #07284B;
}

.btnArrow:hover svg{
  transform: translateX(-4px);
}


[dir="ltr"] .btnArrow:hover svg {
  transform: translateX(4px) scaleX(-1);
}

.btnArrowO{
  border: 1px solid #fff;
  background-color: transparent;
}
.btnArrowO svg{
  color: #fff;
}
.btnArrowOW{
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #33333389;
}
.btnArrowOW span{
  color: #333333 !important;
}
.btnArrowOW svg{
  color: #333333;
}
.btnSec{
  background-color: #189ece0e;
  color: #07284B;
  font-weight: bold;
}

.circleSec{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  right: -50%;
  top: 0;
  z-index: -1;
}



/* /////////////////////////////////// */

.titleSec{
  display: flex;
  /* align-items: end; */
  width: 100%;
  justify-content: space-between;
  gap: 25px;
}

.textTitleSec{
  max-width: 600px;
  position: relative;
  padding-right: 13px;
  width: max-content;

}

.textTitleSec::before{
  content: " ";
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50px;
  width: 3px;
  height: 100%;
  background-color: #04EAE9;
}

.headerTextPage.textTitleSec::before{
  background-color: #fff ;
}

/* ///////////cardSD///////////// */

.cardSD{
  padding: 15px;
  box-shadow: rgba(107, 107, 107, 0.089) 0px 4px 10px;
  border-radius: 15px;
  max-width: 400px;
  margin: 5px auto;
  background-color: #fff;
}

.cardsGrid .cardSD{
  margin: 0;
}

.imgCardSD{
  width: 100%;
  height: 250px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  display: flex;
}

.imgCardSD::before{
  content: " ";
  position: absolute;
  background: linear-gradient(180deg, rgba(11, 229, 245, 0) 0%, rgba(0, 0, 0, 0.788) 80%) !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.cardSDO .imgCardSD::before{
  /* background: linear-gradient(180deg, rgba(0,0,0,0.7875525210084033) 20%, rgba(0, 0, 0, 0.13) 80% ) !important; */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.788) 80% rgba(11, 229, 245, 0.177) 20%) !important;
}
.imgCardS::before{
    content: none;
}
.cardSDI{
  background-color: transparent;
  height: auto;
  padding: 0;
}
.cardSDI .imgCardSD::before{
  background: unset !important;
}

.imgCardSD img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
}

.cardSD:hover .imgCardSD img{
  scale: 1.1;
}


.tImgC{
  color: #fff;
  position: absolute;
  bottom: 15px;
  width: 100%;
  padding: 0 10px;
  z-index: 1;
}
.bodyCardSD{
  margin-top: 10px;
}
.bodyCardSD h3{
  color: #333333;
}
.bodyCardSD p,
.bodyCardSD span{
  color: #898989 ;
}
.bgProgressP{
  background: linear-gradient(90deg, rgba(127,176,63,1) 0%, rgba(9,106,62,1) 70%);
}

.btnCard{
  background-color: #07284B;
  padding: 10px 30px;
  border-radius: 10px;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sliderOC{
  padding: 10px;
}


/* ////////////////////cardSDO////////////////////// */

.cardSDO{
  padding: 0px;
  box-shadow: rgba(107, 107, 107, 0.089) 0px 2px 5px;
  border-radius: 15px;
  max-width: 400px;
}

.cardSDO .imgCardSD{
  width: 100%;
  height: 350px;
}
.cardSDO img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.cardSDO .tImgC{
  bottom: 15px;
  top: unset;
  text-align: center;
  width: 100%;
}

/* /////////////////////////////secBg/////////////////////////////// */

.secBg{
  min-height: 450px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(../images/bgImgS.png);
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}

.secBg::after{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: #0541578c;
}

.secBGf{
  position: relative;
  z-index: 1;
  padding-top: 50px;
  padding-bottom: 50px;
}


.numC{
  padding: 30px;
  background-color: #07284bba;
  backdrop-filter: blur(5px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  border-radius: 10px;
  position: relative;
  min-height: 200px;
  padding-top: 45px !important;
  margin-bottom: 40px;
  border: 1px solid transparent;
  transition: border .3s ease;
}
.numC:hover{
  border: 1px solid #ffffff37;
}

.imgNumC{
  width: 65px;
  height: 65px;
  object-fit: contain;
  margin-bottom: 15px;
  position: absolute;
  top: -33px;
  right: 20px;
  background-color: #04EAE9;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgNumC img{
  width: 35px;
  height: 28px;
  object-fit: contain;
}


/* ///////////////////////SecContactUs////////////////// */

.SecContactUsF{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.formContactUs{
  width: 50%;
}

.inputF{
  padding: 8px 10px;
  border: 1px solid #F5F5F5;
  outline: none;
  background-color: #F9F9F9;
  font-size: 15px;
  border-radius: 5px;
  color: #000;
  width: 100%;
  margin-bottom: 10px;
}

.inputF::placeholder{
  color: #535353;
}

.infoContact{
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.contantInfoContact{
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-image: url(/src/images/bgImgS.png);
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.contantInfoContact::after{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: #000000c4;
}


.contantInfoContactBg{
  position: relative;
  color: #fff;
  z-index: 1;
}

.rowFlexContact{
  display: flex;
  align-items: center;
  gap: 10px;
}

.bRFC{
  width: 35px;
  height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
}

.bRFC img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}


/* //////////////////footer/////////////////////// */

.footer{
  background-color: #07284B;
  padding: 25px 0 0 0;
  color: #fff;
}

.logoF{
  width: 150px;
  height: 120px;
  object-fit: contain;
}

.footerDown{
  border-top: 1px solid #ffffff73;
  padding: 10px 0 10px 0;
}

.footer a{
  transition: all .2s ease;
}

.footer a:hover{
  color: #F8A300 ;
}

.iconF{
  width: 35px;
  height: 35px;
  min-height: 35px;
  min-width: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #04EAE9;
}


/* ////////////////////swiper/////////////////////// */


.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-rtl .swiper-button-next{
  width: 40px !important;
  height: 40px !important;

  border-radius: 50%;
  background-color: #07284B;
}


.swiper-button-next,
.swiper-rtl .swiper-button-prev{
  right: -45px !important;
}
.swiper-button-prev,
 .swiper-rtl .swiper-button-next{
  left: -45px !important;
}

.sliderImage .swiper-button-next,
.sliderImage .swiper-rtl .swiper-button-prev{
  right: 10px !important;
}

.sliderImage .swiper-button-prev,
.sliderImage  .swiper-rtl .swiper-button-next{
  left: 10px !important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
  color: #fff;
  font-size: 16px !important;
  font-weight: bold;
  content: unset !important;
}

/* Custom styling for sliderOC arrows to match site design */
.sliderOC .next-BoardO,
.sliderOC .prev-BoardO {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-color: #07284B;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 18px;
  font-weight: bold;
}

.sliderOC .next-BoardO:hover,
.sliderOC .prev-BoardO:hover {
  background-color: #04EAE9;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.sliderOC .next-BoardO {
  right: -22px;
}

.sliderOC .prev-BoardO {
  left: -22px;
}

.sliderOC .next-BoardO:after {
  content: unset;
}

.sliderOC .prev-BoardO:after {
  content: unset;
}

/* RTL direction for Arabic */
[dir="rtl"] .sliderOC .next-BoardO {
}

[dir="rtl"] .sliderOC .prev-BoardO {
}

/* تحسين أسهم الهيرو للموقع العربي */
[dir="ltr"] .hero-prev-btn i,
[dir="ltr"] .hero-next-btn i {
  transform: scaleX(-1);
}

/* تحسين أسهم الأزرار العامة */
[dir="ltr"] .btnHero svg,
[dir="ltr"] .btnArrow svg {
  transform: scaleX(-1);
}

/* //////pagination////// */

.sliderOC{
  padding-bottom: 25px;
}

.swiper-pagination-bullets{
  bottom: 0px !important;
}

.swiper-pagination-bullet{
  width: 30px;
  height: 6px;
  border-radius: 10px;
  background-color: #F5F5F5;
  opacity: 1;
}

.swiper-pagination-bullet-active{
  background-color: #04EAE9 ;
}



/* /////////////////////////////sectionCO///////////////////////// */

.cardCO{
  padding: 25px 18px;
  border-radius: 15px;
  background-color: #F3F4F6;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #595959;
}

.cardOP{
  width: 170px;
  height: 100px;
  object-fit: contain;
}

.cardOP img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cardCO svg{
  color: #07284B;
  width: 35px;
  height: 35px;
  margin-bottom: 10px;
}

.quoteA{
  background-color: #fff;
  padding: 10px;
  margin-top: 20px;
  border-radius: 20px;
  box-shadow: rgba(54, 54, 54, 0.068) 0px 3px 8px;
  color: #333333;
}

/* /////////////////// sliderO /////////////////// */

.sliderO{
  padding-bottom: 10px !important;
}
.sliderO .swiper-pagination {
  position: relative !important;
  margin-top: 15px !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0px !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.sliderO .swiper-pagination-bullet {
  background-color: #ccc !important;
  opacity: 1 !important;
  margin: 0 6px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  display: inline-block !important;
  visibility: visible !important;
  width: 18px !important;
  height: 7px !important;
  border-radius: 10px !important;
}

.sliderO .swiper-pagination-bullet-active {
  background-color: #04EAE9 !important;
  width: 20px !important;
}

.sliderO .swiper-pagination-bullet:hover {
  background-color: #04EAE9 !important;
  opacity: 0.8 !important;
}

  .sliderSec .swiper-button-next svg,.sliderSec .swiper-button-prev svg{
    color: #fff !important;
    width: 25px;
    height: 25px;
  }
    .sliderImage .swiper-button-next svg,.sliderImage .swiper-button-prev svg{
    color: #fff !important;
    width: 25px;
    height: 25px;
  }

@media (min-width:1700px) {
  .headerHome{
    width: 100%;
    min-height: auto;
    height: auto;
    padding: 20px 0 0px 0;
  }
  .headerPage{
    min-height: 300px;
  }
  .textHomeHeroF{
    /* padding-top: 150px; */
    height: auto;
    min-height: 600px;
  }
  .headerPage .textHomeHeroF{
      min-height: 300px;
  }
}

@media (max-width:991px) {
  .nevTop{
    display: none;
  }
  .navbar{
    top: 0px;
  }
  .navMenu{
    display: none;
  }
  .searchD{
    display: none;
  }


  .swiper-button-next,
  .swiper-rtl .swiper-button-prev{
    right: -35px !important;
  }
  .swiper-button-prev,
   .swiper-rtl .swiper-button-next{
    left: -35px !important;
  }

  .headerPage{
    min-height: 280px;
  }
  .headerTextPage{
    padding-top: 0;
  }


}



@media (max-width:800px) {
  .textHomeHeroF{
    flex-direction: column;
    gap: 40px;
  }
  .cardD{
    margin: auto;
  }
  .donationNumbers{
    flex-wrap: wrap;
  }
  .sectionAb{
    flex-direction: column;
  }
  .rightSecAb{
    width: 100%;
  }
  .leftSecAb{
    width: 100%;
  }
  .boxImageSAb{
    margin-right: 20px;
  }
  .titleSec{
    flex-direction: column;
  }
  .btnSecTitle{
    display: none;
  }
  .secBGf{
    flex-direction: column-reverse;
  }
  .rightSecBg{
    width: 100%;
  }
  .leftSecBg{
    width: 100%;
  }
  .SecContactUsF{
    flex-direction: column;
  }
  .formContactUs{
    width: 100%;
  }
  .infoContact{
    width: 100%;
  }


  .swiper-button-next,
  .swiper-rtl .swiper-button-prev{
    right: 0px !important;
  }
  .swiper-button-prev,
   .swiper-rtl .swiper-button-next{
    left: 0px !important;
  }

  .numC{
    padding: 20px 10px;
  }

  .cardSD{
    padding: 10px;
    margin: 0;
  }

  .cardOP{
    width: 140px;
    height: 80px;
  }
}

@media (max-width:700px) {
.headerPage{
  min-height: 260px;
}
}

@media (max-width:400px) {
  .cardOP{
    width: 120px;
    height: 60px;
  }
}

/* /////////////// */

.sidebar{
  z-index: 99;
}

.sidebarMoreI{
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: #fff;
    backdrop-filter: blur(15px);
    z-index: 99;
    padding: 10px;
}

.btnCloseSidebarM{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background-color: #07284B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.btnCloseSidebarM svg{
  width: 20px;
  height: 20px;
}

.iconSNav{
  width: 35px;
  height: 35px;
  min-height: 35px;
  min-width: 35px;
  background-color: #07284B;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconSN{
  width: 20px;
  height: 20px;
  transition: all .3s ease;
}
.iconSN:hover{
  color: #04EAE9 ;
}
.overlayDesktop{
    z-index: 90;

}
  .overlayDesktop.active {
    z-index: 90;
  }
@media (max-width: 991px) {
  .sidebar {
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: #011b327d;
    backdrop-filter: blur(15px);
    color: #fff;
  }

  .sidebar.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }


  .overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
    z-index: 90;
  }
}


@media (min-width: 991px) {
  .menu-btn,
  .sidebar,
  .overlay {
    display: none !important;
  }
  
  .sidebarMoreI.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  .overlayDesktop {
    display: block;
  }
  
  .overlayDesktop.active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.5);
  }
}

@media (max-width:500px) {
  .leftSecAb{
    width: 90%;
  }
  .imgLeftSAb{
    height: 300px;
  }
}

/* ///////////////////////////////////////////////////// */

.linkPage{
  position: relative;
  z-index: 1;
  padding: 20px 25px 20px 25px;
  background-color: #fff;
  border-radius: 15px;
}

.lineLP{
  height: 15px;
  width: 2px;
  background-color: #80808050;
  border-radius: 3px;
}

.linkPage .active{
  color: #07284B;
}


.cardA{
  width: 100%;
  padding: 20px 25px 20px 25px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(54, 54, 54, 0.068) 0px 3px 8px;
}

.cardA img{
  width: 40px;
  height: 45px;
  object-fit: contain;
  margin-bottom: 2px;
}

/* //////////////////secBI//////////////////// */


.secBI{
  background-color: #07284B;
  padding: 40px;
  color: #fff;
  border-radius: 15px;
  position: relative;
  background-image: url(/src/images/bgImgS.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.bgSecBI{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  backdrop-filter: blur(20px);
}
.bgSecBI::before{
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #0000004d;
}


.imgSL{
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 30%;
  height: 75%;
  opacity: 10%;
  z-index: -1;
}

.imgse{
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.popS{
  min-width: 60px;
  min-height: 60px;
  background-color: #5B9DD2;
  border-radius: 50%;
  position: relative;
  border: 1px #ffffff17 solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popS::before{
  content: " ";
  width: 75px;
  height: 75px;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  position: absolute;
  border-radius: 50%;
  border: 4px #fff dotted;
}

.popS img{
  width: 35px;
  height: 35px;
}

.textSecBIF{
  width: 70%;
}

.imgSecBIF{
  width: 30%;
}



.cardImgBIF{
  position: relative;
  height: 350px;
  z-index: 0;
}
.cardImgBIF img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.cardImgBIF::after{
  content: " ";
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.521);
  width: 100%;
  height: 100%;
  top: 20px;
  left: -20px;
  border-radius: 10px;
  z-index: -1;
}


.cardG{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 4px solid #07284B;
  background-color: #E2ECE7;
  padding: 10px 20px;
  min-height: 80px;
}

.numCardG{
  font-size: 45px;
  font-weight: bolder;
  color: #B7D2C5;
}

@media (max-width:991px) {
  .popS{
    min-width: 50px;
    min-height: 50px;

  }
  .popS::before{
    width: 70px;
    height: 70px;
  }
}
@media (max-width:500px) {
  .linkPage{
    padding: 20px 15px 15px 15px;
  }
  .imgBoxS{
    display: none;
  }
}

/* ///////////////////cardFI////////////// */

.cardFI{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
}

.imgCardFI{
  width: 40%;
}

.imgCardFI img{
  width: 100%;
  border-radius: 10px;

}

.textCardFI{
  width: 60%;
}

/* //////////cardSDOI/////////// */

.cardSDOI{
  width: 100%;
  margin: auto;
  padding: 0;
}

.cardSDOI .imgCardSD{
  width: 100%;
  height: 350px;
}


/* ///////////////////////////////////////////////// */

.navTopPage{
  border: 0;
  background: linear-gradient(90deg, rgba(48,178,72,1) 0%, rgba(9,106,62,1) 100%);
}

.navbarTop{
  background-color: #fff;
  box-shadow: rgba(107, 107, 107, 0.096) 0px 3px 8px;
}

.navbarTop .menu-btn i{
  color: #000 !important;
}

.navbarTop a{
  color: #000 !important;
}

.navbarTop .logo{
  height: 60px;
  min-height: 60px !important;
}

.navbarTop .searchIcon{
  border-color: #07284B !important;
  color: #07284B !important;
}



.headerPage2{
  color: #000;
  min-height: auto;
  padding-bottom: 70px;
}
.headerPage2 .textHomeHeroF{
  color: #000;
}
.headerPage2 .textHomeHeroF{
  padding-top: 150px;
}
.headerPage2 .headerTextPage{
  padding-top: 0;
}

.linkPage2{
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

/* ///////////////////////// */

.linksFPage{
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
  padding-top: 10px;
  overflow: hidden;
  width: 100%;
}

.scrollNav{
  overflow-y: auto;
  height: 100%;
  padding-bottom: 140px;
  -webkit-overflow-scrolling: touch;
}

.linkFPage{
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
}
.linkFPage::-webkit-scrollbar {
  height: 3px;
  width: 10px;
}

.linkFPage::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;

}

.linkFPage::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
  width: 10px ;
}


/* // */

.scrollNav::-webkit-scrollbar {
  height: 3px;
  width: 5px;
}

.scrollNav::-webkit-scrollbar-track {
  background: #383838;
  border-radius: 10px;

}

.scrollNav::-webkit-scrollbar-thumb {
  background: #202020;
  border-radius: 10px;
  width: 10px ;
}


.linkPageActive{
  padding-bottom: 10px;
  border-bottom: 3px solid #07284B;
}


/* //////////////////////navigation////////////////// */

.pagination{
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 20px;
  gap: 2px;
}

.pagination .page-item{
  padding: 4px 10px;
  color: #7D7D7D;
  font-size: 16px;
  transition: .2s;
}
.pagination .page-item:hover{
  color: #07284B;
}
.pagination .active{
  background-color: #07284B;
  color: #fff !important;
  border-radius: 5px;
}
.pagination .previous{
  font-size: 22px;
}
.pagination .next{
  font-size: 22px;
}

/* /////////////////////sliderImage////////////////////////////// */

.sliderImage{
  width: 100%;
  max-width: 1000px;
  border-radius: 10px;
  position: relative;
  margin: auto;
}

.slideImg{
  height: 380px;
}

.sliderImage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  max-width: 900px;
  margin: auto;
}

.contantPageD{
  position: relative;
  z-index: 1;
  padding: 20px 25px 35px 25px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(54, 54, 54, 0.068) 0px 3px 8px;
}

/* /////////////////////searchInput///////////////// */

.searchInput{
  display: flex;
  gap: 1px;
  align-items: center;
  background-color: #fff;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.082) 0px 3px 8px;
  width: 100%;
}
.searchInput i{
  font-size: 20px;
  color: #7D7D7D;
}

.searchInput input{
  padding: 10px;
  width: 100%;
  outline: none;
}

.btnSearch{
  background-color: #F8A300 ;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  min-width: 80px;
  box-shadow: rgba(0, 0, 0, 0.082) 0px 3px 8px;
}


/* /////////////////contctF////////////////////////// */

.MapInfo {
  width: 50%;
  height: 350px;
  background-color: #07284B;
  border-radius: 15px;
}

.MapInfo iframe{
  width: 100%;
  border-radius: 15px;

}



.contctD{
  padding: 20px 0px;
  border-radius: 15px;
}

.contctDF{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto;
}

@media (max-width:1200px) {
  .imgCardFI{
    width: 50%;
  }
  .textCardFI{
    width: 50%;
  }
}

@media (max-width:991px) {
  .secBI{
    padding: 30px 20px;
  }
  .secBIF{
    flex-direction: column;
  }
  .textSecBIF{
    width: 100%;
  }
  .imgSecBIF{
    width: 100%;
    max-width: 350px;
  }
  .cardImgBIF::after{
    top: 10px;
    left: -10px;
  }

  .cardFI{
    flex-direction: column;
  }
  .imgCardFI{
    width: 100%;
  }
  .textCardFI{
    width: 100%;
  }

  .headerPage2 .textHomeHeroF {
    padding-top: 120px;
    padding-bottom: 5px;
}

.slideImg{
  height: 300px;
}

.imgSL{
  position: absolute;
  left: -50%;
  bottom: 10px;
  width: 100%;
  height: 75%;
  opacity: 4%;
  z-index: -1;
}

}

@media (max-width:800px) {
  .MapInfo{
    width: 100%;
  }
}
@media (max-width:600px) {
  .contantPageD{
    padding: 20px 15px 35px 15px;
  }
  .slideImg{
    height: 200px;
  }

}
@media (max-width:400px) {
  .contantPageD  .lineLP{
    visibility: hidden;
  }
}


/* //////////////////////////scroll-up//////////////////////////////// */

.scroll-up{
  width: 45px;
  height: 45px;
  /* position: fixed;
  bottom: -20px;
  left: 20px; */
  border-radius: 50px;
  opacity: 0;
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8A300;
  margin-right: auto;
}

.scroll-up.active{
  opacity: 1;
  bottom: 20px;
  z-index: 1;
}

.scroll-up.active:hover{
  opacity: 1;
  
}

.scroll-up:active{
  scale: 0.9;
}

.scroll-up i{
  color: #fff;
  font-size: 30px;
}

@media (max-width:1400px) {
  .scroll-up.active{
    opacity: 80%;
    bottom: 20px;
  }
}


/* ///////////////////////////////////////////////////////////// */

.baner{
  background-color: #07284B;
  background-image: url(../images/bgbaner.png);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 20px;
}


/* /////////////////////////////////////////////// */

.cardAS{
  border: 1px solid #EDEDF5;
  padding: 30px 15px;
  border-radius: 15px;
}

.imgPopC{
  width: 90px;
  height: 90px;
  background-color: #F8F9FA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 10px;
}

.imgPopC img{
  object-fit: contain;
  width: 40px;
  height: 40px;
}

.cardAS p{
  color: #898989;
}

/* ///////////////////////////////////////////////////////// */


.gridCardServices .numC {
  background-color: #fff;
  color: #595959;
  box-shadow: rgba(158, 158, 158, 0.12) 0px 8px 15px;
  border: 1px solid #6e6e6e15;
}

.gridCardServices .numC p{
  color: #07284B;
}

.gridCardServices .numC .imgNumC{
  background-color: #07284B;
}

.gridCardServices .numC:hover{
  border: 1px solid #6e6e6e39;
}

/* /////////////////////////////////////////// */

.cardOA{
  min-height: 160px;
  border: 1px solid #d9d9d95e;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.cardOA img{
  object-fit: contain;
  width: 140px;
  height: 100px;
}

/* ////////////////////////////////////// */

.imgDC{
  width: 100%;
  height: 100%;
  max-height: 400px;
  max-height: 400px;
  border-radius: 20px;
  overflow: hidden;
}

.imgDC img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width:500px) {
  .imgDC{
    max-height: 270px;
  }
}

.popNum{
  width: 30px;
  height: 30px;
  background-color: #00DAD9;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.cardSF{
  border: 1px solid #CCCCCC;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 170px;
  width: 100%;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: all .3s ease;
  position: relative;
}
.cardSF:hover{
    border: 1px solid #717171;
}
.cardSF p{
  color: #898989;
  transition: all .3s ease;
}
.cardSF:hover p{
    color: #07284B;
}
.cardSF img{
  width: 60px;
  height: 40px;
  object-fit: contain;
}

.service-card {
  cursor: pointer;
}

.service-card .service-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.service-card.selected .service-check {
  opacity: 1;
  background-color: #07284B;
  border-color: #07284B;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.service-card.selected .service-check svg {
  color: white;
  width: 20px;
  height: 20px;
}

.service-card.selected {
  border: 2px solid #07284B;
  background-color: #f8f9ff;
}

.service-card.selected p {
  color: #07284B;
}

.popSCheck{
  background-color: #00C9C8; 
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.popSCheck svg{
  color: #fff;
  width: 15px;
  height: 15px;
}

/* //////////////////////////////////// */

.cardSP{
  background-color: #fff;
  border-radius: 15px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  text-align: center;
  border: 1px solid transparent;
  transition: all .3s ease;
}

.cardSP img{
  width: 60px;
  height: 50px;
  object-fit: contain;
}

.cardSP:hover{
  border: 1px solid #50505026;
}

/* ///////////////////////// */

.menu img{
  width: 23px;
  height: 23px;
  object-fit: contain;
}

/* ///////////////////////////// */

.cardCS{
  border: 1px solid #DEDCDC;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-height: 150px;
  position: relative;
  border-radius: 5px;
}

.popCS{
  background-color: #04EAE9;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transform: rotate(45deg);
  position: absolute;
  top: -28px;

}

.popCS svg{
  width: 28px;
  height: 30px;
  transform: rotate(-45deg);
}

/* /////////////////////////////////////////// */


.supportUsBtn {
  position: absolute;
  top: 25%;
  left: 0;
  background-color: #04EAE9 !important;
  color: #fff !important;
  writing-mode: vertical-lr;
  gap: 7px;
  padding: 20px 10px;
  width: 40px;
  border-radius: 20px 0 0 20px;
  transform: rotate(180deg);
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 100;
}
.supportUsBtn span{
  font-size: 18px;
}
.supportUsBtn img {
  transform: rotate(90deg);
  width: 30px;
  height: 30px;
  object-fit: contain;
}


@media (max-width:700px) {
  .supportUsBtn{
    display: none;
  }
}


/* ////////////////////////////////// */

.pagesInnerBody .formConnectUsSec {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.068) 0px 0px 8px;
}
.pagesInnerBody .flexInput input,
.pagesInnerBody .flexInput select,
.pagesInnerBody .flexInput textarea {
  border: 1px solid #cccccc;
  color: #000;
  transition: border 0.3s ease;
}
.pagesInnerBody .flexInput input:focus,
.pagesInnerBody .flexInput select:focus,
.pagesInnerBody .flexInput textarea:focus {
  border: 1px solid #1e9f3b;
  color: #000;
}
.pagesInnerBody .flexInput input::placeholder,
.pagesInnerBody .flexInput textarea::placeholder {
  color: #000;
}
.pagesInnerBody .flexInput select {
  color: #000;
}

.pagesInnerBody .inputDF {
  width: 100%;
}
.pagesInnerBody .inputDF select {
  width: 100%;
}
.pagesInnerBody .inputDF label {
  margin-bottom: 5px;
  padding-right: 10px;
}

.pagesInnerBody .dfelxC a i {
  color: #1e9f3b;
}

.pagesInnerBody .contactD {
  border-top: 1px solid #ececec;
  padding-top: 10px;
}

.btsP {
  max-width: 100px;
  margin: 0;
  border-radius: 10px;
}

.btsP:hover {
  background-color: #1e9f3b !important;
  color: #fff;
}

.inputLPFlex span {
  color: #1a772e;
  font-size: 14px;
}



.formPB .inputLP label {
  font-family: myBFont;
  font-weight: 300;
}

.chooseAmountF {
  display: flex;
  margin-top: 25px;
  gap: 10px;
  flex-wrap: wrap;
}

.cardChooseAmountF {
  background-color: #f8f8f8;
  min-width: 120px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
.cardChooseAmountF:active h5{
  scale: 0.9;
}
.cardChooseAmountF.active:active h5{
  scale: 1;
}
.cardChooseAmountF.active .checkG {
  color: #1e9f3b;
  display: flex;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
}

.cardChooseAmountF.active .checkG i {
  font-size: 18px;
}

.cardChooseAmountF h5 {
  font-family: myBFont;
  font-weight: 300;
  margin-bottom: 0;
  color: #b8b8b8;
}
.cardChooseAmountF.active h5 {
  color: #1e9f3b;
}

.flexCheckD {
  margin-top: 20px;
}

.flexCheckD .form-check {
  display: flex;
  padding: 0;
}
.inputLP .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.textLabD {
  display: flex;
  flex-direction: column;
  padding-right: 50px;
}
.textLabD label {
  cursor: pointer;
}
.flexCheckD input {
  outline: none !important;
  box-shadow: none !important;
  position: relative;
  cursor: pointer;
  width: 45px !important;

  height: 25px;
}
.form-check-input:focus:not(:checked) {
  border-color: #1a772e;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
}
.form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

@media (max-width: 991px) {
  .formPB {
    padding: 20px 20px;
  }
  .imagePay img {
    width: 95px;
    height: 60px;
  }
  .cardChooseAmountF.active .checkG {
    width: 20px;
    height: 20px;
  }
  .cardChooseAmountF {
    min-width: 100px;
    height: 65px;
  }
  .cardChooseAmountF h5 {
    font-size: 18px;
  }
}

/* ////////////////////////////// */

.payment-method{
  width: max-content;
  padding: 0;
  width: 130px;
  height: 70px;
  overflow: hidden;
}
.payment-method img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amount-option{
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.amount-option p{
  margin-bottom: -8px;
}
.check-icon{
  width: 25px;
  height: 25px;
  background-color: #00C7C7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon svg{
  width: 15px;
  height: 15px;
}


@media (max-width:500px) {
  .payment-method{
  width: 90px;
  height: 60px;
}
.amount-option{
  padding: 10px 30px;
  height: 50px;
}
}

/* //////////////////////////// */

.swiper-button-disabled{
  pointer-events: unset !important; 
}