.hero{
    background-image: url('../img/hero.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 898px;
    width: 100%;
}

.fahman_hero{
    margin-bottom: 32px;
}
.navbar-light-custom .navbar-toggler{
    color: #1A0F37 !important;
    border-color: #1A0F37 !important;
    background: #1A0F37;
    opacity: .1;
}
.navbar-toggler{
    color: white !important;
    border-color: transparent !important;
}
.title-nav{
    margin-right: 8px !important;
}
.fs-24{
    font-size: 24px !important;
}
.fw-400{
    font-weight: 400 !important;
}
.nav-link{
    color:#A8A8A8 !important;
    font-weight: 400 !important;
    margin-left: 16px !important;
    cursor: pointer;
}
.h-100{
    height: 100% !important;
}
.hero-data{
    width: 848px;
}
.hero-title{
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 20px !important;
}
.hero-description{
    color: #FFF !important;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 32px;
}
.start-btn{
    background: #FFF;
    color: #1A0F37;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;

}
.btn{
    width: 416px;
    height: 57px;
    border-radius: 43px;
}
.features{
    background: #fff;
    margin-bottom: 80px;
}
.features .features-cards{
    margin-bottom: 48px;
}
.features h2{
    margin-top: 96px;
    color: #1A0F37;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 8px;
}
.features p{
    color: #6A6A6A;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 48px;
}
.features .feature-card{
    border-left: 4px solid #F6F7F7;
    padding: 64px 32px;
}
.features .feature-card img{
    margin-bottom: 80px;
}
.features .feature-card h3{
    text-align: right;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
}
.features .feature-card h4{
    color: #1A0F37;
    text-align: right;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 16px !important;
}
.features .feature-card p{
    color: #1A0F37;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 0;
}
.text-red{
    color: #FF7470 !important;
}
.text-bb-blue{
    color: #5DC3D8 !important;
}
.text-blue{
    color: #4291B5 !important;
}
.border-none{
    border: none !important;
}
.bg-primary{
    background: #3A2E70 !important;
}
.family{
    height: 944px;
    background-image: url('../img/family-Container.webp');
    background-size: inherit;
    background-position: top;
    background-repeat: no-repeat;
}
.slider{
    height: 944px;
    width: 100%;
}
.fahman-family{
    margin-bottom: 64px;
}
.family-data{
    margin-top: 160px;
}
.fahman-family img{
    margin-left: 16px;
}
.fahman-family p{
    color: #FFF;
    text-align: right;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 400;
}
.slider h3{
    color: #FFF;
    text-align: right;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 100px;
}
.slider h4{
    color: #FFF;
    text-align: right;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 24px;
}
.slider p{
    color: #FFF;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 12px;
}
.absolute{
    position: absolute !important;
}
.top-avatar{
    position: absolute;
    top: 0;
    z-index: -1;
}
.bottom-avatar{
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.p-8{
    padding: 8px !important;
}
.slider .talk-btn{
    width: 200px !important;
    height: 57px !important;
    color: #1A0F37;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin-top: 12px;
    margin-bottom: 32px;
}
.slider img{
    cursor: pointer;
}
.slider .arrow{
    margin-left: 32px;
}
footer{
    margin-top: 128px;
}
footer p{
    color: #1A0F37;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}
.footer-description{
    text-decoration: underline;
    text-decoration-color: #F2F2F2;
    margin-bottom: 40px !important;
}
footer .input-group{
    width: 658px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 40px;
    border: 1px solid #D9D9D9;
    overflow: hidden;
    margin-bottom: 80px;
}
footer input{
    padding: 24px;
}
footer button{
    width: 96px;
    height: 68px;
    background: #4F3791;
}
.form-control{
    border-radius: 0 !important;
}
.contact{
    background: #1A0F37;
    padding: 24px;
}
.contact p{
    color: #FFF;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0 !important;
}

.me-20{
    margin-left: 20px !important;
}

.download{
    background-image: url('../img/download-back.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 20px;
    width: 1280px;
    height: 686px;
    margin-top: 104px;
    color: white;
}
.download .mockup{
    object-fit: contain;
    width:823px;
    height:513px;
}
.mockup-wrapper{
    height: 100% !important;
}
.download h3{
    color: #FFF;
    text-align: right;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 64px;
    margin-bottom: 16px;
}
.download p{
    color: #FFF;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 20px;
}
.download-description{
    height: 100% !important;
}
.me-12{
    margin-left: 12px !important;
}
.mb-20{
    margin-bottom: 20px !important;
}
.openions{
    margin-top: 128px;
}
.openions h3{
    color: #1A0F37;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 64px;
    margin-bottom: 96px;
}
.openions .openioun-card{
    border-radius: 20px;
    background: #F9FAFA;
    padding: 32px;
    height: 207px;
}
.openions .openioun-card p{
    color: #1A0F37;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 20px !important;
    height: 96px;
}
.me-6{
    margin-left: 6px !important;
}
.me-4{
    margin-left: 4px !important;
    margin-right: 0px !important;
}
.me-8{
    margin-left: 8px !important;
}
.openions .openioun-card span{
    color: #3A2E70;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
}
.me-8{
    margin-left: 8px !important;
}
.h-auto{
    height: auto !important;
}
.suggestions{
    margin-top: 220px;
}
.suggestions h3{
    color: #1A0F37;
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 150px;
}
.suggestions h3 span{
    color: #F5BB47;
}
.suggestions p{
    color: #1A0F37;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 20px;
}
.suggestions p span{
    font-weight: 500;
}
.suggestions .input-group{
    width: 343px !important;
    margin-bottom: 16px;
}
input::placeholder { /* Most modern browsers support this now. */
    color:#A8A8A8 !important;
}
.form-control:focus{
    border-color: transparent !important;
}
.suggestions input{
    border:0px;
}
.suggestions .input-seperator{
    width: 343px;
    height: 2px;
    background: #F2F2F2;
}
input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.mb-12{
    margin-bottom: 12px !important;
}
.send-button{
    margin-top: 48px;
    border-radius: 43px;
    width: 200px;
    height: 57px;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    text-decoration: none;
}
.send-button:hover{
    color: #FFF !important;
    cursor: pointer;
}
.body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;
}

.timer-container {
    position: relative;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.progress-ring-circle {
    stroke-dasharray: 1602;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: center;
    animation: circle-animation 10s linear infinite;
    stroke-width: 8px;
}

@keyframes circle-animation {
    0% {
        stroke-dashoffset: 1602;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.timer-circle {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border:8px solid #E9E9F7;
}

.money {
    position: absolute;
    left: 5%;
    bottom: -5%;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.relative{
    position: relative !important;
}
.section-sperator{
    height: 2px;
    width: 100%;
    background: #F2F2F2;
    margin-top: 80px;
}
.fade-out {
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.footer-link{
    text-decoration: none;
    color: white;
}
.footer-link:hover{
    color: white !important;
}
@keyframes fadeOut {
    0% {
        opacity: 0;
    }
    50%{
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
.page-title{
    text-align: center;
    color: #1A0F37;
    font-size: 32px;
}
.privacy-policy{
    padding: 50px 0px;
    font-weight: 400;
    font-size: 12px !important;
    line-height: 1.8;
    color: #1A0F37;
    direction: rtl;
}
.navbar-light-custom{
    border: 2px solid #F2F2F2;
    border-radius:0 0 24px 24px;
}
.navbar-light-custom .nav-link,.fahman-brand{
    color: #1A0F37 !important;

}
.privacy-policy h2,.terms-of-use h2,h4{
    font-size: 18px !important;
}

.terms-of-use{
    padding: 50px 0px;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 1.8;
    color: #1A0F37;
    direction: rtl;
}
.user-avatar{
    border-radius: 100%;
}
.custom-footer{
    position: fixed;
    bottom: 0;
}

a{
    cursor: pointer !important;
}
@media (max-width: 768px) {
    .swiper{
        height: 100% !important;
    }
    .privacy-policy {
        padding: 20px 24px;
        margin-bottom: 50%;
    }
    .terms-of-use{
        padding: 20px 24px;
        margin-bottom: 50%;
    }
    .page-title{
        font-size: 24px;
    }
    .brand-mobile{
        width: 85% !important;
        justify-content: center;
    }
    .navbar-nav{
        align-items: center;
    }
    .hero{
        height: 649px !important;
    }
    .hero-data{
        width: 100%;
        height: 80% !important;
    }
    .hero-title{
        font-size: 18px;
        line-height: 32px;
    }
    .hero-description{
        font-size: 12px;
        line-height: 20px;
    }
    .btn{
        width: 343px;
        height: 46px;
    }
    .start-btn{
        font-size: 16px;
        line-height: 20px;
        padding: 12px 0;
    }
    .features .feature-card{
        border: 4px solid #F6F7F7;
        border-radius: 12px;
        padding: 20px 16px;
        margin: 6px 0;
    }
    .border-none{
        border: 4px solid #F6F7F7 !important;
        border-radius: 12px;
    }
    .features .feature-card img{
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 20px;
    }
    .features .feature-card h3{
        font-size: 18px;
        margin-bottom: 8px;
    }
    .features .feature-card h4{
        font-size: 18px;
        margin-bottom: 12px;
    }
    .features .feature-card p{
        font-size: 14px !important;
    }
    footer{
        margin-top: 24px;
    }
    footer p{
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    .social-icons{
       justify-content: center !important;
    }
    .mobile-input-group input{
        width: 343px;
        height: 49px;
        border-radius: 40px !important;
        border: 1px solid #D9D9D9;
        margin-bottom: 16px;
    }
    .mobile-input-group a{
        color: #D9D9D9;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        border-radius: 43px;
        background: #F2F2F2;
        margin-bottom: 44px;
    }
    .col-md-4{
        justify-content: center;
    }
   .contact p{
        font-size: 12px;
    }
    .download-description{
        height: auto !important;
    }
    .download{
        width: 100% !important;
        padding: 32px;
        margin-top: 48px;
    }
    .download h3{
        font-size: 18px;
        line-height: 46px;
        text-align: center;
        margin-top: 32px;
        margin-bottom: 20px;
    }
    .download p{
        font-size: 14px;
        line-height: 24px;
    }
    .store{
        width: 150px;
        height: 48px;
    }
    .download .mockup{
        width: 100%;
        height: auto;
    }
    .mockup-wrapper{
        height: auto !important;
    }
    .openions{
        margin-top: 24px;
    }
    .openions .openioun-card{
        padding: 20px 16px;
    }
    .openions h3{
        font-size: 16px;
        line-height: 46px;
        text-align: center;
        margin-bottom: 16px;
    }
    .openions .openioun-card p{
        font-size: 14px;
        line-height: 24px;
    }
    .suggestions{
        margin-top: 64px;
    }
    .suggestions h3{
        font-size: 20px;
        line-height: 50px;
        margin-bottom: 8px;
        margin-top: 64px;
    }
    .suggestions p{
        font-size: 14px;
        line-height: 24px;
    }
    .send-button{
        width: 100% !important;
        height: 49px !important;
        margin-top: 16px !important;
    }
    .alert-message{
        width: 100% !important;
    }
    .timer-circle {
        width: 186px;
        height: 186px;
    }
    .timer-circle-container img{
        width: 93px;
        height: 110px;
    }
    .money{
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
    }
    .money img{
        width: 100% !important;
    }
    .progress-ring-circle{
        stroke-width: 10px !important;
    }
    .timer-circle{
        border-width: 4px;
    }
    .section-sperator{
        margin-top: 32px;
    }
    .family-agent-img{
        width: 256px !important;
        height: 256px !important;
    }
    .top-avatar{
        position: absolute;
        z-index: -1;
        width: 128px !important;
        height: 152px !important;
        top: 50%;
    }
    .bottom-avatar{
        position: absolute;
        bottom: 0;
        z-index: -1;
        left: 0;
        width: 128px !important;
        height: 152px !important;
        top: 50%;
    }
    .avatars-mobile{
        width: 100%;
    }
    .family{
        /*height: 832px !important;*/
        background-size: cover;
        background-image: url('../img/family-Container-mobile.png');
    }
    .fahman-family{
        margin-bottom: 0 !important;
        margin-top: 66px !important;
    }
    .family-data{
        margin-top: 0px;
    }
    .slider h3 {
        font-size: 24px ;
        line-height: 40px;
    }
    .slider h4{
        font-size: 20px;
    }
    .slider p{
        font-size: 12px;
        line-height: 24px;
    }
    .slider .talk-btn{
        width: 100% !important;
        height: 46px !important;
    }
    .arrows{
        justify-content: center;
    }
    .features h2{
        margin-top: 32px !important;
        font-size: 16px !important;
    }
    .features p{
        font-size: 16px !important;
        margin-bottom: 24px;
    }
    .features .features-cards{
        margin-bottom: 24px !important;
    }
    .features{
        margin-bottom: 48px;
    }
    .fahman-family p{
        font-size: 18px !important;
    }
    .fahman-family img{
        width:32px !important;
        height: 32px !important;
    }
    .agents-mobile{
        width: 128px !important;
        height: 48px !important;
    }
    .mobile-cols{
        margin-bottom: 24px !important;
    }
    .navbar-collapse{
        order: 2 !important;
    }
    .nav-link{
        color: white !important;
    }
    .fahman_hero{
        width: 128px !important;
        height: 128px !important;
        margin-top: 24px;
        margin-bottom: 24px;
    }
}