@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Style+Script&display=swap');
:root{
    --color:#f3cd8e;
    --font_inter :"Inter", sans-serif;
    --font_openSans: "Open Sans", sans-serif;
    --font_style: "Style Script", cursive;
    --font_body:"Bodoni Moda", serif;
    --background : #f9f9f9;
    --button:rgba(0, 0, 0, 0.819);
    --purple:rgb(80, 39, 80);
}
 * {
  box-sizing: border-box;
    }
    html,body{ 
        width: 100%;
        margin: 0;
    }
header{
    background-image: url(3312580.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:fit-content;
}
nav{
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background-color: rgba(128, 128, 128, 0.44);
    border-bottom: 3px solid black;
}
nav .tabs a{
    color: white;
    font-family: var(--font_openSans);
    text-decoration:none;
    margin: 10px;
}
nav .logo{
    font-size: 20px;
    font-family: var(--font_inter);
    color: white;
}
.home{
    margin-top: 5rem;
    padding: 10px;
    width: 70%;
    display: flex;
    flex-direction: column;
}
.home h1{
    font-size: 5rem;
    display: inline;
    color:white;
    font-family: var(--font_openSans);
    margin-bottom: 1.4rem;
}

.home button{
    width: 16.5rem;
    border-radius: 20px;
    height: 50px;
    border: none;
    text-align: left;
    font-family: var(--font_openSans);
    font-size: 30px;  
    margin-bottom: 5rem;
}
.bottom{
    position: relative;
}
.home img{
    width: 40px;
    position: absolute;
    left: 13.6rem;
    top: 0.3rem;
}
.mobile{
    display: none;
}
.skills{
    display: flex;
    justify-content: space-between;
    padding: 30px;
    position: relative;
    z-index: 100;
    bottom: 2rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color:var(--background);
}
.skills_text , .skills_boxes{
    margin-top: 5rem;
}
.skills_text{
    width: 50%; 
}
.skills_text .text{
    position: sticky;
    top: 10rem;
    width: 80%;
}
.skills_text h3 { 
    font-family: var(--font_inter);
    font-size: 40px;
}
.skills_text h1{
    font-family: var(--font_openSans);
    font-size: 45px;
}
.skills_boxes{
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: 1rem;
}
.skills_boxes .box{
    width: 100%;
    background-color: rgb(80, 39, 80);
    position: sticky;
    top: 10rem;
    color: white;
    border-radius: 5px;
    box-shadow: 14px 7px 7px rgba(0, 0, 0, 0.286);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    font-size: 2.5rem;
    font-family: var(--font_openSans);
    overflow-wrap: break-word; /* makes long words wrap */
    word-break: break-word;
}
.skills_boxes .box h1{
    font-size: 100%;
}
.skills_boxes .box:nth-child(even){
    background-color: rgb(26, 19, 29);
    color: white;
}
.pic{
    background-image: url(/media/group.jpg);
    width: 100%;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: relative;
    z-index: 10;
}
.team{
    background-color: #140814;
    margin-top: -3rem; 
    padding-top: 5rem;
}
.founders{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.team_title{
    color: white;
    font-family: var(--font_inter);
    padding: 10px;
}
.team_title h1{
    font-size: 3rem;
}
.team_title p{
    color: rgb(189, 189, 189);
}
.founders div{
    width: 50%; 
    display: flex;
    align-items: center;
    border: 3px solid rgb(49, 34, 34);
    border-radius: 10px;
    padding: 10px;
}
.founders div article{
    color: white;
    font-family: var(--font_openSans);
    text-align: center;
    align-self: center;
    margin-left: 5rem;
    animation-name: word ;
    animation-timeline: view(90% 0%);
}
@keyframes word {
    from{
        transform: translateX(100px);
    }
    to{
        transform: translateX(0px);
    }   
}
.founders div img{
    width: 40%;
    border-radius: 5px;
}
.position{
    color: rgb(181, 181, 181);
}
.company_info{
    font-family: var(--font_inter);
    background-color: rgb(193, 193, 193);
    width: 100%;
}
.company_info div{
    padding: 10px;
}
#curve{
    width: 100%;
}
.about{
    animation-name: fadeIn;
    animation-timeline: view(70% 0%);
}
@keyframes fadeIn {
    from{
        opacity: 0;
        transform: translateX(-70px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}
.about , .standfor{
    width: 97%;
    margin: auto;
    padding: 20px;
    font-family: var(--font_inter);
} 

.about h1 , .standfor h1{
    font-size: 2.5rem;
    color: var(--purple);
}
.standfor_container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.box{
    background-color: white;
    border-radius: 7px;
    width: 100%;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.415);
}
.standfor .box:nth-child(even){
    background-color: #e4c4e3;
    animation-name: slideIn;
    animation-timeline: view(70% 0%);
}
@keyframes slideIn {
    0%{
        opacity: 0;
        transform: translateX(50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
 .standfor .box:nth-child(odd){
    animation-name: Left;
    animation-timeline: view(70% 0%);
}
@keyframes Left {
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}
.box p{
    width: 100%;
    font-size: 1rem;
}
.box b{
    margin-top: 1rem;
    align-self: flex-start;
    color: var(--purple);
}
.box span{
    margin-top: 1rem;
    align-self: flex-start;
    background:linear-gradient(to bottom , lightblue , white);
    width: 30px;
    padding: 2px;
    border-radius: 5px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timeline{
    list-style: none;
}
.timeline li::before{
    content: "";
    width: 15px;
    height: 15px;
    background-color: var(--purple);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 25px;
}
.timeline::before{
    content: "";
    width: 2px;
    height: 30px;
    background:linear-gradient(#ffffff, transparent 60%);
    display: inline-block;
    position: absolute;
    left: 31.6px;
    height: 100%;
}
.timeline li p , .timeline li time{
    color: rgb(90, 88, 88);
    font-family: var(--font_inter);
    margin-bottom: 3rem;
    width: 30%;
}
.timeline li h4{
    font-size: 1.1rem;
    margin: 0;
    
}
.timeline li{
    animation-name: slideup;
    animation-timeline: view(30% 0%);
}
@keyframes slideup {
    from{
        opacity: 0;
        
    }
    to{
        opacity: 1;
    }
}
/*Tablet*/@media (max-width:1200px) {
    .standfor_container{
        grid-template-columns: repeat(2, 1fr);
    }
    .timeline li p , .timeline li time{
    width: 70%;
}
    .box{
        display: block;
        width: 100%;
    }
    .box p{
        width: 100%;
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .founders div article .quote{
        font-size: 16px;
    }
    .founders div article{
        margin-left: 0;
        width: 50%;
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .founders div{
        width: 100%;
        border: none;
    }
    .founders{
    flex-direction: column;
    }
    .skills_text{
        width: 50%;
    }
    .skills_text .text h1{
        font-size: 35px;
    }
    .skills_boxes .box{
        max-width: 25rem;
        font-size: 20px;
    }
    .skills_boxes{
        width: 60%;
    }
    .skills_boxes h1{
        font-size: 25px;
    }
    .home button{
    width: 12.3rem;
    height: 55px;
    font-size: 25px;
}
    .home h1{
       font-size: 2.9rem; 
    }
    .home img{
    width: 40px;
    position: absolute;
    left: 9.4rem;
    top: 0.4rem;
}
}
/*Mobile*/@media (max-width:650px) {
    .timeline li p , .timeline li time{
    width: 100%;
}
    .standfor h1{
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .standfor_container{
        grid-template-columns: repeat(1, 1fr);
    }
    .company h1{
        text-align: center;
    }
    .founders div article .quote{
        font-size: 11px;
        width: 100%;
    }
    .founders div article p{
        font-size: 12px;
    }
    .founders div article{
        text-align: left;
        width: 100%;
    }
    .founders div h1{
        font-size: 1rem;
    }
    nav{
        padding: 20px;
    }
    .home{
      width: 100%;
    }
    .home h1{
        font-size: 1.8rem;
    }
    .home button{
    width: 9rem;
    height: 40px;
    font-size: 100%;
    }
    .home img{
    width: 33px;
    position: absolute;
    left: 6.7rem;
    top: 0.2rem;        
    }
    .mobile{
        display: block;
    }
    .comp{
        display: none;
    }
    .mobile {
        display: flex;
        justify-content: space-between;
    }
    .mobile .mobile_tabs img{
        width: 30%;
    }
    .mobile .mobile_tabs{
        width: 20%;
        text-align: right;
    }
    .skills{
        flex-direction: column;
    }
    h1{
        margin: 0;
        padding: 0;
    }
    .skills{
        padding: 13px;
    }
    
    .skills_text{
        width: 100%;
    }
    .skills_text .text h1{
        font-size: 30px;   
    }
    .skills_text .text h3{
        font-size: 20px;
    }
    .skills_boxes{
        width: 100%;
    }
    .skills_boxes .box{
        width: 100%;
        aspect-ratio: 2/1;
        top: 5rem;
        flex: 1;
    }
    .skills_boxes .box h1{
         font-size: 20px;
    }
}
.donation-cards {
  padding: 60px 20px;
  text-align: center;
  background: #fafafa;
  margin-top: 60px;
  border-radius: 12px;
}

.donation-cards h2 {
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--purple);
  font-family: var(--font_openSans);
}

.subtitle {
  color: #555;
  margin-bottom: 30px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: left;
}

.center {
  display: inline-block;
  margin: 0 auto;
}
.card h3 {
  margin-top: 0;
  color: var(--purple);
  font-family: var(--font_openSans);
}
.card p {
  color: #666;
  font-family: var(--font_inter);
}
.donate-btn{
    text-decoration: none;
    background-color: var(--purple);
    padding: 15px;
    color: white;
    font-family: var(--font_inter);
    border-radius: 10px;
}
footer{
    background-color: var(--purple);
    color: white;
    text-align: center;
    padding: 20px;
    font-family: var(--font_inter);
    margin-top: 30px;
}
.contact{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    padding: 10px;
    overflow-x: hidden;
}
.contact_info{
    font-family: var(--font_inter);
}
.contact_info h1{
    color: var(--purple);
    font-size: 300%;
}
.contact_info p{
    font-size: 100%;
    width: 60%;
}
.contact_info a{
    text-decoration: none;
    color: var(--purple);  
}
.contact_form{
    display: flex;
    justify-content: flex-start;
    font-family: var(--font_inter);
}
.contact_form form input , .contact_form form textarea{
    width:30rem;
    height: 50px;
}
.contact_form form textarea{
    height: 100px;
}
.contact_form button{
    width: 10rem;
    height: 50px;
    border-radius: 10px;
    border: none;
    background-color: var(--purple);
    color: white;
    font-family: var(--font_inter);
    font-size: 1.2rem;
}
.links{
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    background-color: black;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 100000;
}
.links a{
    text-decoration: none;
    color: white;
    font-family: var(--font_inter);
    font-size: 3rem;
}
.links .close{
    position: absolute;
    top: 20px;
    right: 30px;
    width: 40px;
    cursor: pointer;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}
.loading{
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000000;
}