/* healthcare-marketing-agency-dubai.css — styling for healthcare-marketing-agency-dubai.php.
   Loaded after main.css/home-new.css AND after the Tailwind/boxicons CDN links, so
   same-specificity selectors here win via source order — including bare Tailwind/
   Bootstrap utility classes, safe since this file is only ever linked from this page.
   Some rules need !important because the same class name also exists in bootstrap.min.css
   with !important (confirmed directly: .border and .shadow-sm) — a plain override would
   silently lose to those regardless of load order. */

/* Page-exclusive layout/styling (moved from an inline <style> block that used to live
   directly in the PHP file) — hero, SEO/intro band, industry section, services slider,
   healthcare-marketing section, "Why Choose Us", and stats band. */

@media (min-width: 1536px) {
    .container {
        max-width: 1280px !important;
        /* override Tailwind's default */
    }
}

.banner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px;
    min-height: 600px;
    border-radius: 30px;
    background: linear-gradient(to right, #7c3aed, #0a0a0a);
    background-image: url('https://www.digitaladvengers.com/assets/img/all-images/med-banner-copy.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    color: white;
    margin-top: 0;
}

.shape1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, rgba(124,58,237,0.35), rgba(124,58,237,0));
    border-radius: 50%;
    z-index: 1;
}

.shape2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle at center, rgba(192,38,211,0.3), rgba(192,38,211,0));
    border-radius: 50%;
    z-index: 1;
}

.left {
    max-width: 40%;
    z-index: 2;
    padding-left: 80px;
}

.left h1 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 700;
}

.left h2 {
    font-size: 32px;
    font-weight: 700;
    margin-top: 10px;
}

.left p {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
}

.btn {
    margin-top: 30px;
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    color: #ffffff;
    padding: 15px 30px;
    border: 2px solid transparent;
    border-radius: 15px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.btn:hover {
    filter: brightness(1.15);
}

.features {
    position: absolute;
    top: 25%;
    right: 320px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    z-index: 2;
}

.feature-box {
    background-color: rgba(10, 10, 10, 0.55);
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-box i {
    color: #a855f7;
}

.right {
    position: absolute;
    bottom: 0;
    right: 50px;
    z-index: 1;
}

.doctor-img {
    max-height: 550px;
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-5px, 5px);
    }

    50% {
        transform: translate(5px, -5px);
    }

    75% {
        transform: translate(-5px, 5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.doctor-img {
    max-height: 550px;
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 992px) {
    .banner {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
        margin-top: 0px;
    }

    .features {
        position: static;
        margin-top: 30px;
        align-items: center;
    }

    .right {
        position: static;
        margin-top: 30px;
    }

    .left {
        max-width: 100%;
        padding-left: 0px;
        margin-top: 80px;
    }

    .left h1 {
        font-size: 36px;
    }

    .left h2 {
        font-size: 28px;
    }
}

.seo-section {
    position: relative;
    width: 100%;
    /* Full width */
    padding: 60px 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
}

.seo-bg-shape {
    position: absolute;
    top: 20px;
    right: -100px;
    /* Move to the right */
    width: 280px;
    height: 100px;
    background-color: rgba(124, 58, 237, 0.15);
    border-radius: 50px;
    z-index: 0;
}

.seo-section h1,
.seo-section h2,
.seo-section p,
.seo-footer {
    position: relative;
    z-index: 2;
    font-family: "Figtree", sans-serif;
}

.seo-section h1 {
    font-size: 36px;
    color: #a855f7;
    margin-bottom: 20px;
    font-weight: 700;
}

.seo-section h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
}

.seo-section p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.seo-list {
    text-align: center;
    margin-top: 30px;
}

.seo-list p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.seo-footer {
    margin-top: 40px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
}

.industry-section {
    position: relative;
    background: #0a0a0a;
    padding: 60px 20px;
    text-align: center;
}

.industry-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100px;
    background: rgba(124, 58, 237, 0.15);
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%);
}

.industry-section::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100px;
    background: rgba(192, 38, 211, 0.12);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.industry-section h2 {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 50px;
    font-weight: 700;
    z-index: 1;
    position: relative;
}

.industry-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.industry-button {
    display: inline-block;
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    border: 2px solid transparent;
    color: white;
    text-decoration: none;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    min-width: 220px;
    text-align: center;
    transition: filter 0.3s;
    margin: 10px 15px;
}

.industry-button:hover {
    filter: brightness(1.15);
    color: white;
    /* Keep text white on hover */
}

@media (max-width: 600px) {
    .industry-button {
        flex: 0 0 calc(50% - 30px);
        /* 2 items per row with margins considered */
        box-sizing: border-box;
    }
}

.slider-wrapper {
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-slide {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    gap: 1.5rem;
}

.slider-card {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.slider-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .thisisfordesktop {
        margin-top: 2rem;
    }

    .slider-slide {
        flex-direction: column;
        gap: 1rem;
    }

    .slider-card {
        width: 100%;
        min-width: unset;
    }
}

.healthcare-marketing-section {
    padding: 60px 20px;
}

.healthcare-marketing-section .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.healthcare-marketing-section .text {
    flex: 1 1 55%;
}

.healthcare-marketing-section .text h2 {
    font-size: 36px;
    color: #a855f7;
    margin-bottom: 20px;
    font-weight: 700;
}

.healthcare-marketing-section .text p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.healthcare-marketing-section .text ul {
    list-style: disc !important;
    padding-left: 20px !important;
    margin-left: 0;
}

.healthcare-marketing-section .text ul li {
    list-style: disc !important;
    display: list-item !important;
    margin-bottom: 12px;
    line-height: 1.5;
}

.healthcare-marketing-section .image {
    flex: 1 1 40%;
}

.healthcare-marketing-section .image img {
    width: 100%;
    max-height: 600px;
    /* Adjust this value as needed */
    border-radius: 16px;
    object-fit: contain;
    display: block;
}

.why-choose-us-wrapper {
    padding: 60px 20px;
}

.why-choose-us {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    color: #fff;
    border-radius: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.why-choose-us h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 16px;
    letter-spacing: 1px;
    font-weight: 700;
}

.why-choose-us .description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-size: 16px;
}

.why-choose-us .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.why-choose-us .card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    flex: 1 1 300px;
    max-width: 350px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.why-choose-us .card img {
    width: 60px;
    margin: 0 auto 16px;
    display: block;
}

.why-choose-us .card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.why-choose-us .card p {
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .why-choose-us-wrapper {
        padding: 40px 15px;
    }

    .why-choose-us {
        padding: 40px 20px;
        border-radius: 30px;
    }

    .why-choose-us h2 {
        font-size: 26px;
    }

    .why-choose-us .description {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .why-choose-us .card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 25px 16px;
    }

    .why-choose-us .card img {
        width: 50px;
        margin-bottom: 12px;
    }

    .why-choose-us .card h4 {
        font-size: 14px;
    }

    .why-choose-us .card p {
        font-size: 13px;
    }
}

.medical-stats-section {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    color: #fff;
    padding: 60px 20px;
}

.medical-stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.stats-title {
    flex: 1 1 100%;
    text-align: center;
}

.stats-title h2 {
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: 700
}

.stats-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    flex: 1 1 100%;
}

.stat-box {
    flex: 1 1 200px;
    max-width: 250px;
    text-align: center;
}

.stat-box h3 {
    font-size: 48px;
    margin-bottom: 10px;
    font-weight: bold;
}

.stat-box p {
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stats-title h2 {
        font-size: 24px;
    }

    .stat-box h3 {
        font-size: 36px;
    }

    .stat-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Shared template classes (Surface B) */

.testimonial {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.testimonial .quote {
    color: #c026d3;
}

.heading2 h2 {
    color: #ffffff;
}

.heading2 p {
    color: #a0aec0;
}

.heading8 h2 {
    color: #ffffff;
}

.lets-work {
    color: #ffffff;
}

.lets-work2 {
    color: rgba(255, 255, 255, 0.35);
}

button.header-btn11 {
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-image: none;
    color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="number"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(124, 58, 237, 0.25);
    color: #ffffff;
}

textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(124, 58, 237, 0.25);
    color: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: #a0aec0;
}

.choose-section-area .accordian-tabs-area .accordion .accordion-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 9px;
}

.choose-section-area .accordian-tabs-area .accordion .accordion-item h2 button {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

.choose-section-area .accordian-tabs-area .accordion .accordion-item h2 button:not(.collapsed) {
    background: rgba(124, 58, 237, 0.14);
    color: #ffffff;
}

.choose-section-area .accordian-tabs-area .accordion .accordion-item .accordion-body {
    color: #cbd5e1;
}

.cta3-section-area .cta-author-area {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.header-btn5 {
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box;
    border: 2px solid transparent;
    color: #ffffff;
}

.header-btn5:hover {
    filter: brightness(1.15);
}

/* Tailwind/Bootstrap utility classes (Surface C) */

.text-purple-600 {
    color: #a855f7;
}

.text-gray-600 {
    color: #a0aec0;
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.hc-nav-cta {
    background:
        linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box !important;
    border: 2px solid transparent !important;
    color: #ffffff !important;
}

.hc-nav-cta:hover {
    background: linear-gradient(#060612, #060612) padding-box,
        linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #e11d48 100%) border-box !important;
    color: #ffffff !important;
    filter: brightness(1.15);
}