@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Calistoga&family=Chivo:ital,wght@0,100..900;1,100..900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playball&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Calistoga&family=Chivo:ital,wght@0,100..900;1,100..900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=Lexend+Exa:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playball&display=swap');


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

.page{
    width: 100%;
    padding: 0 3rem;
    background-color: #FFFFFF;
}
.divider {
    width: 100%;
    height: 1px;
    background-color: #00000029;
}

.header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.zono span {
    font-family: Playball;
    font-size: 2.625rem;
    font-weight: 400;    
}

.header_links a {
    text-decoration: none;
    font-family: Lexend Exa;
    font-size: 1.75rem;
    font-weight: 300;
    color: #000000;   
}

.container {
    width: 100%;
    padding: 3rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main_content {
    width: 100%;
    padding: 6rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    text-align: center;
}

.welcome span {
    font-family: Lexend Exa;
    font-size: 7.5rem;
    font-weight: 300;    
}
.main_content img {
    width: 100%;
}

.my_projects {
    width: 100%;
    padding: 3rem 0;

    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

.project_head {
    font-family: Lexend Exa;
    font-size: 1.75rem;
    font-weight: 300;    
}

.project_txt {
    width: 40%;

    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

.pro_txt1 , .pro_txt2 {
    width: 100%;
    font-family: Newsreader;
    font-size: 1.25rem;
    font-weight: 400;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact_me {
    width: 70%;
    padding: 3rem ;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact_head {
    font-family: Lexend Exa;
    font-size: 1.75rem;
    font-weight: 300;   
}

.contact_list {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

.contact_col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact_bold {
    font-family: Newsreader;
    font-size: 1rem;
    font-weight: 400;    
}

.contact_txt {
    font-family: Newsreader;
    font-size: 1rem;
    font-weight: 400;    
    color: #00000099;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/*  */
/*  */


/* TESTIMONIAL SECTION */

.last_content {
    width: 100%;
    margin: 3rem 0;
    gap: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;

}
.last_content h2 {
    font-family: Chivo;
    font-size: 3rem;
    font-weight: 900;
}
.testi {
    padding: 0 3rem;
    max-width: 100%;
    display: flex;
    gap: 2rem;
    justify-content: start;
    align-items: start;
    overflow: auto;

}

/* OUTER LAYER OF TESTIMONIAL SECTION */

.card {
    max-width: 300px;
    padding: 2rem;
    gap: 1rem;
    border-radius: 1rem;
    border: 2px solid #00000029;
    display: flex;
    flex-direction: column;
}
.intro {
    gap: 1rem;
    display: flex;
    align-items: center;
}
.intro img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}
.job {
    width: 11rem;
    display: flex;
    flex-direction: column;
}
.name {
    font-family: Newsreader;
    font-size: 1rem;
    font-weight: 500;    
}
.work {
    font-family: Newsreader;
    font-size: 1rem;
    font-weight: 400;
    color: #00000099;  
}
.work_text {
    width: 78%;
}
.work_text span {
    font-family: Newsreader;
    font-size: 1.25rem;
    font-weight: 400;
}
.desc {
    width: 100%;
    display: flex;
    align-items: center;
}
.line {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.line .div {
    width: 0px;
    height: 48px;
    border-radius: 1px;
    border: 1px solid #00000029;
}
.desc {
    display: flex;
    justify-content: space-between;
}

.one_img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    margin-bottom: 2rem;
}

.two_img {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 2rem;
}

.three_img {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.last_img .img1 {
    width: 648px;
    height: 664px;    
}

.last_img .img2 {
    width: 648px;
    height: 443px;    
}

.two_img .img3 {
    width: 1008px;
    height: 672px;    
}

.three_img .img4 {
    width: 648px;
    height: 443px;    
}

.three_img .img5 {
    width: 648px;
    height: 664px;
}

footer {
    width: 100%;
    margin: 3rem 0;
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foot span {
    font-family: Lexend Exa;
    font-size: 1.75rem;
    font-weight: 300;
    color: #00000099;
}

.foot button {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid #00000029;
    background-color: #00000000;

    font-family: Lexend Exa;
    font-size: 1.25rem;
    font-weight: 400;
}



@media screen and (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        justify-content: center;
    }
    .header_links {
        flex-wrap: wrap;
    }
    .welcome span {
        display: block;
        font-size: 3rem;
    }
    .main_content {
        padding: 3rem 0;
    }
    .contact_me {
        width: 100%;
    }
    .one_img {
        flex-direction: column;
        gap: 2rem;
    }
    .two_img {
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }
    .three_img {
        flex-direction: column;
        gap: 2rem;
    }
    .one_img .img1 {
        width: 100%;
        height: 100%;
    }
    .one_img .img2 {
        width: 100%;
        height: 100%;
    }
    .two_img .img3 {
        width: 100%;
        height: 100%;
    }
    .three_img .img4 {
        width: 100%;
        height: 100%;
    }
    .three_img .img5 {
        width: 100%;
        height: 100%;
    } 
}

@media screen and (max-width: 425px) {
    .header_links {
        display: none;
    }
    .page {
        padding: 0 2rem;
    }
    .my_projects {
        flex-direction: column;
    }
    .contact_me {
        padding: 0;
    }
    .last_content h2 {
        font-size: 2rem;
        text-align: center;
    }
    .foot span{
        font-size: 1rem;
    }
    .foot .button {
        font-size: 1rem;
    }
}