*{
    text-decoration:none;
    padding:0px;
    margin:0px;
    box-sizing: border-box;
    font-family: "Karben 205 Mono W00 Medium";
    box-sizing:border-box;

}body {
       overflow-x: hidden;
      
       
}

/*
.cursor-yellow {
          cursor : url('../images/cursor1.png'), auto;
        }
*/


@font-face {
  font-family: 'Karben 205 Mono W00 Medium'; 
  src: url('fonts/Karben 205 Mono W00 Medium.woff2') format('woff2');
  font-weight:normal;

}





/****SPOTLIGHT ANIMATION STARTING POINT*/
.mainHidden{
background: white;
height:100%;
width:100%;
top:65px;
left:0;
position:absolute;
clip-path: circle(360px at var(--x, 50%) var(--y, 50%));

transition: clip-path 70ms ease-in-out cubic-bezier(0.25, 0.1, 0.25, .5);

}

.mainHidden.shrink {
    clip-path: circle(80px at calc(var(--x)) calc(var(--y) - 40px));
    /* transition-duration:; 1s ease-in-out; */

}



.small-flare,
.medium-flare,
.large-flare {
  position: absolute;
  border-radius: 50%;
}
.small-flare {
  width: 176px;
  height: 176px;
  background:#3ee7ce;

}

.medium-flare {
  width: 300px;
  height: 300px;
  background:#3ee7ce;
}

.large-flare {
  width: 450px;
  height: 450px;
  border: 5px solid #F5F5B9;
  background:none;
}


/************HEADER*COOKIES*DISCLAIMER*********/*

#header{
    width:100%;
    height:65px;
    background:gray;
    display:flex;
    z-index:99;
    
}

.headerHidden{
    width:100%;
    height:65px;
    background:#464646;
    display:flex;
    position:absolute;
    top:0;
    z-index:99;
    
    
}


#headerContainer{
    display:flex;
    flex-direction:row;
    margin:auto;
    gap: 1em;
    background:#464646;
    
}


#p1{
    margin:auto;
    font-family: "Karben 205 Mono W00 Medium";
    color:#F5F5B9;
    background:#464646;
}

#cookie-policy {
  text-decoration: underline;
      background:#464646;
}

#buttonContainer{
    display:flex;
    flex-direction:row;
    gap: .5em;
    font-family: "Karben 205 Mono W00 Medium";
    background:#464646;
}

#button1 {
 width:94px;
 height:30px;
 background:#F5F5B9;
 border:none;
 border-radius:30px;
 margin:auto;
 font-family: "Karben 205 Mono W00 Medium";
 font-weight:900;
 letter-spacing:2px;

}

#button2 {
 width:94px;
 height:30px;
 background:none;
 border:2px solid #F5F5B9;
 border-radius:30px;
  margin:auto;
  color:#F5F5B9;
  font-weight:900;
  letter-spacing:2px;
 
}


/**************NAVBAR******/


#navBar{
 display:flex;
 flex-direction:row;
 width:100%;
 justify-content:space-between;
 background-color:#28BEBE;
 padding-top:1%;

}

.navBarHidden{
 display:flex;
 flex-direction:row;
 width:100%;
 justify-content:space-between;
 background: #F5F5B9;
 padding-top:1%;

}



#logoContainer{
    margin-left:1.7%;
    width:100%;
    height:100%;
   
}

#logo {
    width:67px;
    height:36px;
    left:40px;
    background:none;
}


nav{
    display:flex;
    justify-content:space-between;
    width:90%;
    align-items:center;
    margin: auto;
    padding-right:5%;
}

.navHidden{
    display:flex;
    justify-content:space-between;
    width:90%;
    align-items:center;
    margin: auto;
    padding-right:5%;
}

.nav-links{
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    list-style:none;
}

.nav-linksHidden{
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    list-style:none;
}

.nav-linksHidden, .linkButtonHidden{
    background: #28BEBE;
}


.linkButtonHidden {
    font-size: 20px;
    background: #28BEBE; /* Set background color */
    padding: 8px 14px;
    border-radius: 30px;
    color: white; /* Set text color */
    z-index: 2; /* Ensure the button is above other elements */
}

.nav-links, img{
 flex: 1;   
}


nav li {
    color:#F5F5B9; 
    font-size:28px;
}

.nav links, li {
    color:#464646; 
    font-size:28px;
}


/****************SECTION1**************/
/**************************************/

#section1{
background-color:#28BEBE;
height:100%;
width:100%;
display:flex;
margin:auto;
}

.section1Hidden{
background-color:#F5F5B9;
height:100%;
width:100%;
display:flex;
margin:auto;
}



#section1Container{
    flex-direction:column;
    text-align:center;
    margin:auto;
    top:-3%;
}

.section1ContainerHidden{
    display:flex;
    flex-direction:column;
    text-align:center;
    margin:auto;
    top:-3%;
}

#section1TextsContainer{
    margin-top:-12%;
}

.section1TextsContainerHidden{
    margin-top:-12%;
}


#youDeserve{
    font-size:240px;
    font-family: "Karben 205 Mono W00 Medium";
    font-weight:900;
    color: #464646;
    opacity:.3;
    letter-spacing: -3%;
}

.youDeserveHidden{
    font-size:240px;
    font-family: "Karben 205 Mono W00 Medium";
    color: #464646;
    font-weight:900;
    letter-spacing: -3%;
}

#theSpotLight{
    font-size:240px;
    font-family: "Karben 205 Mono W00 Medium";
    font-weight:900;
    color: #464646;
    opacity:.3;    
    letter-spacing: -6px;
    margin-top:-4.3%;
}

.theSpotLightHidden{
    font-size:240px;
    font-family: "Karben 205 Mono W00 Medium";
    font-weight:900;
    color: #464646;    
    letter-spacing: -6px;
    margin-top:-4.3%;
}

#criticalInformation{
    font-size:35px;
    color: #464646;
    opacity:.3;
}

.criticalInformationHidden{
    font-size:35px;
    color: #464646;
}


#withCommunication {
    font-size:35px;
    color: #464646;
    opacity:.3;
}

.withCommunicationHidden {
    font-size:35px;
    color: #464646;
}


/**************CURSOR***********/

/*.cursor {
    width:600px;
    height:600px;
    background:none;
    border: 2px solid #F5F5B9;
    border-radius: 50%;
    position:absolute;
    transform: translate(-50%, -50%);
    pointer-events:none;
    transition: all 0.4s ease-in-out;
    transition-property: width, height;
    transform-origin: 100% 100%;
    z-index:3;
}*/




.hovered-Link{
    color:#464646;
    z-index:2;
}

.section2{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    background: linear-gradient(to bottom, #28BEBE, #6dbfac, #dddfa6);
    justify-content:space-between;
    

}

.cursorSection2{
    position:fixed;
    left:100px;
    width:20px;
    height:20px;
    transform: translate(-50%, -50%);
    background: #F5F5B9;
    border-radius:50%;
    transition: width 0.5s ease, height 0.5s ease;
    cursor:none;
}

.cursorSection2Hidden{
    display:none;

}

.section2Title{
    letter-spacing:4px;
    margin:auto;
    font-size:30px;
}

.section2InnerContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    justify-content:space-between;

}

.section2Content{
    display:flex;
    flex-direction:row;
    margin:auto;
    justify-content:center;
    height:100%;
    padding-top:10%;
    padding-bottom:10%;
}

.circle1Container{
    margin-right:-15px;
     display:flex;
    flex-direction:column;
    position:relative;
    justify-content:center;
    height:100%;
}

.circle1ContainerHover{
    background: #F5F5CB;
}



.circle2Container{
    display:flex;
    flex-direction:column;
    position:relative;
    justify-content:center;
    height:100%;
}


.circle3Container{
    display:flex;
    flex-direction:column;
    margin-left:-15px;
    position:relative;
    justify-content:center;
    height:100%;
    
    
}

.section2circles1{
    width:400px;
    height:400px;
    opacity:0.5;
    border-radius:50%;
    display:flex;
    position:relative;
}



.section2circles2{
    width:400px;
    height:400px;
    opacity:0.5;
    background: linear-gradient(to bottom, #98dfbf, #c6e4be);
    border-radius:50%;
    display:flex;
    position:relative;
}
.section2circles3{
    width:400px;
    height:400px;
    opacity:0.5;
    background: linear-gradient(to bottom, #98dfbf, #c6e4be);
    border-radius:50%;
    display:flex;
    position:relative;
}
/*
body.circles-yellow1 #circle1 {
    background: #F5F5B9;
    opacity:1;
    transition: background 0.5s ease-in-out, opacity 0.7s ease-in-out;
    z-index:3;
}
body.circles-yellow1 #textUnited {
    z-index:3;
}
body.circles-yellow1 #textNations {
    z-index:3;
}

body.circles-yellow2 #circle2 {
    background: #F5F5B9;
    opacity:1;
    transition: background 0.5s ease-in-out, opacity 0.7s ease-in-out;
    z-index:3;
}

body.circles-yellow3 #circle3 {
    background: #F5F5B9;
    opacity:1;
    transition: background 0.5s ease-in-out, opacity 0.7s ease-in-out;
    z-index:3;
}

*/

.cursor-hidden{
          cursor:none;
        }




.textInCircles1 {
     text-align:center;
    font-size:80px;
}

#circle1 {
    display:flex;
    justify-content:center;
    flex-direction:column;
    background: linear-gradient(to bottom, #98dfbf, #c6e4be);
}

#circle1.circle1Hover{
    background: #F5F5CB;
    opacity:1;
}


#circle2 {
    display:flex;
    justify-content:center;
}

#textNGOs{
    margin:auto;
     font-size: 80px;
}

#circle3 {
    display:flex;
    justify-content:center;
    flex-direction:column;
}

.textInCircles3{
    text-align:center;
    font-size:80px;
}

.finalMottoContainer{
    display:flex;
    flex-direction:column;
    text-align:center;
}

.section2FinalMotto1{
    margin:auto;
    white-space:nowrap;
    font-size:35px;
    line-height:60px;
}

.section2FinalMotto2{
    margin:auto;
    white-space:nowrap;
    font-size:35px;
    line-height:60px;
}

/******SECTION 3*************************/

.section3{
    width:100%;
    height:100%;
    background:#464646;
    display:flex;
    flex-direction:column;
    
}

.section3Hidden{
    background-color:#F5F5B9;
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    position:absolute;
    left:0;
    top:212.8%;
    clip-path: circle(360px at var(--x, 50%) var(--y, 50%));

   transition: clip-path 70ms ease-in-out cubic-bezier(0.25, 0.1, 0.25, .5);
}

.section3Hidden.hideClipPath{
    
   visibility: hidden;
}





.section3FirstPart{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    padding-top:5%;
}

.section3FirstPartHidden{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    padding-top:5%;
}


.separator {
    display:flex;
    align-items:center;
    flex-direction:row;
    width:18%;
    margin:auto;
}

.separatorHidden {
    display:flex;
    align-items:center;
    flex-direction:row;
    width:18%;
    margin:auto;
}

.tinyCircle{
    width:18px;
    height:18px;
    border-radius:50%;
    background-color:none;
    border: 1px solid #F5F5B9;
}
.tinyCircleHidden{
    width:18px;
    height:18px;
    border-radius:50%;
    background-color:none;
    border: 1px solid #28BEBE;
}
.line{
    flex:1;
    height:2px;
    background-color:#F5F5B9;

}

.lineHidden{
    flex:1;
    height:2px;
    background-color:#28BEBE;

}

.section3FirstPart2{
    color:#F5F5B9;
    font-size:30px;
    text-align:center;
    padding-top:3%;
    letter-spacing:8px;
}
.section3FirstPart2Hidden{
    color:#28BEBE;
    font-size:30px;
    text-align:center;
    padding-top:3%;
    letter-spacing:8px;
}


.section3SecondPart{
    width:64%;
    color:#F5F5B9;
    font-size:70px;
    line-height:110px;
    text-align:center;
    margin:auto;
    font-weight:500;
}

.section3SecondPartHidden{
    text-align:center;
    margin:auto;
    
}

.hardWork {
    font-size:197px;
    letter-spacing:-14px;
    text-align:center;
    line-height:180px;
    color: #28BEBE;
    

}