html,body{
    margin: 0;

}

h2{
    font-weight: normal;
    margin: 0;
    padding:0;
}

a{
    color:inherit;
    text-decoration: none;
}

body{
    --card-background-color: #123332;
    --body-padding:50px 156px 90px;
    --heading-color: #FFD9BE;
    --card-padding:90px 0;
    font-size: 19px;
    --body-color: #F9EEE7;
    --button-color: #EF9C82;
    --chakra-colors-chakra-border-color: var(--chakra-colors-gray-200);

}
p{
    margin: 0;
}


body{
    background-color: var(--card-background-color);
    padding: var(--body-padding);
    color: var(--body-color);
    font-family:Quattrocento;
}

.card{

    padding:var(--card-padding)
}

.flex-btween{
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.text-center{
    text-align: center;
}
@font-face {
    font-family: Quattrocento;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(./OZpEg_xvsDZQL_LKIF7q4jP3w2j6.woff2) format("woff2");
   
}

.title{
    font-size: 3.6em;
    color: var(--heading-color);
}

.sub-title{
    font-size: 1.8em;
     color: var(--heading-color);
}

.part-title {
    color: var(--heading-color);
    font-size: 2.35em;
}

.small-title{
    color: var(--heading-color);
    font-size:1.17em;
   
}

.part2 .small-title{
    margin: 1em 0;
}

.part3 .small-title{
     margin-bottom: 0.5em;
}

.colorable-icon{
    height: 47px;
    margin:0.5em 0;
    color: var(--heading-color);
}
.part-descript p{
    margin: 26.8px  0 7.6px;
}
.list-4 > *{
    
    width: 21%;

}

.button{
    background-color: var(--button-color);
    color:#000;
    border-color: var(--chakra-colors-chakra-border-color);
    padding: 0.8em 0.8em;
    font-weight: 500;
    border-radius: 0.125em;
}

.part1 .button-wrap{
    margin-top: 5em;
}

.part4 p {
    margin: 0.9em 0 ;
}

.part1 .video-wrap{

    max-width: 40%; 

}

 .video-wrap video{
    max-width: 100%;
 }

.part1 .part-descript{
    max-width: 60%;
}

.part4 img{
    width: 200px;
}

@media (max-width: 1000px) {

    .title {
        font-size: 2.8em;
    }

    .part-title{
        font-size:2em
    }

    .sub-title{
        font-size: 1.6em;
    }
    .part-descript p{
            margin: 1em  0 0.5em;
    }

    .flex-btween{
        flex-wrap: wrap;
    }
    .part1{
        display: block;
        text-align: center;
    }

    .part1 .button-wrap{
        margin: 3em;
        text-align: center;
    }

    
    .button-wrap{
        margin: 1em;
    }
    .button-wrap .button{
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    .part1 .part-descript{
        max-width: 100%;
    }

    

    .part1 .video-wrap{

        max-width: 100%; 
    }

    body{

        --body-padding:0.5em 3em 4em;

        --card-padding:2em 0;
    }
    
    .list-4{
        display: block;
    }
    .part4{
        display: block;
        text-align: center;
    }

    .list-3 > div{
        margin: 1em 0;
    }

    .part4 img {
        width: 50%;
    }
}

@media (max-width: 600px){

    

      body{

        --body-padding:0.5em 0.5em 2em;

        --card-padding:2em 0;

        font-size: 17px;
    }

    .title {
        font-size: 2.3em;
    }

    .part-title{
        font-size: 1.6em
    }

    .sub-title{
        font-size: 1.4em;
    }
}