@font-face {
  font-family: DINNextLTArabic;
  src: url("../fonts/DINNextLTArabic-Regular-3.ttf");
}

/* @font-face {
  font-family: DINNextLTArabic;
  src: url("../fonts/29ltbukraregular.otf");
} */


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


html {
  font-family: "DINNextLTArabic";
  scroll-behavior: smooth;
}

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

.FontLight{
  font-family: "DINNextLTArabic" !important;
}

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


.navbar *{
  font-family: DINNextLTArabic;
}

.ltbukraregular{
  font-family: ltbukraregular;
  font-size: 14px;
}

@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;
  }
}

@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: 100vh;
  z-index: 1;
  padding-bottom: 20px;
}

.textHomeHeroF{
  padding-top: 180px;

}

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

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

.bgHeader{
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  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;
}

.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: 15px;
  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);
  background-color: #f0f0f04d;
  border-radius: 30px;
}
.navList:hover{
  background-position: top; 
}

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

.textdown{
  border:none;
  position: relative;
  padding: 5px 5px;
  padding-bottom:6px;
}
.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: #365043;
  transition: all ease-in-out .3s;
  border-radius: 30px;
}
.textdown:hover::after{
  width: 100%;
  left: 0;
}

.textdown.active{
  padding: 5px 20px;
}
.textdown.active::after{
  content: none;
}
.textdown.active:hover a{
  transform: translateY(0px);
}

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


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


.iconS{
  width: 30px;
  height: 35px;
  /* transition: 0.3s; */
  color: #fff;
  font-size: 20px;
}

.iconS img{
  width: 15px;
  height: 15px;
  transition: 0.3s;
}

.iconS:hover{
  color: #365043;
  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{
  border-bottom: 1px solid #dfe2f177;
  height: 35px;
  z-index: 2;
  position: absolute;
  width: 100%;
  top: 0;
}

.leftItemNavTop{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe2f177;
  border-top: 0;
  height: 35px;
  color: #fff;
  font-size: 15px;
  padding: 0 10px;
  border-bottom: none;
}
.leftItemNavTopc{
  border: 1px solid #dfe2f177;
  border-bottom: none;
  border-top: 0;
  height: 35px;
  padding: 0 10px;
}

.rightNavTop{
  display: flex;
  border: 1px solid #dfe2f177;
  border-bottom: none;
  border-top: none;
}



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

.sectionPage{
  padding-bottom: 120px;
}

.navbar{
  position: absolute;
  width: 100%;
  top: 35px;
  z-index: 3;
  padding: 15px 0;
  transition: all .3s ease;
}
.textB{
  color: #4B4B4B;
}
.headerPage{
  position: relative;
  min-height: 400px;
  margin: auto;
  margin-bottom: 30px;
  padding-bottom: 20px;
  width: 100%;
  top: 0;
}



.headerTextPage{
  padding-top: 50px;
  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%;
}



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

.logo{
  z-index: 99;
  width: auto;
  height: 90px;
  min-height: 90px;
  object-fit: contain;
}

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

.cardDonationHeader{
  width: 100%;
}

.cardD{
  background-color: #fff;
  color: #000;
  width: 100%;
  max-width: 390px;
  margin: 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: #365043;
  right: 0;
  border-radius: 20px;
}

.textG{
  color: #365043 !important;
}

.textGD{
  color: #365043 !important;
}

.textB{
  color: #666666 !important;
}

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

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

.searchD{
  display: flex;
  gap: 10px;
}

.searchIcon{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 5px;
  width: 40px;
  height: auto;
  font-size: 22px;
  color: #fff;
}


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

.btnDonationShare{
  background-color: #E6F0EC;
  border: 1px solid #E6F0EC;
  color: #365043 !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 #3650430D;
  outline: none;
  background-color: #3650430D;
  font-size: 15px;
  border-radius: 5px;
  color: #365043;
}

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

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

.donationNum:hover{
  border: 1px solid #365043;
  background-color: #3650430D;
}

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

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

.cardPaymintImg{
  background-color: #3650430D;
  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 #365043;
  /* أضف أي تنسيقات إضافية تريدها للحالة النشطة */
}

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

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

.rightSecAb{
  width: 50%;
}

.leftSecAb{
  width: 40%;
}

.imgLeftSAb{
  width: 100%;
  max-width: 450px;
  max-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-right: auto;
}

.imgLeftSAb .imgbgAb{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.boxImageSAb{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: -30px;
  margin-top: -100px;
  padding: 35px;
  background-color: #365043;
  color: #fff;
  border-radius: 10px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.bgLISA{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.bgLISA::before{
  content: " ";
  background-color: #00000041;
  position: absolute;
  width: 100%;
  height: 100%;
}

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

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

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

.btnArrow svg{
  transition: all .3s ease;
}

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

.btnSec{
  background-color: #3650431A;
  color: #365043;
  font-weight: bold;
}

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

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

.textTitleSec{
  max-width: 600px;
}

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

.cardSD{
  padding: 15px;
  box-shadow: rgba(107, 107, 107, 0.089) 0px 2px 5px;
  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(0,0,0,0.17690826330532217) 0%, rgba(0,0,0,0.7875525210084033) 70%) !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;
}

.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;
  right: 0px;
  padding: 0 10px;
  z-index: 1;
}
.bodyCardSD{
  margin-top: 10px;
}
.bodyCardSD h3{
  color: #365043;
}
.bodyCardSD p,
.bodyCardSD span{
  color: #666666 ;
}
.bgProgressP{
  background: linear-gradient(90deg, rgba(127,176,63,1) 0%, rgba(9,106,62,1) 70%);
}

.btnCard{
  background-color: #365043;
  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: 15px;
  box-shadow: rgba(107, 107, 107, 0.089) 0px 2px 5px;
  border-radius: 15px;
  max-width: 400px;
}

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

.cardSDO .tImgC{
  bottom: unset;
  top: 15px;
}

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

.secBg{
  min-height: 450px;
  background-image: url('../images/up-law-scale.jpg');
  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: #000000d8;
}

.secBGf{
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  z-index: 1;
  padding-top: 30px;
  padding-bottom: 30px;
}

.rightSecBg{
  width: 50%;
}
.leftSecBg{
  width: 50%;
}

.numC{
  padding: 30px;
  background-color: #8d8d8d4b;
  backdrop-filter: blur(5px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  border-radius: 10px;
  text-align: center;
}



/* ///////////////////////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: #3650430D;
  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('../images/up-law-scale.jpg');
  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: 18px;
  height: 18px;
  object-fit: contain;
}


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

.footer{
  background-color: #181818;
  padding: 20px 0 0 0;
  color: #fff;
}

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

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

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

/* ////////////////////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: #365043;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
  right: -45px !important;
}
.swiper-button-prev,
 .swiper-rtl .swiper-button-next{
  left: -45px !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;
}


@media (min-width:1700px) {
  .headerHome{
    width: 100%;
    min-height: auto;
    padding: 20px 0 60px 0;
  }
  .textHomeHero{
    margin-top: 0px;
  }
  .textHomeHeroF{
    padding-top: 150px;
  }
}

@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;
  }
  .headerPage .textHomeHeroF{
    padding-bottom: 30px;
  }
  .headerTextPage{
    padding-top: 0;
    text-align: start;
  }
  .textHomeHeroF {
    padding-top: 150px;
  }

}


@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;
  }
  .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;
  }

}

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


@media (max-width: 991px) {
  .sidebar {
    right: -100%;  
    transition: right 0.3s ease-in-out;
    background-color: #2c2c2c56;
    backdrop-filter: blur(15px);
    color: #fff;
  }

  .sidebar.active {
    right: 0;
  }


  .overlay {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }
}


@media (min-width: 991px) {
  .menu-btn,
  .sidebar,
  .overlay {
    display: none !important;
  }
}


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

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

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

.linkPage .active{
  color: #365043;
}


.cardA{
  width: 100%;
  padding: 20px;
  border: 1px solid #dbdbdb;
  border-radius: 5px;
}

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

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


.secBI{
  background-color: #365043;
  padding: 40px;
  color: #fff;
}

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

.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 #365043;
  background-color: #E2ECE7;
  padding: 10px 20px;
  min-height: 80px;
}

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

/* ///////////////////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: #365043 !important;
  color: #365043 !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: 100px;
  -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 #365043;
}


/* //////////////////////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: #365043;
}
.pagination .active{
  background-color: #365043;
  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: #365043;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  min-width: 80px;
  box-shadow: rgba(0, 0, 0, 0.082) 0px 3px 8px;
}


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

@media (max-width:991px) {
  .secBI{
    padding: 30px 10px;
  }
  .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;
}


}

@media (max-width:600px) {
  .contantPageD{
    padding: 20px 15px 35px 15px;
  }
  .slideImg{
    height: 200px;
  }
}
@media (max-width:400px) {
  .contantPageD  .lineLP{
    visibility: hidden;
  }
}


.wpcf7 form.init .wpcf7-response-output.red-alert{
  
  color: #721c24;
  border-color: #721c24;
 
  display: block;
}

.wpcf7 form.init .wpcf7-response-output.green-alert{
  color: #155724;
  border-color: #155724;
  display: block;
}