@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
:root{
    --ui-dark: #101922;
    --white: #f8f8f8;
    --ui-blue: #1E90FF;
    --ui-lightGreen: #03DAC5;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--ui-dark);
    color: var(--white);
    font-family: 'Lato', sans-serif;
}

/* & Utility Classes */
.max-width {
    max-width: 70%;
    margin: auto;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}
  
.absolute-center {
    justify-content: center;
    align-items: center;
}

/* & Main - Wrapper */

.main-wrapper{
    /* outline: 2px solid lime; */
    gap: 48px;
    /* outline: 2px solid lime; */
    margin-bottom: 150px;
}

.logo{
    /* outline: 2px solid red; */
    align-items: center;
    gap: 16px;
    padding-top: 40px;
}


.logo img{
    width: 6%;
    /* outline: 2px solid white; */
}


.logo div a{
    font-size: 22px;
    color: var(--ui-lightGreen);
    font-weight: bold;
    text-decoration: none;
}

.header-wrapper{
    /* outline: 2px solid lime; */
    padding: 2rem;
    font-size: 25px;
}

.start-para{
    margin-bottom: 20px;
}

.li-heading{
    font-size: 32px;
    text-align: left;
    /* outline: 2px solid lime; */
}

.terms-wrapper{
    word-spacing: 1px;
    gap: 48px;
    font-size: 17px;
}

.text-wrapper{
    /* outline: 2px solid var(--ui-blue); */
    word-spacing: 1px;
    gap: 24px;
    font-size: 17px;
    
}

.main-para{
    font-size: 18px;
}

.web-link{
    color: var(--ui-blue);
    text-decoration: none;
    font-weight: bold;
}


@media screen and (max-width: 1023px){
    .header-wrapper{
        font-size: 16px; 
    }
    
    .main-para{
        font-size: 17px  ;
    }
}

@media screen and (max-width: 767px){
    .logo img{
        width: 15%;
        /* outline: 2px solid white; */
    }
    
    .header-wrapper{
        font-size: 18px; 
    }

    .max-width {
        max-width: 80%;
        margin: auto;
    }
    
    .main-wrapper{
        /* outline: 2px solid lime; */
        gap: 48px;
        /* outline: 2px solid lime; */
        margin-bottom: 120px;
    }
}