/* ===================================
MODERN CONSULTANCY WEBSITE STYLES
=================================== */
/* CSS Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Brand Colors */
--primary: #F3525A;
--primary-dark: #e63946;
--primary-light: #ff6b73;
--secondary: #F6F6F6;
--light: #FFFFFF;
--dark: #152440;
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;
--gray-400: #a3a3a3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;
/* Gradient Colors */
--gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
--gradient-secondary: linear-gradient(135deg, var(--dark), var(--gray-800));
--gradient-text: linear-gradient(135deg, var(--primary), var(--primary-light));
/* Typography */
--font-primary: 'Inter', sans-serif;
--font-secondary: 'Poppins', sans-serif;
/* Spacing */
--section-padding: 120px 0;
--container-padding: 0 15px;
/* Transitions */
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
body {
font-family: var(--font-primary);
line-height: 1.7;
color: var(--gray-700);
overflow-x: hidden;
scroll-behavior: smooth;
}
/* ===================================
LOADING SCREEN
=================================== */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-content {
text-align: center;
color: white;
}
.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 24px;
}
.loading-text h4 {
font-family: var(--font-secondary);
font-weight: 700;
margin-bottom: 8px;
font-size: 1.5rem;
}
.loading-text p {
font-size: 1rem;
opacity: 0.9;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ===================================
TOPBAR
=================================== */
.topbar {
background: var(--gray-50);
padding: 12px 0;
font-size: 14px;
border-bottom: 1px solid var(--gray-200);
position: relative;
z-index: var(--z-sticky);
}
.topbar-links {
display: flex;
gap: 24px;
}
.topbar-link {
color: var(--gray-600);
text-decoration: none;
transition: var(--transition-base);
display: flex;
align-items: center;
font-weight: 500;
}
.topbar-link:hover {
color: var(--primary);
transform: translateY(-1px);
}
.topbar-contact {
display: flex;
justify-content: flex-end;
gap: 32px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--gray-600);
font-weight: 500;
}
.contact-item i {
color: var(--primary);
font-size: 14px;
width: 16px;
text-align: center;
}
/* ===================================
NAVBAR
=================================== */
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 16px 0;
transition: var(--transition-base);
box-shadow: var(--shadow-sm);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar.scrolled {
padding: 12px 0;
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-lg);
}
.brand-container {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
height: 48px;
width: auto;
transition: var(--transition-base);
}
.navbar.scrolled .brand-logo {
height: 40px;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-name {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.25rem;
color: var(--dark);
}
.brand-tagline {
font-size: 0.75rem;
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-toggler {
border: none;
padding: 8px;
position: relative;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--gray-100);
transition: var(--transition-base);
}
.navbar-toggler:hover {
background: var(--gray-200);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(243, 82, 90, 0.1);
}
.navbar-toggler-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
position: relative;
}
.navbar-toggler-icon span {
display: block;
height: 2px;
width: 100%;
background: var(--dark);
transition: var(--transition-base);
transform-origin: center;
border-radius: 1px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) {
opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.navbar-nav .nav-link {
color: var(--dark);
font-weight: 500;
padding: 12px 20px;
position: relative;
transition: var(--transition-base);
border-radius: var(--radius-md);
margin: 0 4px;
}
.navbar-nav .nav-link::before {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: var(--transition-base);
transform: translateX(-50%);
border-radius: 1px;
}
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
width: 60%;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--primary);
background: rgba(243, 82, 90, 0.05);
}
.navbar-nav .nav-link i {
font-size: 0.875rem;
opacity: 0.8;
}
.cta-btn {
padding: 12px 24px;
border-radius: var(--radius-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition-base);
box-shadow: var(--shadow-md);
background: var(--gradient-primary);
border: none;
position: relative;
overflow: hidden;
}
.cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition-base);
}
.cta-btn:hover::before {
left: 100%;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
/* ===================================
HERO SECTION
=================================== */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.hero-slide.active {
opacity: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(21, 36, 64, 0.85), rgba(243, 82, 90, 0.7));
z-index: -1;
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-element {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
.hero-content {
color: white;
max-width: 100%;
z-index: 2;
position: relative;
}
.hero-badge-container {
margin-bottom: 24px;
}
.hero-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 12px 24px;
border-radius: var(--radius-xl);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition-base);
}
.hero-badge:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.hero-title {
font-family: var(--font-secondary);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-gradient {
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 32px;
opacity: 0.95;
max-width: 600px;
}
.hero-features {
margin-bottom: 40px;
}
.hero-features .feature-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-weight: 500;
}
.hero-features .feature-item i {
color: var(--primary-light);
font-size: 18px;
}
.hero-buttons {
display: flex;
gap: 20px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.hero-btn-primary,
.hero-btn-secondary {
padding: 16px 32px;
border-radius: var(--radius-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition-base);
border: 2px solid transparent;
position: relative;
overflow: hidden;
min-width: 200px;
}
.hero-btn-primary {
background: var(--gradient-primary);
border-color: var(--primary);
box-shadow: var(--shadow-lg);
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-2xl);
}
.hero-btn-secondary {
border-color: rgba(255, 255, 255, 0.5);
color: white;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.hero-btn-secondary:hover {
background: white;
color: var(--dark);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition-slow);
}
.hero-btn-primary:hover .btn-shine {
left: 100%;
}
.hero-stats-container {
position: relative;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
padding: 24px;
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition-base);
text-align: center;
}
.stat-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 24px;
color: white;
box-shadow: var(--shadow-md);
}
.stat-number {
font-family: var(--font-secondary);
font-size: 2.5rem;
font-weight: 800;
color: white;
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
.hero-nav {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
gap: 12px;
z-index: 10;
}
.hero-nav-btn {
width: 56px;
height: 56px;
border: none;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
border-radius: 50%;
cursor: pointer;
transition: var(--transition-base);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.hero-nav-btn:hover {
background: var(--primary);
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: white;
opacity: 0.8;
}
.scroll-mouse {
width: 28px;
height: 44px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
position: relative;
margin: 0 auto 12px;
}
.scroll-wheel {
width: 4px;
height: 8px;
background: white;
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll-wheel 2s infinite;
}
@keyframes scroll-wheel {
0%,
20% {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(20px);
opacity: 0;
}
}
.scroll-indicator span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
/* ===================================
BLOG STYLES
=================================== */
/* Page Header */
.page-header {
position: relative;
padding: 120px 0 80px;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
/* Blog Item Styles */
.blog-item {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition-base);
height: 100%;
border: 1px solid var(--gray-200);
margin-bottom: 30px;
}
.blog-item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}
.blog-img {
position: relative;
overflow: hidden;
height: 250px;
}
.blog-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.blog-item:hover .blog-img img {
transform: scale(1.05);
}
.blog-overlay {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
.blog-category {
background: var(--gradient-primary);
color: white;
padding: 8px 16px;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-content {
padding: 32px 24px;
}
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
font-size: 0.875rem;
color: var(--gray-500);
}
.blog-date,
.blog-author,
.blog-comments {
display: flex;
align-items: center;
font-weight: 500;
}
.blog-date i,
.blog-author i,
.blog-comments i {
color: var(--primary);
}
.blog-title {
margin-bottom: 16px;
line-height: 1.3;
}
.blog-title a {
color: var(--dark);
text-decoration: none;
transition: var(--transition-base);
}
.blog-title a:hover {
color: var(--primary);
}
.blog-excerpt {
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 20px;
}
.blog-tags {
margin-bottom: 24px;
}
.blog-tags .tag {
display: inline-block;
background: var(--gray-100);
color: var(--gray-700);
padding: 6px 12px;
border-radius: var(--radius-lg);
font-size: 0.8rem;
font-weight: 500;
margin-right: 8px;
margin-bottom: 8px;
transition: var(--transition-base);
}
.blog-tags .tag:hover {
background: var(--primary);
color: white;
}
.blog-read-more {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.875rem;
}
/* Featured Post */
.featured-post {
margin-bottom: 40px;
}
.featured-post .blog-img {
height: 400px;
}
.featured-post .blog-title {
font-size: 1.75rem;
font-weight: 700;
}
.featured-post .blog-excerpt {
font-size: 1.125rem;
}
/* Blog Sidebar */
.blog-sidebar {
padding-left: 40px;
}
.sidebar-widget {
background: white;
padding: 32px 24px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
margin-bottom: 32px;
border: 1px solid var(--gray-200);
}
.widget-title {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 24px;
font-size: 1.25rem;
position: relative;
padding-bottom: 12px;
}
.widget-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
}
/* Search Form */
.search-form .input-group {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.search-form .form-control {
border: 1px solid var(--gray-300);
border-right: none;
padding: 12px 16px;
}
.search-form .btn {
border: 1px solid var(--primary);
border-left: none;
padding: 12px 16px;
}
/* Category List */
.category-list {
list-style: none;
padding: 0;
margin: 0;
}
.category-list li {
margin-bottom: 12px;
}
.category-list a {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--gray-700);
text-decoration: none;
padding: 12px 16px;
border-radius: var(--radius-md);
transition: var(--transition-base);
background: var(--gray-50);
}
.category-list a:hover {
background: var(--primary);
color: white;
transform: translateX(8px);
}
.post-count {
background: var(--gray-300);
color: var(--gray-700);
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.category-list a:hover .post-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Recent Posts */
.recent-posts {
display: flex;
flex-direction: column;
gap: 20px;
}
.recent-post-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.recent-post-img {
flex-shrink: 0;
width: 80px;
height: 60px;
border-radius: var(--radius-md);
overflow: hidden;
}
.recent-post-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-post-content h6 {
margin-bottom: 8px;
line-height: 1.3;
}
.recent-post-content h6 a {
color: var(--dark);
text-decoration: none;
font-size: 0.95rem;
transition: var(--transition-base);
}
.recent-post-content h6 a:hover {
color: var(--primary);
}
.recent-post-meta {
font-size: 0.8rem;
color: var(--gray-500);
font-weight: 500;
}
/* Tag Cloud */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-cloud .tag {
display: inline-block;
background: var(--gray-100);
color: var(--gray-700);
padding: 8px 16px;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition-base);
}
.tag-cloud .tag:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
/* Newsletter Widget */
.newsletter-widget {
background: var(--gradient-primary);
color: white;
}
.newsletter-widget .widget-title {
color: white;
}
.newsletter-widget .widget-title::after {
background: rgba(255, 255, 255, 0.3);
}
.newsletter-widget p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
}
.newsletter-widget .input-group {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
}
.newsletter-widget .form-control {
border: none;
background: transparent;
}
.newsletter-widget .btn {
background: var(--dark);
border: none;
color: white;
}
.newsletter-widget .form-text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.8rem;
margin-top: 12px;
}
/* Blog Post Page Styles */
.blog-post {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--gray-200);
}
.post-header {
padding: 40px 40px 0;
}
.breadcrumb {
background: none;
padding: 0;
margin-bottom: 20px;
}
.breadcrumb-item a {
color: var(--gray-600);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--primary);
}
.post-category {
margin-bottom: 16px;
}
.category-badge {
background: var(--gradient-primary);
color: white;
padding: 8px 16px;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.post-title {
font-family: var(--font-secondary);
font-weight: 800;
color: var(--dark);
line-height: 1.2;
margin-bottom: 24px;
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.post-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
padding-bottom: 32px;
border-bottom: 1px solid var(--gray-200);
margin-bottom: 32px;
}
.author-info {
display: flex;
align-items: center;
gap: 16px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--gray-200);
}
.author-name {
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
font-size: 1.1rem;
}
.author-title {
color: var(--primary);
font-size: 0.875rem;
font-weight: 600;
}
.post-stats {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.stat-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--gray-600);
font-size: 0.875rem;
font-weight: 500;
}
.stat-item i {
color: var(--primary);
}
.post-image {
margin: 0 40px 40px;
border-radius: var(--radius-lg);
overflow: hidden;
}
.post-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
.post-content {
padding: 0 40px 40px;
}
.post-excerpt .lead {
font-size: 1.25rem;
line-height: 1.6;
color: var(--gray-700);
margin-bottom: 32px;
padding: 24px;
background: var(--gray-50);
border-left: 4px solid var(--primary);
border-radius: var(--radius-md);
}
.post-content h2 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-top: 40px;
margin-bottom: 20px;
font-size: 1.75rem;
}
.post-content h3 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-top: 32px;
margin-bottom: 16px;
font-size: 1.5rem;
}
.post-content p {
line-height: 1.8;
margin-bottom: 20px;
color: var(--gray-700);
}
.post-content ul,
.post-content ol {
margin-bottom: 24px;
padding-left: 24px;
}
.post-content li {
line-height: 1.7;
margin-bottom: 8px;
color: var(--gray-700);
}
.post-quote {
background: var(--gradient-primary);
color: white;
padding: 32px;
border-radius: var(--radius-lg);
margin: 32px 0;
position: relative;
}
.post-quote::before {
content: '"';
font-size: 4rem;
font-weight: 700;
position: absolute;
top: -10px;
left: 24px;
opacity: 0.3;
}
.post-quote p {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 16px;
color: white;
font-style: italic;
}
.post-quote cite {
font-weight: 600;
font-style: normal;
opacity: 0.9;
}
.info-box {
display: flex;
gap: 20px;
background: var(--gray-50);
padding: 24px;
border-radius: var(--radius-lg);
margin: 32px 0;
border: 1px solid var(--gray-200);
}
.info-box-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.info-box-content h4 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 12px;
}
.challenge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
margin: 32px 0;
}
.challenge-item {
background: white;
padding: 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
text-align: center;
transition: var(--transition-base);
}
.challenge-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.challenge-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 16px;
}
.challenge-item h4 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-bottom: 12px;
}
.challenge-item p {
color: var(--gray-600);
font-size: 0.95rem;
margin: 0;
}
.post-tags {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--gray-200);
}
.post-tags h5 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-bottom: 16px;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-list .tag {
background: var(--gray-100);
color: var(--gray-700);
padding: 8px 16px;
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
transition: var(--transition-base);
}
.tag-list .tag:hover {
background: var(--primary);
color: white;
}
.social-share {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--gray-200);
}
.social-share h5 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-bottom: 16px;
}
.share-buttons {
display: flex;
gap: 12px;
}
.share-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: var(--transition-base);
font-size: 18px;
}
.share-btn.facebook {
background: #1877f2;
}
.share-btn.twitter {
background: #1da1f2;
}
.share-btn.linkedin {
background: #0077b5;
}
.share-btn.email {
background: var(--gray-600);
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.author-bio {
margin-top: 40px;
padding: 32px;
background: var(--gray-50);
border-radius: var(--radius-lg);
display: flex;
gap: 24px;
align-items: flex-start;
}
.author-avatar-large {
flex-shrink: 0;
}
.author-avatar-large img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: var(--shadow-md);
}
.author-bio .author-info h4 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.author-bio .author-title {
color: var(--primary);
font-weight: 600;
margin-bottom: 12px;
}
.author-description {
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 16px;
}
.author-social {
display: flex;
gap: 12px;
}
.author-social a {
width: 40px;
height: 40px;
background: var(--gray-200);
color: var(--gray-600);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition-base);
}
.author-social a:hover {
background: var(--primary);
color: white;
}
.related-posts {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--gray-200);
}
.related-posts h3 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 24px;
}
.related-post-item {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition-base);
border: 1px solid var(--gray-200);
}
.related-post-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.related-post-img {
height: 150px;
overflow: hidden;
}
.related-post-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-base);
}
.related-post-item:hover .related-post-img img {
transform: scale(1.05);
}
.related-post-content {
padding: 20px;
}
.related-post-content h5 {
margin-bottom: 12px;
line-height: 1.3;
}
.related-post-content h5 a {
color: var(--dark);
text-decoration: none;
transition: var(--transition-base);
}
.related-post-content h5 a:hover {
color: var(--primary);
}
.related-post-meta {
color: var(--gray-500);
font-size: 0.875rem;
font-weight: 500;
}
.comments-section {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--gray-200);
}
.comments-section h3 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 32px;
}
.comment-item {
display: flex;
gap: 20px;
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid var(--gray-200);
}
.comment-avatar {
flex-shrink: 0;
}
.comment-avatar img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gray-200);
}
.comment-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.comment-author {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin: 0;
}
.comment-date {
color: var(--gray-500);
font-size: 0.875rem;
}
.comment-text {
color: var(--gray-700);
line-height: 1.7;
margin-bottom: 12px;
}
.comment-reply {
color: var(--primary);
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: var(--transition-base);
}
.comment-reply:hover {
color: var(--primary-dark);
}
.comment-form {
background: var(--gray-50);
padding: 32px;
border-radius: var(--radius-lg);
margin-top: 32px;
}
.comment-form h4 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 24px;
}
.comment-form .form-group {
margin-bottom: 20px;
}
.comment-form .form-control {
border: 2px solid var(--gray-300);
border-radius: var(--radius-md);
padding: 12px 16px;
transition: var(--transition-base);
}
.comment-form .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(243, 82, 90, 0.1);
}
/* Responsive Blog Styles */
@media (max-width: 991.98px) {
.blog-sidebar {
padding-left: 0;
margin-top: 40px;
}
.post-meta {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.post-stats {
gap: 16px;
}
.author-bio {
flex-direction: column;
text-align: center;
}
.challenge-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767.98px) {
.post-header,
.post-content {
padding-left: 24px;
padding-right: 24px;
}
.post-image {
margin-left: 24px;
margin-right: 24px;
}
.blog-meta {
flex-direction: column;
gap: 8px;
}
.featured-post .blog-title {
font-size: 1.5rem;
}
.comment-item {
flex-direction: column;
gap: 16px;
}
.comment-header {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.share-buttons {
justify-content: center;
}
}
/* ===================================
SECTIONS
=================================== */
section {
padding: var(--section-padding);
position: relative;
}
.section-header {
margin-bottom: 60px;
}
.section-badge {
display: inline-flex;
align-items: center;
background: var(--gradient-primary);
color: white;
padding: 10px 24px;
border-radius: var(--radius-xl);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
box-shadow: var(--shadow-md);
}
.section-title {
font-family: var(--font-secondary);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
color: var(--dark);
line-height: 1.2;
margin-bottom: 20px;
}
.title-underline {
width: 80px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
margin-bottom: 24px;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--primary);
font-weight: 600;
margin-bottom: 20px;
}
.section-description {
font-size: 1.125rem;
color: var(--gray-600);
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
}
/* ===================================
ABOUT SECTION
=================================== */
.about-section {
background: var(--gray-50);
position: relative;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.about-text {
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: 32px;
color: var(--gray-600);
}
.about-features {
margin-bottom: 40px;
}
.about-features .feature-item {
display: flex;
gap: 20px;
margin-bottom: 24px;
padding: 20px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
border: 1px solid var(--gray-200);
}
.about-features .feature-item:hover {
transform: translateX(8px);
box-shadow: var(--shadow-md);
}
.about-features .feature-icon {
width: 56px;
height: 56px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.about-features .feature-content h6 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
font-size: 1.1rem;
}
.about-features .feature-content p {
color: var(--gray-600);
line-height: 1.6;
margin: 0;
}
.about-cta {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.experience-badge {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
}
.experience-number {
font-family: var(--font-secondary);
font-size: 2rem;
font-weight: 800;
color: var(--primary);
line-height: 1;
}
.experience-text {
font-size: 0.875rem;
color: var(--gray-600);
font-weight: 500;
line-height: 1.3;
}
.about-visual {
position: relative;
}
.about-image-container {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
margin-bottom: 32px;
}
.about-main-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: var(--transition-slow);
}
.about-image-container:hover .about-main-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-base);
}
.about-image-container:hover .image-overlay {
opacity: 1;
}
.play-button {
width: 80px;
height: 80px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
cursor: pointer;
transition: var(--transition-base);
box-shadow: var(--shadow-xl);
position: relative;
}
.play-button::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.play-button:hover {
transform: scale(1.1);
background: white;
color: var(--primary);
}
.about-cards {
display: grid;
gap: 20px;
}
.about-card {
background: white;
padding: 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.about-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: var(--transition-base);
}
.about-card:hover::before {
transform: scaleX(1);
}
.about-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.about-card .card-icon {
width: 56px;
height: 56px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 16px;
box-shadow: var(--shadow-md);
}
.about-card h5 {
font-family: var(--font-secondary);
font-weight: 600;
color: var(--dark);
margin-bottom: 12px;
font-size: 1.1rem;
}
.about-card p {
color: var(--gray-600);
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
/* ===================================
SERVICES SECTION
=================================== */
.services-section {
background: white;
position: relative;
}
.service-card {
background: white;
padding: 40px 32px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
height: 100%;
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: var(--transition-base);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-12px);
box-shadow: var(--shadow-2xl);
}
.service-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px;
transition: var(--transition-base);
box-shadow: var(--shadow-lg);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-content h4 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 16px;
line-height: 1.3;
font-size: 1.3rem;
}
.service-content p {
color: var(--gray-600);
line-height: 1.7;
margin-bottom: 20px;
}
.service-features {
list-style: none;
padding: 0;
margin-bottom: 24px;
}
.service-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
color: var(--gray-600);
font-size: 0.95rem;
}
.service-features i {
color: var(--primary);
font-size: 14px;
width: 16px;
}
.service-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
transition: var(--transition-base);
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
}
.service-link:hover {
color: var(--primary-dark);
gap: 12px;
}
/* ===================================
FEATURES SECTION
=================================== */
.features-section {
background: var(--gray-50);
position: relative;
}
.features-list {
display: flex;
flex-direction: column;
gap: 32px;
}
.features-list .feature-item {
display: flex;
gap: 24px;
align-items: flex-start;
padding: 32px;
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
border: 1px solid var(--gray-200);
}
.features-list .feature-item:hover {
transform: translateX(12px);
box-shadow: var(--shadow-xl);
}
.features-list .feature-icon {
width: 64px;
height: 64px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
box-shadow: var(--shadow-lg);
}
.feature-content h5 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 12px;
font-size: 1.2rem;
}
.feature-content p {
color: var(--gray-600);
line-height: 1.7;
margin: 0;
}
.features-image {
position: relative;
text-align: center;
}
.image-container {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
}
.features-image img {
width: 100%;
height: 500px;
object-fit: cover;
transition: var(--transition-slow);
}
.image-container:hover img {
transform: scale(1.05);
}
.feature-badge {
position: absolute;
top: 24px;
right: 24px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.badge-content {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-weight: 600;
font-size: 0.875rem;
}
.features-stats {
display: flex;
flex-direction: column;
gap: 24px;
}
.features-stats .stat-card {
background: white;
padding: 32px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 24px;
transition: var(--transition-base);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.features-stats .stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--gradient-primary);
transform: scaleY(0);
transition: var(--transition-base);
}
.features-stats .stat-card:hover::before {
transform: scaleY(1);
}
.features-stats .stat-card:hover {
transform: translateX(12px);
box-shadow: var(--shadow-xl);
}
.features-stats .stat-icon {
width: 64px;
height: 64px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
box-shadow: var(--shadow-lg);
}
.features-stats .stat-content h3 {
font-family: var(--font-secondary);
font-weight: 800;
color: var(--dark);
margin-bottom: 8px;
font-size: 1.5rem;
}
.features-stats .stat-content p {
color: var(--gray-600);
margin-bottom: 12px;
font-weight: 500;
}
.stat-progress {
width: 100%;
height: 4px;
background: var(--gray-200);
border-radius: 2px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--gradient-primary);
border-radius: 2px;
transition: width 1s ease-in-out;
}
/* ===================================
TESTIMONIALS SECTION
=================================== */
.testimonials-section {
background: white;
position: relative;
}
.testimonials-image {
position: relative;
}
.testimonials-image img {
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
width: 100%;
height: 600px;
object-fit: cover;
}
.testimonial-badge {
position: absolute;
top: 32px;
left: 32px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 16px 24px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.testimonial-badge .rating {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.testimonial-badge .rating i {
color: #fbbf24;
font-size: 16px;
}
.testimonial-badge span {
font-weight: 600;
color: var(--dark);
font-size: 0.875rem;
}
.testimonials-content {
padding: 60px 40px;
}
.testimonials-carousel {
margin-top: 32px;
}
.testimonial-item {
background: white;
padding: 40px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
margin-bottom: 20px;
border: 1px solid var(--gray-200);
position: relative;
}
.testimonial-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.quote-icon {
width: 64px;
height: 64px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow-lg);
}
.rating {
display: flex;
gap: 4px;
}
.rating i {
color: #fbbf24;
font-size: 18px;
}
.testimonial-text {
font-size: 1.125rem;
line-height: 1.7;
color: var(--gray-700);
margin-bottom: 32px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 20px;
}
.author-image {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--gray-200);
box-shadow: var(--shadow-md);
}
.author-info h6 {
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
font-size: 1.1rem;
}
.author-info span {
color: var(--primary);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.author-location {
color: var(--gray-500);
font-size: 0.8rem;
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
/* ===================================
CONTACT FORM SECTION
=================================== */
.contact-form-section {
background: var(--gray-50);
position: relative;
}
.contact-container {
background: white;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
border: 1px solid var(--gray-200);
}
.contact-form-content {
padding: 60px 40px;
}
.contact-info-cards {
display: grid;
gap: 16px;
margin-bottom: 40px;
}
.info-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--gray-50);
border-radius: var(--radius-lg);
transition: var(--transition-base);
border: 1px solid var(--gray-200);
}
.info-card:hover {
background: var(--primary);
color: white;
transform: translateX(8px);
}
.info-card:hover .info-icon {
background: white;
color: var(--primary);
}
.info-card:hover .info-content h6,
.info-card:hover .info-content p {
color: white;
}
.info-icon {
width: 48px;
height: 48px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
transition: var(--transition-base);
}
.info-content h6 {
font-weight: 600;
color: var(--dark);
margin-bottom: 4px;
font-size: 1rem;
}
.info-content p {
color: var(--gray-600);
margin: 0;
font-size: 0.9rem;
}
.form-header {
margin-bottom: 32px;
}
.form-header h4 {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
margin-bottom: 8px;
font-size: 1.5rem;
}
.form-header p {
color: var(--gray-600);
margin: 0;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: flex;
align-items: center;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
font-size: 0.95rem;
}
.form-group label i {
color: var(--primary);
width: 16px;
}
.form-control {
width: 100%;
padding: 16px 20px;
border: 2px solid var(--gray-300);
border-radius: var(--radius-lg);
font-size: 16px;
transition: var(--transition-base);
background: white;
font-family: var(--font-primary);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(243, 82, 90, 0.1);
transform: translateY(-2px);
}
.contact-image {
height: 100%;
min-height: 700px;
position: relative;
overflow: hidden;
}
.contact-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(21, 36, 64, 0.9), rgba(243, 82, 90, 0.8));
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.overlay-content {
text-align: center;
color: white;
}
.overlay-content h4 {
font-family: var(--font-secondary);
font-weight: 700;
margin-bottom: 16px;
font-size: 1.75rem;
}
.overlay-content p {
margin-bottom: 32px;
opacity: 0.9;
line-height: 1.6;
}
.contact-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-feature {
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.contact-feature i {
color: var(--primary-light);
font-size: 18px;
}
/* ===================================
FOOTER
=================================== */
.footer {
background: var(--dark);
color: white;
}
.newsletter-section {
background: var(--gradient-primary);
padding: 80px 0;
text-align: center;
position: relative;
}
.newsletter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.newsletter-content {
position: relative;
z-index: 2;
}
.newsletter-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin: 0 auto 24px;
color: white;
}
.newsletter-title {
font-family: var(--font-secondary);
font-weight: 800;
margin-bottom: 16px;
color: white;
font-size: 2.5rem;
}
.newsletter-description {
margin-bottom: 40px;
opacity: 0.95;
font-size: 1.125rem;
line-height: 1.6;
}
.newsletter-form {
max-width: 500px;
margin: 0 auto;
}
.newsletter-form .input-group {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
background: white;
}
.newsletter-form .form-control {
border: none;
padding: 18px 24px;
font-size: 16px;
background: transparent;
}
.newsletter-form .btn {
padding: 18px 32px;
border: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--dark);
transition: var(--transition-base);
}
.newsletter-form .btn:hover {
background: var(--gray-800);
transform: scale(1.05);
}
.newsletter-form .form-text {
color: rgba(255, 255, 255, 0.8);
margin-top: 12px;
font-size: 0.875rem;
}
.footer-content {
padding: 80px 0 40px;
}
.footer-widget {
margin-bottom: 40px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.footer-logo {
height: 40px;
width: auto;
}
.footer-brand .brand-name {
font-family: var(--font-secondary);
font-weight: 700;
color: white;
margin: 0;
font-size: 1.25rem;
}
.footer-description {
color: var(--gray-400);
line-height: 1.7;
margin-bottom: 24px;
}
.widget-title {
font-family: var(--font-secondary);
font-weight: 700;
margin-bottom: 24px;
color: white;
font-size: 1.2rem;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: var(--gray-400);
text-decoration: none;
transition: var(--transition-base);
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
}
.footer-links a::before {
content: '';
width: 4px;
height: 4px;
background: var(--primary);
border-radius: 50%;
transition: var(--transition-base);
}
.footer-links a:hover {
color: var(--primary);
padding-left: 12px;
}
.contact-info .contact-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding: 16px;
background: var(--gray-800);
border-radius: var(--radius-lg);
transition: var(--transition-base);
}
.contact-info .contact-item:hover {
background: var(--gray-700);
transform: translateX(8px);
}
.contact-info .contact-item i {
color: var(--primary);
width: 20px;
text-align: center;
font-size: 18px;
margin-top: 2px;
}
.contact-details strong {
display: block;
color: white;
font-weight: 600;
margin-bottom: 4px;
font-size: 0.9rem;
}
.contact-details span {
color: var(--gray-400);
font-size: 0.9rem;
}
.social-links {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.social-link {
width: 48px;
height: 48px;
background: var(--gray-800);
color: var(--gray-400);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition-base);
font-size: 18px;
}
.social-link:hover {
background: var(--primary);
color: white;
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.footer-bottom {
border-top: 1px solid var(--gray-800);
padding: 32px 0;
}
.copyright {
margin: 0;
color: var(--gray-400);
font-size: 0.9rem;
}
.copyright a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.footer-bottom-links {
display: flex;
gap: 24px;
justify-content: flex-end;
flex-wrap: wrap;
}
.footer-bottom-links a {
color: var(--gray-400);
text-decoration: none;
font-size: 0.9rem;
transition: var(--transition-base);
}
.footer-bottom-links a:hover {
color: var(--primary);
}
/* ===================================
BACK TO TOP BUTTON
=================================== */
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 56px;
height: 56px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition-base);
opacity: 0;
visibility: hidden;
z-index: var(--z-fixed);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2xl);
}
/* ===================================
BUTTONS
=================================== */
.btn {
border-radius: var(--radius-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition-base);
border: none;
position: relative;
overflow: hidden;
font-family: var(--font-primary);
}
.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: var(--gradient-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
color: white;
}
.btn-lg {
padding: 16px 32px;
font-size: 16px;
}
/* ===================================
RESOURCES PAGE STYLES
=================================== */
.resource-nav .nav-pills {
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 8px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.resource-nav .nav-pills .nav-link {
border-radius: 40px;
padding: 12px 24px;
font-weight: 500;
color: #152440;
transition: all 0.3s ease;
border: none;
background: transparent;
}
.resource-nav .nav-pills .nav-link:hover {
background: rgba(243, 82, 90, 0.1);
color: #F3525A;
transform: translateY(-2px);
}
.resource-nav .nav-pills .nav-link.active {
background: #F3525A;
color: white;
box-shadow: 0 8px 25px rgba(243, 82, 90, 0.3);
}
.resource-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
height: 100%;
display: flex;
flex-direction: column;
}
.resource-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.resource-image {
position: relative;
overflow: hidden;
height: 200px;
}
.resource-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.resource-card:hover .resource-image img {
transform: scale(1.1);
}
.resource-overlay {
position: absolute;
top: 15px;
right: 15px;
background: rgba(21, 36, 64, 0.9);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(10px);
}
.resource-overlay i {
margin-right: 5px;
}
.resource-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.resource-title {
font-size: 18px;
font-weight: 600;
color: #152440;
margin-bottom: 15px;
line-height: 1.4;
}
.resource-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
font-size: 13px;
color: #6B6A75;
}
.resource-meta span {
display: flex;
align-items: center;
}
.resource-meta i {
color: #F3525A;
margin-right: 5px;
}
.resource-summary {
color: #6B6A75;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.resource-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.resource-actions .btn {
flex: 1;
min-width: 120px;
border-radius: 10px;
font-weight: 500;
padding: 10px 16px;
transition: all 0.3s ease;
}
.resource-actions .btn-primary {
background: linear-gradient(135deg, #F3525A, #E8434A);
border: none;
box-shadow: 0 4px 15px rgba(243, 82, 90, 0.3);
}
.resource-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(243, 82, 90, 0.4);
}
.resource-actions .btn-outline-secondary {
border-color: #E5E5E5;
color: #6B6A75;
}
.resource-actions .btn-outline-secondary:hover {
background: #F8F9FA;
border-color: #F3525A;
color: #F3525A;
transform: translateY(-2px);
}
/* Video Specific Styles */
.video-container {
position: relative;
height: 200px;
}
.video-thumbnail {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(243, 82, 90, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.play-overlay:hover {
background: rgba(243, 82, 90, 1);
transform: translate(-50%, -50%) scale(1.1);
}
.video-duration {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
/* Modal Enhancements */
.modal-content {
border-radius: 20px;
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-header {
border-bottom: 1px solid #E5E5E5;
padding: 20px 25px;
}
.modal-body {
padding: 25px;
}
.modal-footer {
border-top: 1px solid #E5E5E5;
padding: 20px 25px;
}
/* Responsive Design */
@media (max-width: 768px) {
.resource-nav .nav-pills {
flex-direction: column;
padding: 4px;
}
.resource-nav .nav-pills .nav-link {
margin-bottom: 4px;
text-align: center;
}
.resource-actions {
flex-direction: column;
}
.resource-actions .btn {
min-width: auto;
}
.resource-meta {
flex-direction: column;
gap: 8px;
}
.modal-dialog.modal-xl {
margin: 10px;
}
}
@media (max-width: 576px) {
.resource-content {
padding: 20px;
}
.resource-title {
font-size: 16px;
}
.resource-image {
height: 180px;
}
.play-overlay {
width: 50px;
height: 50px;
font-size: 16px;
}
}
/* Animation Classes */
.animate-in {
animation: slideInUp 0.6s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loading States */
.resource-card.loading {
opacity: 0.7;
pointer-events: none;
}
.resource-card.loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
/* Prevent horizontal scrolling */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* Container improvements */
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 575.98px) {
.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
}
/* Mobile Navigation */
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-radius: 12px;
margin-top: 1rem;
padding: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
background: rgba(243, 82, 90, 0.1);
color: #F3525A !important;
}
.cta-btn {
margin-top: 1rem;
width: 100%;
white-space: nowrap;
}
/* Hero Section Mobile */
.hero-content h1 {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 1rem;
word-wrap: break-word;
}
.hero-content p {
font-size: 1rem;
margin-bottom: 1.5rem;
word-wrap: break-word;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-buttons .btn {
width: 100%;
margin-bottom: 1rem;
}
/* Prevent button overflow */
.hero-buttons .btn {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Stats Mobile */
.hero-stats-container {
margin-top: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.stat-card {
padding: 1rem;
}
/* Service cards mobile */
.service-card {
margin-bottom: 1.5rem;
word-wrap: break-word;
}
.service-card h4 {
word-wrap: break-word;
}
.service-card p {
word-wrap: break-word;
}
/* About Section Mobile */
.about-content h2 {
font-size: 2rem;
word-wrap: break-word;
}
.about-content p {
font-size: 0.95rem;
word-wrap: break-word;
}
.about-card {
margin-bottom: 1.5rem;
word-wrap: break-word;
}
/* Features Mobile */
.feature-item {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.feature-item h5 {
word-wrap: break-word;
}
.feature-item p {
word-wrap: break-word;
}
/* Testimonials Mobile */
.testimonial-item {
padding: 1.5rem;
word-wrap: break-word;
}
.testimonial-content {
font-size: 0.95rem;
word-wrap: break-word;
}
/* Contact Form Mobile */
.contact-form .row .col-md-6 {
margin-bottom: 1rem;
}
/* Form inputs mobile */
.form-control,
.form-select {
font-size: 16px;
/* Prevents zoom on iOS */
max-width: 100%;
}
/* Footer Mobile */
.footer-widget {
margin-bottom: 2rem;
text-align: center;
}
.footer-widget h5 {
word-wrap: break-word;
}
.footer-widget p {
word-wrap: break-word;
}
.footer-links {
justify-content: center;
}
.social-links {
justify-content: center;
}
.footer-bottom {
text-align: center;
}
.footer-bottom .row>div {
text-align: center !important;
margin-bottom: 16px;
}
.footer-bottom-links {
justify-content: center;
text-align: center;
}
/* Blog content mobile */
.blog-item h3,
.blog-item h4 {
word-wrap: break-word;
line-height: 1.3;
}
.blog-excerpt {
word-wrap: break-word;
}
/* Sidebar mobile */
.blog-sidebar {
margin-top: 2rem;
}
.sidebar-widget {
word-wrap: break-word;
}
/* Table responsive */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Image responsive */
img {
max-width: 100%;
height: auto;
}
}
/* Tablet Styles */
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
word-wrap: break-word;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-buttons .btn {
width: 100%;
margin-bottom: 1rem;
}
/* Service cards tablet */
.service-card h4 {
word-wrap: break-word;
}
/* About Section Tablet */
.about-content h2 {
font-size: 2.5rem;
word-wrap: break-word;
}
/* Features Tablet */
.feature-item {
padding: 1.25rem;
}
}
/* Extra small devices */
@media (max-width: 375px) {
.container-fluid {
padding-left: 8px;
padding-right: 8px;
}
.hero-content h1 {
font-size: 1.75rem;
}
.btn {
font-size: 0.875rem;
padding: 0.5rem 1rem;
}
.navbar-brand .brand-name {
font-size: 1.1rem;
}
.navbar-brand .brand-tagline {
font-size: 0.7rem;
}
}
/* ===================================
FLOATING ELEMENTS
=================================== */
/* WhatsApp Float Button */
.whatsapp-float {
position: fixed;
bottom: 90px;
/* Moved above the back-to-top button */
right: 30px;
width: 60px;
height: 60px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
animation: pulse 2s infinite;
}
.whatsapp-float:hover {
background-color: #128c7e;
color: #FFF;
text-decoration: none;
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4);
}
@keyframes pulse {
0% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}
50% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6);
}
100% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 56px;
height: 56px;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition-base);
opacity: 0;
visibility: hidden;
z-index: var(--z-fixed);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile adjustments for floating buttons */
@media (max-width: 767.98px) {
.whatsapp-float {
bottom: 80px;
right: 20px;
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 1rem;
}
}
/* ===================================
LOADING SCREEN
=================================== */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-content {
text-align: center;
color: white;
}
.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 24px;
}
.loading-text h4 {
font-family: var(--font-secondary);
font-weight: 700;
margin-bottom: 8px;
font-size: 1.5rem;
}
.loading-text p {
font-size: 1rem;
opacity: 0.9;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ===================================
ADDITIONAL RESPONSIVE FIXES
=================================== */
/* Fix for dropdown menus on mobile */
@media (max-width: 991.98px) {
.dropdown-menu {
position: static !important;
float: none;
width: 100%;
margin-top: 0;
background-color: rgba(21, 36, 64, 0.95);
border: none;
border-radius: 0;
box-shadow: none;
}
.dropdown-item {
color: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: rgba(243, 82, 90, 0.1);
color: #F3525A;
}
}
/* Fix for long content on mobile */
@media (max-width: 575.98px) {
.card-title,
.service-title,
.feature-title {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.btn {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Fix for tables on mobile */
.table {
font-size: 0.875rem;
}
.table th,
.table td {
padding: 0.5rem 0.25rem;
word-wrap: break-word;
}
}
/* Ensure no horizontal overflow */
* {
box-sizing: border-box;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
@media (max-width: 575.98px) {
.row {
margin-left: -10px;
margin-right: -10px;
}
.col,
[class*="col-"] {
padding-left: 10px;
padding-right: 10px;
}
}
/* Fix for form elements */
.form-control,
.form-select,
.btn {
max-width: 100%;
box-sizing: border-box;
}
/* Fix for images and media */
.img-fluid,
img {
max-width: 100%;
height: auto;
}
/* Fix for embedded content */
iframe,
embed,
object,
video {
max-width: 100%;
height: auto;
}
/* ===================================
FLOATING WHATSAPP BUTTON
=================================== */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 110px;
right: 30px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 1000;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.whatsapp-float:hover {
background-color: #128c7e;
color: #FFF;
transform: scale(1.1);
text-decoration: none;
}
.whatsapp-float i {
margin-top: 2px;
}
@media screen and (max-width: 767px) {
.whatsapp-float {
width: 50px;
height: 50px;
bottom: 110px;
right: 20px;
font-size: 24px;
}
}
/* Icon containers for replaced images */
.about-icon-container,
.team-icon-container,
.blog-icon-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #F3525A, #152440);
border-radius: 15px;
}
.about-main-icon {
font-size: 120px;
color: white;
}
.team-icon-container i {
font-size: 80px;
color: white;
}
.blog-icon-container {
height: 250px;
}
.blog-icon-container i {
font-size: 60px;
color: white;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #F3525A, #152440);
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.testimonial-avatar i {
font-size: 24px;
color: white;
}
.client-logo {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 0.3s ease;
}
.client-logo i {
font-size: 40px;
color: #F3525A;
transition: all 0.3s ease;
}
.client-logo:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
}
.client-logo:hover i {
color: #152440;
transform: scale(1.1);
}
.hero-badge-icon {
font-size: 24px;
color: #F3525A;
margin-right: 10px;
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
/* Mobile First Approach */
@media (max-width: 575.98px) {
.hero-content h1 {
font-size: 2rem !important;
}
.hero-content .lead {
font-size: 1rem !important;
}
.service-card {
margin-bottom: 2rem;
}
.about-stats {
flex-direction: column;
gap: 1rem;
}
.stat-item {
text-align: center;
}
.team-item {
margin-bottom: 2rem;
}
.blog-item {
margin-bottom: 2rem;
}
.contact-form .row .col-md-6 {
margin-bottom: 1rem;
}
.topbar {
display: none;
}
.navbar-brand .brand-text {
display: none;
}
.hero-stats-container {
margin-top: 2rem;
}
.hero-stats-container .row {
text-align: center;
}
.cta-btn {
display: none;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
.hero-content h1 {
font-size: 2.5rem !important;
}
.navbar-brand .brand-text {
display: block;
}
.cta-btn {
display: inline-block;
font-size: 0.875rem;
padding: 0.5rem 1rem;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-content h1 {
font-size: 3rem !important;
}
.service-card {
margin-bottom: 2rem;
}
.team-item {
margin-bottom: 2rem;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.container {
max-width: 960px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Image Responsiveness */
.img-fluid {
max-width: 100%;
height: auto;
}
/* Responsive Images with Aspect Ratio */
.blog-img img,
.recent-post-img img,
.related-post-img img,
.team-img img,
.about-image img,
.features-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.blog-img,
.recent-post-img,
.related-post-img {
position: relative;
overflow: hidden;
border-radius: 12px;
}
.blog-img {
aspect-ratio: 16/9;
}
.recent-post-img,
.related-post-img {
aspect-ratio: 4/3;
}
.team-img {
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
}
.about-image,
.features-image {
aspect-ratio: 4/3;
border-radius: 16px;
overflow: hidden;
}
/* Avatar Images */
.author-avatar,
.comment-avatar img,
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.author-avatar {
width: 60px;
height: 60px;
}
.comment-avatar {
width: 50px;
height: 50px;
}
.testimonial-avatar {
width: 80px;
height: 80px;
}
.author-avatar-large {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
/* Client Logo Responsiveness */
.client-logo {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
padding: 1rem;
}
.client-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.client-logo:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
/* Resource Icons Enhancement */
.resource-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(243, 82, 90, 0.1), rgba(21, 36, 64, 0.1));
border-radius: 50%;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.resource-item:hover .resource-icon {
background: linear-gradient(135deg, rgba(243, 82, 90, 0.2), rgba(21, 36, 64, 0.2));
transform: translateY(-5px);
}
.resource-icon i {
transition: all 0.3s ease;
}
.resource-item:hover .resource-icon i {
transform: scale(1.1);
color: #F3525A !important;
}
/* Enhanced Responsive Navigation */
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-radius: 12px;
margin-top: 1rem;
padding: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
border-radius: 8px;
margin-bottom: 0.25rem;
transition: all 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
background: rgba(243, 82, 90, 0.1);
color: #F3525A !important;
}
.cta-btn {
margin-top: 1rem;
width: 100%;
text-align: center;
}
}
/* Enhanced Grid Responsiveness */
@media (max-width: 767.98px) {
.stats-grid .col-md-3 {
margin-bottom: 2rem;
}
.stats-grid .col-md-3:last-child {
margin-bottom: 0;
}
.service-grid .col-lg-4 {
margin-bottom: 2rem;
}
.service-grid .col-lg-4:last-child {
margin-bottom: 0;
}
}
/* Enhanced Typography Responsiveness */
@media (max-width: 575.98px) {
h1,
.h1 {
font-size: 1.75rem;
}
h2,
.h2 {
font-size: 1.5rem;
}
h3,
.h3 {
font-size: 1.25rem;
}
h4,
.h4 {
font-size: 1.125rem;
}
h5,
.h5 {
font-size: 1rem;
}
h6,
.h6 {
font-size: 0.875rem;
}
.display-4 {
font-size: 2rem;
}
.lead {
font-size: 1rem;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
h1,
.h1 {
font-size: 2rem;
}
h2,
.h2 {
font-size: 1.75rem;
}
h3,
.h3 {
font-size: 1.5rem;
}
.display-4 {
font-size: 2.5rem;
}
}
/* Enhanced Button Responsiveness */
@media (max-width: 575.98px) {
.btn {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* Enhanced Form Responsiveness */
@media (max-width: 767.98px) {
.contact-form .form-group {
margin-bottom: 1.5rem;
}
.newsletter-form .input-group {
flex-direction: column;
}
.newsletter-form .form-control {
border-radius: 8px;
margin-bottom: 1rem;
}
.newsletter-form .btn {
border-radius: 8px;
width: 100%;
}
}
/* Enhanced Card Responsiveness */
@media (max-width: 575.98px) {
.service-card,
.about-card,
.feature-item,
.stat-card {
padding: 1.5rem;
}
.service-icon,
.about-icon,
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* Enhanced Spacing for Mobile */
@media (max-width: 767.98px) {
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.mb-5 {
margin-bottom: 3rem !important;
}
.section-title {
margin-bottom: 2rem;
}
}
/* Enhanced Loading Screen Responsiveness */
@media (max-width: 575.98px) {
.loading-content h4 {
font-size: 1.25rem;
}
.loading-content p {
font-size: 0.875rem;
}
.loading-spinner {
width: 40px;
height: 40px;
}
}
/* Enhanced Modal Responsiveness */
@media (max-width: 575.98px) {
.modal-dialog {
margin: 1rem;
}
.modal-content {
border-radius: 12px;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
}
/* Enhanced Notification Responsiveness */
@media (max-width: 575.98px) {
.notification {
left: 1rem;
right: 1rem;
min-width: auto;
}
.notification-content {
padding: 1rem;
}
}
/* Print Styles */
@media print {
.topbar,
.navbar,
.footer,
.back-to-top,
.loading-screen,
.hero-nav,
.play-button,
.social-links,
.cta-btn,
.btn {
display: none !important;
}
.hero-section {
background: none !important;
color: #000 !important;
}
.hero-content {
background: none !important;
color: #000 !important;
}
body {
font-size: 12pt;
line-height: 1.4;
color: #000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
page-break-after: avoid;
}
p,
li {
orphans: 3;
widows: 3;
}
.page-break {
page-break-before: always;
}
}
/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.brand-logo,
.footer-logo {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.loading-spinner {
animation: none;
border: 4px solid #F3525A;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.navbar {
background: rgba(21, 36, 64, 0.95) !important;
}
.navbar.scrolled {
background: rgba(21, 36, 64, 0.98) !important;
}
.service-card,
.about-card,
.feature-item,
.stat-card,
.blog-item,
.sidebar-widget {
background: rgba(21, 36, 64, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
}
/* Container Responsiveness */
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 576px) {
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 768px) {
.container-fluid {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) {
.container-fluid {
padding-left: 40px;
padding-right: 40px;
}
}
/* Enhanced Flexbox Utilities for Responsiveness */
@media (max-width: 767.98px) {
.d-md-flex {
display: block !important;
}
.flex-md-row {
flex-direction: column !important;
}
.justify-content-md-between {
justify-content: center !important;
}
.text-md-start {
text-align: center !important;
}
.text-md-end {
text-align: center !important;
}
}
/* Enhanced Carousel Responsiveness */
@media (max-width: 575.98px) {
.testimonials-carousel .testimonial-content {
padding: 1.5rem;
}
.testimonial-text {
font-size: 0.875rem;
}
.testimonial-author h6 {
font-size: 1rem;
}
.testimonial-author span {
font-size: 0.75rem;
}
}
/* Enhanced Footer Responsiveness */
@media (max-width: 767.98px) {
.footer-widget {
margin-bottom: 2rem;
text-align: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.social-links {
justify-content: center;
}
.contact-info .contact-item {
justify-content: center;
text-align: center;
}
.footer-bottom {
text-align: center;
}
.footer-bottom-links {
justify-content: center;
margin-top: 1rem;
}
}
/* Enhanced Blog Responsiveness */
@media (max-width: 991.98px) {
.blog-sidebar {
margin-top: 3rem;
}
}
@media (max-width: 575.98px) {
.blog-meta {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.blog-tags {
justify-content: center;
}
.post-meta {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.author-info {
justify-content: center;
}
.post-stats {
justify-content: center;
flex-wrap: wrap;
}
}
/* Enhanced Accessibility */
@media (max-width: 575.98px) {
.btn,
.nav-link,
.page-link {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.form-control,
.form-select {
min-height: 44px;
}
}
/* Enhanced Performance for Mobile */
@media (max-width: 767.98px) {
.hero-section {
background-attachment: scroll;
}
.parallax-bg {
background-attachment: scroll;
}
}
@media (max-width: 1199.98px) {
.hero-stats-container {
margin-top: 40px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.stat-number {
font-size: 2rem;
}
}
@media (max-width: 991.98px) {
:root {
--section-padding: 80px 0;
}
.topbar {
display: none;
}
.hero-content {
text-align: center;
margin-top: 80px;
}
.hero-buttons {
justify-content: center;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 40px;
}
.contact-form-content,
.testimonials-content {
padding: 40px 32px;
}
.about-features .feature-item {
padding: 24px 20px;
}
.features-list .feature-item {
padding: 24px;
}
.features-stats {
margin-top: 40px;
}
.newsletter-title {
font-size: 2rem;
}
}
@media (max-width: 767.98px) {
:root {
--section-padding: 60px 0;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-buttons .btn {
width: 100%;
max-width: 300px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.stat-number {
font-size: 1.8rem;
}
.contact-form-content,
.testimonials-content {
padding: 32px 24px;
}
.hero-nav {
bottom: 24px;
right: 24px;
}
.hero-nav-btn {
width: 48px;
height: 48px;
}
.back-to-top {
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
}
.social-links {
justify-content: center;
}
.footer-bottom {
text-align: center;
}
.footer-bottom .row>div {
text-align: center !important;
margin-bottom: 16px;
}
.footer-bottom-links {
justify-content: center;
}
.about-cta {
flex-direction: column;
align-items: center;
text-align: center;
}
.features-list .feature-item {
flex-direction: column;
text-align: center;
gap: 20px;
}
.testimonial-author {
flex-direction: column;
text-align: center;
gap: 16px;
}
.contact-info-cards {
grid-template-columns: 1fr;
}
.floating-elements {
display: none;
}
}
@media (max-width: 575.98px) {
.section-title {
font-size: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1.1rem;
}
.service-card,
.about-card {
padding: 24px 20px;
}
.newsletter-form .input-group {
flex-direction: column;
}
.newsletter-form .btn {
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.newsletter-form .form-control {
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.newsletter-title {
font-size: 1.75rem;
}
.contact-image {
min-height: 400px;
}
.overlay-content {
padding: 24px;
}
}
/* ===================================
UTILITY CLASSES
=================================== */
.text-primary {
color: var(--primary) !important;
}
.bg-primary {
background-color: var(--primary) !important;
}
.object-cover {
object-fit: cover;
}
.rounded-4 {
border-radius: var(--radius-2xl) !important;
}
/* ===================================
CUSTOM SCROLLBAR
=================================== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-200);
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* ===================================
SELECTION STYLES
=================================== */
::selection {
background: var(--primary);
color: white;
}
::-moz-selection {
background: var(--primary);
color: white;
}
/* ===================================
MODAL STYLES
=================================== */
.modal-content {
border-radius: var(--radius-xl);
border: none;
box-shadow: var(--shadow-2xl);
}
.modal-header {
border-bottom: 1px solid var(--gray-200);
padding: 24px;
}
.modal-title {
font-family: var(--font-secondary);
font-weight: 700;
color: var(--dark);
}
.btn-close {
background: none;
border: none;
font-size: 1.5rem;
opacity: 0.7;
}
.btn-close:hover {
opacity: 1;
}
/* ===================================
ACCESSIBILITY IMPROVEMENTS
=================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus styles for better accessibility */
.btn:focus,
.form-control:focus,
.nav-link:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--gray-600: #000000;
--gray-700: #000000;
}
}
/* ===================================
PRINT STYLES
=================================== */
@media print {
.topbar,
.navbar,
.footer,
.back-to-top,
.loading-screen,
.hero-nav,
.play-button,
.social-links,
.cta-btn,
.btn {
display: none !important;
}
.hero-section {
background: none !important;
color: #000 !important;
}
.hero-content {
background: none !important;
color: #000 !important;
}
body {
font-size: 12pt;
line-height: 1.4;
color: #000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
page-break-after: avoid;
}
p,
li {
orphans: 3;
widows: 3;
}
.page-break {
page-break-before: always;
}
}