/*!
Theme Name: dvr
Theme URI: http://underscores.me/
Author: westonik
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dvr
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dvr is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


*{
font-family: poppins;
}


body {
    font-family: var(--font-main);
  	overflow-x:hidden;
}
a {
    text-decoration:none;
}

/* 1. Top Bar Styling (Stays Static) */
.dvr-top-bar {
    background-color: var(--dvr-blue-bright); 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 16px;
    position: relative;
    z-index: 1001; 
}

/* 2. Main Header (Absolute by default) */
.site-header {
    position: absolute;
    width: 100%;
    left: 0;
    top: auto; /* Lets it sit naturally below Top Bar */
    z-index: 999;
    transition: var(--transition-smooth); /* Smooth transition for color change */
}

/* 3. Sticky Header Class (Added by JS) */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Solid Dark Blue Background when scrolling */
    background: rgba(2, 18, 43, 0.95); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Shadow */
    backdrop-filter: blur(10px); /* Glass blur effect */
    padding-top: 0;
    padding-bottom: 0;
    animation: slideDown 0.35s ease-out; /* Slide down animation */
    z-index: 1002; /* Higher than everything */
}

/* Animation for Sticky Header */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* 4. Navbar Background (Transparent initially) */
.dvr-main-nav {
    background: transparent; 
    padding: 15px 0;
    box-shadow: none; 
    transition: padding 0.3s ease;
}

/* Shrink navbar slightly when sticky */
.is-sticky .dvr-main-nav {
    padding: 10px 0;
}

/* 5. Navigation Links */
.navbar-nav li {
    padding: 0 12px;
}

.navbar-nav li a {
    color: var(--text-light) !important; 
    font-weight:400;
    font-size: 16px !important;
    transition: var(--transition-fast);
    text-transform: capitalize; 
}

.navbar-nav li a:hover {
    color: var(--text-white) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.5); 
}

.navbar-nav .current-menu-item > a {
    color: var(--text-white) !important;
    font-weight: 600;
}


/* 6. Mobile Offcanvas (STRICTLY MOBILE/TABLET ONLY - Leaves Desktop untouched) */
@media (max-width: 991px) {
    
    .dvr-offcanvas {
        background-color: var(--dvr-offcanvas) !important; 
        width: 280px !important;
        /* This height: 100vh fixes the scroll cut-off bug perfectly */
        height: 100vh !important; 
    }

    /* Remove default padding so list items touch the edges */
    .dvr-offcanvas .offcanvas-body {
        padding: 0;
    }

    /* Reset the list */
    .dvr-offcanvas .navbar-nav {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* Apply borders to list items */
    .dvr-offcanvas .navbar-nav li {
        padding: 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
    }

    /* Style the links inside the mobile menu */
    .dvr-offcanvas .navbar-nav li a {
        display: block !important; 
        padding: 16px 25px !important; 
        font-size: 16px !important;
        color: var(--text-light) !important;
        transition: var(--transition-fast);
    }

    /* Mobile Menu Hover Effect */
    .dvr-offcanvas .navbar-nav li a:hover {
        background-color: rgba(255, 255, 255, 0.05); 
        color: var(--text-white) !important;
        text-shadow: none !important; 
    }

    /* Active/Current Menu Item on Mobile */
    .dvr-offcanvas .navbar-nav .current-menu-item > a {
        background-color: var(--dvr-blue-bright) !important; 
        color: var(--text-white) !important;
        font-weight: 500 !important;
    }
}


/* 7. Logo */
.site-title a, .navbar-brand a {
    color: #fff !important;
}
.custom-logo-link img {
    max-height: 50px; 
    width: auto;
}
.top-socials i{
    font-size:18px;
}
   .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
     box-shadow: none !important;
}

/* =========================================
   Lenis Smooth Scroll Recommended CSS
   ========================================= */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* =========================================
   HERO BANNER STYLES
   ========================================= */

/* 1. The Main Banner Section */
.dvr-hero-banner {
    position: relative;
    /* Height: 100% of the viewport height minus header height approx */
    min-height: 85vh; 
    
    /* BACKGROUND IMAGE: */
    background-image: url('http://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/homebanner.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 2. Dark Blue Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient from solid dark blue to transparent */
    background: linear-gradient(90deg, rgba(2, 18, 43, 0.95) 0%, rgba(2, 18, 43, 0.6) 60%, rgba(2, 18, 43, 0.2) 100%);
    z-index: 1;
}

/* 3. Typography */
.hero-title {
    font-size: 3.5rem; /* Large text for desktop */
    line-height: 1.2;
    font-weight: 700;
}

/* The Cyan/Blue Text Color */
.text-highlight {
    color: var(--dvr-cyan); 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px; 
    color: var(--text-muted) !important; 
}

/* 4. Custom Buttons */

/* Primary Button (Gradient Blue) */
.btn-dvr-primary {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 4px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.btn-dvr-primary:hover {
    color: #fff !important;
}
/* Outline Button (White Border) */
.btn-outline-white {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-weight: 500;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
    .dvr-hero-banner {
        min-height: 600px; 
        text-align: center; 
    }
    
    .hero-title {
        font-size: 2.2rem; 
    }
    
    .hero-desc {
        margin: 0 auto 2rem auto; 
        font-size: 1rem;
    }
    
    /* Center the buttons container on mobile */
    .d-flex.gap-3 {
        justify-content: center;
    }
    
    /* Darker overlay on mobile so text is easier to read */
    .hero-overlay {
        background: rgba(2, 18, 43, 0.9); 
    }
}
/* =========================================
   CORE SERVICES SECTION STYLES
   ========================================= */

/* 1. Section Background */
.dvr-services-section {
    background: linear-gradient(to left bottom, #ffffff 0%, #e0f2fe 100%);
  	padding:80px 0;
}

/* 2. Heading Styling */
.section-title {
    color: var(--dvr-navy-dark); 
    font-size: 2.2rem;
}

/* Small blue line under heading */
.dvr-separator {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan);
    border-radius: 2px;
    margin-top: 10px;
}

/* 3. Service Card Container */
.service-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); 
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect: Lift up slightly */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 198, 255, 0.15); 
}

/* 4. Icon Styling (The Blue Square) */
.icon-box {
    width: 55px;
    height: 55px;
    background: var(--gradient-icon);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 26px; 
    box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3);
}

/* 5. Typography */
.service-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark); 
    line-height: 1.4;
}

.service-desc {
    color: var(--text-gray); 
    line-height: 1.6;
    font-size: 0.9rem;
}
/* =========================================
   WHY CHOOSE US SECTION
   ========================================= */

/* 1. Background Gradient */
.dvr-why-choose {
    background: linear-gradient(90deg, #ffffff 0%, #e0f2fe 100%);
    border-top: 1px solid rgba(0,0,0,0.03); 
  	padding:80px 0;
}

/* 2. Heading Separator (Left Aligned) */
.dvr-separator-left {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan); 
    border-radius: 2px;
    margin-top: 10px;
    /* Center on mobile, left on desktop */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .dvr-separator-left {
        margin-left: 0;
        margin-right: 0;
    }
}

/* 3. Feature Item Container */
.feature-item {
    background-color: rgba(255, 255, 255, 0.6); 
    padding: 15px;
  	border:1px solid var(--border-color);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateX(5px); 
    background-color: #fff;
}

/* 4. Checkmark Icon Styling */
.feature-icon {
    color: var(--dvr-blue-primary); 
    font-size: 24px;
    display: flex;
    align-items: center;
}

/* 5. Text Styling */
.feature-text {
    color: var(--text-dark); 
    font-size: 1rem;
}
/* =========================================
   CTA SECTION STYLES
   ========================================= */

.dvr-cta-section {
    position: relative;
    padding: 100px 0; 
    background-image: url('http://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/dvrcta.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Dark Blue Overlay (Left to Right Fade) */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay);
    z-index: 1;
}

/* Typography */
.cta-title {
    font-size: 2.8rem;
    line-height: 1.25;
}

.cta-desc {
    font-size: 1.15rem;
    max-width: 600px;
    font-weight: 400;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dvr-cta-section {
        padding: 60px 0;
        text-align: center;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-desc {
        margin: 0 auto 2rem auto;
    }
    
    /* Make overlay darker on mobile for readability */
    .cta-overlay {
        background: rgba(2, 18, 43, 0.9);
    }
}
/* =========================================
   GET IN TOUCH SECTION STYLES
   ========================================= */

/* 1. Section Background */
.dvr-contact-section {
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 100%);
  	padding:80px 0;
}

/* 2. Input Fields Styling */
.dvr-input {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 8px 20px; 
    font-size: 15px;
    color: var(--text-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); 
    transition: var(--transition-fast);
}

/* Placeholder Color */
.dvr-input::placeholder {
    color: var(--text-placeholder); 
    font-weight: 400;
}

/* 3. Input Focus State (When you click inside) */
.dvr-input:focus {
    background-color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 198, 255, 0.15); 
    border-color: var(--dvr-cyan); 
    outline: none;
}

/* 4. Textarea Resize */
textarea.dvr-input {
    resize: none; 
}

/* =========================================
   ABOUT PAGE REVISED STYLES
   ========================================= */

/* 1. Page Header */
.dvr-page-header {
    height: 350px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/03/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 80px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}
  .dvr-about-intro{
    padding:80px 0;
  }

/* 2. Heading Separators */
.section-title {
    color: var(--dvr-navy-dark);
    font-size: 2.2rem;
    line-height: 1.2;
}

/* The Cyan/Blue Text Color */
.text-highlight {
    color: var(--dvr-cyan); 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Left Aligned Separator */
.dvr-separator-left {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan); 
    border-radius: 2px;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Center Aligned Separator */
.dvr-separator {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan);
    border-radius: 2px;
    margin-top: 10px;
}

/* 3. Overlapping Images Logic */
.about-images-wrapper {
    position: relative;
    min-height: 400px; 
}

/* Back Image (Larger) */
.img-back {
    position: relative;
    z-index: 1;
}

/* Front Image (Smaller, Overlapping) */
.img-front {
    width: 55%;
    position: absolute;
    bottom: -30px; 
    right: 0;      
    z-index: 2;
    border: 8px solid #ffffff; 
}

/* 4. Experience Badge Positioning */
.experience-badge {
    position: absolute;
    bottom: -20px;
    left: 20px;
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);
    padding: 26px 38px;
    border-radius: 12px;
    z-index: 3;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 5. VMG Cards */
  
  .vmg-card h3{
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.4;
  }
  .vmg-card p{
    color: var(--text-gray) !important; 
    line-height: 1.6;
    font-size: 0.9rem;
}
  
.bg-light-gradient {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.vmg-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.vmg-card:hover {
    box-shadow: 0 15px 30px rgba(0, 198, 255, 0.15);
}
.icon-circle {
    width: 80px; height: 80px;
    background: rgba(0, 198, 255, 0.1);
    color: var(--dvr-blue-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    transition: all 0.4s ease;
}
.vmg-card:hover .icon-circle {
    background: var(--gradient-icon);
    color: #fff;
}

/* Responsive: Mobile Fixes */
@media (max-width: 991px) {
    .about-images-wrapper {
        min-height: auto;
        margin-bottom: 50px;
    }
    .img-back {
        width: 100%;
    }
    .img-front {
        width: 50%;
        bottom: -20px;
        right: -10px;
    }
    .experience-badge {
            left: 11px;
        padding: 12px;
    }
}
/* =========================================
   PAGE HEADER (ABOUT & SERVICES)
   ========================================= */
/* 1. Page Header */
.dvr-page-header {
    height: 350px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/about3.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 80px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}
/* Center Aligned Separator */
.dvr-separator {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan);
    border-radius: 2px;
    margin-top: 10px;
}
  .section-title {
    color: var(--dvr-navy-dark) !important;
    font-size: 2.2rem;
    line-height: 1.2;
}

/* =========================================
   SERVICES PAGE SPECIFIC STYLES
   ========================================= */

/* Detailed Service Cards */
.service-detail-card {
    border: 1px solid rgba(0,0,0,0.02);
}
.service-detail-card:hover {
    box-shadow: 0 15px 35px rgba(0, 198, 255, 0.15) !important;
}

/* Image Wrapper & Overlay */
.card-img-wrapper {
    height: 220px;
}
.card-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.service-detail-card:hover .card-img-wrapper img {
    transform: scale(1.1); /* Zoom effect */
}
.img-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(2, 18, 43, 0.8) 0%, rgba(2, 18, 43, 0.1) 100%);
    z-index: 1;
}

/* Floating Icon */
.card-floating-icon {
    position: absolute;
    top: 190px; 
    right: 30px;
    width: 60px; height: 60px;
    background: var(--gradient-icon);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    z-index: 2;
    border: 4px solid #fff;
    transition: transform 0.4s ease;
}
.service-detail-card:hover .card-floating-icon {
    transform: rotateY(180deg); /* 3D Flip */
}

/* Links */
.service-link {
    color: var(--dvr-blue-primary);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}
.service-link:hover { color: var(--dvr-navy-dark); }
.service-link .transition-icon { transition: transform 0.3s ease; }
.service-link:hover .transition-icon { transform: translateX(5px); }

/* Process Section */
.dvr-process-section { background-color: #ffffff; }

.process-line {
    position: absolute;
    top: 40px; 
    left: 10%; width: 80%; height: 2px;
    border-top: 2px dashed rgba(0, 198, 255, 0.3);
    z-index: 1;
}

.step-number {
    width: 80px; height: 80px;
    background: #ffffff;
    border: 1px solid var(--dvr-cyan);
    color: var(--dvr-navy-dark);
    font-size: 28px; font-weight: 800;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: all 0.4s ease;
}
.process-step:hover .step-number {
    background: var(--gradient-icon);
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.1);
}
  .step-title{
    font-weight: 700 !important;
    font-size: 1.1rem;
    color: var(--text-dark) !important;
    line-height: 1.4;
  }
  .step-desc{
    color: var(--text-gray) !important;
    line-height: 1.6;
    font-size: 0.9rem;
  }
.step-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limits to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5; /* Ensure a consistent line height */
    height: 4.5em;    /* 3 lines * 1.5 line-height = 4.5em */
}
  /* =========================================
   CTA SECTION & OVERLAYS STYLES
   ========================================= */

/* 1. The Main CTA Background Section */
.dvr-cta-section {
    position: relative;
    padding: 100px 0; 
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/dvrcta.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* 2. The Dark Blue Overlay */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay);
    z-index: 1;
}

/* 3. CTA Typography */
.cta-title {
    font-size: 2.8rem;
    line-height: 1.25;
}

.cta-desc {
    font-size: 1.15rem;
    max-width: 600px;
    font-weight: 400;
}

/* 4. The Text Highlight Color */
.text-highlight {
    color: var(--dvr-cyan); 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 5. Primary Theme Button (Gradient Blue) */
.btn-dvr-primary {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 4px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-dvr-primary:hover {
    color: #fff;
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4); 
}

/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
    .dvr-cta-section {
        padding: 60px 0;
        text-align: center;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-desc {
        margin: 0 auto 2rem auto;
    }
    
    /* Make overlay darker on mobile */
    .cta-overlay {
        background: rgba(2, 18, 43, 0.9);
    }
}
/* =========================================
   PAGE HEADER (BLOG)
   ========================================= */
.dvr-page-header {
    min-height: 350px; 
    height: auto;      
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/03/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 80px; 
    padding-bottom: 60px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}

/* =========================================
   BLOG POST CARDS
   ========================================= */
.blog-card {
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 198, 255, 0.1) !important;
}

/* Post Image */
.blog-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9; 
}
.blog-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.08); 
}

/* Floating Date Badge */
.blog-date {
    position: absolute;
    top: 15px; left: 15px;
    background: var(--gradient-icon);
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Read More Link */
.service-link {
    color: var(--dvr-blue-primary);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
}
.service-link:hover { color: var(--dvr-navy-dark); }
.service-link .transition-icon { transition: transform 0.3s ease; }
.service-link:hover .transition-icon { transform: translateX(5px); }
.hover-cyan:hover { color: var(--dvr-blue-primary) !important; transition: color 0.3s; }

/* =========================================
   SIDEBAR & WIDGETS
   ========================================= */
.widget {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.02);
}
.widget-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
    color: var(--dvr-navy-dark);
}
.widget-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--dvr-cyan);
    border-radius: 2px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { 
    margin-bottom: 12px; 
    border-bottom: 1px solid #f1f5f9; 
    padding-bottom: 12px; 
}
.widget ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.widget ul li a { color: var(--text-gray); text-decoration: none; transition: 0.3s; }
.widget ul li a:hover { color: var(--dvr-blue-primary); padding-left: 5px; }

/* Search Widget Fix */
.widget_search input[type="search"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 10px;
    outline: none;
}
.widget_search input[type="search"]:focus { border-color: var(--dvr-cyan); }
.widget_search input[type="submit"] {
    background: var(--dvr-blue-primary); color: #fff; border: none; padding: 8px 20px; border-radius: 6px; cursor: pointer;
}

/* Pagination Styling */
.nav-links { display: flex; gap: 10px; margin-top: 20px; }
.nav-links .page-numbers {
    padding: 10px 18px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
    color: var(--text-dark); text-decoration: none; font-weight: bold; transition: 0.3s;
}
.nav-links .page-numbers:hover, .nav-links .current {
    background: var(--dvr-blue-primary); color: #fff; border-color: var(--dvr-blue-primary);
}
  .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
  .blog-meta span{
    font-size:12px;
  }
  /* =========================================
   PAGE HEADER (SINGLE POST)
   ========================================= */
.dvr-page-header {
    min-height: 400px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/homebanner.png');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 100px; 
    padding-bottom: 50px;
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}

/* Post Meta in Banner */
.single-post-meta li {
    font-size: 0.95rem;
}
.single-post-meta i {
    color: var(--dvr-cyan); 
}

/* =========================================
   SINGLE POST CONTENT STYLES
   ========================================= */
.single-content-wrapper {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-content);
}

/* Headings inside the post */
.single-content-wrapper h1, 
.single-content-wrapper h2, 
.single-content-wrapper h3, 
.single-content-wrapper h4 {
    color: var(--dvr-navy-dark);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Images inside the post */
.single-content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Blockquotes (Quotes inside the post) */
.single-content-wrapper blockquote {
    background: #F0F9FF; 
    border-left: 5px solid var(--dvr-cyan);
    padding: 20px 30px;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--text-dark);
    border-radius: 0 12px 12px 0;
}
.single-content-wrapper blockquote p:last-child {
    margin-bottom: 0;
}

/* =========================================
   TAGS & POST NAVIGATION
   ========================================= */
.post-tags a {
    display: inline-block;
    background: #f1f5f9;
    color: var(--text-content);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: var(--transition-fast);
}
.post-tags a:hover {
    background: var(--dvr-cyan);
    color: #fff;
}

/* Next / Prev Post Links */
.post-nav-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    transition: var(--transition-fast);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.post-nav-card:hover {
    transform: translateY(-3px);
}
.nav-subtitle {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-placeholder);
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}
.nav-title {
    color: var(--dvr-navy-dark);
    font-weight: 700;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}
.post-nav-card:hover .nav-title {
    color: var(--dvr-blue-primary);
}

/* =========================================
   COMMENTS SECTION
   ========================================= */
.comments-area {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-top: 40px;
}
.comments-title, .comment-reply-title {
    font-weight: 700;
    color: var(--dvr-navy-dark);
    margin-bottom: 20px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #F8FAFC;
}
.comment-form input:focus, .comment-form textarea:focus {
    outline: none;
    border-color: var(--dvr-cyan);
    box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.1);
}
.comment-form input[type="submit"] {
    background: var(--gradient-primary);
    color: #fff; border: none; padding: 12px 30px; border-radius: 6px;
    font-weight: 600; cursor: pointer; transition: 0.3s;
}
.comment-form input[type="submit"]:hover {
    box-shadow: 0 8px 15px rgba(0, 114, 255, 0.3);
    transform: translateY(-2px);
}
  .shareiconblog{
    width: 40px;
    height: 40px;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */
  
/* 1. Page Header */
.dvr-page-header {
    height: 350px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/02/about3.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    /* Margin top accounts for the absolute header on top */
    padding-top: 80px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}

/* 2. Heading Separators (Reusing Home Page Style) */
.section-title {
    color: var(--dvr-navy-dark);
    font-size: 2.2rem;
    line-height: 1.2;
}

/* The Cyan/Blue Text Color */
.text-highlight {
    color: var(--dvr-cyan); 
    
    /* Optional: Makes the text look like a gradient */
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Left Aligned Separator */
.dvr-separator-left {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan); 
    border-radius: 2px;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Center Aligned Separator */
.dvr-separator {
    width: 60px;
    height: 4px;
    background-color: var(--dvr-cyan);
    border-radius: 2px;
    margin-top: 10px;
}

/* 1. Contact Info Cards (Left Side) */
.contact-info-card {
    border: 1px solid rgba(0,0,0,0.03);
}

.contact-info-card:hover {
    box-shadow: 0 10px 25px rgba(0, 198, 255, 0.1) !important;
    border-color: rgba(0, 198, 255, 0.2);
}

/* 2. Small Icon Circles */
.icon-circle-sm {
    width: 55px;
    height: 55px;
    background: var(--gradient-icon); 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.4s ease;
}


/* Link Hover Effect inside Cards */
.hover-cyan {
    transition: var(--transition-fast);
}
.hover-cyan:hover {
    color: var(--dvr-blue-primary) !important;
}

/* 3. Form Wrapper (Right Side) */
.contact-form-wrapper {
    border: 1px solid #dedede;
	border-radius:10px !important;
    /* Slight blue glow shadow to make the form pop */
    box-shadow: 0 15px 40px rgba(2, 18, 43, 0.08) !important; 
}

/* 4. Inputs Styling (Ensuring it applies specifically here) */
.dvr-input {
    background-color: #F8FAFC; /* Very light grey/blue */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 15px;
    color: var(--text-dark);
    transition: var(--transition-fast);
}

.dvr-input::placeholder {
    color: var(--text-placeholder);
    font-weight: 400;
}

/* Focus State (When typing in the box) */
.dvr-input:focus {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 198, 255, 0.15); /* Soft glowing ring */
    border-color: var(--dvr-cyan); /* Cyan border */
    outline: none;
}

/* Textarea specifically */
textarea.dvr-input {
    resize: none;
}

/* 5. Map Section */
.dvr-map-section iframe {
    /* Removes the tiny white gap below iframes */
    display: block; 
    filter: grayscale(20%); /* Optional: tones down map colors slightly to fit theme */
}
.btn-dvr-primary{
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
  .btn-dvr-primary:hover{
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4);
  }


/* =========================================
   TERMS & CONDITIONS STYLES
   ========================================= */

/* 1. Page Header */
.dvr-page-header {
    height: 350px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/03/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 80px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}

/* 2. Sticky Sidebar Navigation */
.terms-nav-card {
    position: sticky;
    top: 100px; /* Sticks 100px from top when scrolling */
    border: 1px solid rgba(0,0,0,0.03);
}

.terms-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-nav-list li {
    margin-bottom: 2px;
}

.terms-nav-list a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}

.terms-nav-list a:hover {
    background-color: #F0F9FF; /* Light Cyan bg */
    color: var(--dvr-navy-dark); /* Dark text */
    border-left-color: var(--dvr-cyan); /* Cyan accent */
    padding-left: 20px; /* Slide effect */
}

.terms-nav-list i {
    font-size: 1.2rem;
    color: var(--dvr-cyan);
}

/* 3. Main Content Area */
.terms-content-wrapper {
    color: var(--text-content);
    line-height: 1.8;
}

.terms-content-wrapper h3 {
    color: var(--dvr-navy-dark);
    font-weight: 700;
    margin-top: 2.5rem; /* Space before new section */
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

/* Cyan Underline for headings */
.terms-content-wrapper h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--dvr-cyan);
    border-radius: 2px;
}

.terms-content-wrapper p { margin-bottom: 1.5rem; }
.terms-content-wrapper ul { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.terms-content-wrapper ul li { margin-bottom: 0.5rem; }

/* =========================================
   PRIVACY POLICY STYLES
   ========================================= */

/* 1. Page Header (Reused Standard) */
.dvr-page-header {
    height: 350px;
    background-image: url('https://shamiya.westonik.com/dvr/wp-content/uploads/2026/03/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 80px; 
}
.header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--gradient-header-overlay);
    z-index: 1;
}

/* 2. Sticky Sidebar Navigation */
.privacy-nav-card {
    position: sticky;
    top: 100px; /* Sticks 100px from top when scrolling */
    border: 1px solid rgba(0,0,0,0.03);
}

.privacy-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.privacy-nav-list li {
    margin-bottom: 2px;
}

.privacy-nav-list a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-gray);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}

.privacy-nav-list a:hover, 
.privacy-nav-list a.active {
    background-color: #F0F9FF; /* Very Light Cyan bg */
    color: var(--dvr-navy-dark); /* Dark text */
    border-left-color: var(--dvr-cyan); /* Cyan accent */
    padding-left: 20px; /* Slide effect */
}

.privacy-nav-list i {
    font-size: 1.2rem;
    color: var(--dvr-cyan);
}

/* 3. Main Content Area */
.privacy-content-wrapper {
    color: var(--text-content);
    line-height: 1.8;
}

.privacy-content-wrapper h3 {
    color: var(--dvr-navy-dark);
    font-weight: 700;
    margin-top: 2.5rem; /* Space before new section */
    margin-bottom: 1rem;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

/* Cyan Underline for headings */
.privacy-content-wrapper h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--dvr-cyan);
    border-radius: 2px;
}

.privacy-content-wrapper p {
    margin-bottom: 1.5rem;
}

.privacy-content-wrapper ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.privacy-content-wrapper ul li {
    margin-bottom: 0.5rem;
}


/* =========================================
   FOOTER STYLES (DVR Theme)
   ========================================= */

/* 1. Main Footer Background */
.dvr-footer {
    background-color: #000; 
    font-size: 15px;
    margin-top: auto; 
}

/* 2. Headings */
.footer-heading {
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}

/* 3. The Cyan Underline */
.footer-underline {
    width: 40px;
    height: 3px;
    background-color: var(--dvr-cyan); 
    border-radius: 2px;
}

/* 4. Text Colors */
.text-cyan {
    color: var(--dvr-cyan) !important;
}

.text-white-50 {
    color: var(--text-muted) !important; 
}

/* 5. Links Styling */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--dvr-cyan); 
    padding-left: 5px; 
}

/* 6. Social Media Circles */
.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: var(--dvr-navy-dark); 
    border-radius: 50%;
    text-decoration: none;
    font-size: 20px;
    transition: var(--transition-fast);
}

.social-circle:hover {
    background-color: var(--dvr-cyan); 
    color: #fff; 
    transform: translateY(-3px);
}

/* 7. Copyright Section */
.site-info {
    background-color: var(--dvr-navy-deeper); 
}