/* 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; } /* ========================================================================== 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: 16px; /* Default font size */ 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 */ } h1 { font-size: 3rem; } /* Responsive heading sizes */ h2 { font-size: 2.5rem; } h3 { font-size: 2rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } 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; } .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 */ } .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; } /* ========================================================================== 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 */ } .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); } /* ========================================================================== 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 */ } /* ========================================================================== 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%); } /* ========================================================================== 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 { max-width: 960px; } .nav-menu ul { gap: 1rem; /* Reduce gap on smaller screens */ } } /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { .container { max-width: 720px; } .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; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); box-shadow: var(--box-shadow-md); z-index: 999; } .nav-menu ul { flex-direction: column; padding: 1rem; } .nav-menu ul li { border-bottom: 1px solid #eee; } .nav-menu ul li a { padding: 0.75rem 1rem; border-bottom: none; } .hamburger { display: block; cursor: pointer; font-size: 1.5rem; color: var(--deep-blue); padding: 0.5rem; z-index: 1001; } .header.sticky .hamburger{ color: white; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .container { max-width: 540px; } .slider-content h2 { font-size: 2.25rem; } .slider-form input, .slider-form button { height: 45px; font-size: 0.9rem; } .category-list li { flex: 0 0 calc(50% - 1.875rem); max-width: calc(50% - 1.875rem); } .category-icon { width: 4rem; height: 4rem; } .category-icon i { font-size: 1.75rem; } .services-icon { right: 50%; transform: translateX(50%); } .single-about-wrap { flex-wrap: wrap; } .slider-form input { width: 100%; margin-bottom: 15px; float: none; } .slider-form button { width: 100%; float: none; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .category-list li { flex: 0 0 100%; max-width: 100%; } .slider-form button { position: static; width: 100%; margin-top: 0.625rem; } .testimonial-avatar { flex-direction: column; text-align: center; } .testi-avatar-img { margin: 0 auto 0.9375rem; } .section-title h2 { font-size: 2rem; } .about-content, .extra-features-content { padding: 15px; } .row { margin-right: -15px; margin-left: -15px; } } /* ========================================================================== Services Section (Updated) ========================================================================== */ .services-area { padding: 7.1875rem 0 4.375rem; /* 115px top, 70px bottom */ background-color: var(--white); } .services-wrapper { /* No specific styles here, let the row and column classes handle layout */ } .single-services { margin-bottom: 1.875rem; background-color: var(--white); border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-sm); transition: var(--transition-base); overflow: hidden; display: flex; flex-direction: column; } .single-services:hover, .single-services:focus-within { transform: translateY(-10px); box-shadow: var(--box-shadow-lg); } .services-thumb { position: relative; overflow: hidden; height: 250px; } .services-thumb a { display: block; height: 100%; } .services-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .single-services:hover .services-thumb img, .single-services:focus-within .services-thumb img { transform: scale(1.1); } .services-content { padding: 1.875rem; position: relative; display: flex; flex-direction: column; flex-grow: 1; } .services-icon { width: 4.375rem; height: 4.375rem; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow-md); margin-bottom: 1.25rem; transition: transform 0.3s ease; } .services-icon i { font-size: 1.875rem; color: var(--white); line-height: 1; } .services-content h3 { font-size: 1.5rem; margin-bottom: 0.9375rem; color: var(--deep-blue); flex-grow: 0; min-height: 3em; } .services-content h3 a { color: inherit; text-decoration: none; transition: var(--transition-base); } .services-content h3 a:hover, .services-content h3 a:focus { color: var(--accent-blue); text-decoration: underline; } .services-content p { color: var(--text-gray); flex-grow: 1; margin-bottom: 0; } /* Responsive adjustments for services */ @media (max-width: 991.98px) { .services-icon { } .services-content h3 { font-size: 1.3rem; } } @media (max-width: 767.98px) { .single-services { max-width: none; } } /* Flaticon Overides */ .flaticon-shipping-and-delivery:before { content: "\f104"; } .flaticon-shipping:before { content: "\f105"; } .flaticon-location:before { content: "\f106"; } /* ========================================================================== Our Capabilities Section (Updated Fact Area) ========================================================================== */ .capabilities-area { padding: 7.1875rem 0; position: relative; background-color: var(--light-blue); overflow: hidden; } .capabilities-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2)); z-index: 1; } .capabilities-area > .container { position: relative; z-index: 2; } .capabilities-area .section-title h2 { color: var(--deep-blue); } .capabilities-area .section-title h6 { color: var(--accent-blue); } .capabilities-area .section-title p { max-width: 80%; margin-left: auto; margin-right: auto; color: var(--text-gray); } .single-capability { margin-bottom: 3.125rem; background-color: var(--white); border-radius: var(--border-radius-md); padding: 2.5rem; box-shadow: var(--box-shadow-sm); transition: var(--transition-base); text-align: center; } .single-capability:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-md); } .capability-icon { width: 4.375rem; height: 4.375rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5625rem; background-color: var(--light-blue); transition: var(--transition-base); } .capability-icon i { font-size: 2rem; color: var(--primary-blue); transition: var(--transition-base); } .single-capability:hover .capability-icon { background-color: var(--primary-blue); transform: rotate(360deg); } .single-capability:hover .capability-icon i { color: var(--white); } .capability-content h4 { font-size: 1.25rem; margin-bottom: 0.625rem; color: var(--deep-blue); } .capability-content p { color: var(--text-gray); margin-bottom: 0; line-height: 1.5; } /* Responsive adjustments */ @media (max-width: 991.98px) { .single-capability { padding: 1.875rem; } .capability-icon { margin-bottom: 1.25rem; } .capability-content h4 { font-size: 1.125rem; } } @media (max-width: 767.98px) { .capabilities-area .section-title p { max-width: 100%; } .section-title { margin-bottom: 2rem; } } /* Flaticon Override */ .flaticon-package:before { content: "\f101"; } .flaticon-placeholder:before { content: "\f107"; } .flaticon-like:before { content: "\f108"; } .flaticon-user:before { content: "\f109"; } /* ========================================================================== Extra Features Section (Grid Layout) ========================================================================== */ .extra-features-section { padding: 4.0625rem 0 7.1875rem; background-color: var(--white); } .extra-features-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; } .extra-features-content { grid-column: span 5; } .extra-features-img { grid-column: span 7; text-align: center; } .extra-features-img img { border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-md); max-width: 100%; height: auto; width: 100%; } .extra-features-content p { color: var(--text-gray); margin-bottom: 1.875rem; line-height: 1.7; } /* Responsive adjustments for Extra Features */ @media (max-width: 991.98px) { .extra-features-grid { grid-template-columns: 1fr; } .extra-features-content, .extra-features-img { grid-column: span 12; } .extra-features-img { margin-top: 2rem; } } /* ========================================================================== Blog Section (Grid Layout) ========================================================================== */ .blog-section { padding: 7.1875rem 0 5.625rem; background-color: #f8f9fa; } .blog-section .section-title h2 { color: var(--deep-blue); } .blog-section .section-title h6 { color: var(--accent-blue); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .single-blog-post { background-color: var(--white); border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-sm); transition: var(--transition-base); overflow: hidden; display: flex; flex-direction: column; } .single-blog-post:hover, .single-blog-post:focus-within { transform: translateY(-5px); box-shadow: var(--box-shadow-md); } .blog-thumb { position: relative; overflow: hidden; height: 250px; } .blog-thumb a { display: block; height: 100%; } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .single-blog-post:hover .blog-thumb img, .single-blog-post:focus-within .blog-thumb img { transform: scale(1.1); } .blog-content { padding: 1.875rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-meta { margin-bottom: 0.9375rem; color: var(--text-gray); font-size: 0.875rem; } .blog-meta ul { display: flex; flex-wrap: wrap; gap: 1.25rem; } .blog-meta li { display: flex; align-items: center; gap: 0.3125rem; } .blog-content h4 { font-size: 1.375rem; margin-bottom: 0.9375rem; line-height: 1.4; flex-grow: 0; min-height: 3em; } .blog-meta a { color: var(--text-gray); } .blog-meta i { color: var(--accent-blue); } .blog-content h4 a { color: var(--deep-blue); text-decoration: none; transition: var(--transition-base); } .blog-content h4 a:hover, .blog-content h4 a:focus { color: var(--accent-blue); text-decoration: underline; } .blog-content p { color: var(--text-gray); margin-bottom: 1.25rem; flex-grow: 1; } .read-more-link { display: inline-block; color: var(--accent-blue); text-decoration: none; font-weight: 600; transition: var(--transition-base); margin-top: auto; } .read-more-link:hover, .read-more-link:focus { color: var(--primary-blue); text-decoration: underline; } .read-more-link i { margin-left: 0.3125rem; } /* Responsive adjustments for Blog Section */ @media (max-width: 991.98px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .blog-grid { grid-template-columns: 1fr; } } /* ========================================================================== About Section (Grid Layout) ========================================================================== */ .about-area { padding: 7.5rem 0; background: #f8f9fa; position: relative; overflow: hidden; } .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; } .about-img { grid-column: span 6; border-radius: var(--border-radius-md); overflow: hidden; } .about-content { grid-column: span 6; padding-left: 1rem; } .about-content p { color: var(--text-gray); margin-bottom: 1.875rem; } .about-img::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-overlay); opacity: 0; transition: var(--transition-base); } /* Responsive adjustments for About Section */ @media (max-width: 991.98px) { .about-grid { grid-template-columns: 1fr; } .about-img, .about-content { grid-column: span 12; } .about-content { padding-left: 0; } .about-img { margin-bottom: 2rem; } } /* ========================================================================== Services section (Grid Layout) ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .services-area h6, .services-area h2, .services-area p { color: black; } /* Responsive adjustments for Services */ @media (max-width: 767px) { .services-grid { grid-template-columns: 1fr; } } /* ========================================================================== Testimonial Section (Carousel) ========================================================================== */ .testimonial-section { padding: 7.1875rem 0; position: relative; background-color: var(--deep-blue); color: var(--white); overflow: hidden; } .testimonial-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; } .testimonial-carousel { overflow-x: auto; } .testimonial-wrapper { display: flex; gap: 2rem; padding-bottom: 1rem; width: max-content; } .testimonial-section .section-title h2 { color: var(--white); } .testimonial-section .section-title h6 { color: var(--accent-blue); } .single-testimonial { background-color: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-md); padding: 2.5rem; box-shadow: var(--box-shadow-sm); transition: var(--transition-base); flex: 0 0 auto; width: 350px; } .single-testimonial:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-md); } .testimonial-content { margin-bottom: 1.875rem; position: relative; } .testimonial-content p { font-style: italic; line-height: 1.6; margin-bottom: 0; color: #eee; } .quote-icon { font-size: 2.5rem; color: var(--accent-blue); font-family: Georgia, serif; line-height: 1; position: absolute; } .quote-icon:first-child { top: 0; left: 0; } .quote-icon:last-child { bottom: 0; right: 0; } .testimonial-content p { padding-left: 2rem; padding-right: 2rem; } .testimonial-meta { display: flex; align-items: center; gap: 1.25rem; } .testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .testimonial-info h5 { color: white; } .testimonial-info span { color: #eee; } .testimonial-rating { margin-top: 0.5rem; color: var(--warning-yellow); } /* Responsive adjustments */ @media (max-width: 767.98px) { .testimonial-wrapper { flex-wrap: nowrap; } .single-testimonial { width: 85%; } }