style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Open Sans',sans-serif;
}
.colors{
    color: hsl(322, 100%, 66%);
    color: hsl(321, 100%, 78%);
    color: hsl(0, 100%, 63%);
    color: hsl(192, 100%, 9%);
    color: hsl(207, 100%, 98%);
}
body{
    min-height: 100vh;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4rem 3rem;
}
header .btn{
    background-color: transparent;
    outline: none;
    border: 2px solid hsl(322, 100%, 66%);
    color: hsl(322, 100%, 66%);
    padding: 0.5rem 1rem;
    max-width: 7rem;
    border-radius: 25px;
    cursor: pointer;
}
header .btn:hover{
    background-color: transparent;
    border-color: hsl(321, 100%, 78%) ;
    color: hsl(321, 100%, 78%) ;
}
header .logo{
    cursor: pointer;
    width: 10rem;
}
main{
    margin: 4rem 3rem;
}
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10rem 5rem 0; 
}
section h1{
    font-family: 'Poppins';
    color: hsl(192, 100%, 9%);
    font-size: 3em;
}
section p{
    width: 50%;
    color: hsl(192, 100%, 9%);
    margin-top: 1.5rem;
    font-size: 1.4em;
}
section .btn-1{
    background-color: hsl(322, 100%, 66%);
    outline: none;
    border: none;
    margin-top: 2.5rem;
    padding: 1.2rem 1.5rem;
    width: 18rem;
    font-weight: 600;
    color: #fff;
    border-radius: 3rem;
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(121, 121, 121, 0.644);
}
section img{
    margin-top: 5rem;
    width:90%;
    height: auto;
    user-select: none;
    pointer-events: none;
}
.grid{
    display: grid;
    margin-top: 5rem;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(4,20rem);
    row-gap: 10rem;
}
.grid div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.one strong,.two strong{
    display: block;
    font-size: 4em;
    color: hsl(192, 100%, 9%);
}
.four img,.five img,.eight img{
    width: 70%;
    user-select: none;
    pointer-events: none;
}
.grid div p{
    color:hsl(192, 100%, 9%)
}
.one p,.two p{
    color: hsla(0, 0%, 50%, 0.877)  !important;
}
.one img,.two img{
    width: 2rem;
    transform: translateX(-4.5rem);
    user-select: none;
    pointer-events: none;
}
.grid div h2{
    font-family: 'Poppins';
    color: hsl(192, 100%, 9%);
    font-size: 2em;
    align-self: flex-start;
    margin-bottom: 1.5rem;
}
footer{
    display: grid;
    background: url(images/bg-footer-top-desktop.svg) ;
    background-repeat: no-repeat;
    padding-top: 7rem;
    grid-template-columns: 50% 50%;
}
footer .left
{
    background-color: hsl(192, 100%, 9%);
    padding: 7rem  5rem 1.5rem;
}
footer .right{
    background-color: hsl(192, 100%, 9%);
    padding: 4.5rem  5rem 1.5rem;
    margin-top: 2.5rem;
}
footer .left .logo-1{
    filter: brightness(0) invert(1);
    max-width: 12rem;
    margin-bottom: 1rem;
}
footer .left p{
    color: #fff;
    max-width: 25rem;
}
footer .contact{
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
footer i{
    color: #fff;
    margin-right: 1rem;
}
.social-media{
    margin-top: 3rem;
}
.social-media i{
    font-size: 1.5em;
    text-decoration: none;
}
.right h2 ,
.right p{
    color: #fff;
    margin-bottom: 1rem;
    max-width: 25rem;
}
.input{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.input input{
    border: none;
    outline: none;
    border-radius: 0.3rem;
    width: 15rem;
    padding: 0.7rem;
    margin-right: 2.5rem;
    margin-bottom: 0.5rem;
}
.input button{
    background-color: hsl(322, 100%, 66%);
    border: none;
    outline: none;
    margin-bottom: 0.5rem;
    border-radius: 0.3rem;
    padding: 0.7rem 1rem;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.right *,.left *{
    z-index: 1;
}
button:hover{
    background-color: hsl(321, 100%, 78%);
}
.fa-facebook:hover{
    color: #4267B2;
}
.fa-instagram:hover{
  color: transparent;
  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}
.fa-twitter:hover{
    color: #00acee;
}
.fa-phone-volume{
    transform: rotate(-30deg)
}
/* ---------------- MEDIA QUERIES -------------------- */
@media only screen and (max-width: 1024px){
    section p{
        width: 70%;
    }
}
@media only screen and (max-width: 750px) {
    section{
        margin-left: 0;
        margin-right: 0;
    }
    section p{
        width: 100%;
    }
    .grid{
        display: grid;
        margin-top: 5rem;
        grid-template-columns: 100%;
        grid-template-rows: repeat(8,20rem);
        row-gap: 10rem; 
        text-align: center;
    } 
    .grid div h2{
        align-self: center;
    }
    .one{
        order: 1;
    }
    .two{
        order: 2;
    }
    .three{
        order: 4;
    } 
    .five{
        order: 5;
    }
    .four{
        order:3;
    }
    .six{
        order: 6;
    }
    .seven{
        order: 8;
    }
    .eight{
        order: 7;
    }
    .grid div p{
        font-size: 1.2em;
    }
    footer{
        grid-template-columns: 100%;
    }
    .left{
        order: 2;
    }
    .right{
        order: 1;
    }
    footer .left,footer .right{
        padding-left: 4rem;
        padding-right: 4rem;
    }
}