/* ============================================
   RAZZAQ ENGINEERING - OPTIMIZED CSS
   Version: 2.1 | De-duplicated & Minified Structure
   ============================================ */

:root {
    --green-primary: #28a745;
    --green-dark: #1e7e34;
    --green-light: #48c964;
    --green-bg: #e8f5e9;
    --blue-primary: #0056b3;
    --blue-dark: #003d80;
    --blue-light: #007bff;
    --blue-bg: #e3f2fd;
    --white: #ffffff;
    --off-white: #f8f9fa;
    --light-gray: #f1f3f5;
    --gray: #6c757d;
    --dark: #212529;
    --gradient-primary: linear-gradient(135deg, #0056b3 0%, #28a745 100%);
    --gradient-hero: linear-gradient(135deg, rgba(0,86,179,0.9) 0%, rgba(40,167,69,0.85) 100%);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --shadow-green: 0 4px 16px rgba(40,167,69,0.3);
    --shadow-blue: 0 4px 16px rgba(0,86,179,0.3);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --section-spacing: 80px;
}

*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'Poppins', 'Roboto', sans-serif;
    color: var(--dark);
    background-color: var(--white);
    overflow-x: hidden;
    line-height: 1.7;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.3; }
img { max-width: 100%; height: auto; }
a { color: var(--blue-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--green-primary); }

/* Security */
.protected-page, .protected-page * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
.protected-page input, .protected-page textarea, .protected-page select, .protected-page [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
.protected-page img {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}
.protected-page img:not(.clickable) { pointer-events: none; }

/* Preloader */
#preloader {
    position: fixed; inset: 0; background-color: var(--white);
    z-index: 999999; display: flex; align-items: center; justify-content: center;
}
#preloader .spinner-border {
    width: 3.5rem; height: 3.5rem; border-width: 0.3em;
    color: var(--green-primary) !important; border-right-color: var(--blue-primary) !important;
}

/* Animations */
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
    70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes pulse-call {
    0% { box-shadow: 0 0 0 0 rgba(0,86,179,0.7); }
    70% { box-shadow: 0 0 0 18px rgba(0,86,179,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,86,179,0); }
}
@keyframes pulse-play {
    0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.7); }
    70% { box-shadow: 0 0 0 25px rgba(40,167,69,0); }
    100% { box-shadow: 0 0 0 0 rgba(40,167,69,0); }
}
@keyframes footerLine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Header & Top Bar */
.header_top { background: var(--blue-dark) !important; border-bottom: 2px solid var(--green-primary); }
.topbar-link { color: rgba(255,255,255,0.7) !important; font-size: 0.85rem; transition: color var(--transition-normal); }
.topbar-link:hover { color: var(--green-light) !important; }
.topbar-social-icon {
    color: rgba(255,255,255,0.7); margin-left: 5px; display: inline-flex;
    align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: rgba(255,255,255,0.08); transition: all var(--transition-normal); font-size: 13px;
}
.topbar-social-icon:hover { background: var(--green-primary); color: #fff; transform: translateY(-2px); }

/* Navigation */
.navbar { background: var(--white) !important; min-height: 70px; padding: 0; transition: all var(--transition-normal); }
.navbar-scrolled { background: rgba(255,255,255,0.98) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; }
.nav-logo { height: 50px; transition: all var(--transition-normal); }
.navbar-scrolled .nav-logo { height: 42px; }
.navbar .nav-link {
    color: #333 !important; font-weight: 600; font-size: 0.9rem;
    padding: 10px 14px !important; position: relative; transition: all var(--transition-fast); text-transform: capitalize;
}
.navbar .nav-link::after {
    content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px; background: linear-gradient(90deg, #0056b3, #28a745);
    transition: width var(--transition-normal); border-radius: 2px;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--green-primary) !important; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 60%; }

/* Dropdowns */
.dropdown-menu {
    border: none !important; border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; padding: 12px 0;
    margin-top: 15px; border-top: 3px solid var(--green-primary) !important;
    animation: dropdownFadeIn var(--transition-normal); min-width: 220px;
}
.dropdown-item {
    padding: 10px 20px; font-weight: 500; font-size: 0.9rem; color: var(--dark); transition: all var(--transition-fast);
}
.dropdown-item:hover, .dropdown-item.active {
    background: linear-gradient(to right, var(--green-bg), var(--blue-bg));
    color: var(--blue-primary); padding-left: 28px; font-weight: 600;
}
.dropdown-header {
    color: var(--blue-primary) !important; font-weight: 700 !important;
    font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px !important;
}
.dropdown-divider { margin: 5px 0; border-color: rgba(0,0,0,0.05); }

/* Buttons & Toggler */
.btn-gradient {
    background: var(--gradient-primary) !important; border: none !important; color: #fff !important;
    font-weight: 600; font-size: 0.85rem; padding: 10px 20px; border-radius: 50px;
    transition: all var(--transition-normal); box-shadow: var(--shadow-green);
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(40,167,69,0.5); color: #fff !important; }
.navbar-toggler { border: 2px solid var(--green-primary) !important; border-radius: var(--radius-sm); padding: 6px 10px !important; }
.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.25) !important; outline: none !important; }

/* Mobile Offcanvas */
.mobile-offcanvas { width: 320px !important; max-width: 85vw !important; background: linear-gradient(180deg, #003d80 0%, #1a5c2a 100%) !important; border-right: none !important; }
.mobile-menu-header { background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 18px 20px; }
.mobile-menu-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
.mobile-nav-link { display: flex; align-items: center; padding: 15px 20px; color: rgba(255,255,255,0.9) !important; font-weight: 500; font-size: 0.95rem; transition: all var(--transition-normal); }
.mobile-nav-link:hover, .mobile-nav-link.active { background: rgba(255,255,255,0.08); padding-left: 25px; color: #fff !important; }
.mobile-submenu-link { display: block; padding: 12px 20px 12px 55px; color: rgba(255,255,255,0.75) !important; font-size: 0.88rem; }
.mobile-submenu-link:hover { background: rgba(255,255,255,0.1); color: #fff !important; }

/* Hero / Carousel Section */
.hero-carousel .carousel-item { height: 650px; background-size: cover; background-position: center; position: relative; }
.hero-carousel .carousel-item::before { content: ''; position: absolute; inset: 0; background: var(--gradient-hero); }
.hero-carousel .carousel-caption { z-index: 2; bottom: 50%; transform: translateY(50%); text-align: left; left: 10%; right: 10%; }
.hero-carousel .carousel-caption h1 { font-size: 3.5rem; font-weight: 800; color: var(--white); text-shadow: 2px 4px 8px rgba(0,0,0,0.3); }
.hero-carousel .carousel-caption h6 { color: var(--green-light); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.hero-carousel .point ul { list-style: none; padding: 0; }
.hero-carousel .point ul li { color: var(--white); font-size: 1.1rem; margin-bottom: 8px; font-weight: 500; }
.hero-carousel .point ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--green-light); margin-right: 12px; }

/* Sections & Common Layouts */
section { padding: var(--section-spacing) 0; position: relative; }
.section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; position: relative; display: inline-block; }
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gradient-primary); border-radius: 2px; }
.section-subtitle { font-size: 1.15rem; color: var(--gray); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.badge-section { background: var(--gradient-primary) !important; color: var(--white) !important; padding: 8px 20px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; display: inline-block; margin-bottom: 15px; }

/* Cards & Components */
.choose-card, .project-card, .card {
    border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); border: none;
}
.choose-card:hover, .project-card:hover, .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Tabs */
.tab { display: flex; flex-wrap: wrap; gap: 5px; background: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 10px; box-shadow: var(--shadow-sm); }
.tab button { background: var(--light-gray); border: 2px solid transparent; padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 14px; border-radius: var(--radius-sm); transition: all var(--transition-normal); color: var(--dark); }
.tab button.active { background: var(--gradient-primary); color: var(--white); box-shadow: var(--shadow-green); transform: translateY(-2px); }
.tabcontent, .tabcontent_new { display: none; padding: 30px; background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-md); animation: fadeIn 0.5s ease; }

/* Footer */
.footer-section { background: #0a1628; color: #e0e0e0; position: relative; overflow: hidden; }
.footer-main { position: relative; z-index: 2; padding: 70px 0 50px; }
.footer-logo-img { height: 45px; filter: brightness(0) invert(1); margin-bottom: 5px; }
.footer-links-list { list-style: none; padding: 0; margin: 0; }
.footer-links-list li a { color: rgba(255,255,255,0.7); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; padding: 6px 0; transition: all var(--transition-normal); }
.footer-links-list li a:hover { color: #fff; padding-left: 8px; }

/* Floating CTA Buttons */
.whatsapp-float, .call-float {
    position: fixed; right: 30px; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; z-index: 998; transition: all var(--transition-normal);
}
.whatsapp-float { bottom: 100px; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); animation: pulse-whatsapp 2s infinite; box-shadow: 0 4px 20px rgba(37,211,102,0.5); }
.call-float { bottom: 170px; background: var(--gradient-primary); animation: pulse-call 2s infinite; box-shadow: 0 4px 20px rgba(0,86,179,0.5); }
#back-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; border-radius: 50%; display: none; z-index: 999; background: var(--gradient-primary) !important; color: var(--white) !important; box-shadow: var(--shadow-lg); margin-bottom: 240px; border: none; }

/* Forms */
.form-control, .form-select, .cnt-form-input {
    border: 2px solid #e9ecef; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 1rem; transition: all var(--transition-fast); width: 100%;
}
.form-control:focus, .form-select:focus, .cnt-form-input:focus { border-color: var(--green-primary); box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.15); outline: none; }

/* Contact Page Enhancements */
.cnt-hero { position: relative; padding: 90px 0 70px; overflow: hidden; min-height: 420px; display: flex; align-items: center; }
.cnt-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,61,128,0.88) 0%, rgba(26,92,42,0.82) 100%); }
.cnt-form-card, .cnt-info-card { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 8px 35px rgba(0,0,0,0.06); border: 1px solid #eef0f2; }

/* Responsive Media Queries */
@media (max-width: 1199.98px) {
    :root { --section-spacing: 70px; }
    .hero-carousel .carousel-item { height: 550px; }
}

@media (max-width: 991.98px) {
    :root { --section-spacing: 60px; }
    .header_top { display: none !important; }
    .hero-carousel .carousel-item { height: 500px; }
    .hero-carousel .carousel-caption { text-align: center !important; }
}

@media (max-width: 767.98px) {
    :root { --section-spacing: 50px; }
    .hero-carousel .carousel-item { height: 450px; }
    .section-title { font-size: 1.6rem !important; }
    .whatsapp-float { bottom: 90px; right: 20px; width: 55px; height: 55px; }
    .call-float { bottom: 155px; right: 20px; width: 55px; height: 55px; }
}

@media (max-width: 575.98px) {
    :root { --section-spacing: 40px; }
    .hero-carousel .carousel-item { height: 400px; }
    .hero-carousel .carousel-caption h1 { font-size: 1.5rem !important; }
}

/* Print Styles */
@media print {
    .navbar, .footer-section, .whatsapp-float, .call-float, #back-to-top, #preloader, .header_top { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
}