.hero-section{
display: grid;
grid-template-columns: 1fr;
column-gap: 2.5rem;
padding: 6.5rem 3rem;
}
.hero-section__content h1{
font-size: 4rem;
}
.hero-section__content h2{
font-size: 3.2rem;
}
.hr-landing{
margin: 0 auto;
width: 50%;
}
.middle-section{
background: var(--primary-color);
padding: 6.5rem 3rem;
}
.middle-section__grid{
display: grid;
grid-template-columns: 1fr;
column-gap: 2.5rem;
}
.middle-section__content h2{
color: var(--white);
font-size: 3.2rem;
}
.middle-section__content p{
color: var(--white);
}
.services-section{
padding: 6.5rem 3rem;
}
.services-section h2{
text-align: center;
font-size: 3.2rem;
}
.services-section h3{
font-size: 2.5rem;
}
.services-section__grid{
display: grid;
grid-template-columns: 1fr;
column-gap: 2.5rem;
row-gap: 2.5rem;
margin-top: 2.5rem;
}
.services-section__box{
padding:0.5rem
}
.cta-section{
background: var(--primary-color);
padding: 7rem 0rem;
}
.content-grid-cta{
display: grid;
grid-template-columns: 1fr;
}
.content-grid-cta__title h2{
font-weight: bold;
font-size: 3rem;
padding: 1.5rem 1.5rem 0.5rem 1.5rem;
color: var(--white);
text-align: center;
}
.content-grid-cta__title h3{
padding: 0.5rem 1.5rem 1.5rem 1.5rem;
color: var(--gray);
font-size: 2.5rem;
}
.content-grid-cta__button{
padding-top: 3.3rem;
text-align: center;
}
.youtube{
margin-bottom:3.0rem;
cursor:pointer
}
.youtube img{
width:100%;
top:0;
left:0;
opacity:1;
}
.youtube .play-button{
width:90px;
height:60px;
background-color:#333;
box-shadow:0 0 30px rgba(0,0,0,.6);
z-index:1;
opacity:.8;
border-radius:6px;
}
.youtube .play-button:before{
content:"";
border-style:solid;
border-width:15px 0 15px 26px;
border-color:transparent transparent transparent #fff;
}
.youtube .play-button,.youtube img{
cursor:pointer;
}
.youtube .play-button,.youtube .play-button:before{
top: 102%;
left: 50%;
transform: translate3d(-50%,-153%,0);
}
.youtube iframe{
height:495px;
width:100%;
top:0;
left:0;
background:#e3e3e3;
padding:5px;
}
@media (min-width:490px){
.services-section__grid{
grid-template-columns: repeat(2, 1fr);
}  
}
@media (min-width:980px){ 
.hero-section{
grid-template-columns: 65% 1fr;
padding: 6.5rem 2.5rem;
}
.middle-section__grid{
grid-template-columns: repeat(2, 1fr);
}
.services-section__grid{
grid-template-columns: repeat(3, 1fr);
} 
}
@media (min-width:1200px){
}
@media (min-width:992px){ 
.content-grid-cta__title h2{
text-align: left;
}
.content-grid-cta{
display: grid;
grid-template-columns: 75% 1fr;
} 
}