/* Global Style */
:root{
  --Purple700: hsl(257, 40%, 49%);
  --Magenta400: hsl(300, 69%, 71%);
}
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Poppins, "Open Sans", Arial, Helvetica, sans-serif;
}
body{
  background: var(--Purple700) url(../images/bg-desktop.svg) no-repeat;
  background-size: 90% 102%;
}
@media(max-width:768px){
  body{
    background: var(--Purple700) url(../images/bg-mobile.svg) no-repeat ;
    background-size: 101% 48%;
  }
}
/* Page Style */
.container{
  width: 90%;
  margin-inline: auto;
  margin-block: 2rem;
}
@media(max-width:768px){
  .container{
    width: 85%;
  }
}
header svg{
  width: 12rem;
}
@media(max-width:768px){
  header svg{
    width: 10rem;
  }
}
main{
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  gap: 5%;
}
@media(max-width:768px){
  main{
    flex-direction: column;
    text-align: center;
    margin-top: 3.5rem;
  }
}
main .image {
  width: 140%
}
main .image img{
  width: 100%;
}
@media(max-width:768px){
  main .image{
    width: 100%;
  }
}
main .info{
  color: whitesmoke;
}
main .info h1{
  padding-right: 3rem;
  margin-top: 3rem;
  line-height: 1.5;
}
@media(max-width:768px){
  main .info h1{
    padding-inline: 0.7rem;
    font-size: 1.5rem;
    margin-top: 4rem;
  }
}
main .info p{
  font-size: 0.85rem;
  margin-top: 3rem;
  padding-right: 5rem;
  line-height: 1.7;
  font-family: "Open Sans";
}
@media(max-width:768px){
  main .info p{
    font-size: 1rem;
    padding-inline: 0.5rem;
    margin-top: 1rem;
  }
}
main .info button{
  margin-top: 2rem;
  width: 10rem;
  padding-block: 1rem;
  border-radius: 5rem;
  border: none;
  color: var(--Magenta400);
  cursor: pointer;
  transition: 0.3s;
}
@media(max-width:768px){
  main .info button{
    width: 70%;
  }
}
main .info button:hover{
  background-color: var(--Magenta400);
  color: white;
}
footer{
  padding-right: 3.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  transform: translateY(50%);
}
@media(max-width:768px){
  footer{
    justify-content: center;
    transform: translateX(10%);
    margin-top: 4rem;
  }
}
footer a {
  width: 2rem;
  height: 2rem;
  display: block;
  border: 0.1rem solid white;
  border-radius: 50%;
  color: white;
  position: relative;
  transition: 0.3s;
}
footer a.fb:hover{
  border-color: blue;
  color: blue;
}
footer a.twitter:hover{
  color: cyan;
  border-color: cyan;
}
footer a.insta:hover{
  border-color: red;
  color: red;
}
footer a i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}