:root{
    --primary-color: #0045FD;
}

body.theme-2{
    background: #fff;
    margin: 0 !important;

}

body.theme-2 .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0045FD;
    --bs-btn-border-color: #0045FD;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4b42b3;
    --bs-btn-hover-border-color: #463ea8;
    --bs-btn-focus-shadow-rgb: 113, 105, 217;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #463ea8;
    --bs-btn-active-border-color: #423b9e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #0045FD;
    --bs-btn-disabled-border-color: #0045FD;
}

body.theme-2 .btn-outline-primary {
    --bs-btn-color: #0045FD;
    --bs-btn-border-color: #0045FD;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0045FD;
    --bs-btn-hover-border-color: #0045FD;
    --bs-btn-focus-shadow-rgb: 88, 78, 210;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0045FD;
    --bs-btn-active-border-color: #0045FD;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0045FD;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0045FD;
    --bs-gradient: none;
}

.main-header .navbar .navbar-nav .nav-item{
    padding: 0.5rem;
}
.main-header .navbar .navbar-nav .nav-item .nav-link {
    padding: 0px;
    color: #4A4651;
    font-weight: 500;
    font-size: 14px;
}

.main-header .navbar .navbar-nav .nav-item .nav-link.active{
    font-weight: 700;
    color: #02235F;
    border-bottom: 2px solid #0045FD;
}

.main-header .navbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    padding: 1px 10px;
    line-height: 22.4px;
}

.main-banner {
    padding-top: 100px;
    padding-bottom: 0;
    overflow-x: hidden;
    text-align: center;
}

.hero-title{
    font-size: 50px;
    font-weight: 700;
    line-height: 58.5px;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 470px;
}

.hero-title .gred1{
    background: linear-gradient(254.82deg, #C9D1F3 1.4%, #3B05FF 42.32%);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-title .gred2{
    background: linear-gradient(90deg, #7879FF 4.7%, #633EFC 11.38%);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-pargraph{
    font-family: Ping AR + LT;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.69px;
    text-align: center;

}

.main-banner .hero-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    padding: 1px 10px;
}

.main-banner {
    /* background: radial-gradient(50% 50% at 50% 50%, rgba(0, 69, 253, 0.3) 0%, rgba(255, 255, 255, 0.3) 79%); */
}
.about-area .hero-content{
    position: relative;
    z-index: 1000000;
}
.main-banner .hero-main-div{
    /* width: 795.01px;
    height: 586.19px; */
    position: relative;

}
.main-banner .hero-main-div img{
    margin-top: -100px !important;
    position: relative;
    z-index: -1;
}

.about-area{
    margin-top: 0;
    margin-bottom: 80px;
    /* padding: 25px; */
    /* width: 1264px; */
    height: 356.86px;
    border-radius: 50px;
    background: radial-gradient(132.84% 132.84% at -10.11% 88.4%, rgba(218, 228, 255, 0.5) 4.77%, rgba(255, 255, 255, 0.5) 33.86%, rgba(217, 227, 255, 0.5) 63.23%, rgba(217, 227, 255, 0.5) 100%, rgba(218, 228, 255, 0.5) 61.99%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.custom-title{
    font-size: 20px;
    font-weight: 700;
    line-height: 23.4px;
    width: fit-content;
    background: linear-gradient(90deg, #6D2BFF 24%, #C156FF 48%, #C156FF 69%, #1900FF 100%);
    -webkit-background-clip: text;
    color: transparent;
}
.custom-header{
    font-size: 40px;
    font-weight: 700;
    line-height: 46.8px;
    color: #191045;
    width: 293px;
}
.custom-content{
    font-size: 14px;
    font-weight: 400;
    line-height: 19.69px;
    text-align: left;
    color: #4A4651;
    width: 336.62px;
}

.about-container, .about-area{
    padding: 1rem;
    padding-left: 3rem;
}
.about-area .about-image-section{
    width: 100%;
}
.about-area .about-image-section img{
    width: 816.1px;
    height: 400.21px;
    float: right;
}

.contract-container, .contract-area{
    padding: 1rem;
    padding-left: 2rem;
}
.contract-area .contract-image-section{
    width: 100%;
}
.contract-area .contract-image-section img{
    width: 771.57px;
    height: 386.67px;
}

.plans-area{
    margin-top: 120px;
}

.plans-area .custom-header{
    width: fit-content;
}

.plans-area .plan-ul{
    background: #EBEFF0;
    width: fit-content;
    padding: 3px;
    border-radius: var(--bs-border-radius-2xl) !important;
}

.plans-area .plan-ul .nav-link{
    border: 0;
    width: 150px;
    background: transparent;
}
.plans-area .plan-ul .nav-link.active{
    background: #0045FD;
    color: #fff;
    border-radius: var(--bs-border-radius-2xl) !important;
}

.plans-area .price-card{
    box-shadow : 0px 4px 10px 0px #0000000D;
    min-width: 300px !important;
    min-height: 526px;
    border-radius:32px ;
}

.plans-area .price-card .card-header .plan-name{
    text-align: left;
    font-size: 16px;
}

.plans-area .price-card .card-header .price{
    color: #000;
    font-size: 36px;
    font-weight: 800;
    line-height: 43.57px;
    text-align: left;
}

.plans-area .price-card .card-header .price-desc{
    font-size: 12px;
    font-weight: 400;
    color: #B9BEC1;
    text-align: left;
    vertical-align: middle;
    line-height: 14.52px;
    margin-top: 8px;
}

.plans-area .price-card .card-header{
    border: 0 !important;
    padding-bottom: 5px;
}

.plans-area .price-card .card-body{
    padding: 5px;
    min-height: 311px;
}

.plans-area .price-card .card-body .list-packages{
    display: inline;
}

.plans-area .price-card .card-footer{
    border: 0 !important;
}

.plans-area .price-card .card-footer .plan-button{
    width: 100%;
    color: #7263FF;
    background: #F1EFFF;
    border-radius: 8px;
}

.plans-area .active-back{
    /* background: #B6B2FF80;
    border-radius: 8px; */
    margin-top: -60px !important;
}

.plans-area .price-card.active{
    background: #0045FD;
    border: 10px solid #d0cef2;
    /* box-shadow: 0px 3px 14px 0px #2D2F331F; */

    /* box-shadow : 0px 4px 10px 0px #B6B2FF80; */
    /* backdrop-filter: blur(4px) */

}

.plans-area .plan-package{
    padding: 60px 5px;
}

.plans-area .plan-tap-button{
    background-color: #D9E3FF;
    color: #280F52;
    border-radius: var(--bs-border-radius-2xl) !important;
    width: 48%;
}

.plans-area .plan-tap-button.popular{
    background-color: #0045FD;
    color: #ffffff;
}

.plans-area .price-card.active .card-header .plan-name{
    color: #fff;
}

.plans-area .price-card.active .card-header .price{
    color: #fff;
}

.plans-area .price-card.active .card-body .list-packages{
    color: #fff;
}

.plans-area .price-card.active .card-footer .plan-button{
    color: #fff;
    background: #877FFF;
}

.plans-area .price-card .card-footer .plan-button:hover{
    color: #fff;
    background: #0045FD;
}

.plans-area .price-card.active .card-footer .plan-button:hover{
    color: #0045FD;
    background: #d0cef2;
}

.contact-area{
    box-shadow: 0px 4px 10px 0px #0000000D;
    padding: 10px;
    padding-top: 0;
}

.contact-area .contact-col-1{
    background: linear-gradient(135.91deg, #D9E3FF 82.9%, #FFFFFF 98.9%);
    border-radius: var(--bs-border-radius-xl);
    padding: 10%;
}

.contact-area .contact-col-1 .custom-title{
    font-size: 28px;
}

.contact-area .contact-col-1 .custom-content{
    font-size: 18px;
}

.contact-area .social-links .list-group-item{
    border: 0 !important;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

.contact-area .social-links .list-group-item .social-text{
    color: #280F52;
    font-size: 18px;
    font-weight: 500;
}

.contact-area .contact-col-2{
    padding: 5%;
}

.contact-area .contact-col-2 .contact-form-item{
    margin-top: 20px !important;
}
.contact-area .contact-col-2 .contact-form-item .form-label{
    font-size: 12px;
    font-weight: 500;
    color: #8D8D8D;
    margin: 0;
}
.contact-area .contact-col-2 .contact-form-item .form-control{
    border: 0 !important;
    border-bottom: 1px #8D8D8D solid !important;
    border-radius: 0;
    padding: 0 !important;
    color: #8D8D8D;
    background: transparent !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.contact-area .contact-col-2 .contact-form-item .form-control:focus{
    box-shadow: none;
    border: none;
    color: #280F52;
    border-bottom: 1px #280F52 solid !important;
    background: transparent !important;
}

.contact-area .contact-col-2 .contact-form-item button{
    padding: 15px 45px !important;
    font-size: 16px;
    font-weight: 500;
}
.faqs-area .accordion-item {
    background: #D9E3FF33;
    margin: 10px;
    border: 0;
}
.faqs-area .accordion-item .accordion-header{
    border: 0;
}
.faqs-area .accordion-item .accordion-header .accordion-button{
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

.faqs-area .accordion-item .accordion-header .accordion-button::after{
    background-image: url("../images/Plus.png");
    width: 16px;
    height: 16px;
    background-size: 16px;
}

.faqs-area .accordion-item .accordion-header .accordion-button:not(.collapsed)::after{
    background-image: url("../images/Close.png");
    transition: none;
    width: 13.41px;
    height: 13.41px;
    background-size: 13.41px;
}

.faqs-area .accordion-item .accordion-body{
    color: #A2A9B0;
    font-size: 16px;
    font-weight: 400;
}

.site-footer .footer-row{
    padding: 30px 0;
}

.site-footer .footer-logo a img{
    width: 121.38px;
}

.footer-line{
    background: linear-gradient(90deg, #1900FF 0%, #AC4BFF 25%, #C59CF7 33.96%, #C59CF7 78.94%, #0B0785 100%);
    height: 5px;
}
.footer-nav .footer-title{
    color: #280F52;
    font-size: 14px;
    font-weight: 700;
}
.footer-nav .nav .nav-item{
    padding: 0.5rem;
}

.footer-nav .nav .nav-item .nav-link {
    padding: 0px;
    color: #280F52;
    font-weight: 500;
    font-size: 14px;
}

.footer-nav .nav .nav-item .nav-link.active{
    font-weight: 700;
}

.ftr-subscribe h2{
    color: #280F52;
    font-size: 14px;
    font-weight: 700
}

.ftr-subscribe p{
    color: #4A4651;
    font-size: 14px;
    font-weight: 400;

}

.ftr-subscribe .btn-join{
    background: #0045FD;
    color: #fff;
}

.copyright-text{
    background: #F1EFFF;
    color: #02235F;
    font-size: 10px;
}

@media screen and (max-width: 767px){
    .main-banner  .main-img{
        left: 0;
        width: 100%;
        height: 100%;
    }
    .hero-title{
        font-size: 30px;
        line-height: 38.5px;
        width: 330px;
    }
    .hero-pargraph{
        font-size: 12px;
        line-height: 15.69px;
    }
    .main-banner .hero-main-div img{
        margin-top: 0 !important;
    }
    .about-container, .contract-container{
        padding: 5px;
    }
    .about-area , .contract-area{
        padding: 1rem 0;
        height: 497px;
        margin: 15px;
    }
    .about-area , .contract-area , .custom-title, .custom-header, .custom-content{
        text-align: center;
        width: auto;
    }
    .custom-title{
        font-size: 20px;
    }
    .custom-header{
        font-size: 35px;
        width: 261px;
        margin: auto;
        line-height: 40.95px;
        margin-bottom: 15px;
    }
    .custom-content{
        font-size: 14px;
        font-weight: 400;
        line-height: 19.69px;
        margin: 10px;
    }
    .about-area .about-image-section img{
        width: 100%;
        height: 201.88px;
    }
    .contract-area .contract-image-section img{
        width: 100%;
        height: 201.88px;
    }
    .contract-area .contract-text{
        padding: 0;
    }
    .plans-area .active-back{
        margin-top: 0 !important;
    }

    .plans-area .plan-package{
        padding: 10%    ;
    }
    .site-footer .footer-row{
        text-align: center;
    }
    .site-footer .footer-logo a{
        margin: auto;
    }
    .site-footer .footer-logo a img{
        margin: auto;
        width: 101px;
    }
    .contact-area .social-links .list-group-item{
        text-align: center;
    }
}