:root{
    --header-color:#2196F3;
    --mainul-color:#212121;
    --mainulfon-color:#F5F4FA;
    --mainli-color:#757575;
    --footer-color:#FFFFFF;
    --logo-color:#000;
    --footer-text-color: rgba(255, 255, 255, 0.6);
    --background-footer-color: #2F303A;
    }

    body{
        font-family: "Roboto", sans-serif; 
    margin: 0;
    }


    .logotype{
    
    color: var(--header-color);
    font-family: "Raleway", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: 0.78px;
    text-decoration: none;
    }


    .logotype :hover{
        color: var(--logo-color);
    }



    .logo-partf{
    
        color: var(--logo-color);
    font-family: Raleway;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.78px;
    margin-right: 93px;


    }

    .logo-partf :hover{
        color: var(--footer-color);
    }

    .logo-part{

        color: var(--logo-color);
    font-family: Raleway;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.78px;
    margin-right: 93px;

    }




    .header-item {
        color: var(--logo-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.28px;
    text-decoration: none;
    }

    .adventages-list{
    color: var(--mainli-color);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.28px;
    display: flex;
    gap: 30px;




    }


    .adventages-listes{
        gap: 30px;
    display: flex
    }

    .adventages{
        padding-top: 94px;
        padding-bottom: 94px;
    }


    .hero-title{
        margin-left: auto;
        margin-right: auto;
    color: var(--mainulfon-color);
    text-align: center;
    font-size: 44px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.36;
    letter-spacing: 2.64px;
    text-transform: uppercase;
        width: 696px;
        margin-bottom: 30px;

    }

    .team-caption{
        color: var(--mainli-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.71;
    letter-spacing: 0.42px;
    text-align: center;
    margin-top: 10px;

    }


    .footer-items:hover{
        color: var(--footer-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.71;
    letter-spacing: 0.42px;

    }

    .main-item:hover{
        color: var(--mainul-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.62;
    letter-spacing: 0.48px;
    }


    .header-detales{
    color: var(--mainul-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.28px;


    }

    .adventages-titles{
        color: var(--mainli-color);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.28px;
    }



    .header-contact a {
        color: var(--mainli-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.28px;
    text-decoration: none;

    }

    .header-contact a:hover{
        color: var(--header-color);
    }

    .main-button{
        color: var(--footer-color);
        background-color: var(--header-color);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.87;
    letter-spacing: 0.96px;
    border-radius: 5px;
    padding: 10px 30px;
    border: none;
    }



    a{
        color: var(--mainul-color);
        text-decoration: none;
    }
    a:hover{
        color: var(--header-color);
    }



    .hero-section{
        background-color: var(--background-footer-color);
    text-align: center;
        background-color: var(--background-footer-color);
        padding-bottom: 200px;
        padding-top: 200px;
        
    }




    .footer-logo{
        color: #000;
    font-family: Raleway;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.78px;
    }







    .title{
        color: var(--mainul-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.42px;
    text-transform: uppercase;

    }


    .header-items{
        color: var(--logo-color);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.28px;

    }



    .header-items:hover{
        color: var(--header-color); 
        }


        .hero-text{
            color: var(--mainli-color);
    padding-top: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.42px;
    padding-right: 30px;

        }

        .work-title{
            color:var(--mainul-color);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.08px;
    text-align: center;
    margin-bottom: 50px;
        }





        .team-title{
            color:var(--mainul-color);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.08px;
    text-align: center;
    margin-bottom: 50px;
    }

    .team{
        padding-top: 94px;
        padding-bottom: 94px;
    background-color: var(--mainulfon-color);
    }






    .main-person{
        color: var(--mainul-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.48px;
    text-align: center;
    }



    .main-item{
        color:var(--mainul-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.48px;

    }

    .main-caption{
        color: var(--mainul-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 1.08px;

    }

    .main-text{
        color: var(--mainli-color);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.48px;

    }

    .footer-link{
        color: var(--footer-color);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.42px;

    }







    footer{
    padding-top: 60px;
    padding-bottom: 60px;
        background-color: var(--background-footer-color);
    }


    .footer-mail{
    color: var(--footer-text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.42px;
    }

    .footer-number{
        color: var(--footer-text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.42px;
    }


    .container{
        width: 1200px;
    margin: 0 auto;
        outline: 1px solid red;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header{
        padding-top: 24px;
        padding-bottom: 25px;
    }

    .header-wrap{
        display: flex;
        align-items: center;
    }


    .header-list{
        display: flex;
        gap: 50px;
    
    


    }



    .header-contacts {
        display: flex;
        gap: 50px;
        margin-left: auto;
        
    }




    .header-contact:first-child{
        margin-left: 0;
        
    }





    .header-navigation{
        display: flex;
        align-items: center;
    
    }


    .work-list{
        display: flex;
    justify-content: center;
    gap: 30px;
    }





    .work-item{
        margin-left: 0;
    width: 370px;
    height: 294px;
    }



    .team-list{
        display: flex;
        padding-bottom: 94px;
        gap: 30px;
    }



    .footer-items{
    margin-top: 9px;
    }


    .work{
        padding: 94px 0;
    }


    .logo-part :hover{
        color: var(--logo-color);
    }

    .hero{
        background-color: #FFFFFF;
    }







    .main-list{
        display: flex;
    padding-left: 213px;
    padding-right: 213px;
    gap: 8px;
    border-radius: 4px;
    padding-bottom: 34px;
   
    }






    .header-detale{
        display: flex;
    }


    .main-list :hover{
        color: var(--footer-color);
        
    }

        .main-itemss{
        background-color: var(--mainulfon-color);
    padding: 6px 22px;
    border-radius: 4px;
    border: none;
    margin-top: 100px;
    }




    
     
.filter-part{
    color: var(--mainul-color);
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 26px;
letter-spacing: 0.48px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 22px;
padding-right: 22px;
white-space: nowrap;
display: flex;
background-color: var(--mainulfon-color);
color: #000;
border-radius: 4px;
}


    .filter-part:hover{
        background-color: var(--header-color);
     color: #FFFFFF;
    }




    .main-info{
        display: grid;
    flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-bottom: 94px;
    }