/* ===== Collab Hero Section ===== */
/* FONT WEIGHT */
.cc-fw-normal { font-weight: 400 !important; }
.cc-fw-light  { font-weight: 200 !important; }
.cc-fw-bold   { font-weight: 700 !important; }
.cc-fw-100   { font-weight: 100 !important; }
.cc-fw-300   { font-weight: 300 !important; }
.cc-fw-500   { font-weight: 500 !important; }
.cc-fw-600   { font-weight: 600 !important; }

/* COLOR */
.cc-color-default { color: #ffffff }
.cc-color-yellow  { color: #FAC415 !important; }

/* HERO SECTION */
.cc-hero-section {
    width: 100%;
    padding: 150px 20px 0px;
    text-align: center;
    position: relative;
    /*background: linear-gradient(180deg, #0D0B1A 0%, #685BC7 73.51%);*/
    background: linear-gradient(to bottom, #0E0A18, #2E2859, #685BC7);
    color: #ffffff;
}

.cc-hero-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 150px;
    top: auto;
    bottom: 0;
    background: linear-gradient(to bottom, rgb(104 91 199 / .01) 0%, #685BC7 100%);
    z-index: 12;
}

.cc-hero-section .cc-hero-content {
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* Badge */
.cc-hero-section .cc-tag-wrapper {
    display: grid;
}
.cc-hero-section .cc-tag {
    font-family: "Inter", font-48-58-regular;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    word-spacing: 0px;
    color: #FFB81C;
    text-align: center;
    border: 1px solid #FFB81C;
    background: #FFB81C1A;
    padding: 10px 16px;
    opacity: 1;
    gap: 10px;
    border-radius: 100px;
}

/* Main Title */
.cc-hero-section .cc-hero-title {
    font-family: "Inter", font-48-58-regular;
    font-size: 64px;
    /*font-weight: 600;*/
    line-height: 68px;
    letter-spacing: -3px;
    word-spacing: 0px;

    overflow-wrap: anywhere;
    /* word-break: break-all; */
}

/* Subtitle Text */
.cc-hero-section .cc-hero-subtext a { 
    color: #FAC415;
    text-decoration: none !important;
}

.cc-hero-section .cc-hero-subtext a:hover { 
    color: #ffffff;
    text-decoration: none !important;
}

.cc-hero-section .cc-hero-subtext {
    font-family: "Inter", font-48-58-regular;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0px;
    overflow-wrap: anywhere;
    /* word-break: break-all; */
}

/* Buttons */
.cc-hero-section .cc-hero-buttons a { 
    text-decoration: none;
}
.cc-hero-section .cc-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-hero-section .cc-btn {
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.25s ease-in-out;
}

.cc-hero-section .cc-btn.cc-primary {
    padding: 13px 20px;
    background: linear-gradient(to bottom, #6094FB, #1048BA);
    box-shadow: 0 4px 4px rgb(0 0 0 / .4);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
    font-weight: 400 !important;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.cc-hero-section .cc-btn.cc-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgb(0 0 0 / .4);
}

.cc-hero-section .cc-btn.cc-secondary {
    padding: 13px 20px;
    background: linear-gradient(to bottom, #FFB81C, #EF692B);
    box-shadow: 0 4px 4px rgb(0 0 0 / .4);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
    font-weight: 400 !important;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.cc-hero-section .cc-btn.cc-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgb(0 0 0 / .4);
}

/* Bottom small text */
.cc-hero-section .cc-no {
    /*margin-top: 15px;*/
    font-size: 13px;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    gap: 18px;
    position: relative;
    flex-wrap: wrap;
}

.cc-hero-section .cc-no-text-wrapper {
    margin: 0px auto;
}

.cc-hero-section .cc-free-trial {
    position: relative;
}
.cc-hero-section .cc-free-trial::before {
    content: '';
    position: absolute;
    left: -12px;
    height: 5px;
    width: 5px;
    background-color: #D9D9D9;
    top: 7px;
    border-radius: 99em;
}

/* Dashboard Image */
.cc-hero-section .cc-dashboard-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    max-width: 1280px;
    flex-direction: column;
    align-items: center;
    margin: 40px auto 0;
}

.cc-hero-section .cc-dashboard-wrapper img {
    width: 100%;
    max-width: 1280px;
    border-radius: 14px;
    /* box-shadow: 0px 20px 60px rgba(0,0,0,0.35); */
}

.cc-hero-section .cc-dashboard-wrapper .collab-desktop-hero-img {
    display: flex;
}
.cc-hero-section .cc-dashboard-wrapper .collab-mobile-hero-img { 
    display: none;
}

/* Responsive */

@media (max-width: 1366px) { 
    .cc-hero-section .cc-tag {
        font-size: 16px;
        letter-spacing: 0px;
    }
    .cc-hero-section .cc-hero-title { 
        font-size: 40px;
        line-height: 50px;
        letter-spacing: -1px;
    }
}

@media (max-width: 1024px) {
    .cc-hero-section .cc-hero-subtext {
        font-size: 18px;
        line-height: 28px;
    }
    .cc-hero-section .cc-dashboard-wrapper {
        margin: 30px auto 0;
    }
}


@media (max-width: 767px) {
    .cc-hero-section {
        padding: 136px 15px 0px;
    }

    .cc-hero-section .cc-hero-title {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: -1px;
    }
    .cc-hero-section .cc-hero-subtext { 
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0px;
    }

    .cc-hero-section .cc-btn.cc-primary,
    .cc-hero-section .cc-btn.cc-secondary { 
        font-size: 16px;
        letter-spacing: 0px;
        padding: 12px 16px;
    }

    .cc-hero-section .cc-hero-content { 
        gap: 20px;
    }
    .cc-hero-section .cc-dashboard-wrapper img {
        width: 100%;
    }

    .cc-hero-section .cc-dashboard-wrapper .collab-desktop-hero-img {
        display: none;
    }
    .cc-hero-section .cc-dashboard-wrapper .collab-mobile-hero-img { 
        display: flex;
    }

    .cc-hero-section .cc-dashboard-wrapper {
        margin: 30px auto 0;
    }
    .cc-hero-section::before {
        height: 77px;
    }

    .cc-hero-section .cc-no {
        font-size: 13px;
        line-height: 24px;
    }
    .cc-hero-section .cc-free-trial::before { 
        top: 10px;
    }
}

@media (max-width: 360px) { 
    .cc-hero-section .cc-no {
        font-size: 13px;
        opacity: .5;
        display: flex;
        justify-content: center;
        gap: 5px;
        position: relative;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
}

.herodescriptop{
    display: block;
    margin-bottom: 20px !important;
}