@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@500;700&family=Poppins:wght@400;600&display=swap');
:root{
    /*color*/
    --Violet: hsl(257, 40%, 49%);
    --Soft-Magenta: hsl(300, 69%, 71%);
          /*font*/
         --font-weight1: 400;
         --font-weight2: 600;
          --font-family1: 'Fraunces', serif;
          --font-family2: 'Montserrat', sans-serif;
         --font-family3: 'Poppins', sans-serif;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
 body{
    background-color: hsl(257, 40%, 49%);
    min-height: 100vh;
    background-image: url(images/bg-desktop.svg);
    background-repeat: no-repeat;
    background-size: cover;
 }


.img-mobile{
    display: none;
}
.logo{
    position: fixed;
    top: 0;
    left: 0;
    padding: 2rem;

}
.cont2{
    display: grid;
    grid-template-columns: repeat(2,50%);
    position: fixed;
    top: 0;
    padding: 9rem 3rem;
    color: white;
}
.title{
     font-weight: var(--font-weight2);
     font-family: var(--font-family2);
     width:69%;
     font-size: 2rem;
     padding: 3rem  0 0  3.5rem;
}
.paragraph{
    
    width: 78%;
    font-family: var(--font-family3);
    font-weight: var(--font-weight1);
    padding: 1rem 3.5rem;
}
.btn{
background-color: white;
color: var(--Violet);
font-weight: 400;
border-radius: 5rem;
display: flex;
align-items: center;
justify-content: space-around;
column-gap: 0.5rem;
 width: 150px;
 padding: 0.7rem 0rem;
 margin-left: 8%;
 border: none;
 box-shadow: 1px 3px 3px 1px rgb(36, 35, 35);
 
}
.btn:hover{
    background-color: var(--Soft-Magenta);
    color: white;
    transition: 0.2s ease;
}
.social{
    display: flex;
    gap: 1rem;
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 0 4rem 4rem 4rem;
}
.social .bx{
    padding: 8px;
    background:transparent;
    color: white;
    border-radius: 5rem;
    font-size: 15px ;
    border-style:solid; 
    
}
.social .bx:hover{
    color: var(--Soft-Magenta);
}
@media (max-width:375px){
   
    body{
        width: 100vmax;
        background-image: url(./images/bg-mobile.svg);
        background-repeat: no-repeat;
        background-size: cover;
     }
      .cont2{
        display: flex;
        flex-direction: column;
        text-align: center;
        
     }
 .box1 img{
  width: 500px;
  
 }
  .title{
    width: 80%;
    font-size:35px ;
    padding-top: 3rem;
    align-items: center; 
}
.paragraph{
    width: 600px;
    font-size: 1.6rem;
}
.btn{
    padding: 15px 100px;
     margin: 7% 30%;
    

}
.social {
margin:20% 40%;

}
 
}