@import url("base.css?v.1.112");
/***************************
HEADER  
***************************/
.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 24px 15px;
}
/* hamburger base */
.hamburger {
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
}
.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--color-secondary);
  left: 0;
  transition: 0.3s;
}
/* position lines */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
/* active animation (X icon) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}
/***************************
HERO BANNER
***************************/
.hero-banner{
    display: grid;
}
.hero-banner .container {
    display: grid;
    grid-template-columns: 4fr 3fr;
    grid-gap: 30px 30px;
    grid-area: 1 / 1;
    align-items: flex-end;
    padding-block: 90px;
}
.hero-banner .block-left{
    max-width: 850px;
}
.hero-banner .hero-banner-img.md{
    display: none;
}
.hero-banner .block-right{
    container-type: inline-size;
}
.hero-banner h1{
    margin-top: 44px;
    color: var(--color-white);
}
.hero-banner-img{
    grid-area: 1 / 1;
    z-index: -1;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: var(--radius);
}
.hero-banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.hero-banner-img::after{
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    opacity: 0.36;
}
.hero_media-text{
    display: flex;
    margin-block: 57px;
    grid-gap: 15px 52px;
}   
.hero_media-text img{
    max-width: 140px;
}
.hero_media-text h4{
    color: var(--color-white);
}
@media (max-width:1280px){
    .hero-banner .container{
        padding-block: 0;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .hero-banner .hero-banner-img.md{
        display: block;
        height: 100%;
    }
    .hero-banner .hero-banner-img.dd{
        display: none;
    }
    .hero-banner .block-left{
        max-width: unset;
        display: grid;
        align-items: center;
    }
    .hero-banner-text{
        padding-block: 30px;
        grid-area: 1 / 1;
        padding-inline: var(--container-spacing);
    }
    .hero-banner .banner-logo img{
        max-width: 300px;
    }
    .hero-banner h1{
        margin-top: 15px;
    }
    .hero_media-text{
        margin-block: 30px;
    }
    .hero_media-text img{
        max-width: 110px;
    }
    /*hero banner form*/
    .hero-banner .block-right{
        padding-inline: var(--container-spacing);
    }
    .hero-banner .form-panel{
        border: 1px solid var(--color-secondary);
        max-width: 600px;
        margin-inline: auto;
    }
}
@media (max-width:480px){
    .hero-banner h1 {
        margin-top: 0px;
    }
    .hero_media-text{
        grid-gap: 15px 15px;
    }
    .hero_media-text img{
        max-width: 70px;
    }
}
/***************************
BODY ONE
***************************/
.ma-body-one{
    margin-top: calc(var(--radius) * -1 - 60px);
    padding-block: calc(var(--radius) + var(--block-spacing) + 60px) var(--block-spacing);
    background-image: url("../images/layer-bg-1.svg");
    background-size: cover;
    background-position: top center;
}
.ma-body-one .block-left{
    width: 35%;
}
.ma-body-one .block-right{
    width: 65%;
    padding-left: 80px;
}
@media (max-width:1280px){
    .ma-body-one{
        padding-block: calc(var(--radius) + var(--block-spacing) + 60px) var(--block-spacing);
    }
    .ma-body-one .block-right {
        padding-left: 30px;
    }
}
@media (max-width:767px){
    .ma-body-one{
        padding-block: calc(var(--radius) + var(--block-spacing) + 60px) var(--block-spacing);
    }
    .ma-body-one .block-left{
        width: 100%;
    }
    .ma-body-one .block-right {
        width: 100%;
        margin-top: 30px;
        padding-left: 0;
    }
}
/***************************
CTA
***************************/
.cta{
    padding-block: 25px;
    background-color: var(--color-secondary-dark);
    color: var(--color-white);
}
.cta .container{
    display: flex;
    align-items: center;
    grid-gap: 30px;
}
.cta h6{
    margin: 0;
}
@media (max-width:767px){
    .cta .container{
        grid-gap: 15px;
    }
}
/***************************
IMAGE BLOCK 1
***************************/
.image-block-one{
    display: grid;
    position: relative;
}
.image-block-one .container{
    position: relative;
}
.image-block-one .stats-card{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}
.image-block-one img{
    width: 100%;
    min-height: 210px;
    object-fit: cover;
    border-bottom-right-radius: var(--radius);
}
.image-block-one h6{
    margin: 0;
}
@media (max-width:1280px){
    .stats-card{
        max-width: 300px;
        grid-gap: 15px;
    }
}
/***************************
CARD ONE
***************************/
.card-one{
    display: grid;
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--color-secondary);
    position: relative;
}
.card-one-image{
    grid-area: 1 / 1;
    opacity: 0.20;
    transition: all 0.3s;
}
.card-one-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 89/74;
}
.card-one-text{
    min-height: 370px;
    display: flex;
    align-items: flex-end;
    grid-area: 1 / 1;
    padding: 85px 30px calc(30px - 1rem) 30px;
    color: var(--color-white);
    z-index: 1;
}
.card-one-text p{
    color: var(--color-white);
}
.card-one-text .btn{
    position: absolute;
    top: 15px;
    right: 15px;
}
.card-one .btn::after{
    background-color: rgba(255, 255, 255, 0.66);
}
.card-one .btn:is(:hover, :focus)::after{
    background-color: var(--color-primary);
    background-image: url("../icons/btn-arrow-secondary.svg");
}
.card-one .icon{
    position: absolute;
    top: 24px;
    left: 30px;
}
.card-one .text-box{
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-one:hover .text-box{
    max-height: 500px;
}
.card-one:hover .card-one-image{
    opacity: 0;
}
/***************************
WHY CHOOSE US
***************************/
.why-choose-us{
    margin-top: calc(var(--radius) * -1 - 60px);
    padding-block: calc(var(--radius) + 155px + 60px) var(--block-spacing);
    background-image: url(../images/layer-bg-2.svg);
    background-size: cover;
    background-position: top center;
}
.why-choose-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 80px 87px;
}
@media (max-width:1280px){
    .why-choose-us{
        padding-block: calc(var(--radius) + var(--block-spacing) + 60px) var(--block-spacing);        
    }
    .why-choose-items{
        grid-gap: 30px;
    }
}
@media (max-width:767px){
    .why-choose-us{
        padding-block: calc(var(--radius) + var(--block-spacing) + 60px) var(--block-spacing);        
    }
    .why-choose-items{
        grid-gap: 15px;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:580px){
    .why-choose-items{
        grid-template-columns: 1fr;
    }
}
/***************************
FAQ
***************************/
.faq-block{
    padding-block: var(--block-spacing) 0;
}
.faq-block .block-left{
    width: 30%;
    padding-right: 30px;
}
.faq-block .block-right{
    width: 70%;
}
.faq-block .block-left .text-area p{
    max-width: 377px;
}
@media (max-width:1280px){
    .faq-block{
        padding-block: var(--block-spacing) 0;
    }
    .faq-block .block-left{
        width: 100%;
        padding-right: 0;
    }
    .faq-block .block-left .text-area p{
        max-width: unset;
    }
    .faq-block .block-right{
        margin-top: 30px;
        width: 100%;
    }
}
@media (max-width:767px){
    .faq-block{
        padding-block: var(--block-spacing) 0;
    }
}
/***************************
CTA 2
***************************/
.cta-2{
    display: grid;
    align-items: center;
    color: var(--color-white);
}
.cta-2 .container{
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    padding-block: 40px;
}
.cta-2 h2{
    color: var(--color-white);
}
.cta-2 .cta-2-image{
    grid-area: 1 / 1;
    height: 100%;
    position: relative;
}
.cta-2 .cta-2-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    opacity: 0.36;
}
.cta-2 .cta-2-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-2 .text-area{
    max-width: 1240px;
    margin-inline: auto;
    text-align: center;
}
.cta-2 .button-group{
    justify-content: center;
}
/***************************
BODY 2
***************************/
:root{
    --process-minus-margin:80px;
}
.ma-body-two{
    padding-block: var(--block-spacing) 0;
    padding-right: var(--container-spacing);
}
.ma-body-two .block-left{
    width: 40%;
    position: relative;
}
.ma-body-two .block-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: 50px;
}
.ma-body-two .block-right{
    width: 60%;
    padding-block: calc(var(--radius) / 2) 0;
    padding-left: 80px;
    padding-bottom: calc(var(--process-minus-margin) + var(--block-spacing) + var(--block-spacing));
}
.ma-body-two .stats-card{
    position: absolute;
    right: 0;
    bottom: calc(var(--process-minus-margin) + 40px);
    transform: translateX(50%);
}
.ma-body-two .text-area{
    max-width: 835px;
}
@media (max-width:1280px){
    .ma-body-two .block-right{
        padding-left: 30px;
    }
}
@media (max-width:767px){
    .ma-body-two{
        padding-right: 0;
    }
    .ma-body-two .block-left{
        width: 100%;
    }
    .ma-body-two .block-right{
        width: 100%;
        padding-block: var(--block-spacing);
        padding-inline: var(--container-spacing);
    }
    .ma-body-two .stats-card{
        transform: unset;
        right: var(--container-spacing);
        bottom: 30px;
    }
}
/***************************
Our 5 step process
***************************/
.our-process{
    margin-top: calc(var(--process-minus-margin) * -1);
    padding-block: calc(130px + var(--process-minus-margin)) var(--block-spacing);
    background-color: var(--color-secondary-dark);
    background-image: url(../images/5-step-process.svg);
    background-size: cover;
    background-position: top center;
}
.our-process .block-left{
    width: 50%;
    padding-right: 30px;
}
.our-process .block-left .text-area{
    max-width: 440px;
}
.our-process .block-left h2,
.our-process .block-left P{
    color: var(--color-white);
}
.our-process .block-right{
    width: 50%;
}
.process-slider-items{
    display: grid;
}
.process-slide-item{
    grid-area: 1 / 1;
}
.process-slide-item:not(.is-active){
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
/*slider*/
.process-slider{
    display: grid;
    align-items: flex-start;
    grid-template-columns: 120px 1fr;
    grid-gap: 30px 100px;
}
.process-slider-count{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 45px;
    position: relative;
}
.process-slider-count::after{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    background-color: var(--color-white);
}
.process-slider-count .count-item{
    width: 90px;
    height: 90px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #969CA5;
    border-radius: 50%;
    font-size: clamp(25px, 4.2vw, 45px);
    color: var(--color-white);
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
}
.process-slider-count .count-item.is-active{
    width: 100px;
    height: 100px;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    box-shadow: -0.728395px 0.728395px 7.28395px 2.18519px rgba(0, 0, 0, 0.25);
    border: 5px solid var(--color-white);
}
/*item*/
.process-slide-image{
    margin-bottom: 30px;
}
.process-slide-image img{
    width: 100%;
    border-radius: 50px;
}
.process-slide-text p{
    color: var(--color-white);
}
@media (max-width:1280px){
    .our-process {
        padding-block: calc(130px + var(--process-minus-margin)) var(--block-spacing);
    }
    .process-slider{
        grid-gap: 30px 30px;
    }
    .our-process .block-left {
        width: 40%;
    }
    .our-process .block-right{
        width: 60%;
    }
}
@media (max-width:767px){
    .our-process {
        margin-top: 0;
        padding-block: var(--block-spacing) var(--block-spacing);
    }
    .our-process .block-left {
        width: 100%;
        padding-right: 0;
    }
    .our-process .block-right{
        margin-top: 50px;
        width: 100%;
    }
    .process-slider{
        grid-template-columns: 80px 1fr;
    }
    .process-slider-count{
        grid-gap: 30px;
    }
    .process-slider-count .count-item{
        width: 70px;
        height: 70px;
    }
    .process-slider-count .count-item.is-active {
        width: 80px;
        height: 80px;
    }
}
@media (max-width:525px){
    .process-slider {
        grid-gap: 15px 15px;
        grid-template-columns: 60px 1fr;
    }
    .process-slider-count .count-item {
        width: 50px;
        height: 50px;
    }
    .process-slider-count .count-item.is-active {
        width: 60px;
        height: 60px;
    }
}
/***************************
TESTIMONIAL 
***************************/
.testimonial-block{
    padding-left: var(--container-spacing);
}
.testimonial-block h2{
    margin-bottom: 10px;
}
.testimonial-block .block-left{
    width: 55%;
    padding-block: var(--block-spacing);
    padding-right: 30px;
}
.testimonial-block .block-right{
    width: 45%;
}
.testimonial-block .block-right img{
    width: 100%;
    border-bottom-left-radius: var(--radius);
}
.testimonial-slider{
    max-width: 600px;
}
.testimonial-stars{
    display: flex;
    grid-gap: 17px;
    margin-bottom: 29px;
}
.testimonial-stars img{
    width: 40px !important;
}
.testimonial-card h5{
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 30px;
    padding-left: 25px;
    position: relative;
}
.testimonial-card h5::before{
    content: "“";
    font-size: 40px;
    font-weight: 900;
    position: absolute;
    top: -15px;
    left: 0;
}
.testimonial-card .name{
    padding-left: 25px;
}
/*slider*/
.testimonial-slider.owl-theme .owl-nav{
    padding-left: 25px;
}
@media (max-width:1480px){
    .testimonial-block .block-left{
        padding-block: var(--block-spacing);
    }
}
@media (max-width:1280px){
    .testimonial-block .block-left{
        padding-block: 30px;
    }
}
@media (max-width:767px){
    .testimonial-block{
        padding-block:var(--block-spacing);
        padding-inline: var(--container-spacing);
    }
    .testimonial-block .block-left{
        margin-top: 30px;
        padding-block: 0;
        width: 100%;
        padding-right: 0;
        order: 1;
    }
    .testimonial-stars{
        grid-gap: 5px;
    }
    .testimonial-stars img {
        width: 30px !important;
    }
    .testimonial-slider.owl-theme .owl-nav{
        margin-top: 10px;
        grid-gap: 10px;
    }
}
/***************************
REVIEW WIDGET
***************************/
.review-widget{
    padding-block: var(--block-spacing);
}
/***************************
CTA 3
***************************/
.cta-3{
    display: grid;
    color: var(--color-white);
    position: relative;
}
.cta-3 .container{
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    padding-block: 160px calc(137px + 120px);
}
.cta-3 h2{
    color: var(--color-white);
}
.cta-3 .cta-3-image{
    grid-area: 1 / 1;
    height: 100%;
    position: relative;
}
.cta-3 .cta-3-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    opacity: 0.36;
}
.cta-3 .cta-3-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-3 .text-area{
    max-width: 910px;
}
.cta-3 .stats-card{
    margin-inline: auto 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: absolute;
    right: 0;
    bottom: 137px;
}
@media (max-width:1280px){
    .cta-3 .container{
        padding-block: var(--block-spacing) calc(var(--block-spacing) + 50px + var(--block-spacing));
    }
    .cta-3 .stats-card{
        bottom: 50px;
    }
}
@media (max-width:767px){
    .cta-3 .container{
        padding-block: var(--block-spacing) calc(var(--block-spacing) + 50px + var(--block-spacing));
    }
}
/***************************
PROMO
***************************/
.promo-block{
    padding-block: var(--block-spacing);
}
.promo-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 80px 87px;
}
@media (max-width: 1280px) {
    .promo-items {
        grid-gap: 30px;
    }
}
@media (max-width: 767px) {
    .promo-items {
        grid-gap: 15px;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 580px) {
    .promo-items {
        grid-template-columns: 1fr;
    }
}
/***************************
CTA 4
***************************/
.cta-4{
    padding-block: 35px;
    background-color: #373E49;
    color: var(--color-white);
    text-align: center;
}
/***************************
CONTACT US
***************************/
.contact-us-block{
    padding-block: var(--block-spacing) 0;
}
.contact-us-block .block-left{
    width: 58%;
    padding-block: 0 80px;
    padding-right: 55px;
}
.contact-us-block .block-right{
    width: 42%;
    container-type: inline-size;
}
.contact-us-block .form-panel{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    margin-bottom: -260px;
}
.contact-info .contact-item{
    margin-block: 30px;
    display: flex;
    grid-gap: 26px;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 600;
}
.contact-info .contact-item svg{
    width: 27px;
}
.contact-info .contact-item :where(a, span){
    color: var(--color-secondary);
}
.contact-info .contact-item a:hover{
    color: var(--color-primary);
}
@media (max-width: 1280px) {
    .contact-us-block .block-left{
        width: 100%;
        padding-block: 0 30px;
        padding-right: 0;
    }
    .contact-info .contact-item{
        margin-block: 10px;
    }
    .contact-us-block .block-right{
        width: 100%;
    }
    .contact-us-block .form-panel{
        max-width: 600px;
        margin-inline: auto;
    }
    .contact-us-block .form-panel{
        margin-bottom: -100px;
    }
}
@media (max-width: 767px) {
    .contact-us-block .block-left{
        padding-block: 0 30px;
    }
}
/***************************
BOTTOM BACKGROUND
***************************/
.bottom-section-bg{
    background-image: url(../images/layer-bg-3.svg);
    background-size: cover;
    background-position: top center;
}
/***************************
FOOTER
***************************/
footer{
    padding-block: 80px 40px;
    background-color: var(--color-secondary-dark);
}
footer .footer-text{
    width: 58%;
    padding-right: 50px;
    min-height: calc(260px - 80px);
}
footer .warning-note{
    display: flex;
    align-items: center;
    grid-gap: 15px;
    margin-bottom: 0.5rem;
}
footer .warning-note p{
    margin: 0 !important;
}
footer .footer-text span.warning-icon{
    display: flex;
}
footer .footer-text span.warning-icon svg{
    flex-shrink: 0;
    width: 30px;
}
footer .footer-text span.warning-icon svg path{
    fill: var(--color-primary);
}
footer :where(.footer-text, .regulatory-statement) p{
    font-size: 12px;
    line-height: 2;
    color: var(--color-white);
    margin-bottom: 10px;
}
footer .footer-logo{
    margin-bottom: 23px;
}
.follow-us{
    margin-top: 25px;
    display: flex;
    grid-gap: 32px;
}
.follow-us .follow-us-heading{
    color: var(--color-white);
}
.follow-us .follow-us-items{
    display: flex;
    grid-gap: 24px;
}
.follow-us .follow-us-items a svg path{
    transition: all 0.3s;
}
.follow-us .follow-us-items a:hover svg path{
    fill: var(--color-secondary);
}
footer .regulatory-statement{
    margin-top: 30px;
}
.copyright{
    margin-top: 47px;
    text-align: center;
}
.copyright p{
    font-size: 14px;
    color: var(--color-white);
    margin: 0;
}
@media (max-width: 1280px) {
    footer{
        padding-block: calc(100px + 40px) 40px;
    }
    footer .footer-text{
        width: 100%;
        padding-right: 0;
        min-height: unset;
    }
    .copyright {
        margin-top: 30px;
    }
}