@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');

html {box-sizing: border-box;font-family:"Roboto", sans-serif;}
*, *:before, *:after {box-sizing: inherit;}

body {
  font-family:"Roboto", sans-serif !important;
}
.max-820{
  max-width:820px !important;
}
  .bg-blue{
    background: #004FE0;
  }
  .bg-orange{
    background: #EA5B2E;
  }
  .bg-cream{
    background: #FDE6D3;
  }
  .bg-yellow{
    background: #F6A723;
  }
  .bg-ligth-blue{
    background: #1D57A3;
  }
  h1{
  color: #62E6FE;
  font-family: Roboto;
  font-size: 58px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  }
  h2{
    color: #1D57A3;
    font-family: Roboto;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  h3.subtitle{
    color: #FDE6D3;
    text-align: center;
    font-family: Roboto;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .gap-16{
    gap:16px;
  }
  .gap-24{
    gap:24px;
  }
  .gap-48{
    gap:48px;
  }
  .gap-30{
    gap:30px;
  }
  .gap-58{
  gap:58px;
}
  .button{
  border-radius: 12px;
  background: #F6A723;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #1D57A3 !important;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  width: fit-content;
  line-height: normal;
  cursor:pointer;
  transition:.4s;
  text-decoration: none !important;
}
.button:hover{
    transform: scale(1.075);
    transition:.4s;
}
.relative{
  position: relative;
}
.max-w-50{
  max-width:50%;
}

.section-spacing{
  padding: 12rem 0;
 }
 .section-spacing-md{
   padding: 6rem 0;
 }
 .section-spacing-sm{
   padding: 4rem 0;
 }
 .detail-paragraph{
   color: #FDE6D3;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.2px;
    margin-bottom: 0px !important;
 }
 .paragraph-cream-section{
    color: #1D57A3;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
 }
 .gap-16{
     gap: 16px;
  }
  .gap-8{
     gap: 8PX;
  }
  .w-full{
    width: 100%;
  }
  .p-25{
    padding:25px;
  }
  
  ul.talk-list {
    list-style: none;
    padding-left: 0;
    margin-top: 48px;
    margin-bottom: 48px;
  }
  
  ul.talk-list li {
    position: relative;
    padding-left: 35px;
    color: #FDE6D3;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  
  ul.talk-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-size: cover;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="28" height="28" fill="url(%23pattern0_16_353)"/><defs><pattern id="pattern0_16_353" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="%23image0_16_353" transform="scale(0.0357143)"/></pattern><image id="image0_16_353" width="28" height="28" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsSAAALEgHS3X78AAABYklEQVRIidWWwW2DMBSGv1i5Nz1yKr0jlQ3CBmEENigjdISOkG6QbEA3IJLvJScfmy5gesCICoXg57SR+kuWjM3zhx/vPXvRti1SWaNjABUljdRWiWmdYtfECgWmQBZiuLwCuPoXwIU0aKzRK+DTPd6rKDlJ7EP+Yfajn0uNQ4D5RN9LIpe6/PsYDT9K8lG6w1fPseuB1ugC2JyZ2lijS991Zl3qovIFeJ5Zaw8Uc1E7CbRGZ0BBFxh3M7BeX8AO2Kko2U0CrdEpXW3sS1YqgFzSO1ABNdCoKKmXLvJyhoK8/gVQrzVdRYqBxhp93qXOnblrD0LIkcGt1XjSJ2gyYOsBPgLl1L/rNZsW7itT4O3Ca3sgnYOBvNLUwNNo+ABkvkVcWmnOJXgpOTFCjqeKIZIPKkpSiX3IabGd6P8ZsJroe0nsUgBrdAOsVJSIrxmhd5qaG1+i6kC7YGDFjXd4ck2sbxFTfxJAKDzrAAAAAElFTkSuQmCC"/></defs></svg>');
  }
  .detail{
    margin:auto;
  }

  
  
  /* Card styles */
  .card{
    display: flex;
    min-width: 500px;
    padding: 24px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    border-radius: 12px;
    background: #1D57A3;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
  .card.min-content {
    max-width: min-content;
  }
  .cards{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .header-card-subtitle{
    color: #FDE6D3;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
  }
  .body-card-title{
    color: #FDE6D3;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
  }
  .body-card-content{
    color: #FDE6D3;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
  }
  
  
@media (max-width: 992px) {
  .front{
    flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
  }
  .sm-wrap{
    flex-wrap: wrap;
  }
  .max-w-50{
    max-width: 80%;
  }
  .logo{
    max-width: none !important;
  }
  .button{
    margin: auto;
  }
  .detail{
    margin:0px;
  }
  .details{
    gap:32px;
  }
  .section-spacing{
    padding: 6rem 0;
  }
  .section-spacing-md {
    padding: 3rem 0;
  }
  .middle{
    flex-direction: column;
  }
  .cards{
      flex-direction: column; 
  }
  .card{
      min-width: 330px;
  }

  .card.min-content {
   max-width: 100% !important;
 }
  h2{
    text-align:center;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
 .card.min-content {
    max-width: 100% !important;
}
}