/* ---------------------------------- Template Name: Consua - Consulting Business Template Author: validtheme Description: Version: 1.0 Main Font : Outfit Main Color : #DF0A0A ------------------------------------- [Typography] Body copy: 15px 'Outfit', sans-serif Header: 36px 'Outfit', sans-serif Input, textarea: 16px 'Outfit', sans-serif Sidebar heading: 20px 'Outfit', sans-serif >>> TABLE OF CONTENTS: ======================= 01. Template default css - Animations - General - Section Title - Video Button - Typography - Tables - Forms - Buttons - Pagination - Colors 02. Preloader 03. Topbar - Topbar Style One - Topbar Style Two 04 Navbar - Navbar Default - Navbar Transparent - Navbar Sticky - Navbar Box 05. Banner - Banner Fade - Banner Slide - Banner Zoom 06. About Us - About Style One - About Style Two 07. Services - Tab Version - Grid Version - Services Single 08. Features 09. Work Process 10. Why Choose Us 11. Fun Factor 12. Pricing Table 12. Partner World Wide 13. Team - Grid Version - Carousel Version - Team Details 14. Testimonials - Single Slider - Center Slider 15. Projects - Grid Version - Carousel Version - Project Details 16. Blog - Standard - Left Sidebar - Right Sidebar - Single 17. Request Call Back 18. FAQ 19. Error 404 20. Footer 21. PHP Contact Form 22. Others */ /* ** Write you custom css below */ :root{ /* Brand colors (from logo) */ --color-primary: #064E74; /* Deep Teal Blue (main) */ --color-primary-2: #064F76; /* Alternate deep blue */ --color-secondary: #9DB288; /* Light Olive Green */ --color-secondary-2: #A1B78C; /* Soft Green */ --color-accent: #fa6221; /* Bright Orange (accent) */ /* Neutrals */ --color-black: #000000; --color-white: #ffffff; --color-muted: #080808; /* subtle gray for small text */ --color-surface: #f8fafb; /* page/card background */ /* Semantic */ --color-success: #28a745; --color-warning: #ffb020; --color-danger: #e11d48; --color-info: #0ea5e9; /* Opacity helpers */ --alpha-10: rgba(0,0,0,0.10); --alpha-20: rgba(0,0,0,0.20); /* Typography */ --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading-weight: 700; --font-body-weight: 400; /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; /* Radii & shadows */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --shadow-sm: 0 1px 3px var(--alpha-10); --shadow-md: 0 6px 18px rgba(6,78,116,0.08); /* Gradients (linear) */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-accent: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%); --gradient-soft-bg: linear-gradient(180deg, var(--color-white) 0%, var(--color-secondary-2) 100%); } /* Dark-mode variables (optional) */ @media (prefers-color-scheme: dark) { :root{ --color-surface: #0b1220; --color-muted: #9ca3af; --alpha-10: rgba(255,255,255,0.06); --alpha-20: rgba(255,255,255,0.12); --shadow-sm: 0 1px 3px rgba(0,0,0,0.6); } } /* -------------------- Utility / Component examples -------------------- */ /* html,body{ height:100%; } body{ font-family: var(--font-sans); font-weight: var(--font-body-weight); color: var(--color-black); background: var(--color-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; margin:0; } h1,h2,h3,h4{ color: var(--color-primary); font-weight: var(--font-heading-weight); margin: 0 0 var(--space-md) 0; } .logo-primary { fill: var(--color-primary); } .logo-secondary { fill: var(--color-secondary); } .logo-accent { fill: var(--color-accent); } .btn { display:inline-flex; align-items:center; gap: 0.6rem; padding: 0.6rem 1rem; border-radius: var(--radius-sm); border: none; cursor: pointer; font-weight: 600; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; background: var(--gradient-primary); color: var(--color-white); } .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active{ transform: translateY(0); } .btn[disabled]{ opacity: 0.6; cursor: not-allowed; transform: none; } .btn-outline{ background: transparent; color: var(--color-primary); border: 2px solid rgba(6,78,116,0.12); padding: 0.5rem 0.9rem; } .btn-accent{ background: var(--gradient-accent); color: var(--color-white); } .hero{ padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); background: var(--gradient-primary); color: var(--color-white); box-shadow: var(--shadow-md); } .card{ background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(6,78,116,0.04); } .accent { color: var(--color-accent); font-weight: 600; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } .input { width:100%; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid rgba(6,78,116,0.12); background: white; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); } .input:focus { outline: none; box-shadow: 0 0 0 4px rgba(6,78,116,0.06); border-color: var(--color-primary); } .kv { display:flex; gap: 0.5rem; align-items:center; } .bg-gradient-primary { background: var(--gradient-primary); } .bg-gradient-accent { background: var(--gradient-accent); } .high-contrast { background: var(--color-white); color: var(--color-black); } */ .about-style-one .sub-heading { font-size: 2.9rem; } .site-heading .title { font-size: 30px; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-right: var(--bs-gutter-x,1.75rem); padding-left: var(--bs-gutter-x,1.75rem); margin-right: auto; margin-left: auto; } .default-padding-less { padding-top: 50px !important; padding-bottom: 50px !important; } p strong { color: #47787c; } /* navbar css */ nav.navbar.navbar-style-one.validnavs.navbar-fixed.no-background .navbar-header { padding-right: 0px; margin-right: -70px; } .navbar .navbar-collapse.collapse { float: none; }