html{
    scroll-behavior: smooth;
}

body{
    padding: 0px 48px 0px 48px;
    gap: 0px;
    opacity: 0px;
    background: #020D02;
}
/* header */
header{
    padding: 20px 0px 20px 0px;
    gap: 52px;
    border: 0px 0px 1.5px 0px;
    justify-content: space-between;
    opacity: 0px;
    background: #020D02;
    display:flex;

}
.logo{
    gap: 12px;
    opacity: 0px;   
}
.text{
    gap: 0px;
    opacity: 0px;
    font-family: Source Serif 4;
    font-size: 42px;
    font-weight: 600;
    line-height: 42px;
    letter-spacing: -0.04em;
    text-align: left;
    color: #D7E4D7;

}
.contents{
    gap: 40px;
    opacity: 0px;
   

}

ul{
    gap: 40px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #D7E4D7; 
    display:flex;
    list-style: none;
}
a{
    transition: 0.3s;
}
a:hover{
    color: #6c7a6c;
}


/* div1 */
main{
    padding: 48px 0px 48px 0px;
    gap: 0px;
    opacity: 0px;
}
.container .heading1{
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 120px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #D7E4D7;
    margin-bottom: 50px;
}
.container .image img{
    border-radius: 28px;
    opacity: 0px;
    transition: 0.3s;
    /* transform-origin: bottom; */
}
.container .image img:hover{
    transform: scale(1.02);
}

/* div 2 */
.second{
    padding: 96px 0px 96px 0px;
    gap: 0px;
    border: 0px 0px 1.5px 0px;
    opacity: 0px;
    background: #020D02;
    text-align: center;
    justify-self:center;
    align-content: center;
    align-items: center;
}
.heading2{
    max-width: 900px;
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 52px;
    letter-spacing: -0.02em;
    text-align: center;
    align-items: center;
    color: #D7E4D7;
    margin-left: 260px;
}
/* div 3 */
.third{
    padding: 52px 0px 52px 0px;
    gap: 52px;
    opacity: 0px;
    background: #020D02;
    display: flex;
}


.title{
    width: 646px;
    height: 32px;
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #D7E4D7;
}
table{
    gap: 20px;
    opacity: 0px;
}
tr{
    gap: 52px;
    opacity: 0px;
}
td{
    width: 297px;
    height: 24px;
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.005em;
    text-align: left;
    color: #D7E4D7;
    padding-bottom:15px;

}

/* div 4 */
.fourth{
    padding: 32px 0px 32px 0px;
    gap: 0px;
    border: 0px 0px 1.5px 0px;
    opacity: 0px;
    background: #020D02;
}
.card:hover{
    transform: scale(1.03);
}
.card{
    padding: 0px 68px 0px 0px;
    gap: 0px;
    border-radius: 28px;
    opacity: 0px;
    background: linear-gradient(175.81deg, rgba(184, 224, 184, 0.063) 27.37%, rgba(17, 95, 17, 0.112) 96.85%);
    border: 1px;
    display: flex;
    transition: 0.3s;
}
.imagediv{
    gap: 0px;
    opacity: 0px;
}
.imagediv img{
    left: -160px;
    gap: 0px;
    border: 1.5px 0px 0px 0px;
    opacity: 0px;
    border-radius: 28px;   
}
.letter{
    gap: 20px;
    opacity: 0px;
    margin-left: 20px;
    justify-content: center;
    align-content: center;
}
.one{
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #D7E4D7;
}
.two{
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.005em;
    text-align: left;
    color: #D7E4D7;
}

/* div 5 */
.fifth{
    width: 1344px;
    height: 900px;
    gap: 0px;
    opacity: 0px;
    background: #020D02;
    display: flex;
}
.photo{
    width: 720px;
    height: 900px;
    padding: 0px 68px 0px 0px;
    gap: 0px;
    opacity: 0px;

}
.photo img{
    width: 730px;
    height: 900px;
    gap: 0px;
    opacity: 0px;
    background: linear-gradient(180deg, rgba(2, 13, 2, 0) 0%, #A0EEA01D 100%);
}
.textcontent{
    width: Fixed (624px)px;
    height: Hug (256px)px;
    top: 322px;
    gap: 52px;
    opacity: 0px;
    align-content: center;
    background: linear-gradient(180deg, rgba(2, 13, 2, 0) 0%, #A0EEA01D 100%);
    padding: 20px;
}
.writing{
    width: Fill (624px)px;
    height: Hug (152px)px;
    gap: 20px;
    opacity: 0px;
}
.three{
    width: 624px;
    height: 68px;
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 68px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #D7E4D7;
}
.four{
    width: 624px;
    height: 64px;
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    color: #D7E4D7;
}
.hello{
    width: Hug (171px)px;
    height: Hug (52px)px;
    padding: 14px 32px 14px 32px;
    gap: 0px;
    border-radius: 16px;
    opacity: 0px;
    background: #105610;
    color:#FBFEFB;   
}

/* div 6 */
.sixth{
    padding: 52px 0px 52px 0px;
    gap: 52px;
    border: 0px 0px 1.5px 0px;
    opacity: 0px;
    background: #020D02;
}
.jojo{
    gap: 0px;
    opacity: 0px;
    font-family:Serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.02em;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #D7E4D7;
    margin-bottom: 40px;
}
.testimonialscards{
    margin-top: 20px;
    gap: 32px;
    opacity: 0px;
    display: flex;
}
.grid{
    padding: 32px;
    gap: 20px;
    border-radius: 20px;
    opacity: 0px;
    background: #B8E0B81F;
    border-top:1.5px;
    transition: 0.3s;
}
.grid1{
    padding: 32px;
    gap: 20px;
    border-radius: 20px;
    opacity: 0px;
    background: linear-gradient(270deg, rgba(2, 13, 2, 0) 0%, #B8E0B81F 76%);
    border-top:1.5px;
    transition: 0.3s;
}
.grid:hover{
    transform: scale(1.1)
}
.grid1:hover{
    transform: scale(1.1)
}

.profile{
    gap: 12px;
    opacity: 0px;
    display: flex;
}

.picture img{
    gap: 0px;
    border-radius: 999px;
    border: 1.5px 0px 0px 0px;
    opacity: 0px;
    border-top: 1.5px solid #000000;
}
.profilecontent{
    gap: 0px;
    opacity: 0px;
    
}
.bold{
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.005em;
    text-align: left;
    color: #D7E4D7;
    margin-bottom:0px;
    margin: 0; padding: 0;
}
.grey{
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.005em;
    text-align: left;
    color: #D1EBD19E;
    margin: 0; padding: 0;
}
.quotes{
    padding: 0px 0px 10px 0px;
    gap: 12px;
    opacity: 0.8px;
    display: flex;
    margin-top: 20px;
}
.line{
    gap: 0px;
    opacity: 0px;
    margin-right: 30px;
    margin-left: 20px;
}
.inside{
    width: 0px;
    height:154px;
    gap: 0px;
    border-radius: 1px;
    border: 1.5px 0px 0px 0px;
    opacity: 0px;
    border: 1.5px solid #91B69133;
}
.thoughts{
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.005em;
    text-align: left;
    color: #D7E4D7;
}

/* footer */
footer{
    padding: 96px 0px 32px 0px;
    gap: 32px;
    border: 1.5px 0px 0px 0px;
    opacity: 0px;
    background: #020D02;
}
.tags{
    gap: 0px;
    justify-content: space-between;
    opacity: 0px;
    display: flex;

}
.year{
    gap: 0px;
    opacity: 0px;
    font-family: Roboto Serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #D1EBD19E;
}
.button1{
    padding: 14px 32px 14px 32px;
    gap: 0px;
    border-radius: 16px;
    border: 1.5px 0px 0px 0px;
    opacity: 0px;
    border: 1.5px solid #91B69133;
    transition: 0.3s;
}
.button1:hover{
    background-color: rgb(46, 61, 46);
}
.another{
    gap: 0px;
    opacity: 0px;
    font-family: Public Sans;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #D7E4D7;

}


/* Responsive styling  */
@media screen and (max-width:1024px){
    header{
        display:block;
        text-align: center;
    }
    .logo .text{
        text-align: center;
    }
    .contents ul{
        justify-content: center;
    }
    .first .heading1{
        font-size: 80px;
        text-align: center;
    }
    .first .image img{
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .second{
        text-align: center;
    }
    .second .heading2{
        width: 100%;
        margin-left: 0;

    }

    .third{
        flex-direction: column;
        text-align: center;
    }
    .title{
        width: 100%;
        text-align: center;
    }
    table{
        width: 100%;   
    }
    table tr td{
        justify-content: space-between;
        text-align: center;
        
    }
    .fourth .card{
        flex-direction: column;
        text-align: center;
    }
    .fourth .card .imagediv img{
        width: 100%;
        margin-left: 45px;
        margin-top: 40px;
    }
    .fourth .card .letter .one,.two{
        text-align: center;
        margin-left: 20px;
    }


    .fifth{
        flex-direction: column;
        width: 100%;
    }

    .textcontent .writing{
        width: 100%;
        align-content: center;
    }
    .textcontent .writing .three{
        text-align: center;
        margin-left: 90px;
    }
    .textcontent .writing .four{
        text-align: center;
        margin-left: 90px;
    }
    .textcontent .writing .button{
        text-align: center;
    } 
     .fifth .photo{
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-left: 150px;
    }
    .fifth .photo img{
        width:80%;
        height: 80%;  
        align-items: center;
        justify-content: center;
        align-content: center;
    } 
    
 
    .sixth{
        flex-direction: column;
        text-align: center;
    }
    .sixth .testimonialscards{
        flex-direction: column;
    }

    footer .tags .year{
        font-size: 25px;
    }

    footer .tags .button1 {
        padding: 10px 20px;
        text-align: center;
    }

    footer .tags .button1 .another {
        font-size: 20px;
    }
}