/* =====================================================
   SOCIAL LENS PRO - MOBILE FIXES (v3)
   Paste at the VERY BOTTOM of assets/css/mystyle.css
   Built from the real rules in style.css + mystyle.css.
   Everything is inside @media, so desktop is untouched.
   ===================================================== */


/* -----------------------------------------------------
   1. TABLET and below (<= 991px)
   ----------------------------------------------------- */
@media (max-width: 991px) {

    .section { padding: 60px 0; }

    .section-title { margin-bottom: 40px; }
    .section-title p { width: 80%; }

    #homep h2 {
        font-size: 36px;
        line-height: 1.25;
        margin-bottom: 30px;
    }

    .about-text p {
        font-size: 24px;
        line-height: 1.6;
    }

    .main-nav .navbar-nav .nav-item .nav-link {
        padding: 10px 15px;
        line-height: 1.4;
    }
}


/* -----------------------------------------------------
   2. MOBILE (<= 767px)
   ----------------------------------------------------- */
@media (max-width: 767px) {

    /* ---------- Side margins ----------
       mystyle.css forces .container to width:94% !important,
       which adds ~3% dead margin on each side ON TOP of the
       padding. Make it full width with a clean 18px gutter. */
    .container,url("../images/social/Audience_Intelligence.png")url("../images/social/Growth_Trend_Monitoring.png")url("../images/social/Last_30_Days_Performance_Monitoring.png")
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* ---------- Base type (style.css has no mobile sizes) ---------- */
    h1 { font-size: 28px; line-height: 1.3; }
    h2 { font-size: 24px; line-height: 1.3; }
    h3 { font-size: 18px; line-height: 1.4; }
    p, li, blockquote, label { font-size: 15px; line-height: 1.65; }

    /* ---------- Section spacing ---------- */
    .section { padding: 45px 0; }
    .section-title { margin-bottom: 28px; }
    .section-title h2 { font-size: 24px; margin-bottom: 10px; }
    .section-title p  { width: 100%; font-size: 15px; }

    /* mystyle.css: #homep h2 = 48px with 55px bottom margin */
    #homep h2 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    /* ---------- Header ---------- */
    .main-nav .navbar-brand img { max-height: 38px; width: auto; }
    .main-nav .navbar-toggler   { font-size: 22px; }
    .main-nav .navbar-nav .nav-item .nav-link {
        text-align: left;
        font-size: 14px;
    }
    .main-nav .navbar-nav .nav-item .btn {
        display: inline-block;
        margin: 8px 15px 4px;
    }

    /* ---------- Hero ----------
       mystyle.css: h1 60px/75px, p 20px/35px, padding-bottom 134px */
    .gradient-banner { padding: 30px 0 80px; }

    .gradient-banner h1 {
        font-size: 25px;
        line-height: 1.3;
        margin-bottom: 14px !important;
    }

    .gradient-banner p {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 24px !important;
    }

    .gradient-banner .btn-main-md {
        padding: 12px 28px;
        font-size: 14px;
    }

    /* mystyle.css forces max-width:100% !important on hero img */
    .gradient-banner img {
        max-width: 80% !important;
        margin: 0 auto 15px !important;
    }

    /* ---------- About ----------
       mystyle.css: .about-text p = 32px / 58px (huge on phones) */
    .about-text p {
        font-size: 15px;
        line-height: 1.7;
    }
    .about-icon img { width: 70px; }

    /* ---------- Why Social Lens PRO ----------
       mystyle.css: padding 60px 5%. The paragraphs also carry
       INLINE font-size:20px / line-height:38px, hence !important. */
    .why-section { padding: 40px 0; }

    .why-section .container.mb-5 {
        margin-bottom: 28px !important;
        padding-bottom: 0 !important;
    }

    .why-section .why-item:hover { transform: none; }

    .why-section .why-item h3 {
        font-size: 19px !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .why-section .why-bullet-list { padding-left: 18px !important; }
    .why-section .why-bullet-list li { margin-bottom: 14px !important; }

    .why-section .why-bullet-list li p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    /* ---------- Testimonials ---------- */
    .testimonial .testimonial-slider .item .block {
        padding: 24px 18px;
        margin: 6px;
    }
    .testimonial .testimonial-slider .item .block p {
        font-size: 14.5px;
        line-height: 1.65;
    }
    .testimonial .testimonial-slider .item .block .image { margin-top: 20px; }

    /* ---------- Footer ---------- */
    .footer-main { padding: 40px 0 15px; }
    .footer-logo { max-width: 180px; }
    .social-icon.list-inline { padding-left: 0; }   /* was 30px */
    .footer-links h4 { font-size: 15px; margin-bottom: 12px; }
    .footer-links ul li { margin-bottom: 8px; }
    .footer-links ul li a { font-size: 14px; }
    footer .bg-dark { padding: 18px 0 !important; }
    footer .bg-dark small { font-size: 12px; line-height: 1.6; display: block; padding: 0 15px; }
}


/* -----------------------------------------------------
   3. SMALL PHONES (<= 480px)
   ----------------------------------------------------- */
@media (max-width: 480px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section { padding: 30px 0; }

.benefits-content{
gap:30px;
}



    h1 { font-size: 24px; }
    h2, .section-title h2, #homep h2 { font-size: 22px; }

    .gradient-banner h1 { font-size: 23px; }
    .gradient-banner p  { font-size: 14.5px; }

    .why-section .why-item h3 { font-size: 18px !important; }
    .why-section .why-bullet-list li p { font-size: 14.5px !important; }
}


/* =====================================================
   Analytics pages extras (Competition, Social Media, Campaign)
   ===================================================== */
@media (max-width: 767px) {

    /* Intro paragraphs directly inside feature blocks (inline 18px/32px) */
    .why-section .why-item > p {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 12px !important;
    }

    /* Bullet lists: tighter gaps */
    #social .why-bullet-list li {
        margin-bottom: 6px !important;
    }

    /* "Key Features" heading */
    .why-section .section-title h2 {
        margin-bottom: 10px !important;
    }

    /* Lightboxes: fit above the phone's address bar */
    .competition-lightbox-overlay,
    .social-lightbox-overlay,
    .campaign-lightbox-overlay {
        padding: 55px 10px 20px !important;
    }

    .competition-lightbox-stage,
    .social-lightbox-stage,
    .campaign-lightbox-stage {
        height: 68vh !important;
    }

    .competition-lightbox-caption,
    .social-lightbox-caption,
    .campaign-lightbox-caption {
        font-size: 13px !important;
    }
}


/* =====================================================
   Pricing, FAQ and Contact pages
   ===================================================== */
@media (max-width: 767px) {

    /* ---------- Pricing ---------- */
    #pricing .pricing-hero h1 { font-size: 25px; line-height: 1.3; }
    #pricing .pricing-hero-text { font-size: 15px; line-height: 1.65; }
    #pricing .pricing-heading h2 { font-size: 24px; }
    #pricing .pricing-heading p { font-size: 15px; line-height: 1.6; }
    #pricing .pricing-section { padding-top: 40px; padding-bottom: 40px; }
    #pricing .pricing-heading { margin-bottom: 30px; }
    #pricing .pricing-price { font-size: 30px; }

    /* Readable small text */
    #pricing .best-for { font-size: 12.5px; }
    #pricing .plan-advantage-box p { font-size: 13.5px; line-height: 1.55; }
    #pricing .summary-item strong { font-size: 13.5px; }
    #pricing .summary-item span { font-size: 12.5px; }
    #pricing .pricing-note { font-size: 12.5px; line-height: 1.6; }
    #pricing .summary-item { min-width: 0; }

    #pricing .pricing-cta-section { padding-top: 40px; padding-bottom: 40px; }
    #pricing .pricing-cta h2 { font-size: 24px; }
    #pricing .pricing-cta p { font-size: 15px; }

    /* ---------- FAQ ---------- */
    #faq .faq-hero h1 { font-size: 25px; line-height: 1.3; }
    #faq .faq-hero-text { font-size: 15px; line-height: 1.65; }
    #faq .faq-section { padding-top: 40px; padding-bottom: 40px; }
    #faq .faq-intro h2 { font-size: 24px; }
    #faq .faq-intro p { font-size: 15px; line-height: 1.65; }
    #faq .faq-category { margin-bottom: 30px; }
    #faq .faq-cta h2 { font-size: 24px; }

    /* ---------- Contact ---------- */
    .page-title { padding-top: 35px !important; padding-bottom: 35px !important; }
    .page-title h1 { font-size: 26px !important; }
    .page-title p { font-size: 15px !important; }

    .address { padding: 40px 0 !important; }
    .address h2 { font-size: 24px !important; }

    .office-card .p-4 { padding: 20px !important; }
    .office-map, .office-map iframe { height: 250px !important; }

    .contact-form { padding: 40px 0 !important; }
    .contact-form .form-wrapper { padding: 24px 18px !important; }
}

@media (max-width: 480px) {
    #pricing .pricing-hero h1,
    #faq .faq-hero h1 { font-size: 23px; }
    #pricing .pricing-heading h2,
    #faq .faq-intro h2,
    #pricing .pricing-cta h2,
    #faq .faq-cta h2 { font-size: 22px; }
}

/* =====================================================
   Privacy / Policy pages
   ===================================================== */
@media (max-width: 991px) {

    /* Contents list: compact scrollable box instead of an 18-link wall */
    .privacy-nav {
        max-height: 190px !important;
        overflow-y: auto !important;
        padding: 12px !important;
        margin-bottom: 20px !important;
    }
    .privacy-nav ul li { margin-bottom: 2px !important; }
    .privacy-nav ul li a {
        font-size: 14px !important;
        padding: 7px 10px !important;
    }

    /* Anchor jumps shouldn't hide under the fixed header */
    .policy-item { scroll-margin-top: 90px; }
}

@media (max-width: 767px) {

    .policy-hero {
        padding: 40px 0 !important;
        margin-bottom: 25px !important;
    }
    .policy-hero h1 { font-size: 26px !important; margin-bottom: 10px !important; }
    .policy-hero p  { font-size: 15px !important; line-height: 1.6 !important; }

    .policy-item {
        padding: 20px 16px !important;
        margin-bottom: 18px !important;
    }
    .policy-item .title h2 {
        font-size: 19px !important;
        padding-bottom: 10px !important;
        margin-bottom: 14px !important;
    }
    .policy-item .policy-details p,
    .policy-item .policy-details ul li {
        font-size: 15px !important;
        line-height: 1.65 !important;
        word-break: break-word;
    }
    .policy-item .policy-details ul { padding-left: 18px !important; }
}