:root{
--accent-color:#2196F3;
--logo-color:#000000;
--text-color:#212121;
--added-text:#757575;
--main-color:#FFFFFF;
--fotter-bg:#2F303A;
--team-bg:#F5F4FA;
--footer-contact:rgba(255,255,255,0.6);
--header-line:#ECECEC;
--font-family:"Roboto";
--client-icon:#afb1b8;
}

body{
font-family: var(--font-family);

}

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

}

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

}

.header-box{
display: flex;
align-items: center;

}

.header-logo{
    font-family: "Raleway";
font-weight: 700;
font-size: 26px;
letter-spacing: 0.03em;
color: var(--accent-color);
margin-right: 93px;
}

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

}

.header-studio{
    color: var(--logo-color);
}

.header-link{
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--text-color);

}

.header-link:hover{

    color: var(--accent-color);
}

.header-items{
display: flex;
gap: 30px;
margin-left: auto;

}

.header-elem:last-child{
.header-icons{
width: 10px;
height: 16px;

}

}

.header-icons{
width: 16px;
height: 12px;
fill: var(--added-text);
}

.header-contact{
display: flex;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--added-text);
align-items: center;
gap: 10px;

}



.header-contact:hover{
.header-icons{
fill: var(--accent-color);

}
    color: var(--accent-color);
}
.hero{
padding-top: 200px;
padding-bottom: 227px;
    background-color: var(--fotter-bg);
    text-align: center;
    background-image: linear-gradient(rgba(47, 48, 58, 0.4),rgba(47, 48, 58, 0.4)), url(../imges/hero.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    /* background-image: rgba(47, 48, 58, 0.4); */
}
.hero-title{
font-weight: 900;
font-size: 44px;
line-height: 136%;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
width: 696px;
margin-left: auto;
margin-right: auto;
background-clip: text;
background-image: url(../imges/giphy.gif);
background-position: bottom;
color: transparent;
}

.hero-btn{
font-weight: 700;
font-size: 16px;
line-height: 188%;
letter-spacing: 0.06em;
text-align: center;
color: var(--main-color);
border-radius: 4px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
background: var(--accent-color);
margin-top: 30px;
padding: 10px 32px;
}

.requirements{
padding-top: 94px;
padding-bottom: 94px;

}

.requirements-list{
display: flex;
gap: 30px;

}

.requirements-item::before{
content: "";
display: block;
width: 270px;
height: 120px;
border-radius: 4px;
background-color: var(--team-bg);
margin-bottom: 30px;
background-image: url(../imges/antenna.png);
background-repeat: no-repeat;
background-position: center;
background-size: 70px;
}

.requirements-item:nth-child(2)::before{
background-image: url(../imges/clock.png);

}

.requirements-item:nth-child(3)::before{
background-image: url(../imges/diagram.png);

}

.requirements-item:nth-child(4)::before{
    background-image: url(../imges/astronaut.png);

}

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

}

.requirements-text {

    color: var(--added-text);
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.42px;

}

.work{
padding-bottom: 94px;

}

.work-list{
display: flex;
gap: 30px;


}

.work-item{
flex-basis: calc((100% - 60px)/3);
position: relative;
text-align: center;
}

.work-pic{
width: 100%;

}

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


}

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


}

.work-text{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
position: absolute;
bottom: 0;
width: 100%;
padding: 27px 0;
background: rgba(47, 48, 58, 0.8);



}

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

.team-list{
display: flex;
gap: 30px;

}

.team-item{
flex-basis: calc((100% - 90px)/4);
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
border-radius: 0 0 4px 4px;
}

.team-icon{
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
fill: white;
}

.team-items{
display: flex;
gap: 10px;
justify-content: center;
margin-top: 16px;
}

.team-picture{
width: 20px;
height: 20px;
fill: var(--client-icon);

}

.team-icon:hover{
background-color: var(--accent-color);
.team-picture{
fill: var(--main-color);

}
}

.team-pic{
width: 100%;
}

.team-wrap{
padding-top: 30px;
padding-bottom: 30px;
background-color: var(--main-color);
border-radius: 0 0 4px 4px;

}

.team-camphon{
color:var(--text-color);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.48px;
margin-bottom: 10px;


}

.team-text{
color:var(--added-text);
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: normal;
letter-spacing: 0.48px;


}

.client{
padding-bottom: 94px;
padding-top: 94px;

}

.client-camphon{
margin-bottom: 50px;
font-weight: 700;
font-size: 36px;
letter-spacing: 0.03em;
text-align: center;
color: var(--text-color);
}

.client-list{
display: flex;
justify-content: center;
align-items: center;
gap: 30px;

}



.client-link:hover{
fill: var(--accent-color);
border-color: var(--accent-color);
.client-pic{
fill: var(--accent-color);


}

}

.client-link{
    display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--client-icon);
border-radius: 4px;
width: 170px;
height: 92px;
}

.client-pic{
fill: var(--client-icon);
width: 106px;
height: 60px;

}

.fotter{
background-color: var(--fotter-bg);
padding-top: 60px;
padding-bottom: 60px;
}

.fotter .container{
display: flex;
align-items: baseline;

}

.fotter-logo{
color: var(--accent-color);
font-family: Raleway;
font-size: 26px;
font-weight: 700;
line-height: normal;
letter-spacing: 0.78px;
display: inline-block;
margin-bottom: 20px;


}

.fotter-studio{
color: var(--main-color);

}

.fotter-list{
display: flex;
flex-direction: column;
gap: 9px;

}

/* .fotter-item{
margin-bottom: 9px;


}

.fotter-item:last-child{
margin-bottom: 0px;

} */

/* .fotter-item:not(:last-child){
margin-bottom: 9px;

} */

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


}

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

}

.footer-wrap{
margin-left: 70px;

}

.footer-title{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--main-color);
margin-bottom: 20px;
}

.footer-items{
display: flex;
gap: 10px;
}

.footer-cont{
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.10);
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
fill: var(--main-color);

}

.footer-icon{
width: 20px;
height: 20px;


}

.footer-title{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--main-color);

}

.footer-wrap{
margin-right: auto;

}

.footer-form{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}

.footer-input{
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
width: 358px;
height: 50px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
background: rgba(33, 150, 243, 0);
padding-left: 16px;
}

.footer-image{
width: 24px;
height: 24px;
margin-left: 10px;
fill: var(--main-color);
}

.footer-btn{
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
background: #2196f3;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
line-height: 188%;
letter-spacing: 0.06em;
text-align: center;
color: var(--main-color);
display: flex;
align-items: center;
padding: 10px 28px;

}

/* portfolio */

.cart{
padding-top: 94px;
padding-bottom: 94px;
border-top: 1px solid var(--header-line );
}


.cart-list{
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 50px;

}

.cart-butt{
color: var(--text-color);
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0.48px;
padding: 6px 22px;
border-radius: 4px;
background: var(--team-bg);
border: none;


}

.cart-butt:hover{
background-color: var(--accent-color);
color: var(--main-color);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 3px 1px 0 rgba(0, 0, 0, 0.1);
}

.cart-items{
display: flex;
flex-wrap: wrap;
gap: 30px;

}

.cart-elem{
outline: 1px solid #EEE;
flex-basis: calc((100% - 60px)/3);

}

.cart-elem:hover{
box-shadow: 1px 4px 6px 0 rgba(0, 0, 0, 0.16), 0 4px 4px 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.12);

}

.cart-pic{
width: 100%;


}

.cart-wrap{
padding: 20px 22px;

}

.cart-title{
transform: rotate(0.589deg);
color: var(--text-color);
font-size: 18px;
font-weight: 700;
line-height: 36px;
letter-spacing: 1.08px;
margin-bottom: 4px;


}

.cart-text{
color: var(--added-text);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.48px;


}

/* model */


.backdrop{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}

.is-hidden{
opacity: 0;
pointer-events: none;

}

.model{
border-radius: 4px;
width: 528px;
height: 581px;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
background: var(--main-color);
position: relative;
padding: 40px;

}

.model-close{
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
position: absolute;
top: 8px;
right: 8px;

}

.model-close:hover{
.model-pic{
fill: var(--accent-color);

}

}

.model-pic{
width: 25px;
height: 25px;
fill: var(--logo-color);

}

.model-title{
font-weight: 700;
font-size: 20px;
letter-spacing: 0.03em;
text-align: center;
color: var(--text-color);
margin-bottom: 12px;
}

.model-lable{
font-weight: 400;
font-size: 12px;
letter-spacing: 0.01em;
color: var(--added-text);
margin-bottom: 4px;
display: block;
margin-bottom: 10px;
position: relative;
}

.model-input{
outline: 1px solid rgba(33, 33, 33, 0.2);
border: none;
border-radius: 4px;
width: 448px;
height: 40px;
display: block;
}

.model-input:hover{
outline: 1px solid var(--accent-color)

}

.model-input:hover+.model-icon{
fill: var(--accent-color);

}

.model-icon{
width: 18px;
height: 18px;
position: absolute;
top: 25px;
left: 12px;
}

.model-comment{
border: 1px solid rgba(33, 33, 33, 0.2);
border-radius: 4px;
width: 448px;
height: 120px;
display: block;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.01em;
color: rgba(117, 117, 117, 0.5);
padding: 12px 16px;
resize: none;
margin-bottom: 20px;
}

.model-wrap{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;

}

.model-check{
width: 16px;
height: 15px;
margin-right: 8px;

}

.model-text{
font-weight: 400;
font-size: 14px;
line-height: 171%;
letter-spacing: 0.03em;
color: var(--added-text);

}

.model-link{
font-weight: 400;
font-size: 14px;
line-height: 171%;
letter-spacing: 0.03em;
text-decoration: underline;
text-decoration-skip-ink: none;
color: var(--accent-color);
margin-left: 5px;

}

.model-btn{
font-weight: 700;
font-size: 16px;
line-height: 188%;
letter-spacing: 0.06em;
text-align: center;
color: var(--main-color);
background-color: var(--accent-color);
padding: 10px 52px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
border: none;
display: block;
margin: auto;
}