@charset "utf-8";

body {
    overflow-x: hidden;
}

@media (max-width: 1200px) {
    .header {
        padding: 12px 18px;
    }

    .logo {
        width: 150px;
    }

    .nav-item {
        margin-right: 18px;
    }

    .banner-title {
        font-size: 46px;
    }

    .banner-description {
        font-size: 18px;
    }

    .features-grid {
        gap: 30px;
    }

    .reviews-grid,
    .services-cards-grid,
    .why-quicklead-grid {
        gap: 20px;
    }

    .pricing-card {
        min-height: 0;
    }

    .logos-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .banner-input-wrapper {
        width: 60%;
    }
}

@media (max-width: 992px) {
    /* .container {
        padding-left: 20px;
        padding-right: 20px;
    } */

    .header .row {
        row-gap: 12px;
    }

    .header .col,
    .header .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .header .d-flex.align-items-center.justify-content-center {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .btn-header {
        padding-inline: 14px;
        font-size: 14px;
    }

    .banner-section {
        padding-top: 100px;
        padding-bottom: 50px;
        text-align: center;
        background-position: center;
    }

    .banner-title {
        font-size: 40px;
    }

    .banner-description {
        font-size: 17px;
    }

    .banner-image-wrapper {
        margin-top: 30px;
    }

    .background-image,
    .hero-image {
        width: 100%;
        max-width: 100%;
    }

    .hero-image {
        top: -360px;
    }

    .section-title {
        width: 100%;
        font-size: 28px;
    }

    .section-description {
        width: 100%;
        font-size: 15px;
    }

    .outcomes-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .outcome-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comparison-heading {
        align-items: flex-start;
    }

    .logo-section-text {
        font-size: 16px;
        padding-inline: 10px;
    }

    .logo-item {
        width: 150px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-message-section .ai-message-grid {
        grid-template-columns: 1fr !important;
        row-gap: 40px;
    }

    .feature-details-card {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .card-title {
        font-size: 22px;
    }

    .add-section .add-title {
        font-size: 30px;
        line-height: 36px;
    }

    .add-section .add-description {
        font-size: 18px;
    }

    .integrations-image-wrapper {
        max-width: 680px;
        margin: 0 auto;
    }

    .benefits-card {
        padding: 24px;
        border-radius: 20px;
    }

    .benifits-card-title {
        font-size: 28px;
    }

    .comparison-badge.without,
    .comparison-badge.with {
        width: auto;
    }

    .comparison-rate {
        font-size: 24px;
    }

    .reviews-grid,
    .services-cards-grid,
    .why-quicklead-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .reviews-marquee .review-card {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .start-section-title {
        font-size: 34px;
        line-height: 46px;
    }

    .start-cta-container {
        width: 100%;
        max-width: 480px;
    }

    .footer-section {
        margin: 16px;
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .footer-grid {
        gap: 16px;
    }

    .header-logo-wrapper {
        justify-content: space-between;
        width: 100%;
    }

    .logo {
        width: 140px;
    }

    .mobile-menu {
        display: inline-block;
    }

    .header-nav-wrapper,
    .header-actions-mobile {
        display: none;
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .header-actions-mobile .btn-header-outline {
        width: 100%;
    }

    .header-actions-mobile .btn-header-primary {
        width: 100%;
    }

    .header-actions-desktop {
        display: none;
    }

    body.header-menu-open .header-nav-wrapper,
    body.header-menu-open .header-actions-mobile {
        display: block;
        opacity: 1;
        transform: translateY(0);
        max-height: 350px;
        overflow-y: auto;
    }

    .header-nav-wrapper {
        /* position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        padding: 12px 16px 16px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 16px 16px;
        background: linear-gradient(120deg, rgb(17 7 37 / 96%), rgb(25 10 45));
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 45px rgba(7, 2, 20, 0.55);
        max-width: none;
        border-radius: 12px;
        transform: translateY(-9px) scale(0.995);
    }

    .header-nav-wrapper .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        row-gap: 10px;
    }

    .header-actions-mobile {
        padding: 12px 16px 6px;
        border-top: 1px solid rgba(235, 235, 235, 0.12);
        margin-top: 10px;
    }

    .header-actions-mobile .d-flex {
        flex-direction: column;
        gap: 10px !important;
    }

    .nav-item {
        margin-right: 16px;
    }

    /* Dropdown Menu Responsive Styles - Mobile */
    .nav-item-dropdown {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .nav-item-dropdown .nav-item-label {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-item-dropdown .chevron-down {
        transition: transform 0.3s ease;
    }

    .nav-item-dropdown.active .chevron-down {
        transform: rotate(180deg);
    }

    .dropdown-menu {
        position: static;
        transform: none !important;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-top: 12px;
        margin-left: 0;
        margin-right: 0;
        padding: 0 16px;
        border-radius: 12px;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.4s ease, padding 0.3s ease;
    }

    .dropdown-menu::before {
        display: none;
    }

    .nav-item-dropdown.active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 2000px;
        padding: 16px;
        transform: none !important;
        display: block;
    }

    .dropdown-menu .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .dropdown-menu .row>[class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 12px;
    }

    .dropdown-item {
        padding: 12px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .dropdown-menu .row>[class*="col-"]:last-child .dropdown-item,
    .dropdown-menu .row>[class*="col-"]:nth-last-child(2) .dropdown-item {
        margin-bottom: 0;
    }

    .dropdown-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .dropdown-icon svg {
        width: 20px;
        height: 20px;
    }

    .dropdown-title {
        font-size: 15px;
    }

    .dropdown-description {
        font-size: 13px;
    }

    .features-section {
        border-radius: 20px;
    }

    .details-section {
        border-radius: 20px;
    }

    .services-section {
        border-radius: 20px;
    }

    .faq-section {
        border-radius: 20px;
    }

    .logo-section {
        border-radius: 20px;
    }

    .features-details-section {
        border-radius: 20px;
    }

    .meeting-section {
        border-radius: 20px;
    }

    .features-overview-section {
        border-radius: 20px;
    }

    .banner-section {
        border-radius: 20px;
    }

    .testimonials-section {
        border-radius: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .featur-details-banner {
        padding-top: 110px;
        padding-bottom: 80px;
        background-position: center;
    }

    .featur-details-banner .banner-image-wrapper {
        width: 100%;
        max-width: 760px;
    }

    .featur-details-banner .featre-background-image {
        width: 100%;
    }

    .banner-input-wrapper {
        width: 70%;
    }

    .feature-add-section .feature-add-title {
        font-size: 38px;
        line-height: 48px;
    }

    .feature-add-section .feature-add-description {
        font-size: 18px;
        line-height: 28px;
    }

    .nav-item {
        flex-direction: column;
        margin-bottom: 0;
    }

    .nav-item-label-wrapper {
        display: flex;
        align-items: center;
    }

    .feature-add-section {
        background-size: cover;
        margin-top: 50px;
    }

    .pricing-add-section {
        background-position: center !important;
    }

    .features-details-section .feature-block {
        padding: 20px;
    }

    .logos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .logo-review-card {
        display: none;
    }

    .demo-section .video-details-card {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .testimonial-badge {
        display: none;
    }
}


@media (max-width: 768px) {
    .customer-logo:has(.logo-item.md-block.hidden) {
        display: none;
    }

    .header {
        padding-inline: 14px;
    }

    /* Dropdown Menu - Tablet */
    .dropdown-menu {
        padding: 14px;
    }

    .dropdown-item {
        padding: 10px;
        gap: 10px;
    }

    .dropdown-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .dropdown-icon svg {
        width: 18px;
        height: 18px;
    }

    .dropdown-title {
        font-size: 14px;
    }

    .dropdown-description {
        font-size: 12px;
    }

    .banner-title {
        font-size: 32px;
    }

    .banner-two-column .banner-title {
        font-size: 32px;
    }

    .blog-details-banner .banner-title {
        font-size: 32px;
    }

    .banner-two-column .banner-description {
        font-size: 16px;
    }

    .banner-description {
        font-size: 16px;
    }

    .btn-cta {
        width: 100%;
        justify-content: center;
    }

    .banner-section .d-flex.gap-3 {
        flex-direction: column;
        align-items: stretch;
    }

    .section-padding {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-title-wrapper {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 24px;
    }

    .section-description {
        font-size: 14px;
    }

    .outcome-metrics-grid {
        grid-template-columns: 1fr;
    }

    .outcomes-copy,
    .comparison-card {
        padding: 18px;
    }

    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .logo-item {
        width: 120px;
    }

    .logo-review-card {
        left: 50%;
        transform: translate(-50%, -12px);
        width: min(320px, 92vw);
        padding: 14px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card-content {
        padding: 20px;
    }

    .cta-inner-wrapper {
        width: 100%;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-description {
        font-size: 14px;
    }

    .cta-button {
        width: 100%;
    }

    .profile-stack {
        position: static;
    }

    .profile-card {
        position: static;
        width: 100%;
        max-width: 100%;
        transform: none;
        margin-bottom: 16px;
    }

    .card-top,
    .card-middle,
    .card-front {
        top: auto;
        left: auto;
    }

    .ai-card {
        padding: 18px;
    }

    .icebreaker-text {
        font-size: 14px;
        line-height: 24px;
    }

    .send-btn {
        width: 100%;
        text-align: center;
    }

    .highlight-tag {
        display: none;
    }

    .feature-details-card,
    .feature-details-card.image-left,
    .feature-details-card.image-right {
        grid-template-columns: 1fr !important;
    }

    .feature-image {
        order: -1;
    }

    .card-description {
        font-size: 14px;
        line-height: 26px;
    }

    .btn-container {
        margin-top: 10px;
    }

    .add-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .add-section .add-title {
        font-size: 26px;
        line-height: 32px;
    }

    .add-section .add-description {
        font-size: 15px;
        line-height: 24px;
    }

    .button-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .integrations-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* .meeting-background {
        background-position: center;
        background-size: contain;
        min-height: 260px;
    }

    .meeting-piece {
        display: none;
    } */

    .benefits-card {
        padding: 20px;
    }

    .benifits-card-title {
        font-size: 22px;
    }

    .comparison-item {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .comparison-badge {
        justify-content: center;
    }

    .comparison-rate {
        text-align: center;
    }

    .result-section .result-data {
        grid-template-columns: 1fr !important;
    }

    .reviews-grid,
    .services-cards-grid,
    .why-quicklead-grid {
        grid-template-columns: 1fr !important;
    }

    .reviews-marquee .review-card {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .review-card,
    .service-card,
    .why-quicklead-card {
        padding: 18px;
    }

    .review-text {
        font-size: 13px;
        line-height: 24px;
        -webkit-line-clamp: 5;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: 20px;
    }

    .pricing-card-title {
        font-size: 24px;
    }

    .price-amount {
        font-size: 32px;
    }

    .price-period {
        font-size: 18px;
    }

    .faq-accordion-trigger {
        padding: 12px;
        font-size: 14px;
    }

    .banner-features-line {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    .faq-ans {
        font-size: 13px;
        line-height: 22px;
        padding: 8px 12px 12px 12px;
    }

    .start-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .start-section-title {
        font-size: 26px;
        line-height: 34px;
    }

    .email-input {
        font-size: 16px;
    }

    .button-text {
        font-size: 17px;
    }

    .footer-section {
        margin: 0;
        border-radius: 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .featur-details-banner {
        padding-top: 100px;
        padding-bottom: 60px;
        text-align: center;
    }

    .banner-input-wrapper {
        width: 100%;
    }

    .feature-add-section {
        padding-top: 60px;
        padding-bottom: 60px;
        background-position: center;
    }

    .feature-add-section .feature-add-title {
        font-size: 30px;
        line-height: 38px;
    }

    .feature-add-section .feature-add-description {
        font-size: 16px;
        line-height: 26px;
    }

    .testimonials-section .testimonials-container {
        padding: 16px;
    }

    .features-details-section .background-gradient {
        display: none;
    }

    .blog-section .tab-content {
        padding: 25px 0;
    }

    .blog-section .tab-content .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-section .blog-card {
        padding: 15px;
    }

    .blog-section .blog-card .blog-image img {
        min-height: auto;
    }

    .blog-section .all-blog-tabs {
        overflow-x: auto;
        white-space: nowrap;
        display: block;
        padding: 5px 0;
    }

    .blog-section .blog-container .blog-tab {
        display: inline-flex;
    }

    .integrations-details-section .integrations-container .integrations-grid {
        grid-template-columns: 1fr;
    }

    .integrations-add-icons {
        flex-wrap: wrap;
        gap: 18px;
    }

    .integrations-add-icon-item {
        width: 60px;
        height: 60px;
        transform: none !important;
    }

    .hero-image {
        display: none;
    }

    .video-tutorials-section .tutorials-grid {
        grid-template-columns: 1fr;
    }

    .video-tutorials-section .tutorial-card {
        padding: 15px;
    }

    .quicklead-section .quicklead-grid {
        grid-template-columns: 1fr;
    }

    .meeting-piece-1 {
        top: 110px;
        left: 25px;
        display: inline-block;
    }

    .meeting-piece-2 {
        top: 30px;
        right: 260px;
        display: inline-block;
    }

    .main-banner-section {
        border-radius: 20px;
        margin-top: 40px;
    }
}


@media (max-width: 576px) {
    .meeting-piece-1 {
        top: 55px;
        left: 15px;
        display: inline-block;
    }

    .meeting-piece-2 {
        top: 15px;
        right: 110px;
        display: inline-block;
    }

    .meeting-piece-img-1,
    .meeting-piece-img-2 {
        width: 130px;
    }

    .logos-grid {
        grid-template-columns: 1fr 1fr;
    }

    .logo-item {
        width: 125px;
    }

    .logo-review-card {
        width: min(280px, 92vw);
        transform: translate(-50%, -12px);
        padding: 12px;
    }

    .badge-custom {
        padding-inline: 12px;
    }

    /* Dropdown Menu - Small Mobile */
    .dropdown-menu {
        padding: 12px;
        margin-top: 10px;
    }

    .dropdown-menu .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .dropdown-menu .row>[class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 10px;
    }

    .dropdown-item {
        padding: 10px 8px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .dropdown-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .dropdown-icon svg {
        width: 16px;
        height: 16px;
    }

    .dropdown-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .dropdown-description {
        font-size: 11px;
        line-height: 1.4;
    }

    .badge-text {
        font-size: 13px;
        white-space: normal;
    }

    .btn-cta,
    .btn-header {
        font-size: 13px;
        white-space: normal;
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .banner-email-input {
        width: 40%;
        font-size: 15px;
    }

    .banner-form-inner {
        padding: 8px 10px 8px 15px;
    }

    .banner-start-cta-button {
        padding: 15px 18px;
    }

    .email-input {
        width: 155px;
    }

    .start-cta-button {
        padding: 12px 12px;
    }

    .affiliate-section .affiliate-gradient-inner {
        display: none;
    }

    .affiliate-section .affiliate-block {
        padding: 20px;
    }

    .features-details-section .feature-block .feature-data h3 {
        font-size: 20px;
        line-height: 35px;
    }

    .features-details-section .feature-data h4 {
        font-size: 18px;
    }

    .features-details-section .feature-block {
        padding: 15px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-content {
        padding: 0;
    }

    .affiliate-add-section .affiliate-add-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .play-button-overlay {
        width: 80px;
        height: 80px;
    }

    .play-button-icon {
        width: 24px;
        height: 24px;
    }

    .play-button-text {
        font-size: 9px;
    }
}

/* Event Section Responsive */
@media (max-width: 992px) {
    .event-section .events-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .event-section .events-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .event-section .event-card {
        border-radius: 8px;
    }

    .event-section .event-card .event-image-slider {
        height: 330px;
    }

    .event-section .event-header {
        padding: 15px;
    }

    .event-section .event-title {
        font-size: 20px;
    }

    .event-section .event-content {
        padding: 0 15px 20px;
    }

    .event-section .event-card .slider-arrow {
        width: 32px;
        height: 32px;
    }
}