/* --- NAVBAR-START --- */
.navbar-logo img {
    width: 25%;
}

.navbar-sign-up {
    background: linear-gradient(90deg, #6E49E6 0%, #47B2FE 100%) !important;
    color: #FFFFFF !important;
    /* White text for contrast */
    border: none !important;
    /* padding: 15px 30px !important; */
    padding-left: 30px !important;
    padding-right: 30px !important;
    border-radius: 30px !important;
    /* Slightly rounded corners */
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    /* Smooth hover effect */
}

.navbar-sign-up:hover {
    /* You can slightly adjust the gradient or add a subtle shadow on hover */
    background: linear-gradient(90deg, #7A53FF 0%, #5BC0FF 100%) !important;
}

.nav-bg-color {
    background-color: #13151D !important;
}

.navbar-text-color a {
    color: #FFFFFF;
    margin-left: 30px;
}
.navbar-text-color a:hover{
    color: #6E49E6 !important;
}


/* --- NAVBAR-END --- */
/* --- HERO-start--- */
.home-button {
    background: linear-gradient(90deg, #6E49E6 0%, #47B2FE 100%) !important;
    color: #FFFFFF !important;
    /* White text for contrast */
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 30px !important;
    /* Slightly rounded corners */
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    /* Smooth hover effect */
    text-decoration: none;
}

.home-button:hover {
    /* You can slightly adjust the gradient or add a subtle shadow on hover */
    background: linear-gradient(90deg, #7A53FF 0%, #5BC0FF 100%) !important;
}

.hero-main-text {
    padding: 80px 0 95px 0;
    color: white;
}

.hero-main-text a,
.hero-main-text p,
.hero-main-text h1 {
    margin-top: 20px !important;

}

.hero-bg-img {
    background-image: url(../img/crop_magic.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: #151531; */
    width: 100%;
    background-position: center;
}

/* --- HERO-END --- */
/* --- TOOL-START--- */
.Tool {
    color: white;
    padding: 100px 0px;
    background: linear-gradient(to bottom, #190b3b, #0c071d);
    border-bottom: 2px solid #190b3b;
}

.heading-tool h1 {
    color: #FAFAFA;

}

.tool-card-icon i {
    font-size: 23px;
    color: white;
}

.tool-main-card-padding {

    padding: 10px 20px !important;
    /* padding-top: 10px; */
}

.tool-main-card {

    padding: 20px 30px;
    /* background-color: rgba(255, 255, 255, 0.05); */
    background-color: rgb(110, 73, 230, 0.5);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.tool-main-card:hover {
    transform: translateY(-5px);
}

.compare-card-2 .tool-main-card {
    background-color: rgb(110, 73, 230);
    border: 1px solid rgb(110, 73, 230, 0.1);
}

.tool-main-card-heading h3 {
    color: #ffffff;
    /* font-size: 1.5em; */
}

.tool-main-card-text span {
    font-size: 1em;
    color: #a0a0a0;
    /* Lighter grey text color */
    /* line-height: 1.4; */
}

/* --- TOOL-END --- */
/* --- TOOL-VIRAL-START --- */
.Tool-viral {
    color: white;
}

.tool-viral-icons {
    display: flex;
    justify-content: space-evenly;
}

.tool-viral-icons i {
    font-size: 50px;
    /* background-color: red; */
    padding: 20px;
    border-radius: 100%;
    border: solid 2px #47B2FE;
    color: white;

}

/* --- TOOL-VIRAL-END --- */
/* --- PRICE-START --- */
.Price {
    padding: 100px 0px;
    background: linear-gradient(to top, #190b3b, #0c071d);
    border-bottom: 2px solid #0c071d;


}

.heading-price h1 {
    color: rgb(250, 250, 250);

}

.price-card-padding {

    padding: 20px !important;
}

.price-card {
    color: rgb(255, 255, 255);
    padding: 10px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.price-card:hover {
    transform: translateY(-5px);
}

.customize-button {
    text-align: center;


}

.customize-button a :hover {
    /* You can slightly adjust the gradient or add a subtle shadow on hover */
    background: linear-gradient(90deg, #7A53FF 0%, #5BC0FF 100%) !important;
}

.customize-button a {
    background: linear-gradient(90deg, #6E49E6 0%, #47B2FE 100%) !important;
    border: none !important;
    border-radius: 30px !important;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    /* Smooth hover effect */
    text-decoration: none;
    padding: 20px 100px !important;
    font-size: 22px;
}

/* --- PRICE-END --- */
/* --- MODaLS-START --- */
.Modals {
    padding: 100px 0px;
    color: white;
    background: linear-gradient(to top, #190b3b, #0c071d);
    border-bottom: 2px solid #0c071d;
}

.modal-card-padding a {
    text-decoration: none;
}

.modal-card-padding {

    padding: 20px !important;
}

.modal-card {
    color: white;
    padding: 15px 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #6E49E6;
    transition: transform 0.3s ease;
}

.modal-card:hover {
    transform: translateY(-5px);
}

.modal-card-icon i {
    color: #6E49E6;
    background-color: #190b3b;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.modal-integrate-card {
    color: white;
    padding: 15px 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #6E49E6;
    transition: transform 0.3s ease;
}

.modal-integrate-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- MODaLS-END --- */

/* --- WHY-START --- */
.Why {
    padding: 100px 0px;
    color: white;
    background: linear-gradient(to bottom, #190b3b, #0c071d);
    border-bottom: 2px solid #190b3b;
}

.why-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.why-text h3 i {
    color: #6E49E6;
    background-color: #190b3b;
    padding: 20px;
    border-radius: 12px;
}

.why-text span {
    color: #6E49E6;
}

/* --- WHY-END --- */

/* --- FAQS-START --- */

.Faqs {
    padding: 100px 0px;
    color: white;
    background: linear-gradient(to bottom, #190b3b, #0c071d);
    border-bottom: 2px solid #190b3b;
}

.change-accordion-item {
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #6E49E6 !important;
    background-color: #6E49E6 !important;
    color: white !important;
}

.change-accordion {
    /* --bs-accordion-border-radius: var(--bs-border-radius); */
    /* --bs-accordion-border-radius: 0% !important; */
    /* border: none; */
    /* border-bottom: 100px solid yellow !important; */
    border-color: green !important;
    box-shadow: none;
    --bs-accordion-border-color: none !important;

}

.change-accordion-button {
    /*background-color: #ffffff0d !important;*/
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #6E49E6 !important;
    background-color: #190b3b !important;
    color: white !important;
    /* box-shadow: none; */
    /*/*border: 1px solid red !important;
    */
    /*border-radius: 0% !important;
    */
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    -ms-border-radius: 12px !important;
    -o-border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
}

.accordion-button::after {

    background-image: url("../img/plus-solid-full.svg") !important;
    transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../img/minus-solid-full.svg") !important;
}

.accordion-button::after {
    transition: all 0.5s;
}


/* --- FAQS-END --- */

/* --- FOOTER-START --- */
.Footer {

    padding: 100px 0px;
    color: white;
    background: linear-gradient(to top, #190b3b, #0c071d);
    border-bottom: 2px solid #0c071d;

}
.footer-center-text a{
    text-decoration: none;
    color: white;
    font-weight: 600;
}
.footer-center-text a :hover{
 color: #6E49E6;
}
.footer-social-1{
    display: flex;
    justify-content: space-between;
}
.footer-social-1 a{
    text-decoration: none;
    font-size: 25px;
    color: white;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}
.footer-social-1 a:hover{
      color: #6E49E6;
      transform: scale(1.5);
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
}

/* --- FOOTER-END --- */