/*
Theme Name: Prince Property Inc
Theme URI: https://codeoptix.in/
Author: CodeOptix Web Development Company In Chandigarh, India
Author URI: https://codeoptix.in/
Description: A custom WordPress theme Developed by CodeOptix Web Development Company In Chandigarh, India
Version: 1.0.0
Text Domain: princeproperty
*/


/* ============================================================
       CSS VARIABLES
    ============================================================ */
    :root {
        --nav-blue: #101F5B;
        --brand-red: #951A36;

        /* Fluid type scale — adjusted per breakpoint below */
        --contact-font:   18px;
        --menu-font:      18px;
        --proposal-font:  18px;
        --menu-pad-x:     10px;
        --nav-height:     66px;
        --logo-width:     200px;
    }

    /* ============================================================
       BASE / RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; overflow-x: hidden; }

    /* ============================================================
       TOP BAR
    ============================================================ */
    .top-bar { background: #fff; padding: 12px 0; }

    .header-contact-link {
        color: var(--nav-blue);
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: var(--contact-font);
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }
    .header-contact-link i { color: var(--brand-red); margin-right: 6px; }

    .logo-img {
        max-width: var(--logo-width);
        height: auto;
        display: block;
    }

    .btn-outline-dark.contact-btn {
        padding: 10px 18px !important;
        border: 2px solid var(--nav-blue);
        border-radius: 0;
        font-weight: 700;
        font-size: var(--contact-font);
        color: var(--nav-blue);
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-outline-dark.contact-btn:hover { background: var(--nav-blue); color: #fff; }

    #rightside { margin-top: 10px; }
    #rightside > div { gap: 16px !important; }

    /* ============================================================
       NAVIGATION — DESKTOP
    ============================================================ */
    .main-nav-wrapper {
        position: relative;
        z-index: 1000;
        margin-bottom: -30px;
    }

    .main-nav-container {
        background: var(--nav-blue);
        min-height: var(--nav-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    /* Nav list */
    .navbar-nav {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: nowrap;   /* keep single row */
    }

    .navbar-nav .menu-item {
        position: relative;
        display: flex;
        align-items: center;
    }

    .navbar-nav .menu-item > a {
        color: #fff !important;
        text-decoration: none;
        font-weight: 600;
        font-size: var(--menu-font);
        padding: 0 var(--menu-pad-x) !important;
        display: flex;
        align-items: center;
        height: var(--nav-height);
        transition: background 0.25s, color 0.25s;
        white-space: nowrap;
        font-family: 'Poppins', sans-serif;
    }
    .navbar-nav .menu-item > a:hover { background: rgba(255,255,255,0.1); }

    /* Dropdown caret */
    .menu-item-has-children > a::after {
        content: "\F229";
        font-family: "bootstrap-icons";
        margin-left: 7px;
        font-size: 13px;
    }

    /* Dropdown */
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--nav-blue);
        min-width: 240px;
        list-style: none;
        padding: 8px 0;
        display: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        border-top: 3px solid var(--brand-red);
        z-index: 999;
    }

    @media (min-width: 992px) {
        .menu-item-has-children:hover > .sub-menu {
            display: block;
            animation: fadeIn 0.25s ease;
        }
    }

    #menu-primary-menu .sub-menu .menu-item > a {
        height: auto !important;
        padding: 11px 22px !important;
        font-size: 15px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
        white-space: normal;
    }
    .sub-menu li:last-child > a { border-bottom: none !important; }

    /* Proposal CTA */
    .btn-proposal {
        background: var(--brand-red);
        color: #fff !important;
        font-weight: 600;
        font-size: var(--proposal-font);
        padding: 0 var(--menu-pad-x);
        display: flex;
        align-items: center;
        gap: 8px;
        height: var(--nav-height);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background 0.25s;
    }
    .btn-proposal:hover { background: #7a1528; color: #fff !important; }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .breadcrumb-container a {
        color: inherit !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }
    .hero-city-bg .col-lg-8.position-relative {
        padding: 0px;
        max-width: 50%;
    }
    /* ============================================================
       BREAKPOINT: 1920 x 1080  (wide desktop)
    ============================================================ */
    @media (min-width: 1681px) {
        :root {
            --contact-font:  20px;
            --menu-font:     18px;
            --proposal-font: 19px;
            --menu-pad-x:    32px;
            --nav-height:    70px;
            --logo-width:    230px;
        }
        #rightside > div { gap: 24px !important; }
    }

    /* ============================================================
       BREAKPOINT: 1680 x 1050
    ============================================================ */
    @media (min-width: 1441px) and (max-width: 1680px) {
        :root {
            --contact-font:  18px;
            --menu-font:     17px;
            --proposal-font: 18px;
            --menu-pad-x:    26px;
            --nav-height:    68px;
            --logo-width:    215px;
        }
    }

    /* ============================================================
       BREAKPOINT: 1440 x 900
    ============================================================ */
    @media (min-width: 1367px) and (max-width: 1440px) {
        :root {
            --contact-font:  18px;
            --menu-font:     18px;
            --proposal-font: 17px;
            --menu-pad-x:    30px;
            --nav-height:    66px;
            --logo-width:    205px;
        }
    }

    /* ============================================================
       BREAKPOINT: 1366 x 768
    ============================================================ */
 
    @media (min-width: 1281px) and (max-width: 1366px) {
        :root {
            --contact-font: 18px;
            --menu-font: 18px;
            --proposal-font: 18px;
            --menu-pad-x: 20px;
            --nav-height: 66px;
            --logo-width: 200px;
        }
    
        /* Also apply directly to elements so variables aren't needed */
        .header-contact-link          { font-size: 18px !important; }
        .navbar-nav .menu-item > a    { font-size: 18px !important; padding: 0 20px !important; height: 66px !important; }
        .btn-proposal                 { font-size: 18px !important; padding: 0 20px !important; height: 66px !important; }
        .logo-img                     { max-width: 200px !important; }
        #rightside > div { gap: 12px !important; }
    }
    
    /* ============================================================
       BREAKPOINT: 1200px x 1400px
    ============================================================ */
    
    @media (min-width: 1200px) and (max-width: 1400px) {
         :root {
            --contact-font: 18px;
            --menu-font: 18px;
            --proposal-font: 18px;
            --menu-pad-x: 20px;
            --nav-height: 66px;
            --logo-width: 200px;
        }
    
        /* Also apply directly to elements so variables aren't needed */
        .header-contact-link          { font-size: 18px !important; }
        .navbar-nav .menu-item > a    { font-size: 18px !important; padding: 0 20px !important; height: 66px !important; }
        .btn-proposal                 { font-size: 18px !important; padding: 0 20px !important; height: 66px !important; }
        .logo-img                     { max-width: 200px !important; }
        #rightside > div { gap: 12px !important; }
    }
    /* ============================================================
       BREAKPOINT: 1280 x 800
    ============================================================ */
    @media (min-width: 1025px) and (max-width: 1280px) {
        :root {
            --contact-font: 15px;
            --menu-font: 18px;
            --proposal-font: 18px;
            --menu-pad-x: 18px;
            --nav-height: 62px;
            --logo-width: 200px;
        }
        #rightside > div { gap: 10px !important; }
        .btn-outline-dark.contact-btn { padding: 8px 14px !important; }
    }
    
   

    /* ============================================================
       BREAKPOINT: 1024 x 600 / 1024 x 768  (small laptop)
    ============================================================ */
    @media (min-width: 900px) and (max-width: 1100px) {
        :root {
            --contact-font:  16px;
            --menu-font:     16px;
            --proposal-font: 16px;
            --menu-pad-x:    14px;
            --nav-height:    58px;
            --logo-width:    165px;
        }
        #rightside > div { gap: 8px !important; }
        .btn-outline-dark.contact-btn { padding: 7px 10px !important; font-size: 13px !important; }
        .btn-proposal { padding: 0 14px !important; gap: 6px !important; }
        .header-email-link { display: none !important; }
    
        footer#colophon .row.mt-1.pt-4 span.small.fw-semibold.text-navy, 
        p.footer-slogan.text-danger.fw-bold.italic, 
        .text-danger, 
        .btn-proposal-footer, 
        .copyright-bar.py-3 .text-navy {
            font-size: 13px !important; /* Hardcoded to bypass variable lookup bugs */
        }
    
        .hero-sub {
            font-size: 16px !important;
            line-height: 30px !important;
        }
        .hero-main {
           font-size: 36px !important;
        }
        
        .sandi-grids .profile-popout-img {
            width: 100% !important;
            margin-top: -28px !important;
        }
        .service-title, .blog-title, .sandi-grids .credential-badge, .doc-intro-p, .doc-instruction-p {
            font-size: 16px !important;
            line-height: 26px !important;
        }
        .services-intro-text, .member-bio, .member-short-bio, .btn-email-team.sm {
             font-size: 16px !important;
        }
        .footer-links a {
            line-height: 36px;
        }
        
        /*About Us Css Start*/
        .building-overlay-wrapper {
            width: 100% !important;
        }
        .building-graphic {
            height: 100% !important;
            width: 100% !important;
            float: right;
            object-fit: inherit !important;
            object-position: center center !important;
        }
        .about-hero-design, .documents-banner-img, .emergency-banner-img, .hero-col-left, .service-hero-img, .faq-hero, section.blog-hero, .contact-hero-mask, .emergency-hero-mask, .blog-detail-hero {
            /* min: 350px, preferred: 35vh, max: 450px */
            height: clamp(350px, 25vh, 350px) !important; 
            min-height: clamp(350px, 25vh, 350px) !important; 
        }
        .hero-title, .commitment-title, .condo-title, .blog-main-title {
            font-size: 42px !important;
            line-height: 62px !important;
        }
        .story-subtitle {
            font-size: 16px !important;
        }
        .video-thumbnail-wrapper {
            min-height: inherit !important;
        }
        .approach-title, .doc-main-h2 {
            font-size: 40px !important;
            line-height: 50px !important;
        }
        .core-services-section .row-cols-lg-5>* {;
            width: 33% !important;
            margin-bottom: 2em;
        }
        .quote-text {
            font-size: 14px !important;
            line-height: 24px !important;
        }
        .member-name, h3.form-section-header, .notice-red-text, .service-intro-styled p:first-of-type, .intro-headline, .notice-red-text, .emergency-text, .faq-red-heading, .entry-content h3, .entry-content h2 {
            font-size: 26px !important;
            line-height: 34px !important;
        }
        .approach-main-img {
            min-height: inherit !important;
            margin-top: 6em !important;
        }
        .header-contact-link {
            margin-right: 3em !important;
        }
        .expectations-layout-section ul li, .custom-check .form-check-label, .row-text, .emergency-list li, .faq-intro-text, .custom-faq-accordion .accordion-body, section ul li {
            font-size: 16px !important;
        }
        .service-img-wrapper img, .blog-img-wrapper img {
            height: inherit !important;
        }
        .sidebar-brand-name {
             font-size: 26px !important;
            line-height: 34px !important;
        }
        .date-badge .day, .date-badge .month {
            display: block;
            font-size: 14px !important;
            line-height: 18px !important;
        }
        .prince-exact-form .form-control, .prince-exact-form .form-select {
            height: 40px !important;
        }
        .emergency-911-banner {
            padding: 40px 0px 40px 325px !important;
        }
        .custom-faq-accordion .accordion-button, .emergency-number-link, .emergency-cat-text {
             font-size: 18px !important;
            padding: 20px !important;
        }
        
        /*Banner Css*/
        /*.hero-col-left, .service-hero-img {*/
        /*    min-height: 350px !important;*/
        /*}*/
        .italic-playfair, .service-detail-main-title {
            font-size: 42px !important;
            line-height: 52px !important;
        }
        .btn-proposal-footer {
            width: 100% !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-content: center !important;
            justify-content: center !important;
        }
        .quote-inner {
            width: 100%;
            border: 6px solid #E9D2D6;
            padding: 0px !important;
            padding-left: 10px !important;
        }
        .emergency-phone {
            height: 234px !important;
        }
        .date-badge {
            padding: 5px 10px!important;
        }
        
        .single-post-title {
            padding-right: 6em!important;
            font-size: 42px !important;
            line-height: 62px !important;
        }
        .entry-content p:first-of-type {
            font-size: 18px !important;
        }
        
        .home .hero-banner {
            height: 70vh !important;
            min-height: 500px !important;
        }
        .home .hero-banner .bg-white.p-4.p-md-5.shadow-lg.slider-content-box {
            padding: 20px !important;
        }
    }

    /* ============================================================
       TABLET — Apple iPad Pro 12.9" landscape  (1024 x 1366 portrait treated as wide tablet)
       This fires when used in landscape (1366 wide) — caught above.
       Portrait (1024 wide) → below mobile breakpoint, uses mobile nav.
    ============================================================ */

    /* ============================================================
       TABLET — Apple iPad 9.7" (768 x 1024) — portrait
       Handled by the mobile block below (max-width: 991px)
    ============================================================ */

    /* ============================================================
       MOBILE / TABLET  ≤ 991px
    ============================================================ */
    @media (max-width: 991px) {

        /* Reset nav wrapper overlap */
        .main-nav-wrapper { margin: 0 !important; }

        /* Hide desktop CTA inside nav bar */
        .main-nav-container > .btn-proposal { display: none !important; }

        /* Transparent nav bar background (toggler sits here) */
        .main-nav-container {
            background: transparent !important;
            min-height: 0 !important;
            padding: 8px 0 !important;
        }

        /* Hamburger */
        .navbar-toggler {
            border: none !important;
            background: none !important;
            color: var(--nav-blue) !important;
            padding: 0;
            float: right;
            line-height: 1;
        }

        /* Collapsed drawer */
        .navbar-collapse {
            background: var(--nav-blue) !important;
            width: 100% !important;
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            padding: 0 !important;
        }

        .navbar-nav {
            flex-direction: column !important;
            width: 100% !important;
        }

        .navbar-nav .menu-item {
            display: block !important;
            width: 100% !important;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navbar-nav .menu-item > a {
            height: 52px !important;
            width: 100% !important;
            padding: 0 20px !important;
            justify-content: flex-start !important;
            font-size: 15px !important;
            font-family: 'Poppins', sans-serif;
        }

        /* Mobile sub-menu */
        .sub-menu {
            position: static !important;
            width: 100% !important;
            background: rgba(0,0,0,0.25) !important;
            padding: 0 !important;
            display: none;
            box-shadow: none !important;
            border-top: none !important;
        }
        .menu-item-has-children.active > .sub-menu { display: block !important; }

        #menu-primary-menu .sub-menu .menu-item > a {
            padding-left: 36px !important;
            font-size: 14px !important;
        }

        /* Mobile CTA appended via pseudo-element */
        .navbar-nav::after {
            content: "Request a Proposal";
            display: block;
            background: var(--brand-red);
            color: #fff;
            padding: 16px;
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
        }

        /* Logo */
        .logo-img { max-width: 150px !important; }

        /* Top-bar contact links — hide on small phones, keep on tablet */
        .header-contact-link { font-size: 14px; }
    }
    
    
    
   /* ============================================================
       iPad 9.7" Portrait Only (768x1024) - Most Reliable on Real Device
    ============================================================ */
    @media only screen 
      and (min-width: 768px) 
      and (max-width: 1024px) {
    
        .logo-img {
            max-width: 170px !important;
        }
    
        #heroSlider div .col-lg-6 {
            max-width: 60% !important;
        }
    
        .hero-banner {
            height: 40vh !important;
            min-height: inherit !important;
        }
        .hero-main {
            font-size: 32px !important;
        }
        .hero-sub {
            font-size: 22px !important;
        }
        .stat-text {
            font-size: 18px!important;
        }
        .section-why-choose .row.mt-0.mt-md-5.pt-0.pt-md-4.g-4 {
            margin-top: 0px !important;
            padding-top: 0px !important;
        }
        .section-profile .col-lg-7.py-5.order-2.order-lg-1 {
            float: left;
            width: 70%;
            order: 1  !important;
            padding-bottom: 30px !important;
        }
        .section-profile .col-lg-5.order-1.order-lg-2 {
            float: right;
            width: 30%;
        }
        .section-profile .col-lg-5.order-1.order-lg-2 img.img-fluid.profile-popout-img {
            width: 100%;
            position: relative;
            right: 115px;
            min-width: 160%;
        }
        .sandi-grids .profile-header-flex {
            justify-content: left !important;
        }
        .section-why-choose {
            padding-bottom: 40px !important;
        }
        section.section-services.py-5.mt-5 {
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-bottom: 0px !important;
        }
        .header-contact-link {
            font-size: 15px !important;
            margin-left: 30px;
        }
        .navbar-expand-lg .navbar-nav {
            flex-direction: row;
            margin-left: 10px !important;
        }
        section#home-section-one {
             margin-top: 0px !important;
        }
        section.section-services.py-5.mt-5 .container .row.mb-5 {
            width: 100%;
            display: inline-block;
        }
        section.section-services.py-5.mt-5 .container .row.mb-5 .col-lg-8 {
            width: 100%;
        }
        .header-contact-link {
            font-size: 16px !important;
            margin-left: 0px !important;
            margin-right: 10px !important;
        }
        .video-thumbnail-wrapper, .story-main-img {
            min-height: 230px;
        }
        .service-desc {
           font-size: 16px !important;
        }
        .prince-exact-form .form-control, .prince-exact-form .form-select {
            height: 60px !important;
        }
        section.about-intro-section.py-5 h2.intro-headline.mb-4 {
            margin-bottom: 20px !important;
        }
    }
    
     /* ---------- Small tablets (768px – 991px) ---------- */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .sandi-grids .credential-badge {
        padding: 6px 5px !important;
     }
     .sandi-grids .profile-title {
            margin-left: 5em !important;
            text-align: left !important;
            position: relative;
            bottom: 20px;
        }
        .services-intro-text {
            font-size: 16px !important;
        }
        .service-title {
            font-size: 22px !important;
            line-height: 28px !important;
            min-height: 50px !important;
        }
        .blog-excerpt {
            line-height: 27px !important;
        }
        .blog-title {
            font-size: 22px !important;
        }
        #foo-logo-section img.footer-logo.mb-3, #foo-logo-section .col-lg-4.col-md-12.text-center.text-lg-start {
            margin-top: 0px !important;
        }
        footer#colophon {
            padding-top: 0px !important;
        }
        .btn-proposal-footer {
            font-size: 14px !important;
        }
        section.section-blogs.py-5.mt-5 {
            padding-top: 0px !important;
        }
        div#abovecopyright {
            display: inline-block !important;
            width: 100% !important;
        }
        div#abovecopyright-one {
            float: left;
            width: 35%;
        }
        div#abovecopyright-three {
            float: right;
        }
        div#abovecopyright-two {
            padding: 0px;
        }
        div#abovecopyright-three {
            float: right;
            bottom: 31px;
            position: relative;
        }
        .home #abovecopyright-three {
            float: right;
            bottom: 22px;
            position: relative;
        }
        .text-navy {
            color: #101F5B;
            font-size: 16px !important;
            line-height: 22px;
        }
        .copyright-bar.py-3 {
            margin-top: 1em !important;
        }
        .copyright-bar.py-3 .text-navy {
            font-size: 14px !important;
        }
        .cta-banner {
            min-height: 220px !important;
        }
        
        /*About Us css*/
        .about-hero-design, .documents-banner-img, section.blog-hero, .blog-detail-hero {
            height: 350px !important;
        }
         .faq-hero {
            height: 320px !important;
        }
        .hero-title, .faq-hero .container-fluid.p-0 .col-lg-6.d-flex.align-items-center.bg-navy.py-5.px-4.px-md-5.position-relative.min-vh-50 .hero-text-wrapper.z-1.w-100 h1.hero-title.text-start {
            max-width: 100% !important;
        }
        .faq-intro-text, .custom-faq-accordion .accordion-body {
            font-size: 16px !important;
            line-height: 26px !important;
        }
        .hero-title, .faq-hero .container-fluid.p-0 .col-lg-6.d-flex.align-items-center.bg-navy.py-5.px-4.px-md-5.position-relative.min-vh-50 .hero-text-wrapper.z-1.w-100 h1.hero-title.text-start, section.blog-hero h1.blog-main-title.text-white.m-0, 
        .about-hero-design .hero-city-bg .col-lg-6.col-md-7.col-12.hero-text-col .hero-title,
        {
            font-size: 48px !important;
            text-align: left !important;
            line-height: 58px !important;
            max-width: 60% !important;
        }
        section.service-hero-detail.position-relative .hero-col-left.d-flex.align-items-center .hero-inner-content h1.service-detail-main-title.italic-playfair.text-white.m-0 {
            font-size: 38px !important;
            text-align: left !important;
            line-height: 48px !important;
            float: left !important;
            margin-left: 0px !important;
        }
        a.btn-request-proposal-fill.mt-4 {
            float: left;
            width: 65%;
            font-size: 14px;
            padding: 10px !IMPORTANT;
        }
        section.expectations-layout-section.pb-5 .col-lg-4.text-center {
            float: left;
            margin-bottom: 2em;
        }
        section.expectations-layout-section.pb-5 .col-lg-4.text-center img.img-fluid.expect-block-icon {
            float: left;
        }
        section.service-hero-detail.position-relative .hero-col-right {
            /*display: none;*/
            float: left;
            width: 50%;
            flex: inherit;
        }
        
        .service-hero-detail .hero-col-left.d-flex.align-items-center {
            float: left;
            width: 50% !important;
            flex: none;
        }
        section.service-hero-detail.position-relative .hero-col-left.d-flex.align-items-center .hero-inner-content {
            width: 100%;
            margin: 0 auto;
            float: left !important;
            margin-left: 0px !important;
        }
        .service-hero-img {
            min-height: auto !important;
        }
        .service-hero-detail .hero-crown-overlay {
                position: absolute;
                bottom: 0;
                right: -30px;
                width: 140px;
                height: 140px;
                background-image: url('/wp-content/uploads/2026/05/middlebanner-icon.png');
                background-repeat: no-repeat;
                background-position: bottom right;
                opacity: 1;
                z-index: 1;
                background-size: contain;
            }
        section.blog-hero h1.blog-main-title.text-white.m-0, .single-post-title, .blog-detail-hero .hero-overlay .container {
            font-size: 48px !important;
            text-align: left !important;
            line-height: 58px !important;
            max-width: 50%;
            float: left;
            margin-left: 0px;
        }
        .intro-headline, section.emergency-notice.py-4 .notice-red-text.italic {
            font-size: 25px !important;
            line-height: 32px !important;
        }
        
        .intro-p {
            margin-top: 30px !important;
        }
        .service-desc {
            line-height: 20px !important;
        }
        .core-services-section .row-cols-md-3>* {
            width: 49.333333%;
        }
        .core-services-section .service-name {
            min-height: inherit !important;
        }
        .commitment-content-wrapper {
            padding: 0px 40px 40px 40px !important;
        }
        .member-name {
            font-size: 24px !important;
        }
        .member-bio, .member-short-bio, .service-intro-styled p, section ul li, .service-desc {
            font-size: 16px !important;
            line-height: 24px !important;
        }
        .commitment-section {
            margin-bottom: 3em;
        }
        .footer-links a, li.foochild {
            line-height: 30px!important;
        }
        .owner-img {
            float: left!important;
            width: 31%!important;
            margin-right: 23px!important;
            margin-bottom: 0px !important;
            position: relative !important;
            top: 20px !important;
            right: 10px !important;
        }
        .our-team-section .col-lg-8 .team-member-card .btn-email-team.sm {
            font-size: 16px;
        }
        
        /*emergency Page Css*/
        
       section.emergency-hero.overflow-hidden.position-relative .col-lg-6.d-flex.align-items-center.bg-navy.py-5.px-4.px-md-5.position-relative.min-vh-50, .col-lg-6.d-flex.align-items-center.bg-navy.py-5.px-4.px-md-5.position-relative.min-vh-50 {
            float: left;
            text-align: left;
            width: 50%;
            padding-left: 40px !important;
            vertical-align: middle;
        }
        section.emergency-hero.overflow-hidden.position-relative .col-lg-6.hero-img-col.p-0, .col-lg-6.hero-img-col.p-0 {
            float: left;
            width: 50%;
        }
        .emergency-hero .hero-title {
            font-size: 42px;
            margin-left: 0;
            text-align: left !important;
            width: 100%;
            max-width: 100%;
        }
       section.emergency-notice.py-4 p.notice-red-text.italic {
            margin: 0px;
            font-size: 22px ! IMPORTANT;
        }
        section.emergency-notice.py-4 {
            padding-bottom: 0px !important;
        }
        section.emergency-row.py-5 .row-title {
            font-size: 20px;
        }
        section.emergency-row.py-5 .row-text {
            font-family: Poppins;
            font-size: 14px;
            line-height: 1.6;
        }
        section.emergency-row.py-5 .col-md-7.p-4.p-md-5 {
            padding: 15px 10px 15px 30px !important;
        }
        .emergency-list li {
            font-size: 14px !important;
            line-height: 22px !important;
        }
        .date-badge {
            padding: 5px 10px !important;
        }
        .date-badge .day {
            font-size: 20px !important;
        }
        .date-badge .month {
             font-size: 18px !important;
        }
        h1.single-post-title {
            font-size: 24px !IMPORTANT;
            line-height: 30px !important;
        }
        .col-lg-2.post-meta-sidebar {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;
        }
        .entry-content p:first-of-type, .service-intro-styled p:first-of-type {
           font-size: 18px !important;
           line-height: 28px !important;
        }
        .entry-content h3, .entry-content h2 {
            font-size: 24px !important;
        }
        .page-template-page-contact section.section-cta.py-5.position-relative, .page-template-page-contact section .col-lg-7 {
            padding-top: 0px !important;
        }
        .contact-main-body .col-lg-5 .row.g-4.mb-5 {
            margin-bottom: 0px !important;
        }
        .contact-main-body .office-hours {
            margin-top: 20px;
        }
        .contact-main-body .container .col-lg-7 {
            margin-top: 0px;
        }
        section.contact-hero.overflow-hidden h1.hero-title.text-start {
            text-align: left !important;
        }
        .section-emergency .mb-5 {
            margin-bottom: 4rem !important;
        }
        .section-emergency .col-lg-6 .col:nth-child(3), .section-emergency .col-lg-6 .col:nth-child(4) {
            margin-top: 0px;
        }
       .emergency-phone {
            height: 220px!important;
        }
        .phone-bubble-container {
            left: 40px!important;
            top: 41%!important;
        }
        .about-hero-design .col-lg-6.col-md-7.col-12.hero-text-col h1.hero-title, .about-hero-design div h1.hero-title, .emergency-cat-item {
            text-align: left !important;
            font-size: 38px !important;
        }
        .emergency-text {
            font-size: 26px !important;
            line-height: 34px !important;
        }
        section.section-blogs.pb-5.mt-4 {
            margin-top: 2em !important;
        }
    }
    
    
    /* ============================================= */
    /* 3. Ipad mini (820x1180) - Specific */
    /* ============================================= */
    @media only screen 
      and (device-width: 820px) 
      and (device-height: 1180px),
      only screen 
      and (device-width: 1180px) 
      and (device-height: 820px) {
        
       header#masthead .top-bar .container #rightside .d-none.d-lg-flex.justify-content-end.align-items-center.gap-3 {
            display: inline-flex !important;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
        }
        .top-bar .row.align-items-center .col-6.col-lg-4 {
            width: 25% !important;
        }
        header#masthead .top-bar .container .btn-outline-dark.contact-btn {
            padding: 5px 8px !important;
            font-size: 14px !important;
        }
        header#masthead .top-bar .container .header-contact-link {
            font-size: 14px !important;
            margin-left: 0px !important;
            margin-right: 3px !important;
        }
        header#masthead .top-bar .container #rightside {
            margin-top: 10px;
            width: 75%;
        }
        header#masthead .top-bar .container #rightside .d-none.d-md-flex.d-lg-none.justify-content-end.align-items-center.gap-2 {
            top: 3px !IMPORTANT;
            position: relative;
        }
        div#heroSlider .carousel-inner .bg-white.p-4.p-md-5.shadow-lg.slider-content-box {
            padding: 20px !important;
        }
        header#masthead  .navbar-expand-lg .navbar-nav {
            margin-left: 0px !important;
        }
        .section-why-choose {
            padding-bottom: 40px !important;
        }
        #home-section-five .testimonial-content-col {
            padding-left: 44px;
        }
        .video-thumbnail-wrapper {
            min-height: 260px;
        }
    }
    
    
    /* Small phones - Extra Small */
    @media (max-width: 575px) {
        .header-contact-link { 
            font-size: 13px !important; 
        }
        .logo-img { 
            max-width: 135px !important; 
        }
        .header-email-link { 
            display: none !important; 
        }
        
        .hero-main { 
            font-size: 24px !important; 
        }
        .hero-sub, .testimonial-quote, .footer-links a, .footer-heading, .cta-title { 
            font-size: 16px !important; 
        }
        
        .blog-excerpt, 
        footer#colophon .row.mt-1.pt-4 span.small.fw-semibold.text-navy,
        .member-name, 
        .service-intro-styled p:first-of-type, 
        .service-intro-styled p,
        section ul li.
        .doc-intro-p, .doc-instruction-p
        { 
            font-size: 16px !important; 
             line-height: 24px !important;
        }
        
        .member-short-bio { 
            font-size: 14px !important; 
             line-height: 22px !important;
        }
        
        .hero-banner {
            height: 54vh !important;
            min-height: 480px !important;
        }
    
        .hero-banner .col-lg-6.col-md-8.col-12.pb-5.mb-4 {
            margin-bottom: 6em !important;
        }
    
        .sandi-grids .profile-name,
        .services-main-title,
        .testimonial-title,
        .blog-main-title,
        .team-main-title,
        .service-name,
        .member-name.owner,
        .expect-section-heading.text-center.mb-5,
        .services-main-title,
        .sidebar-brand-name,
        .intro-headline,
        .contact-intro-title
        {
            font-size: 32px !important;
            line-height: 46px !important;
        }
        .mobile-padding-top-zero, .home .mobile-padding-top-zero {
            padding-top: 0px !important;
        }
        .mobile-margin-top-zero, h5.doc-red-sub, .col-lg-5.padding-right-zero {
            margin-top: 0px !important;
        }
        .service-title, .blog-title, .date-badge .day, .date-badge .month, .condo-title  {
            font-size: 22px !important;
            line-height: 26px !important;
        }
        .why-choose-section .row.g-5 .col-lg-4.col-md-6 {
            max-width: 100%;
            display: inline-block;
            margin-top: 20px;
             padding: 0px !important;
        }
        .expect-block-title {
            font-size: 20px !important;
            margin-top: 1em !important;
        }
        section.expectations-layout-section .col-lg-4 img {
            float: left;
            width: 35%;
            margin-bottom: 10px;
        }
        .why-choose-section .row.g-5, form#princeDocForm .row.g-5.mb-5 {
            display: inline-block;
            width: 100%;
            margin-left: inherit;
        }
        .video-thumbnail-wrapper {
            min-height: 220px !important;
        }
        .intro-p {
            margin-top: 1em !important;
        }
        .approach-content {
            padding: 0px !important;
        }
        form#princeDocForm .row.g-5.mb-5 div, section.contact-main-body.py-5.padding-right-zero .row.g-5.mobile-full {
            padding: 0px;
            margin: 20px auto;
        }
        #princeDocForm h3.form-section-header {
            margin-bottom: 2em;
        }
        .hero-title {
            text-align: center;
        }
        .section-emergency .row.row-cols-2.g-5.text-start {
            width: 100%;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            text-align: left !important;
        }
        .section-emergency .row.row-cols-2.g-5.text-start .col {
            margin: 0 auto;
            width: 100%;
            text-align: left;
            padding-left: 0px;
        }
        section.contact-main-body.py-5.padding-right-zero .col-lg-5.padding-right-zero .d-flex.align-items-center.mb-4 {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
        .col-lg-5.padding-right-zero, .col-lg-7.contact-from-section {
            padding: 0px;
        }
        .section-emergency .d-flex {
            justify-content: left;
        }
        
    }
    
    
    @media (max-width: 390px) {
        .header-contact-link { font-size: 12px; }
    }