﻿.how-it-works-section{padding:120px 0;position:relative;background-color:#F5F6F8;}
.how-it-works-section:before {position: absolute;content: "";width: 100%;height: 100%;top: 0;background: linear-gradient(180deg, rgba(245, 246, 248, 0) 0%, rgba(255, 255, 255, 0.6) 88%, rgba(255, 255, 255, 0.75) 100%);z-index: 9;}
.how-it-works-section:after {content: "";position: absolute;background: url(https://nationscdn.azureedge.net/nr-container/images/pattern.png);background-size: 20%;width: 100%;height: 100%;top: 0;opacity: 0.06;}
.how-it-works-section h2{font-size:40px;line-height:48px;font-weight:600;padding-bottom:72px;position:relative;text-align:center;z-index:99;}
.how-it-works-section h2:after{position:absolute;content:'';width:70px;height:4px;background: #BA0C2F;bottom:48px;left: 50%;transform: translateX(-50%);}
.steps-container{display:flex;justify-content:center;position:relative;z-index:99;}
.steps-container .step{max-width:390px;text-align:center;background:#fff;box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.08);padding:32px 23px;margin:0 12px;border-radius:16px;}
.steps-container .step-title{font-size:22px;line-height:30px;letter-spacing:0.3px;font-weight:700;color: #00497A;margin:30px 0 4px;}
.steps-container .step-description{margin-bottom:0;}
.steps-container .space-step{padding:32px 48px;}
.agent-info {position: relative;max-width: 1218px;margin: 120px auto 0;border: 6px solid #BA0C2F;padding:39px;position:relative;z-index:99;}
.agent-info .agent-info-header {position: absolute;top: -26px;left: 50%;transform: translateX(-50%);padding: 8px 32.5px;background: #BA0C2F;color: #fff;font-size: 24px;line-height: 32px;font-weight: 600;}
.agent-info .agent-info-content{display:flex;align-items:center;}
.agent-info .agent-photo{width:240px;margin-right:48px;}
.agent-info .agent-title, .agent-info .agent-title strong{font-size:24px;line-height:32px;margin-bottom:12px;}
.agent-info .agent-description{max-width:760px;}
@media (min-width: 1440px) and (max-width: 1919.98px) {
    .steps-container .step{max-width:360px;}
    .agent-info{max-width:898px}
    .agent-info .agent-photo{width:174px;min-width:174px;}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {    
    .steps-container .step{max-width:360px;}
    .agent-info{max-width:898px}
    .agent-info .agent-photo{width:174px;min-width:174px;}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .steps-container .step{max-width:300px;margin:0 8px;}
    .steps-container .space-step{padding:32px 23px;}
    .agent-info{max-width:800px;}
}
@media (max-width: 991.98px) {
    .how-it-works-section{padding:80px 0;}
    .how-it-works-section h2{font-size:34px;line-height:42px;font-weight:700;}
    .steps-container{display:block;}
    .steps-container .step{max-width:100%;display:flex;margin:0 16px 24px;padding:24px 24px 32px 24px;}
    .steps-container .step .step-icon img{min-width:70px;margin-right:24px;}
    .steps-container .step-title{margin-top:0;text-align:left;}
    .steps-container .step-description{text-align:left;font-size: 16px;line-height: 22px;}
    .agent-info .agent-text{font-size:16px;line-height:22px;}    
}
@media (min-width: 768px) and (max-width: 991.98px) {    
    .steps-container .step{margin:0 40px 24px;}    
    .agent-info{margin:90px 40px 0 40px;padding:39px 26px 28px;}
    .agent-info .agent-info-header{padding:8px 24px;}
    .agent-info .agent-photo{min-width:174px;margin-right:30px;}    
}
@media (min-width: 375px) and (max-width: 767.98px) {    
    .how-it-works-section h2{margin:0;}    
    .how-it-works-section:after{background-size:100%;}
    .steps-container .step{margin:0 16px 24px;}    
    .agent-info{margin:80px 16px 0;padding:45px 20px;}
    .agent-info .agent-info-header {padding: 8px 23px;width: 248px;text-align: center;line-height: 24px;letter-spacing: 0.2px;top:-36px;}
    .agent-info .agent-info-content{display:block;}
    .agent-info .agent-photo{min-width:174px;margin:0 auto 24px;}    
}
