@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

body{
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    width: 100%;
}
/* header styling */
header{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
    /* navbar styling */
.navbar-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40%;
    cursor: pointer;
}

nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    list-style-type: none;
}
nav ul li{
    margin: 10px;
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
}

.navbar-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

main{
    min-height: 100rem;
    width: 100%;
}
/* conteiner 1 styling */
.connteiner1{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 36%));
    justify-content: center;
    align-content: center;
    background: #F0EFEB;
    width: 100%;
    justify-items: center;
    align-items: center;
}

.conteiner1-text-conteiner{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: start;
    
}

.conteiner1-text-conteiner h1{
    font-size: 60px;
    width: 90%;
    margin: 5px;
    padding: 5px;
}

.conteiner1-text-conteiner p {
    width: 60%;
    font-weight: 400;
    line-height: 24px;
    margin: 5px;
    padding: 5px;
}

.conteiner1-text-conteiner button{
    border: none;
    background: #000;
    color: white;
    font-size: 17px;
    width: 124px;
    margin: 5px;
    padding: 5px;
    border-radius: 100px;
}
/* conteiner 2, conteiner 3, conteiner 4 styling */

.conteinetr2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
    font-size: 20px;
    line-height: 23.44px;
    text-align: center;
    font-weight: 400;
    margin: 5px;
    padding: 5px;
}

.conteiner2-intro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    
}
.conteiner2-intro p{
    width: 35%;
}

.conteiner2-intro h1{
    font-size: 36px;
    text-align: center;
    margin: 5px;
    padding: 5px;
    line-height: 40px;
}

.conteiner2-title{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.conteiner2-title div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 5px;
    padding: 5px;
    font-weight: 400;
    font-size: 17px;
}

.info{
    width: 50%;
    font-size: 17px;
    font-weight: bold;
    line-height: 19.92px;
    margin: 5px;
    padding: 5px;
}

.conteiner2-title div a{
    color: black;
    font-weight: 700;
    font-size: 17px;
    margin: 5px;
    padding: 5px;
}

.connteiner3{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #CCCCCC4D;
    padding: 60PX 30PX;
}

.card1-section{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.card1-section-intro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
}

.card1-section-intro h1{
    font-size: 36px;
    margin: 5px;
    padding: 5px;
}

.card1-section-intro p{
    font-size: 36px;
    font-weight: 400;
    line-height: 42.19px;
    margin: 5px;
    padding: 5px;
    max-width: 33rem;
}

.card1-section-intro a{
    color: #000;
    font-weight: bold;
    margin: 5px;
    padding: 5px;
    font-size: 17px;
    margin-top: 30px;
}

.connteiner4{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #CCCCCC;
    padding: 60PX 30PX;
    text-align: end;
}

.card4-section-intro{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-end;
    padding-left: 350px;
}

.card4-section-intro h1{
    font-size: 36px;
    margin: 5px;
    padding: 5px;
}

.card4-section-intro p{
    font-size: 36px;
    font-weight: 400;
    line-height: 42.19px;
    margin: 5px;
    padding: 5px;
    max-width: 30rem;
}

.card4-section-intro a{
    color: #000;
    font-weight: bold;
    margin: 5px;
    padding: 5px;
    font-size: 17px;
    margin-top: 30px;
}

/* conteiner 5 styling */

.conteiner5{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 30px;
}

.conteiner5 h2{
    font-size: 36px;
    font-weight: 400;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-top: 100px;
}

.conteiner5-intro{
    width: 70%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* grid-template-rows: repeat(auto-fit, minmax(250px, 1fr)); */
}

.conteiner5-circles{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 30px 10px;
    margin: 5px;
    }

.conteiner5-circles p{
    font-size: 30px;
    font-weight: bold;
    width: 60%;
    text-align: center;
}

.circle1{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #21F7EC;
}

.circle2{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #33D3BC;
}

.circle3{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #18A5C6;
}

.circle4{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #D38F62;
}

.circle5{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F94C43;
}

.circle6{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #D399FF;
}

.each{
    text-align: center;
    font-weight: bold;
    margin: 70px 5px 280px 5px;
    padding: 5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* conteiner 6 styling */

.conteiner6{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.conteiner6 div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 75%;
    background-color: #F0F0F0;
    height: 480px;
    gap: 45px;
    padding: 30px 5px;    
}

.conteiner6 div div{
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
}

.conteiner6 div div h1{
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    width: 50%;
}

.conteiner6 div div p{
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    width: 100%;
}

.conteiner6 div div a{
    font-size: 18px;
    color: #000;
    font-weight: bold;
}

/* conteiner7 styling */

.conteiner7{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 100px 5px;
    gap: 20px;
}

.conteiner7-intro{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.conteiner7-intro h1{
    font-size: 36px;
    font-weight: bold;
}

.conteiner7-intro p{
    font-size: 17px;
    font-weight: bold;
    width: 95%;
    text-align: center;
}

.conteiner-for-form{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.conteiner-for-form form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.conteiner-input{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.conteiner-input input{
    padding: 10px;
    width: 25%;
}

.conteiner-for-form form input{
    padding: 10px;
    width: 100%
}

.conteiner-for-form form button{
    border: none;
    background: #000;
    color: white;
    padding: 10px 30px;
    border-radius: 100Px;
    font-size: 14px;
}

/* footer styling */

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #000;
    color: white;
    width: 100%;
    padding: 40px 5px;
    margin: 5px;
}

.footer-conteiner{
    width: 120%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon-conteiner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.social-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.social-logo img{
    cursor: pointer;
}

.info-conteiner{
    width: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.about{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}
.about li{
    list-style: none;
    cursor: pointer;
}