@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend+Deca:wght@100..900&display=swap');


*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
:root{
    font-size:62.5%;
    --darkblue : hsl(233, 47%, 7%);
    --darkestblue : hsl(244, 38%, 16%);
    --softviolet : hsl(277, 64%, 61%)
}

main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--darkestblue);
    color:white; 
}
.main-container{
    width: 80%;
    display: flex;
    background-color: var(--darkblue);
    border-radius: 1rem;
}
.text-section{
    width: 50%;
    height: 100%;
    padding: 5.5rem 5rem 0rem 5rem ; 

}
.heading{
    font-family: "Lexend Deca", sans-serif;
    font-size: clamp(2.4rem, 2vw + 1rem, 3.5rem);
     padding-left: 1rem;
     margin-bottom: 3rem;
    color:hsl(0, 0%, 100%);
}
.paragraph{
    color: hsla(0, 0%, 100%, 0.75);
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.5rem);;
    width: 90%;
    margin-bottom: 8rem;
    font-family: "Inter", sans-serif;
    padding-left: 1.5rem;

}
.numbers{
    width: 100%;
    height: 5.5rem;
    padding: 0 1.5rem ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.one,.two,.three{
    width: 30%;
    height: 100%;
    font-size: 1.5rem;
    font-family: "Inter", sans-serif;

}
.span{
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
}
.stats{
    color:hsla(0, 0%, 100%, 0.6);
}
.heading-span{
    color: var(--softviolet);
}

.img-section{
    width: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 1rem 1rem 0;


}
.img-section::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(170, 92, 219, 0.5);
    z-index: 89;
    border-radius: 0 1rem 1rem 0;

}
img{
    border-radius: 0 1rem 1rem 0 ;
}
@media (max-width:999px) {
    .main-container{
        width: 95%;
    }
    .paragraph{
        width: 95%;
    }
}

@media (max-width:800px) {
    .main-container {
        flex-direction: column-reverse;
        width: 90%;
        border-radius: 1rem;
      }
      .img-section,
      .text-section {
        width: 100%;
      }
    
      .img-section img {
        width: 100%;
        height: auto;
        border-radius: 1rem 1rem 0 0;
      }
    
      .img-section::after {
        border-radius: 1rem 1rem 0 0;
      }
    
      .text-section {
        padding: 4rem 2.5rem;
        text-align: center;
      }
    
      .heading {
        font-size: clamp(2.4rem, 2vw + 1rem, 3.2rem);
        padding: 0;
      }
    
      .paragraph {
        font-size: clamp(1.2rem, 1vw + 0.4rem, 1.6rem);
        margin-bottom: 5rem;
        padding: 0;
        width: 100%;
      }
    
      .numbers {
        flex-direction: column;
        gap: 2rem;
        height: auto;
        padding: 0;
        margin-top: 2rem;
      }
    
      .one, .two, .three {
        width: 100%;
        text-align: center;
      }
    }