/* Theme Name: [Your Theme Name] Description: CSS for [Your Project Description] Version: 1.0 */ /* ========================================================================== 1. CSS Variables (Custom Properties) ========================================================================== */ :root { /* Colors */ --primary-blue: #FFC107; /* Brand mustard */ --secondary-blue: #422400; /* Brand dark brown */ --deep-blue: #000000; /* Headings use black */ --light-blue: #FFFFFF; /* Brand white */ --accent-blue: #FFC107; /* Accent also set to mustard */ --text-gray: #000000; /* Body text in black */ --white: #FFFFFF; /* White */ --black: #000000; /* Black */ --success-green: #28a745; /* Unchanged */ --warning-yellow: #FFC107; /* Same brand mustard */ --danger-red: #dc3545; /* Unchanged */ /* Gradients */ --gradient-primary: linear-gradient( 135deg, var(--primary-blue) 0%, var(--secondary-blue) 100% ); --gradient-overlay: linear-gradient( rgba(255, 193, 7, 0.85), rgba(66, 36, 0, 0.85) ); /* Shadows */ --box-shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05); --box-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1); --box-shadow-lg: 0 15px 45px rgba(0, 0, 0, 0.15); /* Transitions */ --transition-base: all 0.3s ease; /* Border Radius */ --border-radius-sm: 8px; --border-radius-md: 15px; --border-radius-lg: 30px; /* Fonts (Load fonts efficiently in HTML with preconnect/preload) */ --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Font Sizes - Responsive */ --font-size-base: 16px; /* Default font size */ --font-size-h1: 3rem; --font-size-h2: 2.5rem; --font-size-h3: 2rem; --font-size-h4: 1.5rem; --font-size-h5: 1.25rem; --font-size-h6: 1rem; @media (max-width: 768px) { --font-size-h1: 2.5rem; --font-size-h2: 2rem; --font-size-h3: 1.75rem; --font-size-h4: 1.25rem; } @media (max-width: 576px) { --font-size-h1: 2rem; --font-size-h2: 1.75rem; --font-size-h3: 1.5rem; } } /* ========================================================================== 2. Global Styles & Resets ========================================================================== */ html { box-sizing: border-box; /* More robust box model */ scroll-behavior: smooth; /* Smooth scrolling for anchor links */ } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--font-family-primary); font-size: var(--font-size-base); /* Use variable */ line-height: 1.6; /* Improve readability */ color: var(--text-gray); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Improve font rendering */ overflow-x: hidden; /* Prevent horizontal scrollbars */ margin: 0; /* Remove default body margin */ } /* Basic Typography */ h1, h2, h3, h4, h5, h6 { color: var(--deep-blue); font-weight: 700; line-height: 1.2; /* Tighter line height for headings */ margin-top: 0; margin-bottom: 0.5em; /* Consistent spacing */ } /* Use CSS Variables for Headings */ h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } h6 { font-size: var(--font-size-h6); } p { margin-top: 0; margin-bottom: 1em; } a { color: var(--accent-blue); text-decoration: none; transition: var(--transition-base); } a:hover, a:focus { color: var(--primary-blue); /* Same mustard but used for hover contrast */ text-decoration: underline; /* Accessibility: clear link indication */ outline: none; /* Remove default focus outline */ } /* Remove list styles */ ul, ol { padding: 0; margin: 0; list-style: none; } /* Image responsiveness */ img { max-width: 100%; height: auto; display: block; /* Prevents extra space below images */ } /* Form element basics */ input, button, textarea, select { font-family: inherit; font-size: inherit; line-height: inherit; border: 1px solid #ccc; /* Basic border */ border-radius: var(--border-radius-sm); padding: 0.5em 1em; } button { cursor: pointer; background-color: transparent; border: none; /* Remove default button styles */ } /* ========================================================================== 3. Utility Classes (Reusable Styles) ========================================================================== */ .container { width: 100%; max-width: 1200px; /* Adjust as needed for your design */ margin-left: auto; margin-right: auto; padding-left: 1rem; /* Consistent padding */ padding-right: 1rem; } /* Responsive Container */ @media (max-width: 1200px) { .container { max-width: 960px; } } @media (max-width: 992px) { .container { max-width: 720px; } } @media (max-width: 768px) { .container { max-width: 540px; padding-left: 0.75rem; /* Reduce padding on smaller screens */ padding-right: 0.75rem; } } @media (max-width: 576px) { .container { max-width: 100%; /* Full width on smallest screens */ padding-left: 0.5rem; padding-right: 0.5rem; } } .text-center { text-align: center; } .mb-25 { margin-bottom: 1.5625rem; } /* 25px converted to rem */ .mb-30 { margin-bottom: 1.875rem; } /* 30px converted to rem */ .mb-40 { margin-bottom: 2.5rem; } .mb-45 { margin-bottom: 2.8125rem; } .mb-50 { margin-bottom: 3.125rem; } .mb-55 { margin-bottom: 3.4375rem; } .mb-60 { margin-bottom: 3.75rem; } .mb-70 { margin-bottom: 4.375rem; } .mb-90 { margin-bottom: 5.625rem; } .pt-65 { padding-top: 4.0625rem; } .pt-115 { padding-top: 7.1875rem; } .pb-90 { padding-bottom: 5.625rem; } .pb-115 { padding-bottom: 7.1875rem; } .pb-120 { padding-bottom: 7.5rem; } .position-relative { position: relative; } .white-title {color: var(--white);} .black-bg {background-color: var(--black);} /* ========================================================================== 4. Header ========================================================================== */ .header { position: fixed; /* Keep header at the top */ top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.25rem 0; /* 20px / 16px = 1.25rem */ transition: var(--transition-base); background-color: var(--white); /* Initial background */ } .header.sticky { background: var(--gradient-primary); padding: 0.9375rem 0; /* 15px / 16px = 0.9375rem */ box-shadow: var(--box-shadow-md); } .header.sticky .nav-menu ul li a { color: white; } .nav-wrapper { display: flex; justify-content: space-between; align-items: center; } .logo img { height: 50px; /* Control logo size */ /* Responsive Logo */ max-height: 60px; /* Adjust as needed */ } @media (max-width: 768px) { .logo img { max-height: 45px; } } .nav-menu ul { display: flex; gap: 1.5rem; /* Space between menu items */ } .nav-menu ul li a { display: block; /* Fill the entire list item area */ padding: 0.5rem 1rem; color: var(--deep-blue); font-weight: 600; text-decoration: none; transition: var(--transition-base); border-bottom: 2px solid transparent; /* For hover effect */ } .nav-menu ul li a.active, .nav-menu ul li a:hover, .nav-menu ul li a:focus { color: var(--accent-blue); border-bottom-color: var(--accent-blue); /* Underline on hover/focus */ text-decoration: none; } /* Hamburger Menu */ .hamburger { display: none; /* Hidden by default */ cursor: pointer; font-size: 1.5rem; color: var(--deep-blue); padding: 0.5rem; z-index: 1001; /* Ensure it's above other content */ } .header.sticky .hamburger{ color: white; } /* ========================================================================== 5. Hero Section (Slider Area) ========================================================================== */ .slider-area { position: relative; display: flex; /* Use flexbox for centering */ align-items: center; /* Vertical centering */ justify-content: center; /* Horizontal centering */ height: 100vh; background-image: url('../img/slider/slider_bg.jpg'); /* Use relative path */ background-size: cover; background-position: center; background-repeat: no-repeat; /* Prevent image repetition */ overflow: hidden; } .slider-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-overlay); } .slider-content { position: relative; z-index: 2; text-align: center; color: var(--white); padding: 2rem; /* Add some padding */ } /* Responsive Slider Content */ @media (max-width: 768px) { .slider-content { padding: 1rem; } .slider-content h2 { font-size: 2.5rem; /* Adjust font size for smaller screens */ } .slider-content p{ font-size: 1rem; } } .slider-content h2 { font-size: 4rem; /* Larger font size */ font-weight: 800; margin-bottom: 1rem; opacity: 0; /* For animation */ transform: translateY(20px); /* For animation */ animation: fadeInUp 0.6s ease forwards; color: white; } .slider-content p { font-size: 1.5rem; /* Larger font size */ margin-bottom: 2.5rem; opacity: 0; /* For animation */ transform: translateY(20px); /* For animation */ animation: fadeInUp 0.6s ease forwards 0.2s; color: white; } /* ========================================================================== Slider Form ========================================================================== */ .slider-form { max-width: 600px; margin: 0 auto; /* Add some vertical spacing if needed */ margin-top: 2rem; margin-bottom: 2rem; } .slider-form form { display: flex; align-items: center; /* Use a brand-colored border with a subtle box-shadow */ border: 2px solid var(--primary-blue); border-radius: var(--border-radius-lg); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); overflow: hidden; /* Ensures border-radius is applied to children */ background: #fff; /* White background */ } /* Make the input fill all remaining space, with a clear focus state */ .slider-form input { flex: 1; height: 50px; border: none; outline: none; padding: 0 1.25rem; /* 20px for comfortable spacing */ font-size: 1rem; background: transparent; color: var(--deep-blue); transition: background-color 0.3s ease; } .slider-form input::placeholder { color: #aaa; } .slider-form input:focus { background-color: #fdfdfd; /* Optional focus outline (uncomment if you want a visible ring) outline: 2px solid var(--primary-blue); */ } /* Button is inside the same border, with a gradient background */ .slider-form button { height: 50px; border: none; padding: 0 1.5rem; /* 24px horizontal padding */ font-size: 1rem; font-weight: 600; color: var(--white); background: var(--gradient-primary); cursor: pointer; transition: var(--transition-base); /* Let the parent’s border-radius define corners */ border-radius: 0; } /* Hover/active states for the button */ .slider-form button:hover, .slider-form button:focus { background: linear-gradient( 135deg, var(--secondary-blue) 0%, var(--primary-blue) 100% ); outline: none; color: #fff; /* Ensure text stays visible */ transform: translateY(-1px); } /* Responsive Slider Form */ @media (max-width: 768px) { .slider-form { max-width: 90%; } .slider-form form { flex-direction: column; } .slider-form input{ width: 100%; margin-bottom: .5rem; } .slider-form button{ width: 100%; } } /* ========================================================================== 6. Category Section ========================================================================== */ .category-area { margin-top: -5rem; /* Adjust negative margin as needed */ position: relative; z-index: 3; } .category-bg { background: var(--white); border-radius: var(--border-radius-md); padding: 2.5rem; /* 40px / 16px = 2.5rem */ box-shadow: var(--box-shadow-lg); } .category-list ul { display: flex; justify-content: space-between; flex-wrap: wrap; /* Allow wrapping on smaller screens */ gap: 1.875rem; /* 30px / 16px = 1.875rem */ } .category-list li { flex: 1 0 calc(20% - 1.875rem); /* 5 items per row, accounting for gap */ /* The 0 is the flex-grow value (don't grow) The 1 is the flex-shrink value (shrink if needed) The calc() is the flex-basis, setting the initial width */ max-width: calc(20% - 1.875rem); /* Prevent items from becoming too wide */ margin-bottom: 1.25rem; /* Spacing between rows */ } .category-list li a { display: flex; flex-direction: column; } .category-icon { width: 5rem; /* 80px / 16px = 5rem */ height: 5rem; margin: 0 auto 1.25rem; /* 20px / 16px = 1.25rem */ background: var(--light-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition-base); } .category-icon i { font-size: 2rem; /* 32px / 16px = 2rem */ color: var(--primary-blue); transition: var(--transition-base); } .category-list a:hover .category-icon, .category-list a:focus .category-icon { background: var(--gradient-primary); transform: translateY(-5px); } .category-list a:hover .category-icon i, .category-list a:focus .category-icon i { color: var(--white); } .category-list h5 { font-size: 1.125rem; /* 18px / 16px = 1.125rem */ font-weight: 600; margin: 0; color: var(--deep-blue); /* Consistent heading color */ } /* Responsive Category Section */ @media (max-width: 992px) { .category-list li { flex: 1 0 calc(33.33% - 1.875rem); /* 3 items per row */ max-width: calc(33.33% - 1.875rem); } } @media (max-width: 768px) { .category-list li { flex: 1 0 calc(50% - 1.875rem); /* 2 items per row */ max-width: calc(50% - 1.875rem); } } @media (max-width: 576px) { .category-list li { flex: 1 0 100%; /* 1 item per row */ max-width: 100%; } } /* ========================================================================== 7. About Section ========================================================================== */ .about-area { padding: 7.5rem 0; background: #f8f9fa; position: relative; overflow: hidden; } .about-bg { background: #f8f9fa; } .about-img { border-radius: var(--border-radius-md); } .align-items-center { align-items: center; } .about-active .single-about-wrap{ display: block; } .section-title h2 { font-size: 2.625rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--deep-blue); } .section-title h6 { font-size: 1.125rem; color: var(--accent-blue); margin-bottom: 0.9375rem; text-transform: uppercase; letter-spacing: 2px; } /* ========================================================================== Services section ========================================================================== */ .services-area h6, .section-title h2, .services-area p { color: black; } /* ========================================================================== 8. Buttons ========================================================================== */ .btn { display: inline-block; padding: 1.125rem 2.5rem; border-radius: var(--border-radius-lg); background: var(--gradient-primary); color: var(--white); font-weight: 600; text-decoration: none; transition: var(--transition-base); border: none; cursor: pointer; position: relative; overflow: hidden; white-space: nowrap; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none; } .btn:hover::before { transform: translateX(100%); } .btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: var(--box-shadow-md); text-decoration: none; outline: none; background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%); } /* Responsive Buttons */ @media (max-width: 768px) { .btn { padding: 0.8rem 1.5rem; /* Smaller padding */ font-size: 0.9rem; } } /* ========================================================================== 9. Animations ========================================================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================================== Testimonial Area ========================================================================== */ /* ===== Testimonial Section ===== */ .testimonial-section { position: relative; padding: 7rem 0; /* Vertical spacing */ background-color: var(--deep-blue); /* Dark background color */ color: var(--white); overflow: hidden; /* Hide horizontal overflow if needed */ } .testimonial-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Subtle gradient overlay for depth */ background: linear-gradient( to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) ); z-index: 1; } .testimonial-section > .container { position: relative; z-index: 2; /* Ensure content is above the overlay */ } /* Allows horizontal scroll on smaller screens */ .testimonial-carousel { overflow-x: auto; /* For smoother scrolling on iOS devices (optional) */ -webkit-overflow-scrolling: touch; /* Hide scrollbar in webkit-based browsers (optional) ::-webkit-scrollbar { display: none; } */ } /* The wrapper is flex so each .single-testimonial is placed side by side */ .testimonial-wrapper { display: flex; gap: 2rem; width: max-content; /* Container shrinks/grows to fit content width */ padding-bottom: 1rem; /* Space below cards, so they don’t collide with scrollbar */ } /* Each testimonial is like a "card" */ .single-testimonial { flex: 0 0 auto; /* Don’t let them shrink or grow */ width: 350px; /* Fixed width on large screens */ background-color: rgba(255, 255, 255, 0.08); /* Slightly transparent card */ border-radius: var(--border-radius-md); padding: 2rem; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hover/Focus effect for desktop */ .single-testimonial:hover, .single-testimonial:focus-within { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); } /* The quote text */ .testimonial-content { position: relative; margin-bottom: 1.5rem; } .testimonial-content p { font-style: italic; line-height: 1.6; margin-bottom: 0; color: #eee; /* Light text for contrast on dark bg */ padding: 0 2rem; /* Space for the quote icons */ } /* Stylized quote icons in corners */ .quote-icon { font-size: 2.5rem; color: var(--accent-blue); font-family: Georgia, serif; position: absolute; line-height: 1; } .quote-icon:first-child { top: 0; left: 0; } .quote-icon:last-child { bottom: 0; right: 0; } /* The user info (avatar, name, role, rating) */ .testimonial-meta { display: flex; align-items: center; gap: 1rem; } /* Circular avatar */ .testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-info h5 { color: var(--white); margin-bottom: 0.25rem; font-weight: 600; } .testimonial-info span { display: block; color: #ccc; font-size: 0.875rem; margin-bottom: 0.25rem; } /* Star rating color (uses your brand's warning-yellow if set) */ .testimonial-rating i { color: var(--warning-yellow); } /* ===== Responsive Adjustments ===== */ /* Medium screens (tablets) */ @media (max-width: 991px) { /* Slightly narrower cards so more can fit on screen */ .single-testimonial { width: 300px; } } /* Small screens (phones) */ @media (max-width: 767px) { /* Force a single row with horizontal scroll */ .testimonial-wrapper { flex-wrap: nowrap; } /* Make the cards a bit more fluid on narrow phones */ .single-testimonial { width: 80%; margin-right: 1rem; /* Extra spacing at the end if needed */ } } /* ========================================================================== Fact Area ========================================================================== */ .fact-area { padding-top: 7.1875rem; } .fact-bg { background: url() center center no-repeat; background-size: cover; height: 100%; width: 40%; position: absolute; left: 0; top: 0; z-index: 1; } .fact-area > .container { position: relative; z-index: 5; } .single-fact { margin-bottom: 3.125rem; } .fact-icon { margin-bottom: 1.5625rem; } .flaticon-package:before { content: "\f101"; } .fact-content h6, .fact-content p { color: black; } /* ========================================================================== Extra Features ========================================================================== */ .ef-md-padding { padding-bottom: 7.1875rem; } .extra-features h2 span { color: var(--primary-blue); } .extra-features-content h5, .extra-features-content p { color: black; } /* ========================================================================== 10. Responsive Media Queries ========================================================================== */ /* Large devices (desktops, less than 1200px) */ @media (max-width: 1199.98px) { /* .container - Already handled in the Utility section */ .nav-menu ul { gap: 1rem; /* Reduce gap on smaller screens */ } } /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { /* .container - Already Handled */ .slider-content h2 { font-size: 3rem; /* Smaller heading */ } .slider-content p { font-size: 1.25rem; } .category-list ul { flex-wrap: wrap; } .category-list li { flex: 0 0 calc(33.333% - 1.875rem); /* 3 items per row */ max-width: calc(33.333% - 1.875rem); margin-bottom: 1.875rem; } .about-content { padding-left: 0; /* Remove padding on smaller screens */ margin-top: 2rem; /* Add spacing between image and content */ } .col-lg-6 { flex: 0 0 100%; max-width: 100%; } .nav-menu { display: none; /* Hide by default on medium screens and below */ position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); box-shadow: var(--box-shadow-md); z-index: 999; } .nav-menu.show { display: flex; /* Show when 'show' class is added */ } .nav-menu ul { flex-direction: column; padding: 1rem; }