body {
    margin: 0;
    padding: 0;
    height: auto;
    background: #FFFFFF;
}

.header-main {
    /* Auto layout */
    height: 96px;
    justify-content: space-between;
    align-items: center;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.5);
}

.header-logo-left {
    margin: 32px 36px;
    width: 114.36px;
    height: 24px;
}

/*** Topbar Start ***/
.fixed-top {
    transition: 0.5s;
    border: 0;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.5);
}

.header-main {
    height: 96px;
    justify-content: space-between;
    align-items: center;
    top: 0;
    z-index: 100;

    .header-logo {
        margin: 32px 17px;
        width: 114.36px;
        height: 24px;
    }
    
    .header-button {
        margin: 29px 0px;
        /* Mobile Linear */
        background: linear-gradient(180deg, #3C8CCF 0%, #2A6BC8 100%);
        /* /shadow/base */
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
        border-radius: 8px;
    
    }
    
    .header-button-text {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;

        /* white */
        color: #FFFFFF;

        /* Inside auto layout */
        flex: none;
        order: 0;
        flex-grow: 0;

    }
}
/*** Topbar End ***/


/*** Hero Start ***/

.hero-header {
    .hero-info {
        height: 775px;
        margin: auto;
    }
    
}
/*** Hero End ***/

@media (min-width: 992px) {
    .hero-info {
        width: 39% !important; 
    }
}

@media (max-width: 992px) {
    .small-banner{
        left: 0 !important;
        top: 143px !important;
    }

    .feature-1{
        height: 1145px !important;
        
        .feature-content{    
            height: 353px !important;
        }
    }
    
    .feature-2{
        .feature-container{    
            height: 510px !important;
        }

        .feature-content{        
            height: 260px !important;
        }
    }
    
    .feature-3{
        .feature-container{
            margin-top: 40px;
        }

        .feature-content{        
            height: 535px !important;
        }
    }

    .footer{
        .large-image{
            width: 100%;
        }

        .small-image{
            width: 37%;
        }

        .footer-content{
            height: 270px !important;

            div{
                height: 115px !important;
            }
        }
    }
}

.content-1 {
    position: absolute;
    width: 1654px;
    height: 753px;
    left: 80px;
    top: 186px;
}

.main-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 60px;

    position: absolute;
    height: 694px;
    left: 0px;
    right: 1094px;
    top: calc(50% - 694px/2 - 0.5px);
}

.main-text {
    font-family: 'Plus Jakarta Sans';
    font-style: bold;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;

    color: #39414D;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.sub-text {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    /* or 140% */

    color: #6A80A1;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

.banner-content{
    /* height:753px; */

    .left-banner{
        max-width: 560px;
    }

    .right-banner{
        position: relative;
        .large-banner{
            width:100%
        }

        .small-banner{
            right: 538px;
            top: 511px;
            position: absolute;
        }
    }
}

.float-left {
    float:left;
}
.float-right {
    float:right;
}

.content{
    /* max-width: 1064px; */
    margin: auto;

    .feature-1{
        height:629px;
        position: relative;
        
        .small-banner{
            position: absolute;
            left: 214px;
            top: 196px;
        }
    }

    .feature-2{
        height:514px;

        .small-banner{
            left: 429px;
            top: 1142px;
        }

        .feature-content{
            width:522px;
            align-self: stretch; 
            justify-content: flex-start; 
            align-items: center; 
            gap: 100px; 
            display: inline-flex;
            margin-top: 130px;
        }
    }

    
    .feature-3{
        img{
            width: 100%;
        }


        .feature-content{
            align-self: stretch; 
            justify-content: flex-start; 
            align-items: center; 
            gap: 100px; 
            display: inline-flex;
        }
    }
}

.footer{
    background: linear-gradient(180deg, #3C8CCF 0%, #2A6BC8 100%); 
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04); 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 16px; 
    display: inline-flex;
    width:100%;
    height: 500px;

    .row{
        --bs-gutter-x: auto !important;
    }

    .large-image{
        margin-top: 9px;
    }

    
    .left-container{
        width: 42%;
        margin-top: 100px;
    }

    .right-container{
        position: relative;

        .small-image{
            position: absolute;
            top: 69px;
        }
    }
}