/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); */

html {
  font-family: 'Open Sans', sans-serif;
  scroll-behavior: smooth;
}

body::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

body::-webkit-scrollbar{
	width: 10px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb{
  border-radius: 10px;
	background-color: #8a8a8a;
}

.hero {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(161, 198, 253, 0.85) 0%,
    rgba(217, 217, 217, 0) 100%
  );
}

/* BACK TO TOP Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

.back-to-top i {
  background: linear-gradient(
    to right,
    #667eea,
    #8e37d7
  );
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
  color: white;
  padding: 10px;
  font-size: 2rem;
  border-radius: 0.5rem;
}

.back-to-top i:hover {
  cursor: pointer;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* NAVBAR LINKS HOVER ANIMATION */
.hover-animation {
  display: inline-block;
  position: relative;
}

.hover-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* NAVBAR ACTIVE LINK STYLE */
.text-effect {
  color: #0087ca;
}

.slogan {
  font-size: 5rem;
  line-height: 1;
  font-weight: bold;
  padding-bottom: 10px;
}

.position-container {
  position: relative;
  border-top: 2px solid black;
}

.position-container p {
  padding-top: 20px;
  font-size: 19px;  
}

.position-container .moon {
  color: rgb(228, 228, 228);
  height: 130px;
  width: 130px;
  border-radius: 50%;
  box-shadow: -1.5px 0px 0 0 black;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%, -50%);
  padding: 10px;
}

.btn-hover {
  cursor: pointer;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  width: 100px;
  height: 100px;
  transition: all 1.5s ease-out;
  z-index:0;
  overflow:hidden;
}

/* HERO SECTION > Learn More Button */
.btn-hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  width:600%;
  bottom:0;
  background: linear-gradient(
    to right,
    #667eea,
    #764ba2,
    #6b8dd6,
    #8e37d7
  );
  animation:change 4s infinite linear;
}

.btn-hover:hover {
  color: #fff;
  fill: white;
  background-position: 100% 0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}

.btn-hover.color-3 {
  background-image: linear-gradient(
    to right,
    #667eea,
    #764ba2,
    #6b8dd6,
    #8e37d7
  );
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.position-container .moon .learn-more {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-38%, -50%);
  padding: 10px;
  font-size: 20px;
  font-family: 'Source Serif Pro';
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
}

.position-container .circle-text {
  fill: currentColor;
  height: auto;
  max-width: 66vmin;
  transform-origin: center;
  width: 100%;
}

section {
  display: flex;
  flex-flow: column;
  align-items: center;
}

section div.container {
  transition: all 0.3s ease;
}

section div.container h3 {
  margin: 0 0 0 0;
}

section.slide-option {
  margin: 0 0 0 0;
}

section.slide-option .no-marg {
  margin: 0 0 0 0;
}

#rotating-button-text {
  position: relative;
  width: 200px;
  height: 200px;
  padding-bottom: 100%;
  overflow: hidden;
}

#rotating-button-text text {
  font-family: "Helvetica Neue", Arial;
  font-size: 14px;
  font-weight: bold;
}

#rotating-button-text svg {
  position: absolute;
  left: -23%;
  top: -47%;
  width: 100%;
  height: 300px;

  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -ms-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}



/* SDGs Slider */
.swiper {
  width: 95%;
  height: 35vh;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: white;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}



.swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-pointer-events {
  height: 30vh;
}

#first-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/01NoPoverty.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#second-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/02ZeroHunger.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#third-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/03GoodHealthAndWellBeing.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#fourth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/04QualityEducation.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#fifth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/05GenderEquality.png);
 background-size: contain;
  background-repeat: no-repeat;
}

#sixth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/06CleanWaterAndSanitation.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#seventh-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/07AffordableAndCleanEnergy.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#eighth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/08DecentWorkAndEconomicGrowth.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#ninth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/09IndustryInnovationAndInfrastructure.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#tenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/10ReducedInequalities.png);
  background-size: contain;
  background-repeat: no-repeat;background-size: contain;
  background-repeat: no-repeat;
}

#eleventh-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/11SustainableCitiesAndCommunities.png);
  background-size: contain;
  background-repeat: no-repeat;background-size: contain;
  background-repeat: no-repeat;
}

#twelfth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/12ResponsibleConsumptionAndProduction.png);
  background-size: contain;
  background-repeat: no-repeat;background-size: contain;
  background-repeat: no-repeat;
}

#thirteenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/13ClimateAction.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#fourteenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/14LifeBelowWater.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#fifteenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/15LifeOnLand.png);
 background-size: contain;
  background-repeat: no-repeat;
}

#sixteenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/16PeaceJusticeAndStrongInstitutions.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#seventeenth-image-holder {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/17PartnershipsForTheGoals.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: 42% !important;
  width: calc(var(--swiper-navigation-size)/ 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black !important;
}

#careers-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 90%;
}

.youth-feedback-container {
  min-height: 700px;
}

.youth-feedback-cards {
  min-height: 600px;
  padding: 0 1rem 0 1rem;
}

.youth-image {
  width: 150px;
}

/* Volunteer */
#volunteer-wrapper {
  display: flex;
  width: 400px;
  height: 400px;
}

#volunteer-icon {
  width: 80%;
  height: 40%;
}

#volunteer-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 35%;
}

#volunteer-btn {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 80%;
  height: 20%;
}

/* Vacancies */
#vacancies-wrapper {
  display: flex;
  width: 400px;
  height: 400px;
}

#vacancies-icon {
  width: 80%;
  height: 40%;
}

#vacancies-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 35%;
}

#vacancies-btn {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 80%;
  height: 20%;
}

/* Training/Workshop */
#training-wrapper {
  display: flex;
  width: 400px;
  height: 400px;
}

#training-icon {
  width: 80%;
  height: 40%;
}

#training-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 35%;
}

#training-btn {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 80%;
  height: 20%;
}

/* DONORS & PARTNERS SLIDER */
.slider {
  background-color: rgba(219, 234, 254, 0.24);
  height: 75pt;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  cursor: default;
  user-select: none;
  touch-action: none;
}

.slider:before {
  left: 0;
  top: 0;
}

.slider:after,
.slider:before {
  background: linear-gradient(
      to right,
      #efeef2 0%,
      hsla(0, 0%, 100%, 0) 100%
  );
  content: "";
  height: 75pt;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider:after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider:after,
.slider:before {
  background: linear-gradient(
      to right,
      #efeef2 0%,
      hsla(0, 0%, 100%, 0) 100%
  );
  content: "";
  height: 75pt;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider .slide-track-1 {
  animation: scroll-l 15s linear infinite;
  display: flex;
  gap: 2em;
  width: 7000px;
}

.slider .slide {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  text-align: center;
}
.slider .slide img {
  /* width: 180px; */
  padding: 1pc;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.DFD {
  background-image: url(../assets/icons/Donors/LGOO-Democracy-for-Development.png);
  background-size: cover;
}

.ADA {
  background-image: url(../assets/icons/Donors/LOGO-ADA.png);
  background-size: cover;
}

.EOS {
  background-image: url(../assets/icons/Donors/LOGO-Embassy-of-Sweden.png);
  background-size: cover;
}

.EC {
  background-image: url(../assets/icons/Donors/LOGO-European-comission.png);
  background-size: cover;
}

.CDF {
  background-image: url(../assets/icons/Donors/LOGO-CDF.png);
  background-size: cover;
}

.IRI {
  background-image: url(../assets/icons/Donors/LOGO-IRI.png);
  background-size: cover;
}

.PCI {
  background-image: url(../assets/icons/Donors/LOGO-PCI.png);
  background-size: cover;
}

.SIDA {
  background-image: url(../assets/icons/Donors/LOGO-SIDA.png);
  background-size: cover;
}

.SWEDEN {
  background-image: url(../assets/icons/Donors/LOGO-SWEDEN.png);
  background-size: cover;
}

.UKAID {
  background-image: url(../assets/icons/Donors/LOGO-UKAID.png);
  background-size: cover;
}

.UNICEFKIDS {
  background-image: url(../assets/icons/Donors/LOGO-UNICEFKIDS.png);
  background-size: cover;
}

.ZFD {
  background-image: url(../assets/icons/Donors/LOGO-forum-zfd.png);
  background-size: cover;
}

.GIZ {
  background-image: url(../assets/icons/Donors/LOGO-giz.png);
  background-size: cover;
}

.HR {
  background-image: url(../assets/icons/Donors/LOGO-Humanrightivism.png);
  background-size: cover;
}

.ING {
  background-image: url(../assets/icons/Donors/LOGO-ING.png);
  background-size: cover;
}

.IKS {
  background-image: url(../assets/icons/Donors/LOGO-Iniciative-Kosovare-per-Stabilitet.png);
  background-size: cover;
}

.KCSF {
  background-image: url(../assets/icons/Donors/LOGO-KCSF.png);
  background-size: cover;
}

.OLOFPALMES {
  background-image: url(../assets/icons/Donors/LOGO-olof-palmes.png);
  background-size: cover;
}

.OSCE {
  background-image: url(../assets/icons/Donors/LOGO-OSCE.png);
  background-size: cover;
}

.PIN {
  background-image: url(../assets/icons/Donors/LOGO-PIN.png);
  background-size: cover;
}

.RKS {
  background-image: url(../assets/icons/Donors/LOGO-republika-e-kosoves.png);
  background-size: cover;
}

.SPK {
  background-image: url(../assets/icons/Donors/LOGO-Sindikata-policise-Kosovare.png);
  background-size: cover;
}

.UNDP {
  background-image: url(../assets/icons/Donors/LOGO-UNDP.png);
  background-size: cover;
}

.UNFPA {
  background-image: url(../assets/icons/Donors/LOGO-UNFPA.png);
  background-size: cover;
}

.UNICEF {
  background-image: url(../assets/icons/Donors/LOGO-UNICEF.png);
  background-size: cover;
}

.USAID {
  background-image: url(../assets/icons/Donors/LOGO-USAID.png);
  background-size: cover;
}

/* line height of description on facebook cards */
.title {
  --max-lines: 5;
  --line-height: 1.4;
  max-height: calc(var(--max-lines) * 1em * var(--line-height));
  line-height: var(--line-height);
  overflow: hidden;
  margin-bottom: 0;
  display: inline-block;
}

.more-btn {
  color: blue;
  font-style: italic;
}

.expand-btn {
  appearance: none;
  cursor: pointer;
  color: rgb(158, 148, 148);
  display: inline-block;
}

.expand-btn::before {
  content: "...more";
}

.expand-btn:checked::before {
  content: "...less";
}

.title:has(+ .expand-btn:checked) {
  max-height: none;
  display: inline;
}

@keyframes scroll-l {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}
@keyframes scroll-r {
    100% {
        transform: translateX(0);
    }
    0% {
        transform: translateX(calc(-250px * 7));
    }
}

/* Media query for hero button */
@media only screen and (max-width: 600px) {
  .btn-hover.color-3 {
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
  }
}

@media (max-width: 1440px) {
  .slogan{
    font-size:4rem;
  }
  .position-container .moon {
    height: 100px;
    width: 100px;
  }
  .position-container .moon .learn-more {
    font-size: 14px;
    font-family: 'Source Serif Pro';
    font-weight: bold;
    transform: translate(-36%, -50%);
  }
}
@media (max-width: 992px) {
  .slogan{
    font-size:3.8rem;
  }
}

@media (max-width: 768px) {
  .hero {
    background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(161, 198, 253, 0.85) 0%,
      rgba(217, 217, 217, 0) 100%
    );
  }
  .slogan {
    padding-bottom: 10px;
    text-align: center;
    line-height:1.1;
    margin-bottom:30px;
  }
  .position-container {
    padding: 0px 10px 70px;
    border: 2px solid black;
    border-radius: 30px;
    font-size: 20px;
  }
  .position-container .moon {
    height: 130px;
    width: 130px;
    right: 100%;
    top: 100%;
    background-color: white;
    transform: translate(125%, -40%);
  }
  .position-container .moon .learn-more {
    font-family: 'Source Serif Pro';
    font-weight: bold;
    font-size: 20px;
    transform: translate(-38%, -50%);
  }
}

@media (max-width: 576px) {
  .slogan {
    font-size: 3.5rem;
  }
}
@media (max-width: 350px) {
  .slogan {
    font-size: 3rem;
  }
}
@media (max-width: 300px) {
  .slogan {
    font-size: 2.9rem;
  }
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(360deg);
  }
  to {
    -o-transform: rotate(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}

@keyframes change {
  to {
    transform:translate(84%);
    color: #555;
  }
}

/* RESPONSIVENESS > WHAT WE DO */
@media only screen and (max-width: 600px) {
  img.w-52.ml-32.-mt-12 {
    margin-top: -95px;
    margin-left: 188px;
  }
  .flex.flex-col.items-end.justify-end.w-1\/2,
  .flex.flex-col.items-center.justify-center.w-1\/2 {
    width: 222px;
  }

  h2.text-5xl.z-10.font-serif.text-\[\#2467a1\].text-center {
    font-size: 43px;
  }
  img.w-52.ml-32.-mt-12.animate-pulse {
    margin-top: -49px;
    margin-left: 100px;
  }
}

/* RENSPONSIVENESS > SDGs Slider */
@media only screen and (max-width: 380px) {
  .swiper-button-next, .swiper-button-prev {
   display: none !important;
  }
  .swiper {
    width: 90% !important;
    height: 20vh !important;
  }
}

@media only screen and (max-width: 600px) {
  .swiper-button-next, .swiper-button-prev {
   display: none !important;
  }
  .swiper {
    width: 95%;
    height: 25vh !important;
  }
}

@media only screen and (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
   display: none !important;
  }
  button.carousel-control-next.absolute.top-0.bottom-0.flex.items-center.justify-center.p-0.text-center.border-0.hover\:outline-none.hover\:no-underline.focus\:outline-none.focus\:no-underline.right-0{
    display: none;
  }
  button.carousel-control-prev.absolute.top-0.bottom-0.flex.items-center.justify-center.p-0.text-center.border-0.hover\:outline-none.hover\:no-underline.focus\:outline-none.focus\:no-underline.left-0 {
    display: none;
  }
}

@media only screen and (max-width: 992px) {
  .swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 27% !important;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
  }
}