@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

/*Reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Variables*/
:root{
    --background: rgba(200, 200, 200);
    --color1: rgb(105, 105, 209);
    --color2: rgb(65, 65, 153);
    --color3: rgb(63, 63, 134);
    --colorDefault: black;
    --colorDefault2: white;
    --generalFont: poppins;
    --headingFont: Raleway, sans-serif;
    --h1: 600 3rem/1.2em var(--headingFont);
    --h2: 600 2rem/1.2em var(--headingFont);
    --h3: 600 1.8rem/1.2em var(--headingFont);
    --p: 1rem/1.5em var(--generalFont);
    --zero: 0;
    --spacing: 2px;
    --spacing1: 4px;
    --spacing2: 8px;
    --spacing3: 16px;
    --spacing4: 20px;
    --spacing4point5: 25px;
    --spacing5: 40px;
    --spacing6: 80px;
    --spacing7: 160px;
    --size1: 40px;
    --flex: flex;
    --box-shadow1: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --box-shadow2: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/*Global Styles*/
html{
    scroll-behavior: smooth;
}

body{
    font: var(--p);
    font-family: var(--generalFont);
    background: var(--background);
    color: var(--colorDefault);
}
.logo{
    font: var(--h2);
    font-family: var(--generalFont);
    color: var(--color2);
    min-width: max-content;
    margin-left: 20px;
}
h1{
    font: var(--h1);
}
h2{
    font: var(--h2);
    margin: var(--spacing2) 0;
}
p{
    margin: var(--spacing2) 0;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    color: var(--colorDefault2);
}
.bold{
    font-weight: bold;
}
.btn, button{
    all: unset;
    display: inline-block;
    background: var(--color2);
    margin: var(--spacing2) 0;
    padding: var(--spacing2) var(--spacing3);
    color: var(--colorDefault2);
    border-radius: var(--spacing2);
    border: solid var(--spacing1) var(--color2);
    font: var(--p);
    cursor: pointer;
    width: fit-content;
}
.btn:hover, button:hover{
    background: var(--color1);
    color: var(--colorDefault2);
    transition: 0.3s ease-in-out;
}
img{
    width: min(500px, 600px);
    height: fit-content;
}
.card-image{
    height: 300px;
    width: 300px;
    object-fit: contain;
    border-radius: 50%;
}
.icon-style{
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin: var(--spacing4) 0;
    position: relative;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-self: top;
    justify-content: top start;
}
.icon-style-2{
    height: min(40px, 50px);
    background: var(--color2);
    padding: var(--spacing2) var(--spacing4);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-show{
    display: none;
    height: 0;    
}

/*card-designs*/
.card-design1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: var(--spacing6);
        background: var(--colorDefault2);
        padding: var(--spacing4);
        gap: var(--spacing4);
        border-radius: 25px;


}

/*Utility classes*/
section{
    min-width: 100%;
    max-width: 1080px;
    padding: 0 10% 0 10%;
    margin: 0 auto;
}
.center{
    text-align: center;
}
.hidden{
    display: none;
}
.primary{
    width: fit-content;
    height: 100%;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing3);
}
.flex2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing3);
}
.flex3{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing5);
}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 2rem;
    align-items: center;
}
.grid2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
    gap: 100px;
    align-items: center;
    text-align: center;
    justify-content: top;
}
.grid2 > *{
    min-width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.column{
    display: flex;
    max-width: 90%;
    flex-direction: column;
}
.column2{
    width: min(1000px, 100%);
    margin: 0 auto;
    height: fit-content;
    columns: 4 300px;
    column-gap: 3em;
}
.column2 >*{
    height: fit-content;
    display: block;
    height: fit-content;
    margin-bottom: var(--spacing5);
}
flex > *, .grid > *{
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
}
.justify-center{
    justify-content: center;
}
.justify-top{
    justify-content: top;
}
.align-top{
    align-items: top;
}
.reverse {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
}
.reverse > *:first-child {
    order: 2; /* Move the first child to the second position */
}
.padding1{
    padding: var(--spacing1) 0;
}
.padding2{
    padding: var(--spacing2) 0;
}
.padding3{
    padding: var(--spacing3) 0;
}
.padding4{
    padding: var(--spacing4) 0;
}
.padding5{
    padding: var(--spacing5) 0;
}
.padding6{
    padding: var(--spacing6) 0;
}
.padding7{
    padding: var(--spacing7) 0;
}
.padding-top1{
    padding-top: var(--spacing6);
}
.padding-bottom1{
    padding-bottom: var(--spacing6);
}

.margin1{
    margin: var(--spacing1) auto;
}
.margin2{
    margin: var(--spacing2) auto;
}
.margin3{
    margin: var(--spacing3) auto;
}
.margin4{
    margin: var(--spacing4) auto;
}
.margin5{
    margin: var(--spacing5) auto;
}
.margin6{
    margin: var(--spacing6) auto;
}
.margin7{
    margin: var(--spacing7) auto;
}

/*unique margin classes*/
.margin8{
    margin-top: var(--spacing7);
}
.margin9{
    margin: var(--spacing3) auto var(--spacing6) auto;
}


.background2{
    background: var(--color2);
    max-width: 80%;
}
.color2{
    color: var(--background);
}
.border-radius{
    border-radius: 20px;
}
.border-radius-1{
    border-radius: 100%;
}
.border-radius-2{
    border-radius: 20px;
}
.clip-path{
    clip-path: polygon(20% 0%, 100% 25%, 80% 100%, 0% 100%, 20% 25%);
}
.cp2{
clip-path: polygon(50% 0%, 60% 15%, 100% 25%, 90% 50%, 
                   100% 75%, 60% 85%, 50% 100%, 40% 85%, 
                   0 75%, 10% 50%, 0 25%, 40% 15%);

}

/*box-shadow classes*/
.box-shadow1{
    box-shadow: var(--box-shadow1);
}
.box-shadow2{
    box-shadow: var(--box-shadow2);
}

/*width classes*/
.w-90{
    max-width: 90%;
    width: 90%;
}
.w-80{
    width: 80%;
}
.w-70{
    width: 70%;
}

.w-200px{
    width: 200px;
}
.w-300px{
    width: 300px;
}
.w-400px{
    width: 400px;
}
/*height classes*/
.h-200px{
    height: 200px;
    max-height: min-content;
}
.h-300px{
    height: 300px;
    max-height: min-content;
}
.h-400px{
    height: 400px;
}

/*size classes*/
.s-100px{
    width: 100px;
    height: 150px;
}
.s-200px{
    width: 200px;
    height: 250px;
}
.s-300px{
    width: 300px;
    height: 350px;
}
/*icon size*/
.i-50px{
    width: 50px;
    height: 50px;
}
.i-100px{
    width: 100px;
    height: 100px;
}
.i-200px{
    width: 200px;
    height: 200px;
}
.i-300px{
    width: 300px;
    height: 300px;
}

/* header */
header{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    top: 0;
    position: fixed;
    padding: 10px 20px  10px 0px;
    background: var(--colorDefault2);
}
.nav-links, .auth-buttons{
    display: flex;
    align-items: center;
    gap: var(--spacing3);
}
nav {
    display: flex;
    align-items: center;
    gap: var(--spacing5);
    padding: var(--spacing3) var(--spacing4);
    max-width: 100%;
}
nav a{
    color:var(--color2);
}
nav a:hover{
    color: var(--color3);
}
#signInBtn{
    display: inline-block;
    flex-grow: 1;
    min-width: max-content;
    font-weight: bolder;
    text-decoration: underline;
    margin-right: var(--spacing4);

}
.hamburger{
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
nav.left-nav{
    margin-left: auto !important;
    gap: var(--spacing4);
}
.left-nav:nth-of-type(2){
    margin-left: 0;
}

/*footer*/
footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    background: var(--color2);
    color: var(--background);
    padding: var(--spacing5);
    gap: var(--spacing5);

    .logo{
        color: var(--colorDefault2);
    }
    h3{
        line-height: 50px;
        color: var(--colorDefault2)
    }
}
.footer-left{
    flex: 1.5;
}
.footer-quick-links{
    display: flex;
    flex: 1;
    flex-direction: column;
}
.footer-quick-links ul{
        display: flex;
        flex-direction: column;
        gap: 15px;
        a{
        color: var(--background);
        }
        a:hover{
            color: var(--colorDefault2);
        }
    }
.footer-contact-info{
    flex: 1;
}    
.footer-right{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: left;
}
.social-media-icons{
    display: flex;
    flex:1;
    gap: 20px;

    *{
        width: 30px;
    }
}
.copyright-text{
    min-width: max-content;
    width: 100%;
}

/*Mini-laptop size*/
@media (max-width: 1100px) {
    .img-center{
        width: 80%;
        margin: 1rem auto;
    }
     header{
        align-items: center;
        
    }
     .hamburger{
            margin-left: auto;
        }
        .donate-button{
            margin-left: auto;
            }
            .nav-links, .auth-buttons{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--spacing3);
            }
            #login-btn, #signup-btn{
                border: 2px solid var(--color2);
                width: 300px;
                text-align: center;
                padding: var(--spacing2) var(--spacing3);
                border-radius: var(--spacing2);
            }
            #signup-btn{
                color: var(--colorDefault2);
                background: var(--color2);
                margin-right: 0;
            }
            .spacer{
                flex-grow: 1;
            }
            .donate-container{
                margin-right: 10px;
            }


    .mobile-size-1{
        width: 100%;
        max-width: 100%;
        height: 100%;}
    .grid, .reverse{
        display: block;
        grid-template-columns: 1fr; /* Single column layout */
        gap: var(--spacing4);
        background: var(--background);
    }
    .grid >*:first-child, .reverse > *:first-child {
        order: 1; /* Keep the first child in the first position */
        margin: var(--spacing4) 0;
    }
    .grid2{
        gap: var(--spacing5);
    }
    .logo{
        font: var(--h2);
    }
    .hamburger{
        display: block;
    }
    nav{
        display: none;


        a:hover{
            color: var(--color1);
        }
    }
    nav.show{
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 100%;
        top: var(--spacing6);
        background: var(--colorDefault2);
        padding: var(--spacing4);
        gap: var(--spacing4);
        border-radius: var(--spacing2);
    }
    .nav.left-nav{
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing3);
    }
    .mobile-hide{
        display: none;
        height: 0;
    }
    .mobile-show{
        display: block;
        height: fit-content;
    }
}

/*Tablet and Mobile Styles*/
@media (max-width: 900px){
   
    .flex{
        flex-wrap: wrap;
        flex-grow: 1;
    }
    img{
        max-width: 100%;
    }
    h1{
        font: var(--h2);
    }
    .t-text-only-section{
        max-width: 50%;
    }
    .mobile-center{
        align-items: center;
        text-align: center;
    }
    .icon-style{
        justify-content: left start;
    }
    .icon-style-2{
        padding: var(--zero);
        height: var(--size1);
        width: var(--size1);
    }
    .card-design1{
        width: 300px;
        height: 400px;
        margin: 0 auto;
        height: fit-content;
        padding: var(--spacing3);
        gap: var(--spacing3);
    }
    footer{
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        .logo{
            margin-left: 0;
        }
    }
    .footer-right{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/*Mobile Styles for Smaller Screens*/
@media (max-width: 600px){
    .logo{
        font-size: var(--spacing4point5);
    }
    .img-center{
        width: 100%;
    }
    header{
        max-width: 100%;
    }   
   .spacer{
        flex-grow: 1;
   }
   footer{
    padding: var(--spacing3) 0 var(--spacing3) 0;
   }
   .copyright-text{
        flex-grow: 0;
        width: 80%;
        min-width: 80%;
   }
}

@media (max-width: 400px){

}