/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    src: url('../fonts/Inter/Inter-VariableFont_slnt\,wght.ttf');
}

:root {
    --blue-navy: #252641;
    --blue-navy-light: #2f327d;
    --blue-light: #B2B3CF;
    --blue-grey: #83839A;
    --orange: #E25319;
    --orange-light: #FFA726;
    --orange-bright: #FAA80D;
    --orange-dark: #F3A268;
    --purple: #687EF3;
    --purple-light: #DBDEFF;
    --purple-deep: #5956E9; 
    --grey-light: #696984;
    --black-medium: #2E393F;
    /* --orange-light: #e69823; */
    --primary-yellow: #E25319;
    --primary-blue: #2F327D;
    --primary-grey: #7A7A7A;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}
.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}
.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}
.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body{
    font-family: 'Inter';
}

section.content{
    padding-top: 100px;
    padding-bottom: 200px;
}

#headline {
    height: 400px;
    background: linear-gradient(to right, #ecf2f6ff, #ecf2f600 70%);
    overflow: hidden;
  }
  
#headline .title, #headline .subtitle{
    z-index: 1;
}
#headline .title{
    font-size: 3rem;
}
  
#headline .container > div {
    max-width: 50%;
}
  
#headline #circle-left {
    height: 280px;
    width: 280px;
    top: 140px;
    left: -50px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 100) 70%
    );
}
  
#headline #circle-right {
    height: 600px;
    width: 600px;
    background: linear-gradient(
        to right,
        rgba(219, 222, 255, 100),
        rgba(219, 222, 255, 20) 70%
    );
    top: -70px;
    right: -200px;
}
  
#headline .banner{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

@media (max-width: 991px){
    #headline .title{
      font-size: 2.5rem;
    }
}

@media (max-width: 767px){
    #headline {
        background: #ecf2f6ff;
    }
    #headline .container > div {
        max-width: 100%;
    }
}
@media (max-width: 575px) {
    #headline .title{
        font-size: 2rem;
      }
}