@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,500;0,600;1,500;1,600&family=Big+Shoulders+Display:wght@700&family=Cairo:wght@700&family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Inter:wght@400;700&family=Jomhuria&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Kumbh+Sans:wght@400;700&family=League+Spartan:wght@400;500;700&family=Lexend+Deca&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@300;400;600&family=Poppins:ital,wght@0,600;1,600&family=Red+Hat+Display:ital,wght@0,500;0,900;1,400;1,500;1,900&family=Work+Sans:wght@200;300;500;600;700;800&display=swap');
:root{ 
--moderate-violet: hsl(263, 55%, 52%);
--Very-dark-grayish-blue: hsl(217, 19%, 35%);
--Very-dark-blackish-blue: hsl(219, 29%, 14%);
--White: hsl(0, 0%, 100%);
--Light-gray: hsl(0, 0%, 81%);
--Light-grayish-blue: hsl(210, 46%, 95%);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: var(--Light-grayish-blue);
    max-width: 1440px;
    min-height: 100vh;
    font-family: 'Barlow Semi Condensed', sans-serif;
}
.container{
    display: grid;
    grid-template-columns: repeat(4,250px);
    grid-template-rows: repeat(2,110px);
    row-gap: 20px;
    column-gap: 20px;
    margin-top: 5%;
    margin-left: 10%;
    padding: 20px ;
    margin-bottom: 1.5rem;
}
.container img{
    border-radius: 50%;
    width: 27px;
}
.container .info-1 .one,
.container .info-2 .two,
.container .info-3 .three,
.container .info-4 .four,
.container .info-5 .five{
    display:flex;
    gap: 20px;
    margin-bottom: 1rem;
}
.container .info-1 .one{
    margin-left: 11px;
}
.container .info-2 .two{
    margin-left: 15px;
}
.container .h1 h2,
.container .h2 h2,
.container .h3 h2,
.container .h5 h2{
    font-size: 13px;
    color: var(--White);
    font-weight: 600;
}
.container .h1 h3,
.container .h2 h3,
.container .h3 h3,
.container .h5 h3{
    color: var(--White);
    font-size: 11px;
    opacity: 50%;
    font-weight: 500;
}
.container .h4 h2{
    font-size: 13px;
    font-weight: 600;
}
.container .h4 h3{
    font-size: 11px ;
    font-weight: 500;
    opacity:50% ;
}
.container .info-1{
    grid-row: 1/3;
    grid-column: 1/3;
    background-color: var(--moderate-violet);
    border-radius: 18px;
    padding: 20px 0px 0px 20px ;
    background-image: url(images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: left 29vw top 0vh;
    
}
.container .info-1 img,
.container .info-5 img{
    border: 1px solid var(--Very-dark-grayish-blue);  
}
.container .info-2 img,
.container .info-3 img{
    border: 1px solid var(--Very-dark-blackish-blue);
}
.container .info-2{
    grid-row: 1/3;
    grid-column: 3/3;
    background-color: var(--Very-dark-grayish-blue);
    border-radius: 18px;
    padding: 20px 0px 0px 20px;
}
.container .info-3{
    grid-row: 1/4;
    grid-column:4/4 ;
    background-color: var(--White);
    border-radius: 18px;
    padding: 20px 0px 20px 20px;
}
.container .info-4{
    grid-row: 3/3;
    grid-column: 1/1;
    margin-left: 11px;
    background-color: var(--White);
    border-radius: 18px;
    padding: 20px 10px 20px 25px;
}
.container .info-5{
    grid-row: 3/3;
    grid-column: 2/4;
    background-color: var(--Very-dark-blackish-blue);
    border-radius: 18px;
    padding: 20px 0px 0px 20px;
}
.container .info-1 .p-1{
    color: var(--White);
    margin-right: 50px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 11px;
}
.container .info-1 .p-2{
    color: var(--Light-grayish-blue);
    font-size: 11px;
    opacity: 70%;
    line-height: 1rem;
    margin-right: 90px;
    margin-left: 11px;
}
.container .info-2 .p-3{
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: var(--White);
    margin-right: 13px;
    margin-left: 15px;
}
.container .info-2 .p-4{
    font-size: 11px;
    line-height: 15px;
    margin-left: 15px;
    margin-right: 55px;
    color: var(--White);
    opacity: 70%;
}
.container .info-3 .three .h3 h2{
    color: black;
}
.container .info-3 .three .h3 h3{
    color: black;
    opacity:70%
}
.container .info-3 .p-5{
    color: var(--Very-dark-blackish-blue);
    font-weight: 600;
    margin-left: 10px;
    margin-bottom: 1rem;
    margin-right: 20px;
    letter-spacing: 1px;
}
.container .info-3 .p-6{
    color: var(--Very-dark-blackish-blue);
    opacity: 50%;
    font-size: 11px;
    line-height: 1rem;
    margin-left: 10px;
    margin-right: 55px;
    font-weight: 600 ;
}
.container .info-4 .p-7{
    font-weight: 600;
    margin-bottom: 1rem;
    margin-right: 44px;
    letter-spacing: 1px;
}
.container .info-4 .p-8{
    opacity: 50%;
    font-size: 11px;
    line-height: 1rem;
    margin-right: 30px;
    font-weight: 600;
}
.container .info-5 .p-9{
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: var(--White);
    margin-right: 32px;
}
.container .info-5 .p-0{
    color: var(--White);
    opacity: 50%;
    line-height: 1rem;
    font-size: 11px;
    margin-right: 95px;
    font-weight: 600;
}
@media(max-width:375px){
    .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        width: 343px;
        padding: 10px;
    }
    .container .info-1{
        background-position: left 50vw top 0vh;
        border-radius: 10px;
    }
    .container .info-1 .p-1{
        margin-right: 50px;
    }
    .container .info-1 .p-2{
        margin-bottom: 20px;
    }
    .container .info-2{
        border-radius: 10px;
    }
    .container .info-2 .p-3{
        margin-right: 26px;
    }
    .container .info-2 .p-4{
        margin-bottom: 20px;
    }
    .container .info-3{
        order: 4;
    }
    .container .info-4 .p-8{
        margin-right: 49px;
    }
    .container .info-5 .p-9{
        margin-right: 57px;
    }
    .container .info-5 .p-0{
        margin-bottom: 20px;
        margin-right: 80px;
    }
    .container .info-3 .p-6{
        margin-right: 69px;
    }
    footer{
        margin-bottom: 20px;
    }
}