@font-face {
  font-family: "mbc";
  src: url('../fonts/mbc.woff2') format('woff2');
  font-display: swap;
}

:root {
  --main-color: #3D5A94;
  --secondary-color: #6B63B5;
  --third-color: #4070AB;
  --black-color: #3c4a51;
  --section-padding: 3rem;
}
p {
color: var(--black-color) !important;
}
.f-b {
  font-weight: bold;
}
.l-h-7 {
  line-height: 1.7;
}
* {
  direction: rtl;
  margin: 0px;
  padding: 0px;
  font-family: "Noto Kufi Arabic", "Poppins", sans-serif;
  -webkit-tap-highlight-color: transparent;
  font-display: swap;
  color: var(--black-color);
}
html[lang='en'] * {
  direction: ltr;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "mbc";
  font-weight: bold;
}

*:focus {
  outline: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #F6F8FF;
}

section {
  width: 100%;
  position: relative;
  background: #F6F8FF;
}
section  h2.section-title {
  font-size: 3rem;
  font-weight: bold;
  color: var(--secondary-color);
  width: fit-content;
  margin: 0px auto;
  position: relative;
  margin-bottom: 2rem;
  text-align: center;
}
html[lang="en"] section  h2.section-title {
  font-size: clamp(2rem, 3vw, 3rem);
}

section  h2.section-title::after,
section  h2.section-title::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  background: var(--main-color);
  top: 66%;
  transform: translateY(-50%);
}
section  h2.section-title::before {
  left: -60px;
}
section  h2.section-title::after {
  right: -60px;
}

ul {
  list-style: none;
}
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  text-decoration: none !important;
}
a:hover {
  text-decoration: none !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
}

button {
  cursor: pointer;
  border: none;
}

.ele-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.main {
  -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: #F6F8FF;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* overflow: hidden; */
  /* overflow-y: auto; */
}

@media (max-width: 959px) {
  .main {
      overflow: hidden;
  overflow-y: auto;
  }
}
.main.reset {
  align-items: initial;
}

.scroll {
  scrollbar-width: auto;
  scrollbar-color: #41296b transparent;
}

.scroll::-webkit-scrollbar {
  width: 5px;
}

.scroll::-webkit-scrollbar-track {
  background: transparent;
}

.scroll::-webkit-scrollbar-thumb {
  background: #41296b;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(65, 41, 107, 0.9);
}

.iti {
  display: flex;
}

.iti__flag-container {
  position: static;
}

.iti__arrow {
  margin: 0;
  margin-right: 6px;
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
  right: 0;
  left: auto;
}

.iti.iti--allow-dropdown {
  margin-top: 10px;
  margin-bottom: 30px;
}

.iti__country-list {
  direction: ltr;
}

.select2-dropdown {
  z-index: 1000002;
}

/* global */
    section.intro2 {
        background-image: url(../img/quote-bg-v3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 1rem 0px;
    text-align: center;
    position: relative;
    z-index: 2;
    }
    section.intro2 .btn-donate {
        margin-left: auto;
    }

.btn-donate {
  width: fit-content;
  --clr-font-main: hsla(0 0% 20% / 100);
  --btn-bg-1: hsla(194 100% 69% / 1);
  --btn-bg-2: hsla(217 100% 56% / 1);
  --btn-bg-color: hsla(360 100% 100% / 1);
  --radii: 0.5em;
  cursor: pointer;
  padding: 0.9em 1.4em;
  min-width: 120px;
  min-height: 44px;
  font-size: var(--size, 1rem);
  font-weight: 500;
  transition: 0.8s;
  background-size: 280% auto;
  background-image: linear-gradient(
    325deg,
    var(--btn-bg-2) 0%,
    var(--btn-bg-1) 55%,
    var(--btn-bg-2) 90%
  );
  border: none;
  border-radius: var(--radii);
  color: var(--btn-bg-color);
  box-shadow:
    0px 0px 20px rgba(71, 184, 255, 0.5),
    0px 5px 5px -1px rgba(58, 125, 233, 0.25),
    inset 4px 4px 8px rgba(175, 230, 255, 0.5),
    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-donate:hover {
  background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow:
    0 0 0 3px var(--btn-bg-color),
    0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
  .btn-donate {
    transition: linear;
  }
}

.popup-overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}
.main > .popup-overlay{
  top: 0px;
  transform: translate(-50%, 0%);
}

/* start social */

.card-social {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 1rem;
  gap: 20px;
}
.card-social i {
  color: var(--secondary-color);
}
/* for all social containers*/
.card-social .socialContainer {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 95%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 1s;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
/* instagram*/
.card-social .containerOne:hover {
  background-color: #25D366;
  transition-duration: 0.3s;
}
/* twitter*/
.card-social .containerTwo:hover {
  background-color: #000000;
  transition-duration: 0.3s;
}
/* linkdin*/
.card-social .containerThree:hover {
  background-color: #0077B5;
  transition-duration: 0.3s;
}
/* Whatsapp*/
.card-social .containerFour:hover {
  background-color: #25D366;
  transition-duration: 0.3s;
}
.card-social a:hover .socialSvg path,
.card-social a:hover i {
  fill: #fff;
  color: #fff;
}
.card-social .socialContainer:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

.card-social .socialSvg {
  width: 17px;
}

.card-social .socialSvg path {
  fill: var(--main-color);
}

.card-social .socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* START HEADER */
.header {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  z-index: 98;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  transition: .3s ease;
  
}
.header > div {
  padding: .8rem 1.5rem;
  border-radius: 15px;
  background: rgb(255 255 255 / 81%);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

@media (min-width: 1110px) {
  .header {
    padding: 1.5rem 5rem;
  }
}
.header  .header-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: opacity 0.5s;
}
.header  .header-logo *  {
  transition: .3s;
}
.header  .header-logo:hover * {
  opacity: 0.8;
}

.header  .header-logo .logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.header  .logo-text {
  width: 120px;
  margin-left: .5rem;
}
.header .logo-text .logo-text-en {
  display: none;
}
html[lang='en'] .logo-text img {
  display: none;
}
html[lang='en'] .header .logo-text .logo-text-en {
  display: block;
}
@media only screen and (min-width: 500px) {
  .header  .header-logo .logo-img {
    width: 70px;
    height: 70px;
  }

}
@media (min-width: 576px) {
  .header  .logo-text {
    width: 150px;
  }
}
@media (max-width: 374px) {
  .header  .logo-text {
    display: none;
  }
}
.header .header-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.header .header-links > a,
.header .header-links .scrollto,
section.header-links a {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--main-color);
  padding: 7.5px 15px;
  transition: color 0.5s, background 0.5s;
  font-weight: bold;
}
.header .header-links > a:hover,
.header .header-links .scrollto:hover,
section.header-links a:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

.header .header-links .scrollto,
section.header-links .scrollto {
  display: flex;
      gap: .3rem;
      align-items: center;
}
.header .header-links .scrollto i,
section.header-links .scrollto i {
  font-weight: bold;
  font-size: 1rem;
}
.header .header-links .scrollto .icon-up,
section.header-links .scrollto .icon-up{
display: none;
}

.header .header-links .menu-serv {
  width: 210px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;  
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  margin: 0px;
  padding: 0px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 4;
  visibility: hidden;
  opacity: 0;
  transition: .3s ease;
  /* display: none; */
}
html[lang='en'] .header .header-links .menu-serv {
      width: 255px;
}
.header .header-links .menu-serv li {
  padding: 15px;
  font-weight: bold;
  transition: .3s ease;
}
.header .header-links .menu-serv li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.header .header-links .menu-serv li:hover {
  padding-right: 17px;
  background: #eee;
  opacity: 0.8;
}
.header .header-links .menu-serv li a {
  color: var(--main-color);
  width: 100%;
  display: block;
}
.header .header-links .box-serv:hover .menu-serv {
  visibility: visible;
  opacity: 1;
}
.header .header-links .box-serv:hover .icon-down {
  display: none;
}
.header .header-links .box-serv:hover .icon-up {
  display: block;
}
section.header-links {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 0px;
  width: 250px;
  height: 100vh;
  top: 0;
  right: 0;
  transform: translateX(100%);
  transition: .3s ease;
  z-index: 999;
  overflow-y: auto;
}
section.header-links .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}
section.header-links .title h4 {
color: var(--secondary-color);
  margin: 0px;
  font-weight: bold;
  font-size: 1.7rem;
}
section.header-links .title .icon-x {
  color: var(--secondary-color);
  font-size: 1.7rem;
  cursor: pointer;
}
section.header-links a{
  color: var(--secondary-font);
  border-bottom: 1px solid #ccc;
  width: 100%;
}

section.header-links a i {
  color: var(--golden);
  font-size: 1.1rem;
}
  section.header-links .menu-container {
  cursor: pointer;
  position: relative;
  /* display: flex; */
  align-items: center;
  border-bottom: 1px solid #ccc;
}
section.header-links .menu-container span {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: .5rem .7rem;
  margin-left: .8rem;
}
section.header-links .menu-container a {
  border: none !important;
}
section.header-links .menu-container span i {
  display: none;
}
section.header-links .menu-container span .icon-b{
  display: block;
}
section.header-links .menu-serv {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.header-links .menu-serv li {
  padding: 8px 0;
  transition: all 0.3s ease; 
  font-size: .8rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin: 0px .5rem;
}
section.header-links .menu-serv li a {
  display: block;
  width: 100%;
  font-size: .8rem;
  font-weight: bold;
  color: var(--main-color);
}

.header .btn-background {
  border-radius: 16px;
  border: 1px solid var(--secondary-color);
  background: transparent;
  mix-blend-mode: luminosity;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(15px);
  width: fit-content;
  padding: .5rem;
  display: none;
  justify-content: center;
  align-items: center;
  margin-right: 1.2rem;
}
@media (max-width: 1100px) {
  .header .btn-background {
    display: flex;
  }
  .header .header-links {
    display: none;
  }
}

.header .menu__icon {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .4s;
  direction: rtl !important;
}

.header .menu__icon span {
  width: 100%;
  height: 0.15rem;
  border-radius: 0.125rem;
  background-color: var(--secondary-color);
  box-shadow: 0 .5px 2px 0 hsla(0, 0%, 0%, .2);
  transition: width .4s, transform .4s, background-color .4s;
}

.header .menu__icon :nth-child(1) {
  width: 75%;
}

.header .menu__icon :nth-child(2) {
  width: 50%;
}

.header .btn-background:hover .menu__icon {
  transform: translateY(34%) rotate(-90deg);
}

.header .btn-background:hover .menu__icon span {
  width: .25rem;
  background-color: var(--secondary-color);
}
.header .box-lang,
.header .box-lang div {
  color: var(--main-color);
  width: fit-content;
}
.header .header-lang {
  width: fit-content;
  transition: color 0.5s;
}
.header .header-lang img.earth-lang {
  width: 19px;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); 
  }
}
/* start hero section */

section.hero  {
min-height: 100vh;
background: #232328;
}

section.hero  .swiper-container.swiper-container-hero {
width: 100%;
height: 100vh;
overflow: hidden;
cursor: grab;
}

section.hero .swiper-container.swiper-container-hero .swiper-pagination {
  width: fit-content;
  display: flex;
    flex-direction: column;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    position: absolute;
    bottom: unset;
    left: unset;
    gap: .5rem;
}

section.hero .swiper-container.swiper-container-hero .swiper-slide {
position: relative;
width: 100%;
height: 110vh;
}

/* content */

section.hero .swiper-container.swiper-container-hero .content {
position: absolute;
display: flex;
flex-direction: column;
top: 50%;
transform: translateY(-50%);
right: 3%;
width: 40%;
height: max-content;
color: #f2f2f2;
padding: 20px;
opacity: 0;
z-index: 2;
}
html[lang="en"] section.hero .swiper-container.swiper-container-hero .content {
left: 5%;
}


section.hero .swiper-container.swiper-container-hero .content h1,
section.hero .swiper-container.swiper-container-hero .content h2,
section.hero .swiper-container.swiper-container-hero .content div {
font-size: clamp(2rem, 3vw, 3rem);
margin-bottom: 5px;
font-weight: bold;
opacity: 0;
font-weight: bold;
}

section.hero .swiper-container.swiper-container-hero .content p {
font-size: 1.2rem;
font-weight: 500;
opacity: 0;
color: #ffffff;
}

section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content {
opacity: 1;
}

section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content h1,
section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content h2 {
animation: moveDown 0.8s ease-in forwards;
text-wrap: nowrap;
}

@media (max-width: 567px) {
  section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content {
    width: 100%;
  }
  section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content h1,
  section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content h2 {
    text-wrap: wrap;
  }
}

section.hero .swiper-container.swiper-container-hero .swiper-slide-active .content p {
animation: moveDown 1s ease-in forwards;
animation-delay: 1s;
color: #ffffff !important;
max-width: 450px;
font-weight: bold;
line-height: 1.7;
}

@keyframes moveDown {
0% {
transform: translateY(-20px);
opacity: 0;
}

100% {
transform: translateY(0);
opacity: 1;
}
}

/* background */

section.hero .swiper-container.swiper-container-hero .background[data-item="one"] div{
background: url(../img/hero-10.webp);
background-size: cover;
/* background-position: 50% 50%; */
background-position: 50% 0%;
}



section.hero .swiper-container.swiper-container-hero .background[data-item="two"] div{
background: url(../img/hero-11.webp);
/* background: url(/assets/img/hero-2.webp); */
background-size: cover;
background-position: 50% 50%;
}

section.hero .swiper-container.swiper-container-hero .background[data-item="three"] div{
  background: url(../img/kafd-building-2-1-1920x1080-1.webp);
background-size: cover;
background-position: 50% 10%;
}

section.hero .swiper-container.swiper-container-hero .background[data-item="four"] div{
background: url(../img/hero-17.webp);
background-size: cover;
background-position: 50% 50%;
}

section.hero .swiper-container.swiper-container-hero .background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
clip-path: circle(5%);
filter: brightness(90%);
overflow: hidden;
opacity: 0;
z-index: 1;
}
section.hero .swiper-container.swiper-container-hero .background div {
  width: 100%;
height: 110%;
background-size: cover;
background-repeat: no-repeat;
animation: imageAnimation 20s linear infinite 0s;
}
@media  (max-width: 767px){
  section.hero .swiper-container.swiper-container-hero .background[data-item="one"] div{
    background: url(../img/mobile-hero-10-1.webp);
    background-position: 50% 50%;
    background-size: cover;
  }

  section.hero .swiper-container.swiper-container-hero .background[data-item="two"] div{
    background: url(../img/mobile-hero-11-1.webp);
    /* background: url(/assets/img/hero-2.webp); */
    background-size: cover;
    background-position: 50% 50%;
    }
    section.hero .swiper-container.swiper-container-hero .background[data-item="three"] div{
      /* background: url(/assets/img/mobile-hero-3-1.webp); */
      background: url(../img/mobile-hero-3-11.webp);
      background-size: cover;
      background-position: 50% 10%;
      }
      
      section.hero .swiper-container.swiper-container-hero .background[data-item="four"] div{
      background: url(../img/mobile-hero-17.webp);
      background-size: cover;
      background-position: 50% 50%;
      }
}

section.hero .swiper-container.swiper-container-hero .background.ele-overlay::before {
background-color: rgba(0, 0, 0, 0.4);
}
section.hero .swiper-container.swiper-container-hero .animation {
animation: resizeClipPath 1s ease-in-out forwards;
}

@keyframes resizeClipPath {
0% {
clip-path: circle(5%);
opacity: 0;
}
100% {
clip-path: circle(71%);
opacity: 1;
}
}

/* pagination bullet */

section.hero .swiper-container.swiper-container-hero .swiper-pagination-bullet {
width: 16px;
height: 16px;
background-color: #a3a6a3;
border-radius: 50%;
transition: all 0.6s ease-in-out;
}

section.hero .swiper-container.swiper-container-hero .swiper-pagination-bullet-active {
height: 32px;
background: #007dfe;
border-radius: 14px;
}

/* media queries */

@media (max-width: 1200px) {
section.hero  .content {
top: 18%;
}
}

@media (max-width: 900px) {
section.hero .swiper-container.swiper-container-hero .content,
section.hero  .swiper-container.swiper-container-hero .content[data-content="three"] {
left: 2%;
width: 60%;
}

section.hero .swiper-container.swiper-container-hero .content h1,
section.hero .swiper-container.swiper-container-hero .content h2,
section.hero .swiper-container.swiper-container-hero .content div {
margin-bottom: 14px;
}

section.hero .swiper-container.swiper-container-hero .content p {
font-size: 1rem;
line-height: 1.4;
}
}

@media (max-width: 660px) {
section.hero  .swiper-container.swiper-container-hero .content,
section.hero  .swiper-container.swiper-container-hero .content[data-content="two"],
section.hero .swiper-container.swiper-container-hero .content[data-content="three"] {
right: 3%;
transform: translate(0%, -50%);
bottom: 0%;
width: 80%;
}

section.hero .swiper-container.swiper-container-hero .content p {
font-size: 0.9rem;
line-height: 1.2;
}

section.hero .swiper-container.swiper-container-hero .background[data-item="two"] {
background-position: 40% 50%;
}

section.hero .swiper-container.swiper-container-hero .swiper-pagination-bullet {
width: 12px;
height: 12px;
}

section.hero  .swiper-container.swiper-container-hero .swiper-pagination-bullet-active {
height: 24px;
}

}

.footer-hero {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: max-content;
  width: 95%;
  padding: .5rem;
  color: #f2f2f2;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 2;
}
@media (min-width: 768px) {
  .footer-hero {
    width: 60%;
  }
}
.footer-hero, .footer-hero * {
  direction: ltr
}

.footer-hero  .swiper {
  width: 80%; 
  flex: 1;
  height: 100%;
  cursor: grab;
}

.footer-hero  .swiper-slide {
  width: 25%; 
  opacity: 0.7;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer-hero  .swiper-slide span {
  color: #ffffff;
}
.footer-hero  .swiper-slide-active {
  opacity: 1;
}

.footer-hero  .swiper-slide img {
  width: 60px;
  height: 55px;
  object-fit: cover;
  border-radius: 50%;
}

.footer-hero .box-btn .btn {
  width: 20%; 
  margin: auto 0; 
}

/* start heor2 */

  .hero2 {
    position: relative;
    background-image: url(../img/hero-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 80vh;
    border-bottom-left-radius: 23px;
    border-bottom-right-radius: 23px;
    overflow: hidden;
  }
  .hero2.contact {
    background-image: url(../img/closeup-hand-writing-note-while-phone.jpg);
  }
  .hero2 .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 3;
  }
  .hero2 .content h1 {
    color: #ffffff;
    font-size: 4rem;
    font-weight: bold;
    margin: 0px;
    text-align: center;
    padding: 1rem;
  }
  .hero2 .content h1.long-title {
    font-size: 2rem;
  }

  @media (max-width: 567px) {
    .hero2 .content h1 {
      font-size: 1.8rem;
    }
  }

/* start about section */

section.about {
    padding-bottom: 3rem;
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background: #F6F8FF;
    overflow: hidden;
}

section.about .card-social {
  margin: 0px auto;
  padding-top: 0px;
}

@media (min-width: 768px) {
  section.about .card-social {
    display: none;
  }
}

section.about .earth-icon {
  width: 100px;
  position: absolute;
  top: 0;
  right: 75px;
}
section.about .world-icon {
  position: absolute; bottom: -8px; right: 0; width: 200px;
}
section.about .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}


section.about .about-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
section.about .about-info .text  {
  width: 100%;
  background: #ffffff;
  padding: 1rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  transition: all 0.5s ease;
}
.highlight {
  background: #4070AB !important;
  scale: 1.04;
  color: #ffffff !important;
}
section.about .about-info .text p {
  margin: 0;
  font-weight: bold;
}
.color-white {
  color: #ffffff !important;
}
section.about .about-info .text img {
  width: 50px;
}

section.about .about-info h2 {
  color: var(--main-color);
  position: relative;
  margin-bottom: 1rem;
  /* font-size: 2.5rem; */
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

section.about .about-info .text > p > span {
  font-weight: bold;
  font-size: 1.1rem;
}
section.about .image {
  width: 37%;
}
section.about .image img {
  width: 100%;
}
@media screen and (max-width: 991px) {
  section.about .image {
    display: none !important;
  }
}
section.about  .image-rotator {
    width: 43%;
    max-width: 500px;
    position: relative;
    height: 555px;
}

section.about  .image-container {
    height: 100%;
    position: relative;
}

section.about  .image-container img {
    position: absolute;
    width: 300px;
    transition: all 0.3s ease;
    width: 300px;
    height: 420px;
    object-fit: cover;
}

section.about  .image-container img:hover {
    cursor: pointer;
}

section.about  .image-container img.front-img {
    opacity: 1;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

section.about .image-container img.left-img {
    opacity: 0.8;
    top: 3.5%;
    left: 0px;
    z-index: 1;
    border-radius: 15px;
}

section.about .image-container img.right-img {
    opacity: 0.8;
    top: 22%;
    right: 0px;
    z-index: 2;
    border-radius: 15px;
}

section.about .navigation {
    text-align: center;
    margin-top: 6px;
    direction: rtl;
}

section.about  .navigation a {
    text-decoration: none;
    color: var(--black-color);
    cursor: pointer;
    font-size: 24px;
    padding: 0 10px;
}

section.about  .navigation span {
    font-size: 18px;
    color: var(--black-color);
}

@media (max-width: 991px) {
  section.about .about-content {
    flex-direction: column;
    margin-top: 2rem;
  }
  section.about .about-info,
  section.about .image-rotator {
    width: 100%;
  }
  section.about .navigation a,
  section.about .navigation span {
    color: var(--black-color);
  }
}
@media (max-width: 767px) {
section.about .earth-icon,
section.about .world-icon {
  display: none;
}
}


/* start services section */
section.services {
  background: #F6F8FF;
}
@layer reset {

section.services *,
section.services ::before,
section.services  ::after {
box-sizing: border-box;
}

section.services  :where(:not(dialog)) {
margin: 0;
}
}

section.services .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 100%;
  justify-content: space-between;
}

section.services .content {
  position: relative;
}
section.services .content-1 .mobile-visual {
  margin-top: 7rem;
}
section.services .content:not(:first-child) .mobile-visual {
  margin-top: 2rem;
}
section.services .content .meta .content1 h3{
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
  color: var(--main-color);
}
section.services .content .meta .content1 p {
  font-weight: bold;
  color: var(--third-color) !important;
  max-width: 450px;
}
section.services .content .meta .content2 {
  display: flex; align-items: center; gap: 1rem;
}
section.services .content .meta .content2 img {
  width: 100px;
}
section.services .content .meta .content2 ul {
  margin: 0px;
  padding: 0px;
}

section.services .content .meta .content2 ul li {
  font-weight: bold;
}
section.services .content .meta .content2 ul li img {
  width: 15px;
}
section.services .content .meta .content2 ul li:not(:last-child) {
  margin-bottom: 1rem;
}

section.services .content .desc {
  position: relative;
  z-index: 3;
}
section.services .content .desc span:last-of-type {
  font-size: 1rem;
}

section.services .section-title {
  position: relative;
  z-index: 3;
  height: fit-content;
}
@layer base {
html {
--nav-block-size: 74px;
--brand-gradient: linear-gradient(227deg,
  #1400c7 0%,
  #00bbff 100%);

@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}

body {
min-block-size: 100dvb;
}
}

@layer demo {
section.services {
--section-block-size: max(400px, 100dvb);
display: grid;
background-color: white;
min-block-size: var(--section-block-size);
position: relative;
block-size: 100%;
display: grid;

>* {
grid-area: 1/1;
}
}

section.services  .section-wrapper {
position: relative;
z-index: 3;
display: grid;

@media (width >=960px) {
grid-template-columns: 1fr 1fr;
}

@media (width < 960px) {
padding-block-start: calc(var(--nav-block-size) + var(--size-7));
padding-block-end: var(--size-7);
}
}


section.services  .content-wrapper {
display: grid;

@media (width < 960px) {
gap: var(--size-7);
}
}

section.services .meta {
display: grid;
gap: var(--size-3);
}

section.services  .content {
display: grid;
inline-size: 100%;
place-items: center;
padding-block: var(--size-7);
padding-inline: var(--size-5);

@media (width >=960px) {
padding: var(--size-10);
min-block-size: 100cqb;
place-items: center end;
}

@media (width < 960px) {
gap: var(--size-5);
}
}

section.services  .mobile-visual {
inline-size: 100%;
aspect-ratio: var(--ratio-square);

@media (width >=960px) {
display: none;
}
}

section.services  .headline {
font-size: var(--font-size-7);
font-weight: var(--font-weight-4);
max-inline-size: var(--size-content-1);
text-wrap: pretty;

@media (width < 960px) {
font-size: var(--font-size-6);
}
}

section.services  .desc {
font-size: var(--font-size-4);
line-height: 1.5;
max-inline-size: 40ch;
text-wrap: pretty;

@media (width < 960px) {
font-size: var(--font-size-3);
}
}

section.services  .visual {
display: grid;
position: sticky;
block-size: var(--section-block-size);
inset-block-start: 0;
container-type: size;

@media (width < 960px) {
display: none;
}
}

section.services  .card-wrapper {
container-type: size;
display: grid;
place-items: center;
overflow: clip;

>* {
grid-area: 1/1;
}
}

section.services .card {
aspect-ratio: var(--ratio-square);
inline-size: 70cqi;
border-radius: var(--radius-3);
scale: 0.4;
}
section.services  .card::after {
  content: '';
    background-image: url(../img/services-left-dec.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -340px;
    width: 261px;
    height: 368px;
    z-index: 1;
}

section.services  .card-img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}


section.services  .card-1 {
scale: 1;
}

section.services  .card-2 {
translate: -35cqi 30cqb;
opacity: 0.3;
}

section.services  .card-3 {
translate: 0cqi 50cqb;
opacity: 0.5;
}

section.services  .card-4 {
translate: 45cqi 40cqb;
opacity: 0.5;
}

section.services  .content-1 {
--_text-gradient: linear-gradient(227deg,
  #1400c7 0%,
  #00bbff 100%);
}

section.services  .content-2 {
--_text-gradient: linear-gradient(227deg,
  #28dc28 0%,
  #00bbff 100%);
}

section.services  .content-3 {
--_text-gradient: linear-gradient(227deg,
  #1400c7 0%,
  #b800b1 100%);
}

section.services   .content-4 {
--_text-gradient: linear-gradient(227deg,
  #b800b1 0%,
  #f50000 100%);
}

section.services  .text-highlight {
background: var(--_text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
}

section.services  .section-wrapper {
width: 75%;
margin: 0px auto;
}
@media (max-width: 430px) {
  section.services  .section-wrapper {
    width: 100%;
    padding: 1rem;
  }
}
section.services .section-wrapper {

}


@supports (animation-timeline: scroll()) {
body {
timeline-scope: --content-1, --content-2, --content-3, --content-4, --content-5;
}

section.services  {
view-timeline-name: --section;
}

section.services  .content-1 {
view-timeline-name: --content-1;
}

section.services  .content-2 {
view-timeline-name: --content-2;
}

section.services  .content-3 {
view-timeline-name: --content-3;
}

section.services  .content-4 {
view-timeline-name: --content-4;
}
section.services  .content-5 {
view-timeline-name: --content-5;
}
section.services  .content-6 {
view-timeline-name: --content-6;
}
section.services .content .meta .headline {
  text-wrap: nowrap;
}

section.services  .card {
animation-timing-function: linear;
animation-fill-mode: forwards;
}

section.services  .card-1 {
animation-timeline: --content-1;
animation-name: slide-up-first-card;
}

section.services  .card-2 {
animation-timeline: --content-2;
animation-name: slide-up-card;
}

section.services  .card-3 {
animation-timeline: --content-3;
animation-name: slide-up-card;
}

section.services  .card-4 {
animation-timeline: --content-4;
animation-name: slide-up-card;
}
section.services  .card-5 {
animation-timeline: --content-5;
animation-name: slide-up-card;
}


@keyframes update-hue {
0% {
filter: hue-rotate(210deg);
}

25% {
filter: hue-rotate(150deg);
}

45% {
filter: hue-rotate(300deg);
}

60% {
filter: hue-rotate(4deg);
}
}

@keyframes slide-up-first-card {
50% {
translate: 0;
opacity: 1;
}

90% {
translate: 0 -50cqi;
scale: 0.6;
}

100% {
translate: 0 -100cqi;
opacity: 0;
}
}

@keyframes slide-up-card {
50% {
opacity: 1;
translate: 0;
scale: 1;
}

90% {
opacity: 0.5;
scale: 0.6;
translate: 0 -50cqb;
}

100% {
translate: 0 -100cqi;
opacity: 0;
}
}
}

section.services .card {
border-radius: 50%;
overflow: hidden;
}

section.services .content-5 {
--_text-gradient: linear-gradient(227deg, #ff8c00 0%, #ffd700 100%);
}
section.services .content-5 .meta {
  position: relative;
  z-index: 3;
}
section.services .card-5 {
translate: 70cqi 50cqb;
opacity: 0.5;
}

section.services  .card-6 {
  translate: 135cqi 50cqb;
  opacity: 0.5;
}



@supports (animation-timeline: scroll()) {
body {
timeline-scope: --content-1, --content-2, --content-3, --content-4, --content-5و --content-6;
}

section.services  .content-5 {
view-timeline-name: --content-5;
}
section.services  .content-6 {
view-timeline-name: --content-6;
}

section.services  .card-5 {
animation-timeline: --content-5;
animation-name: slide-up-card;
}
section.services  .card-6 {
animation-timeline: --content-6;
animation-name: slide-up-card;
}

@keyframes update-hue {
0% {
filter: hue-rotate(210deg);
}
20% {
filter: hue-rotate(150deg);
}
40% {
filter: hue-rotate(300deg);
}
60% {
filter: hue-rotate(4deg);
}
80% {
filter: hue-rotate(60deg);
}
}
}

section.services .card{
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
margin-right: auto;
}
html[lang="en"] section.services .card {
  margin-right: unset;
  margin-left: auto;
}
section.services .card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border-top: 1px solid #c3c3ff;
border-right: 1px solid var(--secondary-color);
border-bottom: 1px solid #c3c3ff;
border-left: 1px solid var(--secondary-color);
transform: rotate(45deg);
}
section.services .card::after {
  content: '';
  background-image: url(../img/services-left-dec.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -340px;
  width: 261px;
  height: 368px;
  z-index: 1;
}


section.services  .cssbuttons-io-button {
position: absolute;
bottom: 0;
left: 0;
}

section.services .mobile-visual img {
  border-radius: 50%;
}
/* start blogs page and blog page */

:root {
--primary: #1a7b88;
--primary-light: #75c6d1;
--secondary: #f6c90e;
--dark: #2d3436;
--light: #f8f9fa;
--text: #333333;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--radius: 8px;
}

.collections,
.collections * {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: var(--light);
color: var(--text);
}

/* ##########################################33 */
.collections {
padding: 2rem 0;
}
.collections .container {
margin: 0px auto;
padding: 1rem;
}
.collections .container h2 {
  margin-bottom: 1rem;
}
.collections .container .section-text {
  max-width: 700px;
  margin: 0px auto;
  text-align: center;
  font-weight: bold;
}
.collections .collections-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 250px);
gap: 20px;
margin-top: 40px;
}

.collections .collection-item {
position: relative;
overflow: hidden;
border-radius: var(--radius);
border-radius: 15px;
box-shadow: var(--shadow);
cursor: pointer;
display: block;
}

.collections .collection-item:nth-child(1) {
grid-column: span 8;
grid-row: span 2;
}

.collections .collection-item:nth-child(2) {
grid-column: span 4;
grid-row: span 1;
}

.collections .collection-item:nth-child(3) {
grid-column: span 4;
grid-row: span 1;
}

.collections .collection-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.5s;
}

.collections .collection-item:hover .collection-bg {
transform: scale(1.05);
}

.collections .collection-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
color: white;
}

.collections .collection-title {
font-size: 1.5rem;
margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
    overflow: hidden;
}
.collections p.desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #ffffff !important;
  font-size: .9rem;
  font-weight: bold;
} 

.collections .collection-link {
color: var(--secondary);
text-decoration: none;
font-weight: 500;
}
/* ############################################ */

@media (max-width: 1024px) {
.collections .benefits-grid {
  grid-template-columns: repeat(2, 1fr);
}

.collections .collections-grid {
  grid-template-rows: repeat(2, 200px);
}

.collections .collection-item:nth-child(1) {
  grid-column: span 12;
  grid-row: span 1;
}

.collections .collection-item:nth-child(2) {
  grid-column: span 6;
  grid-row: span 1;
}

.collections .collection-item:nth-child(3) {
  grid-column: span 6;
  grid-row: span 1;
}

.collections  .reviews-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {

.collections .hero-content,
.collections  .newsletter-container {
  grid-template-columns: 1fr;
  gap: 30px;
}

.collections .footer-grid {
  grid-template-columns: 1fr 1fr;
}

.collections .reviews-grid {
  grid-template-columns: 1fr;
}
}

@media (max-width: 576px) {
  .collections .collections-grid {
    grid-template-rows: repeat(3, 200px);
  }
.collections .footer-grid {
  grid-template-columns: 1fr;
}

.collections .collection-item:nth-child(2),
.collections .collection-item:nth-child(3) {
  grid-column: span 12;
}

.collections .newsletter-form {
  grid-template-columns: 1fr;
}

.collections .benefits-grid {
  grid-template-columns: 1fr;
}
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.collections .animated {
animation: fadeIn 0.5s ease forwards;
}
section.breadcrumb{
  padding: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: #06529a;
  font-size: 16px;
  background: #dde2ec;
  width: 100%;
}
section.breadcrumb a{
  text-decoration: none;
  transition: color 0.35s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: large;
  font-weight: bold;
  color: var(--main-color);
}
section.breadcrumb a:hover {
  opacity: .8;
}
.navigation-banner i,
section.breadcrumb i {
  margin: 0 .5rem;
  color: var(--third-color);
  font-size: 1rem;
}
section.breadcrumb span,
.navigation-banner span {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #3c4a51;
}

section.breadcrumb .fw-500 {
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
}

@media only screen and (min-width: 600px) {
section.breadcrumb {
  padding: 15px 30px;
}
}
@media only screen and (min-width: 992px) {
  section.breadcrumb {
    padding: 15px 12.5%;
  }
}


section.breadcrumb a, .navigation-banner a {
  text-decoration: none;
  transition: color 0.35s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: large;
  font-weight: bold;
  color: var(--main-color);
}
.navigation-banner i, section.breadcrumb i {
  margin: 0 .5rem;
  color: var(--third-color);
  font-size: 1rem;
}
section.breadcrumb span, .navigation-banner span {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #3c4a51;
}
.navigation-banner i, section.breadcrumb i {
  margin: 0 .5rem;
  color: var(--third-color);
  font-size: 1rem;
}

section.blogs-container .blogs-search input:-ms-input-placeholder {
  color: #202124;
}
section.blogs-container .blogs-search input::-ms-input-placeholder {
  color: #202124;
}

.search-container .search .search-action .input-container button,
section.blogs-container .blogs-search button {
  cursor: pointer;
  background-color: transparent;
  color: #202124;
}

.search-container .search .search-action .input-container button img,
section.blogs-container .blogs-search button img {
  display: flex;
  height: 17px;
  width: auto;
}
section.blogs-container {
  padding: 50px 0;
  width: 85%;
}

section.blogs-container .blogs .blog {
  margin-bottom: 1rem;
  overflow: hidden;
  transition: .3s ease;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

section.blogs-container .blogs .blog:last-child {
  margin: 0;
}

section.blogs-container .blogs .blog .blog-img {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

section.blogs-container .blogs .blog .blog-img::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 1;
  padding-bottom: 10%;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  transition: background 0.35s, opacity 0.35s, padding 0.35s;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0;
}

section.blogs-container .blogs .blog .blog-img:hover::after {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  padding: 0;
}

section.blogs-container .blogs .blog .blog-img img {
  display: flex;
  width: 100%;
  transition: transform 0.5s;
  object-fit: cover;
}

section.blogs-container .blogs .blog .blog-img:hover img {
  transform: scale(1.1);
}

section.blogs-container .blogs .blog .blog-text {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  text-align: start;
  pointer-events: none;
  width: 100%;
  flex: 1;
  padding: 0px;
}

section.blogs-container .blogs .blog .blog-text a {
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.35s; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

section.blogs-container.blogs-content .blogs .blog .blog-text a {
  font-weight: 700;
  margin-bottom: .5rem;
  /* font-size: 1.5rem; */
  font-size: 1.2rem;
  width: fit-content;
  border-bottom: .5px solid #ccc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media screen and (max-width: 576px) {
  section.blogs-container.blogs-content .blogs .blog .blog-text {
    padding: .5rem;
  }
  section.blogs-container.blogs-content .blogs .blog .blog-text a{
    font-size: 1.2rem;
  }
}


section.blogs-container.blogs-content .blogs .blog .blog-text p {
  margin: 0;
  line-height: 1.1;
  color: var(--black-color);
  white-space: normal;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

section.blogs-container .blogs .blog .blog-info {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  /* display: flex; */

  /* align-items: center; */
  /* justify-content: space-between; */
  color: #eaf1ff;
  border-top: 1px solid rgba(0, 0, 0, 0.075);
  font-weight: 500;
}

@media screen and (max-width:992px) {
  section.blogs-container .blogs .blog .blog-info {
    align-items: flex-end;
  }
}

section.blogs-container .blogs .blog .blog-info .b-i .calendar {
  text-align: start;
  width: fit-content;
  direction: ltr;
  padding-top: .1rem;
  display: inline-block;
  margin-right: -3px;
  font-size: .85rem;
  color: #ffffffd9;
  font-weight: bold;
}
section.blogs-container .blogs .blog .calendar {
  color: #fff;
  width: fit-content;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  /* padding: 1rem; */
  direction: ltr;
  padding: 1.2rem;
}
section.blogs-container .blogs .blog .blog-info .b-i .author {
  text-align: start;
  display: flex;
  align-items: center;
}

section.blogs-container .blogs .blog .blog-info .b-i .author .text {
  font-size: .85rem;
  border-bottom: 1px solid #ccc;
  color: #ffffff;
  font-weight: 500;
}

section.blogs-container .blogs .blog .blog-info .b-i .author .image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-bottom: 3px;
  overflow: hidden;
}

section.blogs-container .blogs .blog .b-i .author .image img {
  width: 100%;
  height: 45px;
  object-fit: cover;
}

section.blogs-container .blogs .blog .blog-info i {
  margin-right: 2.5px;
  font-size: .8rem;
  color: #ffffffd9;
}

section.blogs-container .blogs>p {
  opacity: 0.9;
  font-size: 14px;
  color: #071833;
}

section.blogs-container .blogs-actions {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  width: 100%;
}



section.blogs-container .blogs-search input {
  font-size: 16px;
  flex-shrink: 1;
  min-width: 0;
}

section.blogs-container .blogs-search button img {
  height: 18px;
}

section.blogs-container .blogs-actions .b-e-i {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

section.blogs-container .blogs-actions .b-e-i h3,
section.blogs-container .blogs h3 {
  margin: 0;
  margin-bottom: 16px;
  text-transform: capitalize;
  color: #3c4a51;
  text-align: start;
  font-weight: 600;
  border-bottom: 3px solid var(--third-color);
  padding-bottom: .5rem;

}
section.blogs-container .blogs h3 {
  margin-bottom: 1.5rem;
}


section.blogs-container .blogs-actions .b-e-i p {
  opacity: 0.9;
  margin: 0;
  line-height: 1.75;
  font-size: 14px;
  color: #3c4a51;
  text-align: start;
}

section.blogs-container .blogs-actions .b-e-i .sm-c {
  margin-top: 20px;
  display: flex;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a i.fa-facebook {
  color: #17a9fd;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a i.fa-instagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  background: -webkit-linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  background: linear-gradient(45deg,
      #f09433 0%,
      #e6683c 25%,
      #dc2743 50%,
      #cc2366 75%,
      #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a:last-child {
  margin: 0;
}

section.blogs-container .blogs-actions .b-e-i .sm-c a:hover {
  opacity: 0.5;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs {
  display: flex;
  flex-direction: column;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b {
  color: #17d7b1;
  background-color: #ffffff;
  position: relative;
  margin-top: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  flex-direction: row;
  padding: .5rem;
  border-radius: 4px;
  flex-direction: column;
  padding: 0px;
  border-radius: 15px;
  overflow: hidden;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b:first-child {
  margin: 0;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-img {
  display: flex;
  width: 125px;
  height: 175px;
  align-self: center;
  margin-left: .5rem;
  object-fit: cover;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  margin: 0px;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-img img {
  display: flex;
  width: 100%;
  height: auto;
  object-fit: cover;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  justify-content: space-between;
  padding: .5rem 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;

}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text a {
  padding-top: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.35s;
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text a:hover {
  opacity: .9;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text .blog-info {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  gap: .3rem;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text .blog-info .b-i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aab0bc;
  font-size: 14px;
  font-weight: 500;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text .blog-info .dot {
  margin: 0 10px;
  width: 4px;
  height: 4px;
  background-color: #aab0bc;
  border-radius: 50%;
}

section.blogs-container .blogs-actions .b-e-i .side-blogs .s-b .blog-text .blog-info .b-i i {
  margin-right: 5px;
  margin-left: 5px;
}

section.blogs-container .blogs .blogs-pagination {
  padding: 7px .9rem;
}

section.blogs-container .blogs .blogs-pagination .page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(80 179 205 / 90%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0px 1px 2px 0 #29435e, 1px 0px 2px #29435e;
  cursor: pointer;
  transition: .4s;
  user-select: none;
  -webkit-user-select: none;
}

section.blogs-container .blogs .blogs-pagination .page.current-page {
  background-color: #06c9fd;
  scale: 1.1;
  color: white;
  box-shadow: 0px 1px 2px 0 #7190b0, 1px 0px 2px #7190b0;
}

.blogs-container.blogs-content .blogs .blog .blog-info .calendar {
  color: var(--black-color);
  font-weight: bold;
  direction: ltr;
  width: fit-content;
  margin-right: auto;
}
@media only screen and (min-width: 450px) {
  .blogs-container.blogs-content .blogs .blog .blog-info{
    /* padding: 12px 40px; */
    padding: 1rem;
  }
}


.blogs-container.trand-blogs .blog .views,
section.blogs-container.blogs-content .blog .views,
.collections .views{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  width: fit-content;
  z-index: 2;
}
section.blogs-container.blogs-content .blog .views i,
section.blogs-container.blogs-content .blog .views span,
.collections .views i,
.collections .views span{
  color: #ffffff;
}

.blogs-container.trand-blogs .blog-box {
  position: absolute;
  bottom: 0;
  z-index: 2;
  line-height: 1.6;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}
.blogs-container.trand-blogs .blog-box .blog-text {
  padding: 1rem 1rem 1rem .1rem;
  flex: 1;
}
.blogs-container.trand-blogs .blog-info {
  position: absolute;
  right: 0;
  top: 0;
}
.blogs-container.blogs-content .blog .blog-text {
  position: absolute;
  bottom: 0px;
  z-index: 2 ;
  padding: 1rem !important;
  line-height: 1.6;
}


section.blogs-container.blogs-content .vote-box,
.blog-head .vote-box {
  border: .5px solid #50b3cd;
  background-color: transparent;
  color: #fff;
  z-index: 2;
}
section.blogs-container.blogs-content .vote-box span, .blog-head .vote-box span{
  border-left: 1px solid #50b3cd;
}


section.blogs-container .blogs .blogs-pagination {
  max-width: 215px;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  background-color: #e7e7e7cf;
}
section.blogs-container .blogs .blogs-pagination .swiper-slide.page-number {
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  section.blogs-container.trand-blogs .blogs{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: .5rem;
  }

  section.blogs-container.trand-blogs .blogs .blog {
    margin-bottom: 0px;
  }
}
@media (max-width: 991px) {
  section.blogs-container.trand-blogs .blogs .blog {
    height: 400px;
  }
  section.blogs-container.trand-blogs .blogs .blog .blog-img img{
    height: 400px;
  }
}

@media (max-width: 450px) {
  section.blogs-container.trand-blogs .blogs .blog {
    height: 320px;
  }
  section.blogs-container.trand-blogs .blogs .blog .blog-img img{
    height: 320px;
  }
}
section.blogs-container.blogs-content .blog .views,
.collections .views {
  padding: 1.2rem;
}

section.blogs-container.blogs-content .blogs .blog .blog-text a {
  font-weight: 700;
  margin-bottom: .5rem;
  font-size: 1.2rem;
  /* padding-bottom: .5rem; */
  width: fit-content;
  border-bottom: .5px solid #ccc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 576px) {
  section.blogs-container.blogs-content .blogs .blog .blog-text {
    padding: .5rem;
  }
  section.blogs-container.blogs-content .blogs .blog .blog-text a{
    font-size: 1.2rem;
  }
}

section.blogs-container.blogs-content .blogs .blog .blog-text p {
  margin: 0;
  line-height: 1.1;
  color: #ffffff !important;
  font-weight: bold;
  white-space: normal;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
  font-weight: bold;
}
@media only screen and (min-width: 450px) {
  .blogs-container.blogs-content .blogs .blog .blog-info{
    padding: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  
  section.blogs-container {
    width: calc(100% - 100px);
  }

  section.blogs-container.blogs-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }
  section.blogs-container.blogs-content div:first-of-type {
    grid-column: span 7;
  }
  section.blogs-container.blogs-content div:nth-of-type(2) {
    grid-column: span 1;
  }
  section.blogs-container.blogs-content div:nth-of-type(3) {
    grid-column: span 4;
  }


  section.blogs-container .blogs-actions {
    margin: 0;
  }

section.blogs-container.blogs-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
section.blogs-container.blogs-content div:first-of-type {
  grid-column: span 7;
}
section.blogs-container.blogs-content div:nth-of-type(2) {
  grid-column: span 1;
}
section.blogs-container.blogs-content div:nth-of-type(3) {
  grid-column: span 4;
}
}

.blogs-container.trand-blogs .blog .views,
section.blogs-container.blogs-content .blog .views {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.blogs-container.blogs-content .blog .blog-text {
  z-index: 2 ;
  padding: 1rem;
  line-height: 1.6;
}
section.blogs-container.blogs-content .vote-box,
.blog-head .vote-box {
  border: .5px solid #50b3cd;
  background-color: transparent;
  color: #fff;
  z-index: 2;
}
section.blogs-container.blogs-content .vote-box span, .blog-head .vote-box span{
  border-left: 1px solid #50b3cd;
}
section.blogs-container.blogs-content .blog .views {
  padding: 1.2rem;
}

/* START BLOG PAGE */
section.blog-head {
  display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 30px;
      margin-bottom: 50px;
      width: 100%;
}
@media (max-width: 768px) {
  section.blog-head {
    margin-bottom: 30px;
  }
}
@media (max-width: 576px) {
  section.blog-head {
    margin-bottom: 20px;
  }
}
section.blog-head h1 {
  position: absolute;
  color: white;
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  text-align: center;
  width: 100%;
  max-width: 90%;
  text-wrap: wrap;
}

@media (min-width: 768px) {
  section.blog-head h1 {
    max-width: 89%;
  }
}
@media (min-width: 992px) {
  section.blog-head h1 {
    max-width: 75%;
  }
}
.blog-img-container {
  width: 75%;
  height: 70vh;
  position: relative;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, .5);
  border-radius: 15px;
}
.blog-img-container::after {
  background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 1200px) {
  section.blog-head .blog-img-container {
    height: 40vh;
    width: 90%;
  }
}
section.blog-head .blog-img-container img {
  width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    position: relative;
    
}
.blog-img-container::before {
  z-index: 2;
  /* backdrop-filter: blur(2px); */
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}
section.blog-head .blog-information {
  width: fit-content;
  padding: .5rem 2rem;
  background-color: #f4f4f4;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-radius: 5rem;
  transform: translate(-50%, 50%);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #707a8f;
  font-size: .9rem;
  font-weight: 500;
  direction: ltr;
  gap: 15px;
  z-index: 4;
}

.breadcrumbs a:not(:last-of-type),
.breadcrumbs span {
  font-weight: bold;
  transition: color 0.5s;
  color: var(--main-color);
}

.breadcrumbs a:hover {
  color: #673AB7;
}

.breadcrumbs a.active,
.breadcrumbs i {
  color: #444;
  font-weight: bold;
}

.breadcrumbs {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  width: 100%;
  background-color: #f4edfd;
  font-size: 17px;
}

.breadcrumbs div {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}

.breadcrumbs i {
  
  font-size: 13px;
  font-weight: bold;
  margin: 0 7.5px;
}
.breadcrumbs a:not(:last-of-type),
.breadcrumbs span {
  font-weight: bold;
  transition: color 0.5s;
  color: var(--main-color);
}

.breadcrumbs a:hover {
  color: #673AB7;
}

.breadcrumbs a.active,
.breadcrumbs i {
  color: #444;
  font-weight: bold;
}

section.b-container {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: start;
  padding: 0 15px;
}
section.b-container.service svg{
  display: none;
}
section.b-container.blog h2,
section.b-container.blog h3,
section.b-container.blog h4,
section.b-container.blog h5,
section.b-container.blog h6 {
  font-weight: bold;
  color: var(--secondary-color);
}

section.b-container.service ul li {
  font-weight: bold;
}
section.b-container.service ul li span {
  font-weight: bold;
  font-size: 1.1rem;
}
section.b-container.service img {
  width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, .5);
    overflow: hidden;
    margin-top: 1rem;
}
@media (max-width: 767px) {
  section.b-container.service img {
    max-height: 300px;
  }
}
section.b-container ul {
  list-style: unset !important;
  list-style-position: outside !important;
  list-style-type: circle !important;
  /* list-style-position: inside !important; */
}
section.b-container .blog-content {
  width: 75%;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  section.b-container .blog-content {
    width: 95%;
  }
}
html[lang="en"] section.b-container .blog-content,
html[lang="en"] section.b-container .blog-content * {
  direction: ltr;
}
section.b-container .blog-content .desc p {
  width: 100%;
  color: #3c4a51;
  font-weight: bold;
  font-size: 1.2rem;
}
section.b-container .blog-body{
  color: #3c4a51;
}
section.b-container .blog-body  div {
font-weight: bold;
font-size: 1.2rem;
margin: 1rem 0px;
color: var(--main-color);
line-height: 1.7;
}
section.b-container.service .blog-body > span {
  font-weight: bold;
  font-size: 1rem;
}
section.b-container .blog-body ul {
  margin: .7rem 0px;
  padding: 0px 1.5rem;
}

section.b-container.service .blog-body ul li {
  margin: .5rem 0px;
}

  /* start blogs section */
  section.blogs {
    /* padding-top: var(--section-padding); */
    padding-bottom: var(--section-padding);
    background: #F6F8FF;
  }
  section.blogs > img.blog-dec {
    position: absolute;
    top: 100px;
    right: 0;
    width: 300px;
    height: 400px;
    z-index: 3;
  }
  section.blogs > img.bg-bottom {
    width: 258px;
    position: absolute;
    top: 87%;
    left: 75px;
    z-index: 3;
    animation: moveUpDown 2s infinite ease-in-out;
  }
  @media (max-width: 847px) {
    section.blogs > img.bg-bottom {
      display: none;
    }
  }

  @keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

  section.blogs .btn-donate {
    margin-right: auto;
    margin-left: auto;
    display: flex;
    position: relative;
    z-index: 2;
  }

  section.blogs * {
  box-sizing: border-box;
  }

  body {
  min-height: 100vh;
  }
  section.blogs  .blog-slider,
  section.blogs  .blog-slider * {
      direction: ltr;
  }
  section.blogs  .blog-slider {
  width: 95%;
  position: relative;
  z-index: 5;
  max-width: 860px;
  margin: auto;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 25px;
  margin: 3rem auto;
  border-radius: 25px;
  height: 400px;
  transition: all 0.3s;
  }
  section.blogs  .blog-slider .icon-logo {
    width: 70px;
    position: absolute;
    top: 15px;
    right: 34px;
  }
  @media (max-width: 768px) {
    section.blogs .blog-slider .icon-logo {
      top: unset;
      bottom: 30px;
    }
  }
  @media screen and (max-width: 992px) {
    section.blogs  .blog-slider {
      max-width: 680px;
      height: 400px;
  }
  }
  @media screen and (max-width: 768px) {
    section.blogs  .blog-slider {
      min-height: 500px;
      height: auto;
      margin: 180px auto 2rem;
  }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    section.blogs  .blog-slider {
      height: 350px;
  }
  }
  section.blogs  .blog-slider  .blog-slider__item {
  display: flex;
  align-items: center;
  }
  @media screen and (max-width: 768px) {
    section.blogs  .blog-slider  .blog-slider__item {
      flex-direction: column;
  }
  }
  section.blogs  .blog-slider .blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
  }
  section.blogs   .blog-slider .blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
  }
  section.blogs  .blog-slider .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
  }
  section.blogs  .blog-slider .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
  }

  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
  }
  section.blogs   .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
  }
  section.blogs  .blog-slider   .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
  }
  section.blogs  .blog-slider   .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
  }
  section.blogs  .blog-slider   .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
  }
  section.blogs  .blog-slider  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
  }
  section.blogs  .blog-slider  .blog-slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  background-image: linear-gradient(147deg, #0891f8 0%, #50c0fa 74%);
  box-shadow: 4px 13px 30px 1px rgb(8 145 248 / 5%);;
  border-radius: 20px;
  transform: translateX(-80px);
  overflow: hidden;
  }
  section.blogs  .blog-slider  .blog-slider__img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(147deg, #0891f82e 0%, #378cff24 74%);
  border-radius: 20px;
  opacity: 0.8;
  }
  section.blogs  .blog-slider  .blog-slider__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
      object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all 0.3s;
  }
  @media screen and (max-width: 768px) {
    section.blogs  .blog-slider  .blog-slider__img {
      transform: translateY(-50%);
      width: 90%;
  }
  }
  @media screen and (max-width: 576px) {
    section.blogs  .blog-slider  .blog-slider__img {
      width: 95%;
  }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    section.blogs  .blog-slider  .blog-slider__img {
      height: 270px;
  }
  }
  section.blogs  .blog-slider   .blog-slider__content {
  padding-right: 25px;
  }

  @media screen and (max-width: 768px) {
    section.blogs  .blog-slider   .blog-slider__content {
      margin-top: -80px;
      text-align: center;
      padding: 0 30px;
  }
  }
  @media screen and (max-width: 576px) {
    section.blogs   .blog-slider  .blog-slider__content {
      padding: 0;
  }
  }
  section.blogs  .blog-slider  .blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
  }
  section.blogs  .blog-slider   .blog-slider__code {
  color: var(--main-color);
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
  }
  section.blogs  .blog-slider   .blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 20px;
  }
  section.blogs   .blog-slider  .blog-slider__text {
  color: var(--main-color);
  margin-bottom: 30px;
  line-height: 1.5em;
  max-width: 500px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  }
  section.blogs  .blog-slider  .blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
  }
  @media screen and (max-width: 576px) {
    section.blogs  .blog-slider  .blog-slider__button {
      width: 100%;
  }
  }
  section.blogs  .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, section.blogs .blog-slider .swiper-pagination-custom, section.blogs .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
  }
  section.blogs  .blog-slider   .blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
  }
  section.blogs  .blog-slider .swiper-button-next:after, section.blogs  .blog-slider .swiper-rtl .swiper-button-prev:after,
  section.blogs  .blog-slider .swiper-button-prev:after, section.blogs  .blog-slider .swiper-rtl .swiper-button-next:after {
    display: none;
  }
  section.blogs  .blog-slider .swiper-button-next,
  section.blogs  .blog-slider .swiper-button-prev {
    width: 40px;
    height: 40px;
    border: 1px solid var(--third-color);
    
    background: var(--third-color);
    border-radius: 50%;
  }
  section.blogs  .blog-slider .swiper-button-next i,
  section.blogs  .blog-slider .swiper-button-prev i{
    color: #ffffff;
  }
  @media (min-width: 0px) and (max-width: 768px) {
    section.blogs  .blog-slider .swiper-button-next,
    section.blogs .blog-slider .swiper-button-prev {
      top: 45%;
    }
  }
  @media (min-width: 769px) {
    section.blogs  .blog-slider .swiper-button-next {
      bottom: 15px;
      right: 15px;
      top: unset;
    }
    section.blogs .blog-slider .swiper-button-prev {
      bottom: 15px;
      right: 65px;
      top: unset;
      left: unset;
    }
  }
  @media screen and (max-width: 768px) {
    section.blogs   .blog-slider   .blog-slider__pagination {
      transform: translateX(-50%);
      left: 50% !important;
      top: 205px;
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  }
  section.blogs  .blog-slider   .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
  }
  @media screen and (max-width: 768px) {
    section.blogs   .blog-slider   .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 5px;
  }
  }
  section.blogs  .blog-slider   .blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all 0.3s;
  }
  section.blogs  .blog-slider   .blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--main-color);
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
  }
  @media screen and (max-width: 768px) {
    section.blogs  .blog-slider   .blog-slider__pagination .swiper-pagination-bullet-active {
      height: 11px;
      width: 30px;
  }
  }

  /* start footer */
  .footer {
    width: 100%;
      background-color: #F6F8FF;
      color: #fff;
      padding: 40px 0 20px;
      background-image: url(../img/footer-bg.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 240px;
  }
  html[lang='en'] .footer {
    background-image: url(../img/footer-bg-Copy.jpg);
  }
  @media (max-width: 428px) {
    .footer {
      margin-top: -100px;
    }
  }

  .footer  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
  }

  .footer  .footer-content {
      display: flex;
      flex-direction: column;
      /* gap: 20px; */
  }

  .footer   .footer-main {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
  }

  .footer .footer-section h2 {
    color: #fff;
    width: fit-content;
    border-bottom: 3px solid #fff;
    padding-bottom: .4rem;
  }

  .footer .footer-link {
      display: flex;
      align-items: center;
      color: hsla(0, 0%, 100%, 0.8);
      text-decoration: none;
      padding: 8px 0;
      transition: color 0.3s;
      font-weight: bold;
  }

  .footer   .footer-link i {
      margin-left: 10px;
      color: #ffffff;
  }

  .footer   .footer-link:hover {
      color: #fff;
  }

  .footer   .footer-contact .footer-logo-link img {
      max-width: 100px;
      margin-bottom: 5px;
  }

  .footer   .location-title {
      color: hsla(0, 0%, 100%, 0.5);
      font-size: 0.9rem;
      margin-bottom: 5px;
  }

  .footer   .footer-locations .location-item {
      margin-bottom: 15px;
  }

  .footer   .footer-bottom {
      border-top: 1px solid hsla(0, 0%, 100%, 0.1);
      padding-top: 20px;
      text-align: center;
  }

  .footer .footer-credits {
      font-size: 0.9rem;
      color: hsla(0, 0%, 100%, 0.7);
      width: fit-content;
      margin: 0px auto;
      font-weight: bold;
  }
    footer .tree img {
      position: absolute;
      top: -50px;
      left: 50%;
      width: 40px;
      transform: translateX(-50%) scale(0);
      transition: transform .4s ease-in-out;
}
footer .tree:hover img {
    transform: translateX(-50%) scale(1) rotate(360deg);
}

  .footer   .footer-credits a {
      color: #fff;
      text-decoration: none;
  }

  /* Responsive Design */
  @media (max-width: 992px) {
      .footer  .footer-main {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 576px) {
      .footer   .footer-main {
          grid-template-columns: 1fr;
      }
      .footer   .footer-link {
          font-size: 0.9rem;
      }
      .footer   .footer-contact .footer-logo-link img {
          max-width: 120px;
      }

      .footer   .footer-credits {
          font-size: 0.85rem;
      }

      .footer   .credits-logo {
          max-width: 40px;
      }
  }
.footer .footer-locations p {
  color: #ffffff !important;
  font-weight: bold;
}
  
/* 
---------------------------------------------
contact
--------------------------------------------- 
*/
.contact-us {
  background: #F6F8FF;
}
.contact-us .card-social {
  margin: 0px auto;
  padding: 0px;
  padding-top: 1rem;
  position: relative;
  z-index: 4;
}

.contact-us,
.contact-us * {
  direction: ltr;
}
@media (max-width: 847px) {
  .contact-us .container {
    margin-top: 3rem;
  }
  .contact-us .empty-space {
    display: none;
  }
}

.contact-us .section-heading h4 {
  color: var(--third-color);
}
.contact-us .section-heading h4 em {
  color: var(--main-color);
}
.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

form#contact:before {
  background-image: url(../img/contact-top-right-v3.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  max-width: 100%;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
  display: none;
}
@media (min-width: 992px) {
  .contact-dec img {
    display: block;
  }
  
.contact-us {
  padding-top: 130px;
}
}

form#contact:after {
  background-image: url(../img/contact-bottom-right-v3.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  max-width: 100%;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}
@media (max-width: 991px) {
  
.fill-form {
  padding: 80px 30px 80px 30px;
}
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
}


.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
  width: 60px;
    height: 60px;
    border-radius: 50%;
}

.fill-form .icon a {
  margin-top: 15px;
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary-color);
  transition: all .3s;
}

.fill-form .icon a:hover {
  opacity: .7;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
  outline: none;
  position: relative;
  z-index: 3;
}

form#contact button:hover {
  background-color: #fa65b1!important;
  color: #fff!important;
}

/*
---------------------------------------------
About Us
---------------------------------------------
*/

.about-us {
  background: #F6F8FF;
  position: relative;
}
@media (min-width: 960px) {
  .about-us {
    margin-top: -110px;
  }
}
.about-us .container > .main-row {
gap: 3rem 0px;
}
@media (max-width: 960px) {
  .about-us {
    padding-top: 3rem;
  }
}

.about-us > .section-title {
  color: var(--secondary-color);
  position: relative;
  z-index: 20;
}
html[lang="en"] .about-us, html[lang="en"] .about-us * {
  direction: ltr;
}

.about-us .section-heading {
  margin-bottom: 45px;
}
.about-us .section-heading > h4 {
  color: var(--main-color);
  font-weight: bold;
  margin-bottom: -8px;
  font-size: 1.7rem;
  margin-bottom: 1rem;
}
.about-us .section-heading > h4 em {
  color: var(--secondary-color);
  padding-right: .5rem;
}
html[lang='en'] .about-us .section-heading > h4 em {
  padding-right: 0px;
  padding-left: .2rem;
}

.about-us .section-heading,
.about-us .box-item,
.about-us p,
.about-us .box-item .gradient-button,
.about-us .box-item span {
  position: relative;
  z-index: 1;
}

.about-us .box-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
  background-image: url(../img/client-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.about-us .box-item h4 a {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #ffffff;
  transition: all .3s;
}
.about-us .box-item h4 img {
  width: 25px;
}

.about-us .box-item:hover h4 a {
  color: #ffffff;
}

.about-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.about-us .right-image {
  position: relative;
  z-index: 1;
  display: flex;
      justify-content: center;
      align-items: center;
}
.about-us .right-image img {
  max-width: 100%;
  margin: 0px auto;
}

html[lang="en"] .about-us:after  {
  right: 0;
}

/* start services page */
.services-page,
.services-page * {
 direction: ltr;
}

.services-page .icons-serv {
 width: 50px;
 margin-left: auto;
}
@media (max-width: 1023px) {
  .services-page .icons-serv,
  .services-page .feature-item-content .btn-donate {
    margin-left: auto;
    margin-right: auto;
  }
  
}
.services-page .btn-donate {
 display: flex;
justify-content: center;
align-items: center;
}
.services-page .feature-item-content .btn-donate  {
 margin-left: auto;
}

 .services-page  {
     --maximum-yellow-red: hsl(37, 100%, 68%);
     --royal-blue-dark: hsl(231, 61%, 22%);
     --silver-chalice: hsl(0, 0%, 70%);
     --oxford-blue: hsl(231, 100%, 8%);
     --bittersweet: hsl(2, 100%, 69%);
     --french-rose: hsl(342, 90%, 61%);
     --davys-gray: hsl(180, 3%, 28%);
     --cool-gray: hsl(240, 13%, 62%);
     --platinum: hsl(0, 0%, 92%);
     --white-2: hsl(0, 0%, 98%);
     --white: hsl(0, 0%, 100%);
     --black: hsl(0, 0%, 0%);
     --rythm: hsl(240, 9%, 53%);
     --ff-poppins: "Poppins", sans-serif;
     --fs-1: 32px;
     --fs-2: 26px;
     --fs-3: 22px;
     --fs-4: 18px;
     --fs-5: 15px;
     --fs-6: 14px;
     --fw-700: 700;
     --fw-600: 600;
     --fw-500: 500;
     --transition: 0.25s ease-in-out;
 }

 .services-page  *, .services-page *::before, .services-page *::after { margin: 0; padding: 0; box-sizing: border-box; }
 .services-page   li { list-style: none;     margin-top: 5rem;}
 .services-page  a { text-decoration: none; }
 .services-page  a, .services-page img, .services-page button, .services-page span, .services-page ion-icon, .services-page label, .services-page input, .services-page textarea { display: block; }
 .services-page   textarea, .services-page input { font: inherit; background: none; border: none; width: 100%; }
 .services-page :is(input, textarea):focus { outline: none; }
 .services-page  :focus { outline-offset: 4px; }
 .services-page  { font-family: var(--ff-poppins); scroll-behavior: smooth; }
 .services-page  { background: var(--white); overflow-x: hidden; }
 .services-page   ::-webkit-scrollbar { width: 10px; }
 .services-page  ::-webkit-scrollbar-track { background: var(--white); }
 .services-page  ::-webkit-scrollbar-thumb { background: hsl(0, 0%, 50%); }
 .services-page  .container { padding: 0px 15px; position: relative; z-index: 3;}
 .services-page   .h1, .services-page .h2, .services-page .h3 { font-weight: var(--fw-600); line-height: 1.3; text-transform: capitalize;}
 .services-page  .h1 { color: var(--main-color); font-size: 2.5rem; }
 /* .services-page  .h2 { font-size: var(--fs-2); } */

 @media (max-width: 768px) {
  .services-page  .h2 {
    font-size: 2rem;
  }
 }
 .services-page  .h3 { color: var(--oxford-blue); font-size: var(--fs-3); }
 .services-page  .h4 { color: var(--royal-blue-dark); font-size: var(--fs-5); font-weight: var(--fw-600); }
 .services-page   .btn { font-size: var(--fs-6); text-transform: uppercase; font-weight: var(--fw-600); padding: 10px 40px; border: 1px solid; border-radius: 6px; }
 .services-page   .btn-primary { background: var(--bittersweet); border-color: var(--bittersweet); color: var(--white); }
 .services-page   .btn-primary:is(:hover, :focus) { --bittersweet: hsl(2, 90%, 65%); }
 .services-page    .btn-secondary:is(:hover, :focus) { background: hsla(0, 0%, 100%, .1); }

 /* hero-serv */
 .services-page   .hero-serv { position: relative; padding: 130px 0px 140px; z-index: 1; }
 .services-page   .hero-serv .btn-primary { margin-inline: auto; }
 .services-page   .hero-serv-content { text-align: center; }
 .services-page   .hero-serv-title, .hero-serv-text { margin-bottom: 20px; }
 .services-page   .hero-serv-text { font-size: var(--fs-4); color: var(--black-color); width: 90%; line-height: 1.7;font-weight: bold;}
 .services-page   .hero-serv-banner { display: none; }
 .services-page   .shape-content { position: absolute; width: 900px; top: -230px; right: -300px; z-index: -1; }

 .services-page   .f-sev-card.single-service { 
     position: relative; 
     background-color: var(--white); 
     border-radius: 10px; 
     padding: 40px 30px; 
     overflow: hidden; 
     transition: all .3s; 
     box-shadow: 0 2px 4px hsla(0, 0%, 0%, .1); 
 }
 .services-page   .f-sev-card.single-service .content { 
     position: relative; 
     z-index: 20; 
     display: flex; 
     flex-direction: column; 
     align-items: center; 
 }
 .services-page   .f-sev-card.single-service .circle-before { 
     position: absolute; 
     top: 0; 
     right: 0; 
     transform: translate(40%, -40%); 
     width: 150px; 
     height: 150px; 
     background-color: hsl(205.75deg 94.49% 50.2%); 
     border: 6px solid var(--royal-blue-dark); 
     border-radius: 50%; 
     opacity: 0.5; 
     z-index: 10; 
     transition: all .6s; 
 }
 .services-page  .f-sev-card.single-service:hover .circle-before { 
     width: 100%; 
     height: 100%; 
     transform: none; 
     background-color: var(--main-color);
     border: 0; 
     border-radius: 0; 
     opacity: 1; 
 }
 .services-page  .f-sev-card.single-service .icon { 
     display: flex;
     align-items: center;
     justify-content: center;
     align-self: flex-start;
     margin-bottom: 26px; 
     width: 70px; 
     height: 70px; 
     background-color: #0891f8; 
     border-radius: 5px; 
     line-height: 70px; 
     text-align: center; 
     color: var(--white); 
     font-size: 30px; 
     transition: all .3s; 
 }
 .services-page   .f-sev-card.single-service:hover .icon { 
     background-color: var(--white); 
     color: var(--bittersweet); 
 }
 .services-page  .f-sev-card.single-service .title { 
     margin-bottom: 18px; 
     font-weight: var(--fw-700); 
     font-size: var(--fs-3); 
     font-size: 1.6rem;
     transition: color .3s; 
 }
 .services-page   .f-sev-card.single-service:hover .title { 
     color: var(--white); 
 }
 .services-page   .f-sev-card.single-service .description { 
     margin-bottom: 20px; 
     font-size: var(--fs-6); 
     color: var(--davys-gray); 
     transition: color .3s; 
 }
 .services-page   .f-sev-card.single-service:hover .description { 
     color: var(--white); 
 }
 .services-page   .f-sev-card.single-service .learn-more { 
     align-self: flex-start;
     position: relative; 
     font-size: var(--fs-6); 
     color: var(--oxford-blue); 
     text-decoration: none; 
     font-weight: var(--fw-500); 
     transition: color .3s; 
 }
 .services-page   .f-sev-card.single-service:hover .learn-more { 
     color: var(--white); 
 }
 .services-page   .f-sev-card.single-service .learn-more:after { 
     content: ""; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     height: 1px; 
     background-color: var(--bittersweet); 
     transition: background-color .3s; 
 }
 .services-page  .f-sev-card.single-service:hover .learn-more:after { 
     background-color: var(--white); 
 }

 .services-page  .f-sev-bottom-banner { margin-bottom: 120px; }
 @media (max-width: 567px) {
  .services-page .f-sev-bottom-banner {
    margin-bottom: 3rem;
  }
}
.services-page .f-sev-bottom .section-title::after,
.services-page .f-sev-bottom .section-title::before {
  display: none;
}

 .services-page  .f-sev-bottom-banner img { width: 100%; height: 100%; animation: moveUpDown 2s infinite ease-in-out; }
 .services-page  .f-sev-bottom .section-title { margin-bottom: 10px; color: #ffffff;}
 .services-page  .f-sev-bottom .section-text { color: #ffffff !important; font-size: var(--fs-4); margin-bottom: 40px; }
 .services-page  .f-sev-bottom .btn-secondary { color: var(--white); margin-inline: auto;}

 .services-page   .features { padding: 3rem 0; text-align: center; padding-top: 0px; }
 .services-page   .features .section-title { color: var(--royal-blue-dark); margin-bottom: 20px; }
 .services-page   .features .section-text { color: var(--rythm); font-size: var(--fs-4); margin-bottom: 2rem; font-weight: bold;}
 .services-page   .features-item:first-child { margin-bottom: 100px; }
 .services-page   .features-item-banner { max-width: 350px; margin-inline: auto; margin-bottom: 60px; }
 .services-page   .features-item-banner img { width: 100%;     width: 350px;
height: 350px;
border-radius: 50%;}
 .services-page   .features-item .item-title { color: var(--royal-blue-dark); margin-bottom: 20px; }
 .services-page   .features-item .item-text { color: var(--rythm); font-size: var(--fs-4); margin-bottom: 1rem; max-width: 600px;
  margin: 0px auto 1rem;}
 /* GO-TOP */
 .services-page   .go-top { 
     position: fixed; 
     bottom: 30px; 
     right: 30px; 
     z-index: 5; 
     width: 50px; 
     height: 50px; 
     background: linear-gradient(-45deg, var(--maximum-yellow-red), var(--french-rose)); 
     box-shadow: 0 2px 4px hsla(0, 0%, 0%, .25); 
     display: grid; 
     place-items: center; 
     border-radius: 50%; 
     color: var(--white); 
     font-size: 22px; 
     opacity: 0; 
     visibility: hidden; 
     pointer-events: none; 
     transition: var(--transition); 
 }
 .services-page   .go-top.active { 
     opacity: 1; 
     visibility: visible; 
     pointer-events: all; 
 }
 .services-page .f-sev-bottom-content {
  display: flex;
  flex-direction: column;
 }


 /* MEDIA QUERIES */
 @media(max-width: 375px) {
  .services-page .hero-serv {
    padding-bottom: 3rem;
  }
 }
 @media (max-width: 45px) {
  .services-page .hero-serv {
    padding-bottom: 50px;
  }
 }
 @media (max-width: 1023px) {
  section.intro2 .btn-donate {
    margin: 0px auto;
  }
  .services-page .f-sev-bottom .section-text {
    text-align: center;
  }
 }
 @media(min-width: 450px) {
     :root { --fs-1: 60px; }
     .services-page   .h1, .services-page  .h2 { font-weight: var(--fw-700); }
     .services-page   .btn { padding-block: 15px; }
     .services-page   .hero-serv { padding: 160px 0 175px; }
     .services-page   .shape-content { top: -70px; right: -260px; }
     .services-page   .f-sev-bottom-banner { max-width: 400px; margin-inline: auto; margin-bottom: 40px; }
     .services-page   .f-sev-bottom-content { padding-inline: 50px; }
     .services-page   .features .h2 { --fs-2: 32px; }
 }

 @media(min-width: 560px) {
     .services-page  .container { max-width: 550px; margin-inline: auto; }
     .services-page  .hero-serv-content, .services-page .f-sev-bottom-content { text-align: left; }
     .services-page   .hero-serv .btn-primary, .services-page .f-sev-bottom .btn-secondary { margin-inline: 0; margin-left: auto; }
     .services-page  .shape-content { top: -156px; right: -152px; }
 }

 @media(min-width: 768px) {
     :root { --fs-2: 35px; --fs-4: 20px; }
     .services-page   .container { max-width: 740px; }
     .services-page  .f-sev-list { grid-template-columns: 1fr 1fr; }
     .services-page  .f-sev-card.single-service { height: 100%; }
 }
@media (max-width: 1023px) {
  .services-page .h1 {
    text-align: center;
  }
  .services-page .hero-serv-text,
  .services-page .hero-serv .btn-donate {
    margin: 0px auto;
    text-align: center;
  }
  .services-page .hero-serv .btn-donate {
    margin-top: 1rem;
  }
}
 @media(min-width: 1024px) {
     .services-page .container { max-width: 950px; }
     .services-page .hero-serv-content { max-width: 550px; }
     .services-page .hero-serv-banner { display: block; position: absolute; top: 77%; right: 0; transform: translateY(-50%); width: 540px; padding-top: 500px; background: url('../img/services/10170121.webp') no-repeat; background-size: contain; }
         .services-page .f-sev-top .section-text { max-width: 650px; margin-inline: auto; }
         .services-page .f-sev-list { grid-template-columns: repeat(3, 1fr); }
         .services-page .f-sev-bottom { display: flex; justify-content: space-between; align-items: center; }
         .services-page .f-sev-bottom-banner { margin-bottom: 0; height: 330px; }
         .services-page .f-sev-bottom-content { padding-inline: 0; width: 50%; text-align: right; }
         .services-page .features :is(.section-title, .section-text) { max-width: 650px; margin-inline: auto; }
         .services-page .features-item { display: flex; align-items: center; gap: 50px; }
         .services-page .features-item:nth-child(even) { flex-direction: row-reverse; }
         .services-page .features-item-banner { margin-inline: 0; margin-bottom: 0; }
         .services-page .feature-item-content { width: 50%; text-align: right; }
         .services-page .f-sev-bottom .section-title {margin-left: auto; margin-right: 0px;}
         html[lang='en'].services-page .f-sev-bottom .section-title {margin-right: auto; margin-left: 0px;}
 }

 @media(min-width: 1200px) {
     .services-page  { --fs-2: 42px; }
     .services-page   .container { max-width: 1150px; }
     .services-page   .hero-serv-banner { right: 35px; }
     .services-page   .f-sev-bottom-banner { height: 400px; }
     .services-page   .features .h2 { --fs-2: 42px; }
     .services-page   .features :is(.section-text, .section-title) { max-width: 700px; }
 }

 @media screen and (min-width: 48rem) {
     .services-page   .other-services {
         display: flex;
         align-items: center;
     }
     .services-page   .other-services .bg,
     .services-page   .other-services .bg2 {
         opacity: 0.1;
     }
 }

 @media screen and (min-width: 93.75rem) {
     .services-page   .other-services .swiper {
         width: 85%;
     }
 }
 /* START articles */
 .services-page .last-articles {
 width: 100%;
 padding-top: 2rem;
 padding-bottom: 40px;
 background: #F6F8FF;
 }
 .services-page .last-articles,
 .services-page .last-articles * {
     direction: ltr;
 }
 .services-page .last-articles h2 {
     margin-bottom: 1rem !important;
 }

 .services-page .last-articles .section-text {
     max-width: 700px;
     margin: 0px auto;
     text-align: center;
     padding: 0px 1rem;
     font-weight: bold;
 }
 .services-page .last-articles .l-a-s-c {
 position: relative;
 margin-top: 50px;
 cursor: grab;
 }

 .services-page .last-articles .blog-swiper {
 z-index: 0;
 position: static;
 width: 100%;
 overflow: hidden;
 }

 .services-page .last-articles .swiper-wrapper {
 z-index: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }

 .services-page .last-articles .blog-swiper .card {
 height: 350px;
 position: relative;
 border-radius: 40px;
 transition: all 0.8s;
 perspective: 600px;
 perspective-origin: center bottom;
}
.services-page .last-articles .blog-swiper .card img.main-logo {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 50px;
  z-index: 3;
}
.services-page .last-articles .blog-swiper .upper-part {
 width: 100%;
 height: 85%;
 border-radius: 40px 40px 0 0;
 position: relative;
 transform-style: preserve-3d;
 transition: all 0.9s;
}

.services-page .last-articles .blog-swiper .upper-part-face,
.services-page .last-articles .blog-swiper .upper-part-back {
 text-align: center;
 background-color: lightgray;
 color: var(--main-color);
 border: 3px solid var(--main-color);
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 width: 100%;
 height: 100%;
 padding: 15px;
 border-radius: 40px 40px 0 0;
 font-weight: bold;
 z-index: 2;
 backface-visibility: hidden;
 transition: all 0.6s;
}

.services-page .last-articles .blog-swiper .upper-part-back {
 background-color: var(--main-color);
 color: lightgray;
 transform: rotatex(180deg);
 line-height: 1.7;
 font-weight: bold;
}

.services-page .last-articles .blog-swiper .lower-part {
 width: 100%;
 height: 15%;
 border-radius: 0 0 40px 40px;
 position: relative;
 transform-style: preserve-3d;
 transform-origin: center top;
 transition: all 0.9s;
}

.services-page .last-articles .blog-swiper .lower-part-face,
.services-page .last-articles .blog-swiper .lower-part-back {
  background-color: var(--main-color);
  width: 100%;
  height: 100%;
  color: lightgray;
  font-weight: bold;
  position: absolute;
  border-radius: 0 0 27px 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0, 0.2px);
  backface-visibility: hidden;
  z-index: 2;
}

.services-page .last-articles .blog-swiper .lower-part-back {
 backface-visibility: visible;
 border-radius: 40px;
 color: var(--main-color);
 background-color: lightgray;
 transform: rotateX(180deg);
 z-index: 1;
 transition: border-radius 0.6s;
}

.services-page .last-articles .blog-swiper .card:hover > .upper-part {
 transform: rotatex(-0.5turn);
 border-radius: 40px;
}

.services-page .last-articles .blog-swiper .card:hover > .lower-part {
 transform: translateY(53.3px) rotateX(0.5turn);
}

.services-page .last-articles .blog-swiper .card:hover > .lower-part > .lower-part-back {
 border: 3px solid var(--main-color);
 border-radius: 0 0 40px 40px;
}

 .services-page .last-articles .blog-swiper .card .card-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
 }
 .services-page .last-articles .blog-swiper .card.card-1 .card-bg {
     background-image: url("../img/services/standard-quality-control-collage-concept.webp");
 }
 .services-page .last-articles .blog-swiper .card.card-2 .card-bg {
     background-image: url("../img/services/medical-questionnaire.webp");
 }
 .services-page .last-articles .blog-swiper .card.card-3 .card-bg {
     background-image: url("../img/services/woman-working-with-finances-table-laptop-smartphone-money-notepad-clock.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-4 .card-bg {
     background-image: url("../img/services/unrecognizable-man-neon-safety-vest-business-suit-sitting-desk-using-laptop.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-5 .card-bg {
     background-image: url("../img/services/cropped-view-sales-manager-using-calculator.webp");
 }
 .services-page .last-articles .blog-swiper .card.card-6 .card-bg {
     /* background-image: url("/assets/img/services/crop-hand-writing-notebook-near-computer.webp"); */
     background-image: url("../img/services/website-hosting-concept-with-polygonal-shapes.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-7 .card-bg {
     background-image: url("../img/services/crop-hand-writing-notebook-near-computer.webp");
    }
 .services-page .last-articles .blog-swiper .card.card-8 .card-bg {
     background-image: url("../img/services/english-book-resting-table-working-space.webp");
 }
 .services-page .last-articles .blog-swiper .card.card-9 .card-bg {
     background-image: url("../img/services/side-view-radio-microphone-with-copy-space.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-10 .card-bg {
     background-image: url("../img/services/close-up-girl-online-school.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-11 .card-bg {
     background-image: url("../img/services/3d-elements-islamic-ramadan-celebration.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-12 .card-bg {
     background-image: url("../img/services/person-using-wax-seal-front-view.webp");
 }
 .services-page  .last-articles .blog-swiper .card.card-13 .card-bg {
     background-image: url("../img/services/headphones-podcasting-sitting-table-man.webp");
 }

 .services-page  .last-articles .blog-swiper .card::before {
 content: "";
 height: 100px;
 width: 100px;
 position: absolute;
 top: -20%;
 left: -12%;
 border-radius: 50%;
 border: 35px solid rgba(255, 255, 255, 24%);
 transition: all .8s ease;
 filter: blur(.5rem);
 z-index: 5;
 pointer-events: none;
 }

 .services-page  .last-articles .blog-swiper .text {
 flex-grow: 1;
 padding: 15px;
 display: flex;
 flex-direction: column;
 color: aliceblue;
 font-weight: 900;
 font-size: 1.2em;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 }
 .services-page .last-articles .blog-swiper .text::after { 
 background: rgba(0, 0, 0, 0.2); 
 }
 .services-page .last-articles .blog-swiper .text::before {
 background: rgba(0, 0, 0, 0.3);
 z-index: 2;
 }
 .services-page .last-articles .blog-swiper .text .title {
 bottom: 7%;
 right: 5%;
 z-index: 3;
 }
 html[lang="en"] .services-page .last-articles .blog-swiper .text .title {
 direction: ltr;
 padding-left: .5rem;
 }
 .services-page .last-articles .blog-swiper .subtitle {
 font-size: .6em;
 font-weight: 300;
 color: rgba(240, 248, 255, 0.691);
 }

 .services-page .last-articles .blog-swiper .info {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 0px auto;
 padding: .3rem;
 width: 100%;
 border-radius: 0px 0px 15px 15px;
 overflow: hidden;
 background-color: rgba(247, 234, 234, 0.589);
 text-align: center;
 }
 .services-page .last-articles .blog-swiper .info span {
     text-align: center;
     width: 100%;
 }
 .services-page .last-articles .blog-swiper .info i {
 color: #dcc33e;
 }
 .services-page .last-articles .blog-swiper .card:hover::before {
 width: 190px;
 height: 190px;
 top: -19%;
 left: 62%;
 filter: blur(0rem);
 }

 /* start about page */
    .freelance_section {
        padding-top: var(--section-padding);
    }
    .freelance_section > .section-text {
      max-width: 600px;
      font-weight: bold;
      margin: 0px auto;
      text-align: center;
    }
    .freelance_section::before {
    content: '';
    background-image: url(https://tawasol.sa/assets/img/blog-left-dec.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -300px;
    width: 961px;
    height: 1020px;
    z-index: 0;
}
.freelance_section #accordion {
  position: relative;
  z-index: 3;
}
    html[lang="en"] .freelance_section,
    html[lang="en"] .freelance_section * {
        direction: ltr;
    }
    @media (min-width: 768px) {
        html[lang="ar"] .freelance_section .right-ar {
        margin-left: 0px !important;
        margin-right: 8% !important; 
    }
    }

    .freelance_section .heading_container h2{
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: var(--secondary-color);
}
.freelance_section .category_section .heading_container h2 {
  border-bottom: 1px solid #ffffff;
}
.freelance_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.freelance_section .tab_container .t-link-box {
  margin: 25px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.freelance_section .tab_container .t-link-box .img-box {
  width: 90px;
  height: 90px;
  min-width: 90px;
  min-height: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100%;
  margin-right: 35px;
}
html[lang="ar"] .freelance_section .tab_container .t-link-box .img-box {
    margin-left: 35px;
    margin-right: 0px;
}

.freelance_section .tab_container .t-link-box .img-box img {
  width: auto;
  height: auto;
  max-width: 100%;
}

.freelance_section .tab_container .t-link-box .detail-box h5 {
  font-weight: bold;
  color: var(--main-color);
  font-size: 1.5rem;
}

.freelance_section .tab_container .t-link-box .detail-box h3 {
  font-weight: bold;
  color: var(--black-color);
}

.freelance_section .tab_container .t-link-box[aria-expanded="true"] .img-box, .freelance_section .tab_container .t-link-box:hover .img-box {
  /* background-color: #007dfe; */
}

.freelance_section .img-box img {
  width: 100%;
}

:root {

--medium-sea-green: hsl(157, 100%, 36%);
--silver-chalice: hsl(0, 0%, 66%); 
--granite-gray: hsl(0, 0%, 40%);
--sonic-silver: hsl(208, 7%, 46%);
--dodger-blue: hsl(205, 100%, 50%);
--oxford-blue: hsl(219, 37%, 18%);
--light-gray: hsl(0, 0%, 80%);
--gunmetal: hsl(216, 14%, 21%);
--cultured: hsl(210, 12%, 97%);
--charcoal: hsl(210, 29%, 24%);
--white: hsl(0, 0%, 100%);
--jet: hsl(0, 0%, 20%);

--gradient: linear-gradient(0.5turn, hsl(213, 42%, 91%), hsl(0, 0%, 100%));

--ff-rubik: "Rubik", sans-serif;
--ff-turret: "Turret Road", sans-serif;

--fs-1: 28px;
--fs-2: 26px;
--fs-3: 24px;
--fs-4: 20px;
--fs-5: 18px;
--fs-6: 17px;
--fs-7: 15px;
--fs-8: 13px;

--fw-300: 300;
--fw-500: 500;

--transition: 0.25s ease-in-out;
}


.featuress, .featuress *, .featuress *::before, .featuress *::after { margin: 0; padding: 0; box-sizing: border-box; }
.featuress li { list-style: none; }
.featuress a { text-decoration: none; }
.featuress input { font: inherit; background: none; width: 100%; }
.featuress button { background: none; border: none; font: inherit; cursor: pointer; }
.featuress a, .featuress img, .featuress span, .featuress input, .featuress button, .featuress ion-icon { display: block; }
.featuress ion-icon { --ionicon-stroke-width: 25px; }
.featuress  :focus { outline-offset: 4px; }
.featuress  ::marker { color: var(--sonic-silver); }
body { background: var(--white); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 90%); }
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }

  .featuress .container { padding: 0 15px; position: relative; z-index: 2;}

.featuress .btn {
color: var(--oxford-blue);
font-size: var(--fs-7);
font-weight: var(--fw-500);
text-transform: capitalize;
padding: 10px 34px;
border: 1px solid var(--light-gray);
border-radius: 4px;
}

.featuress .btn-primary { background: var(--dodger-blue); color: var(--white); border-color: var(--dodger-blue); }
.featuress  .btn-primary:is(:hover, :focus) { --dodger-blue: hsl(205, 100%, 55%); }

.featuress .h1, .featuress .h2, .featuress .h3, .featuress .h4 { color: var(--gunmetal); font-weight: var(--fw-500); }
.featuress  .h1 { font-size: var(--fs-1); }
.featuress .h2 { font-size: var(--fs-2); }
.featuress .h3 { font-size: var(--fs-3); }
.featuress .h4 { font-size: var(--fs-5); }

.featuress .section-text { color: var(--sonic-silver); line-height: 1.6; font-weight: bold;}
.featuress .section-subtitle { 
color: var(--sonic-silver); 
font-size: var(--fs-8); 
font-weight: var(--fw-500); 
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 25px;
text-align: center; 
}

/*featuress*/

.featuress {  padding-bottom: 0px;}
.featuress .section-title { margin-bottom: 50px; }
.featuress .card-icon {
  color: var(--sonic-silver);
  font-size: 60px;
  width: max-content;
  margin-inline: auto;
  margin-bottom: 20px;
}
.featuress .card-icon img.icon-about {
width: 50px;
}
.featuress .featuress-list { display: grid; gap: 40px; }
.featuress .featuress-card .card-content {
  display: flex;
  flex-direction: column;
}
/*MEDIA QUERIES*/

@media (min-width: 450px) {
:root { --fs1: 30px; }

.featuress  .container { padding: 0 25px; }

.featuress  .hero-text { display: flex; justify-content: center; align-items: center; gap: 13px; }
.featuress  .hero-text span:not(:last-child) { position: relative; margin-bottom: 0; }
.featuress  .hero-text span:not(:last-child)::after {
          content: '';
          position: absolute;
          top: 0;
          right: -6px;
          width: 1px;
          height: 100%;
          background: var(--sonic-silver);
      }

      .featuress  .card-text { max-width: 300px; }

      .featuress  .cta-title { --fs-4: 25px; padding-inline: 30px; }

      .featuress  .footer-link-box { grid-template-columns: 1fr 1fr; text-align: initial; }
}

@media (min-width: 500px) {
:root {
  --fs-1: 32px;
  --fs-2: 32px;
  --fs-3: 30px;
  --fs-5: 19px;
  --fs-8: 15px;
}

.featuress .container { max-width: 480px; margin-inline: auto; }
.featuress .btn { --fs7: 17px; }
.featuress .section-text, .featuress .card-text { font-size: var(--fs-6); }

.featuress .input-field { font-size: 17px; }
}

@media (min-width: 768px) {
:root {
  --fs-1: 40px;
  --fs-2: 34px;
  --fs-3: 32px;
}

.featuress  .container { max-width: 820px; }

.featuress .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.featuress  .hero-content { text-align: left; margin-bottom: 0; }
.featuress  .hero .btn-primary { justify-content: flex-start; } 

.featuress  .service .section-text { max-width: 650px; margin-inline: auto; }
.featuress  .service-list { grid-template-columns: 1fr 1fr; gap: 60px 0; }

.featuress  .about-top, .featuress .about-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.featuress  .about-bottom .about-content { grid-column: 1 / 2; grid-row: 1 / 2; }

.featuress .section-title,.featuress  .faq .section-title { max-width: 600px; margin-inline: auto; }
.featuress  .featuress-list { grid-template-columns: 1fr 1fr; }

.featuress  .pricing .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }

.featuress  .cta-card { box-shadow: 0 15px 30px hsla(0, 0%, 0%, .07); padding-block: 60px; border-radius: 16px; }
.featuress  .cta-title { --fs-4: 30px; padding-inline: 0; max-width: 550px; margin-inline: auto; }

.featuress  .footer-link-box { grid-template-columns: repeat(4, 1fr); }

.featuress  .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; }

.featuress  .copyright { margin-bottom: 0; }

}
.featuress .card-title {
font-size: 1.9rem;
font-weight: bold;
color:var(--secondary-color);
}
@media (max-width: 1023px) {
  .featuress .card-title,
  .featuress .section-text {
    text-align: center;
  }
}

@media (min-width: 1024px) {
:root {
  --fs-1: 43px;
  --fs-2: 41px;
  --fs-3: 38px;
  --fs-5: 16px;
  --fs-6: 16px;
}

.featuress   .container { max-width: 990px; padding: 0; }
.featuress   .btn { --fs-7: 18px; padding-block: 16px; }
  .featuress  .nav-open-btn, .featuress .nav-close-btn { display: none; }
  .featuress  .navbar {
  opacity: 1;
  visibility: visible;
  position: static;
  width: auto;
  height: auto;
  padding-top: 0;
  box-shadow: none;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.featuress  .navbar .btn-primary {  --fs-7:16px; width: auto; padding: 10px 23px; border-radius: 4px; }

.featuress  .navbar-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
}

.featuress  .navbar-item:not(:last-child) { border-bottom: none; }
.featuress  .navbar-link { --fs-5: 16px; color: var(--charcoal); padding: 0 10px; }
.featuress  .navbar-link:is(:hover, :focus) { background: none; }


.featuress  .hero::before { left: 50%; }
.featuress  .hero .container { gap: 100px; }
.featuress  .input-field { font-size: 19px; }

.featuress  .service .section-text { --fs-6: 18px; margin-bottom: 50px; }
.featuress  .service-list { grid-template-columns: repeat(4, 1fr); gap: 30px; }

.featuress  .about-top,.featuress  .about-bottom { gap: 40px; }
.featuress   .about-top { margin-bottom: 100px; }
.featuress  .about-banner { margin-bottom: 0; }

.featuress  .featuress-card {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  /* text-align: left; */
}

/* .featuress .card-title { text-align: right; } */
.featuress  .grid-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.featuress  .pricing .section-title, .pricing .section-text { text-align: center; }
.featuress   .pricing .section-text { max-width: 650px; margin-inline: auto; }

.featuress  .cta-card { display: flex; justify-content: space-between; align-items: center; padding: 50px; }
.featuress  .cta-title { --fs-4: 32px; margin-inline: 0; margin-bottom: 0; text-align: left; }

.featuress  .footer-top .container { display: flex; justify-content: space-between; align-items: flex-start; }
.featuress  .footer-brand { max-width: 300px; margin-bottom: 0; }
.featuress  .footer-list li:not(:last-child) { margin-bottom: 15px; }
.featuress  .footer-list li:first-child { margin-bottom: 20px; }
.featuress  .footer-link { min-width: 130px; }
}

@media (min-width: 1200px) {
:root {
  --fs-1: 52px;
  --fs-2: 50px;
  --fs-3: 46px;
  --fs-5: 22px;
  --fs-6: 19px;
}

.featuress  .container { max-width: 1100px; }
.featuress  .navbar-list { margin-right: 30px; }
.featuress  .navbar-link { --fs-7: 17px; padding: 0 15px; }

.featuress  .hero { padding-top: 180px; }
.featuress  .hero .btn-primary { margin-top: 40px; }
.featuress  .hero-form { margin-bottom: 40px; }

.featuress  .service .section-text { --fs-6: 20px; max-width: 700px; margin-bottom: 70px; }
.featuress  .service .card-icon, .featuress .card-icon { font-size: 70px; }

.featuress  .about-top, .featuress .about-bottom { gap: 60px; }

.featuress .section-title, .featuress .faq .section-title { max-width: 700px; margin-bottom: 80px; }

.featuress  .cta-title { --fs-4: 38px; max-width: 700px; }

.featuress  .footer-brand { max-width: 350px; }
.featuress  .footer-top .h4 { --fs-5: 20px; }
.featuress  .footer-link { font-size: 18px; min-width: 140px; }
.featuress  .copyright,.featuress  .social-link { font-size: 17px; }
.featuress  .social-list { column-gap: 21px; }
.featuress  .social-list > li:not(:last-child)::after { right: -10px; }

.featuress  .go-top-btn { bottom: 30px; right: 30px; width: 50px; height: 50px; }
}

/* START SOCIAL */
.f-c-l-r.card {
  right: 0;
}
.s-m-float.card,
.f-c-l-r.card {
  max-width: fit-content;
  background: transparent !important;
  border: none !important;
  border-radius: 15px;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  position: fixed !important;
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transition: 0.5s;
  display: none;
}

.s-m-float.card {
  left: 0;
  display: none;
}
.s-m-float.card:hover,
.f-c-l-r.card:hover {
  animation: ease-out 5s;
  background: rgba(173, 173, 173, 0.05);
}
.s-m-float.card ul,
.f-c-l-r.card ul {
  padding: 1rem;
  display: flex;
  list-style: none;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.f-c-l-r.card ul {
  gap: 2rem;
}
.s-m-float.card ul li,
.f-c-l-r.card ul li{
  cursor: pointer;
}

.s-m-float.card ul li svg,
.f-c-l-r.card ul li svg{
  transition: all 0.3s;
  padding: 1rem;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  color: var(--secondary-color);
  fill: var(--secondary-color);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
}
.s-m-float.card ul li i {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  padding: 1rem;
  height: 55px;
  width: 55px;
  border-radius: 100%;
  color: var(--secondary-color);
  fill: var(--secondary-color);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
  font-size: 1.2rem;
}

.s-m-float.card ul li .text,
.f-c-l-r.card ul li .text{
  opacity: 0;
  border-radius: 5px;
  padding: 5px;
  transition: all 0.3s;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  z-index: 9999;
    pointer-events: none;
}
.s-m-float.card ul li .text {
  box-shadow: -5px 0 1px rgba(153, 153, 153, 0.2),
  -10px 0 1px rgba(153, 153, 153, 0.2),
  inset 0 0 20px rgba(255, 255, 255, 0.3),
  inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.082);
}
.f-c-l-r.card ul li .text {
  box-shadow: 5px 0 1px rgba(153, 153, 153, 0.2),
  10px 0 1px rgba(153, 153, 153, 0.2),
  inset 0 0 20px rgba(255, 255, 255, 0.3),
  inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.082);
}
/*isometric prooyection*/
.s-m-float.card .iso-pro,
.f-c-l-r.card .iso-pro {
  transition: 0.5s;
  backdrop-filter: blur(10px);
  border-radius: 50%;
}

.s-m-float.card .iso-pro .s-m-icon,
.f-c-l-r.card .iso-pro .s-m-icon {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.s-m-float.card .iso-pro:hover a > .svg ,
.f-c-l-r.card .iso-pro:hover a > .svg  {
  border-radius: 100%;
}
.s-m-float.card .iso-pro:hover a > .svg {
  transform: translate(15px, -15px);
}
.f-c-l-r.card .iso-pro:hover a > .svg  {
  transform: translate(-15px, -15px);
}

.s-m-float.card .iso-pro:hover .svg  {
  transform: translate(5px, -5px);
}
.f-c-l-r.card .iso-pro:hover .svg {
  transform: translate(-5px, -5px);
}
.s-m-float.card .iso-pro span ,
.f-c-l-r.card .iso-pro span  {
  opacity: 0;
  position: absolute;
  color: #1877f2;
  border-color: #1877f2;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.5), 0 5px 5px rgba(0, 0, 0, 0.164);
  border-radius: 50%;
  transition: all 0.3s;
  height: 55px;
  width: 55px;
}

.s-m-float.card .iso-pro:hover span ,
.f-c-l-r.card .iso-pro:hover span  {
  opacity: 1;
}

.s-m-float.card .iso-pro:hover span:nth-child(1) ,
.f-c-l-r.card .iso-pro:hover span:nth-child(1)  {
  opacity: 0.2;
}

.s-m-float.card .iso-pro:hover span:nth-child(2) ,
.f-c-l-r.card .iso-pro:hover span:nth-child(2)  {
  opacity: 0.4;

}
.s-m-float.card .iso-pro:hover span:nth-child(2) {
  transform: translate(5px, -5px);
}
.f-c-l-r.card .iso-pro:hover span:nth-child(2) {
  transform: translate(-5px, -5px);
}
.s-m-float.card .iso-pro:hover span:nth-child(3) ,
.f-c-l-r.card .iso-pro:hover span:nth-child(3)  {
  opacity: 0.6;

}
.s-m-float.card .iso-pro:hover span:nth-child(3) {
  transform: translate(10px, -10px);
}
.f-c-l-r.card .iso-pro:hover span:nth-child(3) {
  transform: translate(-10px, -10px);
}

@media only screen and (min-width: 767px) {
  .s-m-float.card,
  .f-c-l-r.card  {
    display: flex;
  }
}





@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
  }

  8% {
    animation-timing-function: ease-out;
  }

  22% {
    transform: translateY(-7.5%);
  }
}





html[lang="en"] section.hero .swiper-container.swiper-container-hero .content {
  /* text-align: left; */
  /* align-items: flex-end; */
  }
html[lang="en"] .header > div,
html[lang="en"] .header .header-logo,
html[lang="en"] .header > div > .box-links {
  flex-direction: row-reverse;
  /* align-items: flex-end; */
  }



/* start questions */

section.questions {
    padding-top: var(--section-padding);
}
section.questions a {
  color: var(--secondary-color);
}
section.questions a:hover {
  /* color: var(--secondary-color); */
  opacity: .8;
}
section.questions * {
    font-weight: bold;
}
section.questions .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section.questions .container .question {
    width: 100%;
}   
section.questions .container .box-img {
    width: 100%;
}
section.questions .container .box-img img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
@media (min-width: 800px) {
    section.questions .container .question,
    section.questions .container .box-img  {
        width:45%;
    }
    section.questions .container {
      flex-direction: row;
      justify-content: space-between;
  }
  section.questions2 .container {
    flex-direction: row-reverse;
}
}
section.questions .title-ques {
    display: flex;
    gap: .5rem;
    align-items: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 2rem;
    color: var(--main-color);
}
    section.questions .title-ques img {
        width: 30px;
    }
    section.questions .text {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s ease, opacity 0.5s ease;
}
section.questions .title-ques h3 {
    font-size: 2.5rem;
}
section.questions .container .question .box-question {
    margin-bottom: 1rem;
}
section.questions .container .question .box-question h4 {
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    padding: .0rem .8rem .5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
section.questions .container .question .box-question h4.main-color {
  color: var(--main-color);
}
section.questions .container .question .box-question .text {
    font-weight: bold;
    
}
section.questions .container .question .box-question .text i {
  color: var(--secondary-color);
}
section.questions .container .question .box-question .text ul {
    margin-top: .5rem;
    list-style: unset !important;
    list-style-position: outside !important;
    list-style-type: circle !important;
    display: block !important;
}
section.questions .container .question .box-question .text li {
    padding: .3rem;
    padding-right: 1.5rem;
    line-height: 1.7;
    display: block !important;
    position: relative !important;
}
section.questions .container .question .box-question .text ul li::after {
  content: "\f111"; 
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; 
  position: absolute;
  right: 9px;
  top: 0.6rem;
  font-size: 0.4rem; /
}
html[lang="en"] section.questions .container .question .box-question .text ul li::after {
  right: unset;
  left: -9px;
}
section.questions .text.active {
    max-height: 500px; 
    opacity: 1;
}

section.questions .icon-down, .icon-up {
    display: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding-top: .5rem;
}
section.questions i.active-icon {
    display: block;
}



/* gallery */

.gallery {
  padding: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gallery .gallery-options {
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.gallery .gallery-options button {
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  margin-bottom: 15px;
  padding: 10px 15px;
  box-shadow: unset;
  background-color: transparent;
  color: #41296b;
  font-weight: bold;
  border: 1px solid #e6e0f0;
  transition: background 0.5s;
}

@media only screen and (min-width: 500px) {
  .gallery .gallery-options button {
      width: unset;
      margin: 0;
      margin-left: 15px;
  }
}
.gallery .gallery-options i.clinic {
  background-image: url(https://tawasol.sa/assets/icons/clinic.png);
}
.gallery .gallery-options i {
  margin-left: 7.5px;
  width: 22.5px;
  height: 22.5px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.gallery .gallery-container.show {
  display: grid
;
}
@media only screen and (min-width: 500px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto;
  }
}
@media only screen and (min-width: 767px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto auto;
  }
}
@media only screen and (min-width: 1250px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto auto auto;
  }
}


.gallery .gallery-container {
  display: none;
  margin-top: 30px;
  width: calc(100% - 40px);
  grid-template-columns: auto;
  grid-gap: 20px;
}
.gallery .gallery-container .photo {
  cursor: pointer;
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
}
.gallery .gallery-container .photo img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery .gallery-container .photo .type {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 10px;
  background-color: rgba(233, 79, 132, 0.7);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  border-radius: 7.5px;
}
.gallery .gallery-container .photo .type span {
  color: #f8f3ff;
}
.gallery .gallery-container .photo .caption {
  position: absolute;
  display: flex
;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.gallery .gallery-container .photo .caption .caption-container {
  padding-right: 10px;
  display: flex
;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px;
  width: calc(100% - 40px);
  border-right: 4px solid #e94f84;
}
.gallery .gallery-container .photo .caption .caption-container h4 {
  line-height: 1.35;
  margin: 0;
  color: #f8f3ff;
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery .gallery-container .photo .caption .caption-container .caption-author {
  margin-top: 12.5px;
  display: flex
;
  flex-direction: row;
  align-items: center;
}
.gallery .gallery-container .photo .caption .caption-container .caption-author img {
  margin-left: 7.5px;
  display: flex
;
  width: 22.5px;
  height: 22.5px;
  border-radius: 50%;
}
.gallery .gallery-container .photo img {
  display: flex
;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery .gallery-container .photo .caption .caption-container .caption-author span {
  font-size: 12px;
  color: #c9c9c9;
}


@media only screen and (min-width: 500px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto;
  }
}

@media only screen and (min-width: 767px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto auto;
  }
}

@media only screen and (min-width: 1250px) {
  .gallery .gallery-container {
      grid-template-columns: auto auto auto auto;
  }
}
.gallery-slideshow {
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000001;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.gallery-slideshow .prev-btn {
  right: 20px;
}

.gallery-slideshow .prev-btn, .gallery-slideshow .next-btn {
  position: absolute;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #e94f84;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: none;
  transition: opacity 0.5s;
}
.gallery-slideshow .prev-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f101";
}
.gallery-slideshow .next-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f100";
}

.gallery-slideshow .next-btn {
  left: 20px !important;
}
.gallery-slideshow .prev-btn {
  right: 20px !important;
}
.gallery-slideshow .prev-btn::before, .gallery-slideshow .next-btn::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.gallery-slideshow .g-s-i {
  position: relative;
  display: flex
;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 15px;
}
.gallery-slideshow .g-s-i img {
  display: flex
;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}
@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .type {
      top: 20px;
      right: 20px;
  }
}

.gallery-slideshow .g-s-i .type {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: rgba(233, 79, 132, 0.7);
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  border-radius: 7.5px;
  transition: opacity 0.3s;
}


.gallery-slideshow .g-s-i .caption {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.3s;
}
@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .caption {
      display: flex;
  }
}
@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .caption .caption-container {
      margin: 30px;
      width: calc(100% - 60px);
  }
}

.gallery-slideshow .g-s-i .caption .caption-container {
  padding-right: 10px;
  display: flex
;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px;
  width: calc(100% - 40px);
  border-right: 4px solid #e94f84;
}
@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container h4 {
      font-size: 24px;
  }
}
.gallery-slideshow .g-s-i .caption .caption-container h4 {
  line-height: 1;
  margin: 0;
  color: #f8f3ff;
  font-size: 18px;
}
@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author {
      margin-top: 15px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author {
  margin-top: 10px;
  display: flex
;
  flex-direction: row;
  align-items: center;
}
@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author img {
      width: 30px;
      height: 30px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author img {
  margin-left: 7.5px;
  display: flex
;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.gallery-slideshow .g-s-i img {
  display: flex
;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}
@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author span {
      font-size: 16px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author span {
  font-size: 14px;
  color: #c9c9c9;
}
.gallery-slideshow .prev-btn {
  right: 20px;
}

.gallery-slideshow .prev-btn, .gallery-slideshow .next-btn {
  position: absolute;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #e94f84;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: none;
  transition: opacity 0.5s;
  cursor: pointer;
  border: none;
}

/* start review section */
section.reviews * {
padding: 0;
margin: 0;
box-sizing: border-box;
}

section.reviews {
display: grid;
place-items: center;
position: relative;
padding: 70px 1rem 0rem;
}

section.reviews  .swiper-container {
border-radius: 5px;
width: 70vw;
overflow: hidden;
height: fit-content;
height: fit-content;
font-size: 50px;
position: relative;
padding-bottom: 55px;
}

section.reviews .swiper-slide {
width: auto;
height: fit-content;
display: flex;
height: auto;
border-radius: 15px;
overflow: hidden;
align-items: flex-start;
flex-direction: column;
padding: 0px;
/* font-family: Nunito; */
background-color: white;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

section.reviews .swiper-slide .ImgHolder {
background-color: #4361ee;
display: flex;
width: 100%;
height: auto;
padding: 30px;
border-bottom-left-radius: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
}

section.reviews .ContentHolder::before {
background-color: #4361ee;
content: '';
width: 50px;
height: 50px;
position: absolute;
top: -5px;
z-index: -1;
right: 0px;
}

section.reviews .ContentHolder {
position: relative;
width: 100%;
padding: 10px;
background-color: white;
border-top-right-radius: 20px;
}

section.reviews .swiper-pagination-bullet {
background-color: white;
opacity: 1;
border: 1px solid #4361ee;
}

section.reviews .swiper-pagination-bullet-active {
background-color: #4361ee;
}

section.reviews .swiper-button {
border: 1px solid white;
}

section.reviews .swiper-slide img {
/* width: 100px; */
/* height: 100px; */
border-radius: 50%;
margin: auto;
object-fit: cover;
border: 3px solid #4361ee;
outline: 2px solid white;
}

section.reviews .swiper-slide h3 {
font-size: 1.4rem;
text-align: center;
font-weight: bold;
}

section.reviews .swiper-slide p {
font-size: 1rem;
padding: 5px;
font-weight: bold;
text-align: center;
}

@media (max-width:638px) {
section.reviews .swiper-container {
  width: 100%;
}
}

@media (max-width:500px) {
section.reviews .swiper-container {
  width: 70vw;
}
}

@media (max-width:300px) {
section.reviews  .swiper-container {
  width: 100%;
}

section.reviews .swiper-slide {
  border-radius: 0px;
}

section.reviews .swiper-container .ImgHolder {
  border-radius: 0px;
}
section.reviews .ContentHolder{
  border-radius: 0px;
}
} 

section.reviews .stars {
display: flex;
justify-content: center;
margin: 10px;
gap: 5px;
}

section.reviews .stars i {
color: #f0ad4e;
font-size: 15px;
}


/* START SCROLL BACK */
.scroll-back {
  width: 40px;
  height: 45px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background: #fff;
  border-radius: 4px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 20;
  cursor: pointer;
  display: none;
}

.scroll-back i {
  transform: translateY(0);
  color: var(--black-color);
  animation: smooth-bounce 2s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes smooth-bounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

section.blogs-container.blogs-content .swiper-button-prev:after,
section.blogs-container.blogs-content .swiper-rtl .swiper-button-next:after {
  display: none;
}