:root {
/* Fonts */
--font-default: "Figtree", 'Poppins', sans-serif;
--font-primary: 'Poppins', sans-serif;
/* Brand Colors */
/*  --color-primary: #FFB300; 
--color-secondary: #212529; 
--color-accent: #343a40; 
--color-default: #444444; 
--color-headings: #1a1a1a; 
--color-text-muted: #777777; 
--color-bg-light: #fdfdfd; */
--color-primary: #C62828;
--color-secondary: #2C3E50;
--color-accent: #E53935;
--color-default: #555;
--color-headings: #1A2B3C;
--color-text-muted: #6C757D;
--color-bg-light: #F8F9FA;
--color-white: #ffffff;
--color-black: #000000;
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
body {
top: 0 !important;
position: static !important;
font-family: var(--font-default);
color: var(--color-default);
background-color: var(--color-bg-light);
line-height: 1.6;
overflow-x: hidden;
}
/* --- Headings --- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
color: var(--color-headings);
/* Navy Blue */
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
/* Desktop Sizes */
h1 {
font-size: 3.5rem;
text-transform: uppercase;
letter-spacing: -1px;
}
h2 {
font-size: 2.5rem;
position: relative;
padding-bottom: 15px;
text-transform: uppercase;
}
h3 {
font-size: 1.75rem;
}
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
}
h2::after {
content: "";
/*  position: absolute;*/
display: block;
width: 60px;
height: 4px;
background: var(--color-primary);
bottom: 0;
left: 0;
}
/* --- Paragraphs --- */
p {
font-size: 15px;
/*  margin-bottom: 1.5rem;
text-align: justify;*/
color: var(--color-default);
line-height: 1.8;
margin-bottom: 15px;
text-align: justify;
}
/* --- Links/Anchors --- */
a {
color: var(--color-primary);
text-decoration: none;
transition: 0.3s all ease;
}
a:hover {
color: var(--color-secondary);
text-decoration: none;
}
/* --- Lists (UL/LI) --- */
ul {
list-style: none;
padding: 0;
}
ul li {
position: relative;
padding-left: 10px;
margin-bottom: 8px;
font-size: 15px;
}
/* Custom Bullet Icon */
ul li::before {
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
}
/* --- Buttons --- */
.btn-get-started {
background: var(--color-primary);
color: #fff;
padding: 12px 30px;
border-radius: 4px;
font-weight: 600;
border: 2px solid var(--color-primary);
transition: 0.4s;
}
.btn-get-started:hover {
background: transparent;
color: var(--color-primary);
box-shadow: 0 5px 15px rgba(255, 179, 0, 0.3);
}
/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section{
padding:20px 0;
overflow:hidden;
}

.section-bg{
background-color:#f5f6f7;
}

.section-header{
text-align:center;
padding:25px;
}

/* ===== ALL HEADINGS ===== */

.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4,
.section-header h5,
.section-header h6{
font-weight:700;
position:relative;
color:#2e3135;
}

/* ===== DESKTOP SIZE ===== */

.section-header h1{font-size:40px;}
.section-header h2{font-size:34px;}
.section-header h3{font-size:30px;}
.section-header h4{font-size:26px;}
.section-header h5{font-size:22px;}
.section-header h6{font-size:18px;}

/* ===== LINE DESIGN ===== */

.section-header h1:before,
.section-header h2:before,
.section-header h3:before,
.section-header h4:before,
.section-header h5:before,
.section-header h6:before,

.section-header h1:after,
.section-header h2:after,
.section-header h3:after,
.section-header h4:after,
.section-header h5:after,
.section-header h6:after{
content:"";
width:50px;
height:2px;
background:var(--color-primary);
display:inline-block;
}

.section-header h1:before,
.section-header h2:before,
.section-header h3:before,
.section-header h4:before,
.section-header h5:before,
.section-header h6:before{
margin:0 15px 10px 0;
}

.section-header h1:after,
.section-header h2:after,
.section-header h3:after,
.section-header h4:after,
.section-header h5:after,
.section-header h6:after{
margin:0 0 10px 15px;
}

/* ===== PARAGRAPH ===== */

.section-header p{
margin:auto;
}

/* ===== DESKTOP WIDTH ===== */

@media (min-width:1199px){

.section-header p{
max-width:60%;
}

}

/* ===== MOBILE ===== */

@media (max-width:768px){

.section-header{
padding:15px;
}

.section-header h1{font-size:28px;}
.section-header h2{font-size:26px;}
.section-header h3{font-size:24px;}
.section-header h4{font-size:22px;}
.section-header h5{font-size:20px;}
.section-header h6{font-size:18px;}

.section-header p{
font-size:14px;
padding:0 10px;
}

}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs{
padding:140px 0 60px 0;
min-height:30vh;
position:relative;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-bottom:4px solid #C62828;
}

.breadcrumbs:before{
content:"";
background-color:rgba(0,0,0,0.6);
position:absolute;
inset:0;
}

.breadcrumbs .container{
position:relative;
z-index:2;
}

/* Heading */

.breadcrumbs h2{
font-size:56px;
font-weight:500;
color:#fff;
font-family:var(--font-secondary);
margin-bottom:10px;
}

/* Breadcrumb list */

.breadcrumbs ol{
display:flex;
flex-wrap:wrap;
list-style:none;
padding:0 0 10px 0;
margin:0;
font-size:16px;
font-weight:600;
color:var(--color-primary);
}

.breadcrumbs ol a{
color:rgba(255,255,255,0.8);
transition:0.3s;
}

.breadcrumbs ol a:hover{
text-decoration:underline;
}

.breadcrumbs ol li+li{
padding-left:10px;
}

.breadcrumbs ol li+li::before{
display:inline-block;
padding-right:10px;
color:#fff;
content:"/";
}

/* ====================== */
/* TABLET */
/* ====================== */

@media (max-width:992px){

.breadcrumbs{
padding:120px 0 50px 0;
}

.breadcrumbs h2{
font-size:40px;
}

.breadcrumbs ol{
font-size:14px;
}

}

/* ====================== */
/* MOBILE */
/* ====================== */

@media (max-width:768px){

.breadcrumbs{
padding:100px 0 40px 0;
min-height:20vh;
text-align:center;
}

.breadcrumbs h2{
font-size:28px;
}

.breadcrumbs ol{
justify-content:center;
font-size:13px;
}

}

/* ====================== */
/* SMALL MOBILE */
/* ====================== */

@media (max-width:480px){

.breadcrumbs h2{
font-size:22px;
}

.breadcrumbs ol{
font-size:12px;
}

}
/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background: var(--color-primary);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: var(--color-secondary);
line-height: 0;
}
.scroll-top:hover {
background: var(--color-secondary);
color: #fff;
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: #fff;
transition: all 0.6s ease-out;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #fff;
border-color: var(--color-primary) transparent var(--color-primary) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1.5s linear infinite;
animation: animate-preloader 1.5s linear infinite;
}
@-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header - Base Styles (Shared across all devices)
--------------------------------------------------------------*/
.header {
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
background: #011627; /* Deep Navy Blue */
}
.header .logo img {
max-height: 50px;
margin-right: 10px;
}
.header .logo h1 {
font-size: 30px;
margin: 0;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
.header .logo span {
color: var(--color-primary); /* Red */
}
/*--------------------------------------------------------------
# Search Bar Styling
--------------------------------------------------------------*/
.search-form {
position: relative;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 2px;
}
.search-form .form-control {
background: transparent;
border: none;
color: #fff;
padding-left: 15px;
}
.search-form .btn-search {
color: var(--color-primary);
background: transparent;
border: none;
}
/*--------------------------------------------------------------
# Navigation Arrows - Device Specific
--------------------------------------------------------------*/
/* Default Desktop */
.desktop-arrow {
display: inline-block;
}
.mobile-arrow {
display: none;
}
/* Mobile Devices */
@media (max-width: 1279px) {
.desktop-arrow {
display: none;
}
.mobile-arrow {
display: inline-block;
}
}
/*--------------------------------------------------------------
# Back Button - Mobile Only
--------------------------------------------------------------*/
.back-btn {
display: none;
}
@media (max-width: 1279px) {
.back-btn {
display: block;
}
}
/*--------------------------------------------------------------
# Desktop Navigation (1280px and above)
--------------------------------------------------------------*/
@media (min-width: 1280px) {
/* Main Navigation Container */
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar > ul > li {
white-space: nowrap;
padding: 10px 0 10px 28px;
}
/* Navigation Links */
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
white-space: nowrap;
transition: 0.3s;
position: relative;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
/* Hover Underline Effect */
.navbar > ul > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -6px;
left: 0;
background-color: var(--color-primary);
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before {
visibility: visible;
width: 100%;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #fff;
}
/* Dropdown Menus */
.navbar .dropdown ul {
display: block;
position: absolute;
left: 28px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
color: var(--color-default);
font-weight: 400;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
color: var(--color-primary);
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
/* Nested Dropdowns (Multi-level) */
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
/* Hide Mobile Navigation Toggles on Desktop */
.mobile-nav-show,
.mobile-nav-hide {
display: none;
}
}
/* Desktop Dropdown Position Adjustment for Smaller Screens */
@media (min-width: 1280px) and (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/*--------------------------------------------------------------
# Mobile Navigation (1279px and below)
--------------------------------------------------------------*/
@media (max-width: 1279px) {
/* Main Navigation Container - Slide from Right */
.navbar {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 400px;
bottom: 0;
transition: 0.3s;
z-index: 9997;
overflow: hidden;
}
/* Mobile Menu Panel */
.navbar > ul {
position: absolute;
inset: 0;
padding: 50px 0 10px 0;
margin: 0;
background: rgba(0, 0, 0, 0.8);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
}
/* Submenu Styling */
.navbar .submenu {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
padding-top: 60px;
transition: .4s;
}
.navbar .submenu.active {
left: 0;
}
/* Hide Parent Menu Items When Submenu is Open */
.navbar.submenu-open > ul > li:not(.dropdown) {
display: none;
}
/* Mobile Navigation Links */
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
text-transform: uppercase;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #fff;
}
/* Dropdown Active States */
.navbar .dropdown > .dropdown-active,
.navbar .dropdown .dropdown > .dropdown-active {
display: block;
}
/* Back Button Styling */
.back-btn a {
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Mobile Navigation Toggles */
.mobile-nav-show {
position: relative;
color: #fff;
font-size: 28px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
z-index: 9999;
padding-right: 10px;
}
.mobile-nav-hide {
color: #fff;
font-size: 32px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
position: fixed;
right: 20px;
top: 20px;
z-index: 9999;
}
/* Active Mobile Menu States */
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .navbar {
right: 0;
}
.mobile-nav-active .navbar:before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9996;
}
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
padding: 40px;
background: #fff;
height: 100%;
}
.services .service-item .icon {
width: 48px;
height: 48px;
position: relative;
margin-bottom: 50px;
}
.services .service-item .icon i {
color: var(--color-secondary);
font-size: 40px;
transition: ease-in-out 0.3s;
z-index: 2;
position: relative;
line-height: 1.8;
}
.services .service-item .icon:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: #f0f1f2;
border-radius: 50px;
z-index: 1;
top: 10px;
right: -15px;
transition: 0.3s;
}
.services .service-item h3 {
color: var(--color-default);
font-weight: 700;
margin: 0 0 20px 0;
padding-bottom: 8px;
font-size: 22px;
position: relative;
display: inline-block;
border-bottom: 4px solid #ebebed;
transition: 0.3s;
}
.services .service-item p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .service-item .readmore {
margin-top: 15px;
display: inline-block;
color: var(--color-primary);
}
.services .service-item:hover .icon:before {
background: var(--color-primary);
}
.services .service-item:hover h3 {
border-color: var(--color-primary);
}
/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
border: 0;
}
.features .nav-link {
padding: 15px 0;
transition: 0.3s;
color: var(--color-secondary);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 100%;
border: 0;
border-bottom: 4px solid #e2e4e6;
}
.features .nav-link i {
padding-right: 15px;
font-size: 48px;
}
.features .nav-link h4 {
font-size: 18px;
font-weight: 600;
margin: 0;
}
@media (max-width: 575px) {
.features .nav-link h4 {
font-size: 16px;
}
}
.features .nav-link:hover {
color: var(--color-primary);
}
.features .nav-link.active {
color: var(--color-primary);
background-color: transparent;
border-color: var(--color-primary);
}
.features .tab-content {
margin-top: 30px;
}
.features .tab-pane h3 {
font-weight: 700;
font-size: 32px;
position: relative;
margin-bottom: 20px;
padding-bottom: 20px;
}
.features .tab-pane h3:after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 3px;
background: var(--color-primary);
left: 0;
bottom: 0;
}
.features .tab-pane ul {
list-style: none;
padding: 0;
}
.features .tab-pane ul li {
padding-top: 10px;
}
.features .tab-pane ul i {
font-size: 20px;
padding-right: 4px;
color: var(--color-primary);
}
.features .tab-pane p:last-child {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Our Projects Section
--------------------------------------------------------------*/
.projects .portfolio-flters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}
.projects .portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 0;
font-size: 18px;
font-weight: 500;
margin: 0 10px;
line-height: 1;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.projects .portfolio-flters li:hover,
.projects .portfolio-flters li.filter-active {
color: var(--color-primary);
}
.projects .portfolio-flters li:first-child {
margin-left: 0;
}
.projects .portfolio-flters li:last-child {
margin-right: 0;
}
@media (max-width: 575px) {
.projects .portfolio-flters li {
font-size: 14px;
margin: 0 5px;
}
}
.projects .portfolio-content {
position: relative;
overflow: hidden;
}
.projects .portfolio-content img {
transition: 0.3s;
}
.projects .portfolio-content .portfolio-info {
opacity: 0;
position: absolute;
inset: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.6);
padding: 15px;
}
.projects .portfolio-content .portfolio-info h4 {
font-size: 14px;
padding: 5px 10px;
font-weight: 400;
color: #fff;
display: inline-block;
background-color: var(--color-primary);
}
.projects .portfolio-content .portfolio-info p {
position: absolute;
bottom: 10px;
text-align: center;
display: inline-block;
left: 0;
right: 0;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.projects .portfolio-content .portfolio-info .preview-link,
.projects .portfolio-content .portfolio-info .details-link {
position: absolute;
left: calc(50% - 40px);
font-size: 26px;
top: calc(50% - 14px);
color: #fff;
transition: 0.3s;
line-height: 1.2;
}
.projects .portfolio-content .portfolio-info .preview-link:hover,
.projects .portfolio-content .portfolio-info .details-link:hover {
color: var(--color-primary);
}
.projects .portfolio-content .portfolio-info .details-link {
left: 50%;
font-size: 34px;
line-height: 0;
}
.projects .portfolio-content:hover .portfolio-info {
opacity: 1;
}
.projects .portfolio-content:hover img {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
padding-left: 50px;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 30px 30px 30px 60px;
margin: 0 15px 30px 0;
min-height: 200px;
box-shadow: 0px 2px 20px rgba(82, 86, 94, 0.1);
position: relative;
background: #fff;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 10px;
border: 6px solid #fff;
position: absolute;
left: -45px;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #000;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item .stars {
margin: 10px 0;
}
.testimonials .testimonial-item .stars i {
color: var(--color-primary);
margin: 0 1px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: var(--color-primary);
font-size: 26px;
line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px auto 15px auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #d5d7da;
opacity: 1;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--color-primary);
}
@media (max-width: 767px) {
.testimonials .testimonial-wrap {
padding-left: 0;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
padding: 30px;
margin: 15px;
}
.testimonials .testimonial-item .testimonial-img {
position: static;
left: auto;
}
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
home about .hagg-about-section {
padding: 80px 0;
overflow: hidden;
}
.hagg-about-title::after {
content: "";
position: absolute;
width: 60px;
height: 3px;
background: #ce1212;
bottom: 0;
left: 0;
}
/* Text Content Styling */
.hagg-about-lead {
font-size: 1.15rem;
color: #444;
font-style: italic;
margin-bottom: 25px;
}
/* Image Wrapper & Effects */
.hagg-about-image-wrapper {
position: relative;
z-index: 1;
}
.hagg-about-img {
border: 10px solid #fff;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Decorative Corner Element */
.hagg-about-image-wrapper::before {
content: "";
position: absolute;
top: -15px;
right: -15px;
width: 100px;
height: 100px;
border-top: 6px solid #ce1212;
border-right: 6px solid #ce1212;
z-index: -1;
border-radius: 0 15px 0 0;
}
/* Responsive Fixes */
@media (max-width: 991px) {
.hagg-about-header {
text-align: center;
}
.hagg-about-title::after {
left: 50%;
transform: translateX(-50%);
}
.hagg-about-content {
padding-right: 0 !important;
text-align: center;
margin-top: 30px;
}
}
/*///////////////////*/
.about h2 {
font-size: 48px;
font-weight: 700;
font-family: var(--font-secondary);
margin: 30px 0;
}
@media (min-width: 991px) {
.about h2 {
max-width: 65%;
margin: 0 0 80px 0;
}
}
.about .our-story {
padding: 40px;
background-color: #f5f6f7;
}
@media (min-width: 991px) {
.about .our-story {
padding-right: 35%;
}
}
.about .our-story h4 {
text-transform: uppercase;
font-size: 18px;
color: #838893;
}
.about .our-story h3 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
color: var(--color-secondary);
}
.about .our-story p:last-child {
margin-bottom: 0;
}
.about ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.about ul li {
padding: 5px 0;
display: flex;
align-items: center;
}
.about ul i {
font-size: 20px;
margin-right: 4px;
color: var(--color-primary);
}
.about .watch-video i {
font-size: 32px;
transition: 0.3s;
color: var(--color-primary);
}
.about .watch-video a {
font-weight: 600;
color: var(--color-secondary);
margin-left: 8px;
transition: 0.3s;
}
.about .watch-video:hover a {
color: var(--color-primary);
}
.about .about-img {
min-height: 600px;
background-size: cover;
background-position: center;
}

/* Mission & Vision Section */
.mission-vision-card {
    background: #fff;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.mission-vision-card:hover {
    transform: translateY(-5px);
}

.mission-red {
    border-bottom: 5px solid #C62828;
}

.vision-navy {
    border-bottom: 5px solid #011627;
}

.mission-vision-card h3 {
    color: #011627;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mission-vision-card h3 i {
    color: #C62828;
}

/* Why Choose HAGG Section */
.why-choose {
    padding: 60px 0;
}

.why-choose-item i {
    font-size: 40px;
    color: #C62828;
    margin-bottom: 15px;
    display: inline-block;
}

.why-choose-item h4 {
    font-weight: 700;
    color: #011627;
    margin-bottom: 10px;
}

.why-choose-item p {
    font-size: 15px;
    color: #555;
}


.timeline {
  position: relative;
  max-width: 1200px;
  margin: 50px auto;
}

/* Central Line */
.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #C62828; /* Your Brand Red */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}

/* Timeline Item Container */
.timeline-item {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Dots on Central Line */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  background-color: #fff;
  border: 4px solid #011627; /* Navy Blue */
  top: 20px;
  border-radius: 50%;
  z-index: 1;
  transition: 0.3s;
}

.right::after { left: -10px; }

/* Content Box */
.timeline-content {
  padding: 20px 30px;
  background-color: #fff;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-top: 5px solid #C62828;
}

.timeline-item.left { left: 0; }
.timeline-item.right { left: 50%; }

.timeline-content .year {
  font-size: 24px;
  font-weight: 800;
  color: #C62828;
  margin-bottom: 5px;
}

.timeline-content h4 {
  font-size: 18px;
  color: #011627;
  font-weight: 700;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
  .timeline::after { left: 31px; }
  .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
  .timeline-item::after { left: 21px; }
  .timeline-item.right { left: 0; }
}

.timeline-item:hover::after {
  background-color: #C62828;
  transform: scale(1.3);
}

@media (min-width: 992px) {
.about .about-img {
position: absolute;
top: 0;
right: 0;
}
}




/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item {
background: #fff;
box-shadow: 0px 0 30px rgba(82, 86, 94, 0.05);
padding: 30px;
}
.stats-counter .stats-item i {
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: var(--color-primary);
}
.stats-counter .stats-item span {
font-size: 36px;
display: block;
font-weight: 600;
color: var(--color-secondary);
}
.stats-counter .stats-item p {
padding: 0;
margin: 0;
font-family: var(--font-primary);
font-size: 14px;
}
/*--------------------------------------------------------------
# Our Team Section
--------------------------------------------------------------*/
.team .member {
position: relative;
}
.team .member .member-img {
margin: 0 80px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
@media (max-width: 1024px) {
.team .member .member-img {
margin: 0 60px;
}
}
.team .member .member-img img {
position: relative;
z-index: 1;
}
.team .member .member-img .social {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
padding-bottom: 20px;
transition: 0.3s;
visibility: hidden;
opacity: 0;
}
.team .member .member-img .social a {
transition: 0.3s;
color: #fff;
font-size: 20px;
margin: 0 8px;
}
.team .member .member-img .social a:hover {
color: var(--color-primary);
}
.team .member .member-info {
margin-top: 30px;
}
.team .member .member-info h4 {
font-weight: 700;
margin-bottom: 6px;
font-size: 18px;
color: var(--color-secondary);
}
.team .member .member-info span {
font-style: italic;
display: block;
font-size: 15px;
color: #838893;
margin-bottom: 10px;
}
.team .member .member-info p {
margin-bottom: 0;
font-size: 14px;
}
.team .member:hover .member-img .social {
padding-bottom: 0;
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Servie Cards Section
--------------------------------------------------------------*/
.services-cards h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-secondary);
}
.services-cards p {
font-size: 15px;
}
.services-cards ul li {
display: flex;
align-items: center;
font-size: 14px;
padding-top: 10px;
}
.services-cards ul li i {
font-size: 16px;
color: var(--color-primary);
margin-right: 6px;
}
/*--------------------------------------------------------------
# Projet Details Section
--------------------------------------------------------------*/
.project-details .portfolio-details-slider img {
width: 100%;
}
.project-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: rgba(255, 255, 255, 0.7);
opacity: 1;
}
.project-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--color-primary);
}
.project-details .swiper-button-prev,
.project-details .swiper-button-next {
width: 48px;
height: 48px;
}
.project-details .swiper-button-prev:after,
.project-details .swiper-button-next:after {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(0, 0, 0, 0.2);
font-size: 24px;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.project-details .swiper-button-prev:hover:after,
.project-details .swiper-button-next:hover:after {
background-color: rgba(0, 0, 0, 0.6);
}
@media (max-width: 575px) {
.project-details .swiper-button-prev,
.project-details .swiper-button-next {
display: none;
}
}
.project-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}
.project-details .portfolio-info h3:after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 3px;
background: var(--color-primary);
left: 0;
bottom: 0;
}
.project-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.project-details .portfolio-info ul li {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
.project-details .portfolio-info ul strong {
text-transform: uppercase;
font-weight: 400;
color: #838893;
font-size: 14px;
}
.project-details .portfolio-info .btn-visit {
padding: 8px 40px;
background: var(--color-primary);
color: #fff;
border-radius: 50px;
transition: 0.3s;
}
.project-details .portfolio-info .btn-visit:hover {
background: #ffc019;
}
.project-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
color: var(--color-secondary);
}
.project-details .portfolio-description p {
padding: 0;
}
.project-details .portfolio-description .testimonial-item {
padding: 30px 30px 0 30px;
position: relative;
background: #f5f6f7;
height: 100%;
margin-bottom: 50px;
}
.project-details .portfolio-description .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50px;
border: 6px solid #fff;
float: left;
margin: 0 10px 0 0;
}
.project-details .portfolio-description .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 15px 0 5px 0;
padding-top: 20px;
}
.project-details .portfolio-description .testimonial-item h4 {
font-size: 14px;
color: #6c757d;
margin: 0;
}
.project-details .portfolio-description .testimonial-item .quote-icon-left,
.project-details .portfolio-description .testimonial-item .quote-icon-right {
color: #ffd565;
font-size: 26px;
line-height: 0;
}
.project-details .portfolio-description .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.project-details .portfolio-description .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}
.project-details .portfolio-description .testimonial-item p {
font-style: italic;
margin: 0 0 15px 0 0 0;
padding: 0;
}
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
padding: 10px 30px;
border: 1px solid #d5d7da;
margin-bottom: 20px;
}
.service-details .services-list a {
display: block;
line-height: 1;
padding: 8px 0 8px 15px;
border-left: 3px solid #d9e3e8;
margin: 20px 0;
color: var(--color-secondary);
transition: 0.3s;
}
.service-details .services-list a.active {
font-weight: 700;
border-color: var(--color-primary);
}
.service-details .services-list a:hover {
border-color: var(--color-primary);
}
.service-details .services-img {
margin-bottom: 20px;
}
.service-details h3 {
font-size: 28px;
font-weight: 700;
}
.service-details h4 {
font-size: 20px;
font-weight: 700;
}
.service-details p {
font-size: 15px;
}
.service-details ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.service-details ul li {
padding: 5px 0;
display: flex;
align-items: center;
}
.service-details ul i {
font-size: 20px;
margin-right: 8px;
color: var(--color-primary);
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
padding: 20px 20px 34px 20px;
}
.contact .info-item i {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
font-size: 24px;
line-height: 0;
color: var(--color-primary);
border-radius: 50%;
border: 2px dotted #ffd565;
}
.contact .info-item i {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
font-size: 24px;
line-height: 0;
color: var(--color-primary);
border-radius: 50%;
border: 2px solid var(--color-secondary);
background: rgba(44, 62, 80, 0.05);
transition: all 0.3s ease;
}
.contact .info-item:hover i {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: scale(1.1);
}
.contact .info-item h3 {
font-size: 20px;
color: #6c757d;
font-weight: 700;
margin: 10px 0;
}
.contact .info-item p {
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.hagg-modal {
border: none;
border-radius: 0;
box-shadow: 0 15px 50px var(--color-secondary);
}
.hagg-modal .modal-header {
background-color: var(--color-secondary);
color: #fff;
border-radius: 0;
border-bottom: 4px var(--color-primary);
}
.hagg-modal .modal-title {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.1rem;
color: #fff
}
.hagg-popup-form .input-group-text {
background-color: #f8f9fa;
border-right: none;
color: var(--color-primary);
}
.hagg-popup-form .form-control {
border-left: none;
padding: 12px;
border-radius: 0;
}
.hagg-popup-form .form-control:focus {
box-shadow: none;
border-color: #dee2e6;
}
.btn-hagg-submit {
background-color: var(--color-primary);
color: white;
border: none;
padding: 12px;
font-weight: 600;
text-transform: uppercase;
transition: 0.3s;
border-radius: 0;
}
.btn-hagg-submit:hover {
background-color: var(--color-secondary);
color: #fff;
}
.contact-form-wrapper {
background: #fff;
padding: 40px;
border-top: 5px solid #011627;
}
.map-container {
border: 1px solid #eee;
padding: 5px;
background: #fff;
}
.hagg-main-form .input-group-text {
background: #f8f9fa;
color: #C62828;
border-right: none;
border-radius: 0;
}
.hagg-main-form .form-control {
border-left: none;
border-radius: 0;
padding: 12px;
}
.hagg-main-form .form-control:focus {
box-shadow: none;
border-color: #dee2e6;
}
.btn-hagg-main {
background: #C62828;
color: #fff;
border-radius: 0;
padding: 12px 40px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
border: none;
}
.btn-hagg-main:hover {
background: #011627;
color: #fff;
}
.alert-hagg {
background-color: #011627;
color: #fff;
border-radius: 0;
border-left: 5px solid #C62828;
font-weight: 500;
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .post-item {
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
transition: 0.3s;
}
.recent-blog-posts .post-item .post-img img {
transition: 0.5s;
}
.recent-blog-posts .post-item .post-date {
position: absolute;
right: 0;
bottom: 0;
background-color: var(--color-primary);
color: #fff;
text-transform: uppercase;
font-size: 13px;
padding: 6px 12px;
font-weight: 500;
}
.recent-blog-posts .post-item .post-content {
padding: 30px;
}
.recent-blog-posts .post-item .post-title {
font-size: 18px;
color: var(--color-secondary);
font-weight: 700;
transition: 0.3s;
margin-bottom: 15px;
}
.recent-blog-posts .post-item .meta i {
font-size: 16px;
color: var(--color-primary);
}
.recent-blog-posts .post-item .meta span {
font-size: 15px;
color: #838893;
}
.recent-blog-posts .post-item hr {
color: #888;
margin: 20px 0;
}
.recent-blog-posts .post-item .readmore {
display: flex;
align-items: center;
font-weight: 600;
line-height: 1;
transition: 0.3s;
color: #838893;
}
.recent-blog-posts .post-item .readmore i {
line-height: 0;
margin-left: 6px;
font-size: 16px;
}
.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore {
color: var(--color-primary);
}
.recent-blog-posts .post-item:hover .post-img img {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* Hero Section */
.hero {
  overflow-x: hidden;
  padding: 0;
}
.hero .carousel {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.hero .carousel-inner {
  position: relative;
  width: 100%;
}

.hero .carousel-item {
  background-color: #000; 
}

.hero .carousel-item img {
  width: 100%;
  height: auto; 
  display: block;
}

.hero .carousel-item::before {
  content: "";
 background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  width: auto;
  padding: 0 15px;
}

.hero .carousel-control-next {
  justify-content: flex-end;
  right: 0;
  left: auto;
}

.hero .carousel-control-prev {
  justify-content: flex-start;
  left: 0;
  right: auto;
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

/* Responsive: the carousel will automatically scale with the image */
/* No extra media queries needed – it's already fluid */
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog .blog-pagination {
margin-top: 30px;
color: #838893;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: var(--color-secondary);
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
background: var(--color-primary);
color: #fff;
}
.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
color: var(--color-white);
}
/*--------------------------------------------------------------
# Blog Posts List
--------------------------------------------------------------*/
.blog .posts-list .post-item {
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
transition: 0.3s;
}
.blog .posts-list .post-img img {
transition: 0.5s;
}
.blog .posts-list .post-date {
position: absolute;
right: 0;
bottom: 0;
background-color: var(--color-primary);
color: #fff;
text-transform: uppercase;
font-size: 13px;
padding: 6px 12px;
font-weight: 500;
}
.blog .posts-list .post-content {
padding: 30px;
}
.blog .posts-list .post-title {
font-size: 18px;
color: var(--color-secondary);
font-weight: 700;
transition: 0.3s;
margin-bottom: 15px;
}
.blog .posts-list .meta i {
font-size: 16px;
color: var(--color-primary);
}
.blog .posts-list .meta span {
font-size: 15px;
color: #838893;
}
.blog .posts-list p {
margin-top: 20px;
}
.blog .posts-list hr {
color: #888;
margin-bottom: 20px;
}
.blog .posts-list .readmore {
display: flex;
align-items: center;
font-weight: 600;
line-height: 1;
transition: 0.3s;
color: #838893;
}
.blog .posts-list .readmore i {
line-height: 0;
margin-left: 6px;
font-size: 16px;
}
.blog .posts-list .post-item:hover .post-title,
.blog .posts-list .post-item:hover .readmore {
color: var(--color-primary);
}
.blog .posts-list .post-item:hover .post-img img {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Blog Details
--------------------------------------------------------------*/
.blog .blog-details {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
}
.blog .blog-details .post-img {
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog .blog-details .title {
font-size: 28px;
font-weight: 700;
padding: 0;
margin: 20px 0 0 0;
color: var(--color-secondary);
}
.blog .blog-details .content {
margin-top: 20px;
}
.blog .blog-details .content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog .blog-details .content blockquote {
overflow: hidden;
background-color: rgba(82, 86, 94, 0.06);
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog .blog-details .content blockquote p {
color: var(--color-default);
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog .blog-details .content blockquote:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--color-primary);
margin-top: 20px;
margin-bottom: 20px;
}
.blog .blog-details .meta-top {
margin-top: 20px;
color: #6c757d;
}
.blog .blog-details .meta-top ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog .blog-details .meta-top ul li+li {
padding-left: 20px;
}
.blog .blog-details .meta-top i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
color: var(--color-primary);
}
.blog .blog-details .meta-top a {
color: #6c757d;
font-size: 14px;
display: inline-block;
line-height: 1;
transition: 0.3s;
}
.blog .blog-details .meta-top a:hover {
color: var(--color-primary);
}
.blog .blog-details .meta-bottom {
padding-top: 10px;
border-top: 1px solid rgba(82, 86, 94, 0.15);
}
.blog .blog-details .meta-bottom i {
color: #838893;
display: inline;
}
.blog .blog-details .meta-bottom a {
color: rgba(82, 86, 94, 0.8);
transition: 0.3s;
}
.blog .blog-details .meta-bottom a:hover {
color: var(--color-primary);
}
.blog .blog-details .meta-bottom .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .blog-details .meta-bottom .cats li {
display: inline-block;
}
.blog .blog-details .meta-bottom .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog .blog-details .meta-bottom .tags li {
display: inline-block;
}
.blog .blog-details .meta-bottom .tags li+li::before {
padding-right: 6px;
color: var(--color-default);
content: ",";
}
.blog .blog-details .meta-bottom .share {
font-size: 16px;
}
.blog .blog-details .meta-bottom .share i {
padding-left: 5px;
}
.blog .post-author {
padding: 20px;
margin-top: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .post-author img {
max-width: 120px;
margin-right: 20px;
}
.blog .post-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: var(--color-secondary);
}
.blog .post-author .social-links {
margin: 0 10px 10px 0;
}
.blog .post-author .social-links a {
color: rgba(82, 86, 94, 0.5);
margin-right: 5px;
}
.blog .post-author p {
font-style: italic;
color: rgba(108, 117, 125, 0.8);
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Blog Sidebar
--------------------------------------------------------------*/
.blog .sidebar {
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .sidebar .sidebar-title {
font-size: 20px;
font-weight: 700;
padding: 0;
margin: 0;
color: var(--color-secondary);
}
.blog .sidebar .sidebar-item+.sidebar-item {
margin-top: 40px;
}
.blog .sidebar .search-form form {
background: #fff;
border: 1px solid rgba(82, 86, 94, 0.3);
padding: 3px 10px;
position: relative;
}
.blog .sidebar .search-form form input[type=text] {
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
}
.blog .sidebar .search-form form input[type=text]:focus {
outline: none;
}
.blog .sidebar .search-form form button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: var(--color-primary);
color: var(--color-secondary);
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {
line-height: 0;
}
.blog .sidebar .search-form form button:hover {
background: rgba(254, 185, 0, 0.8);
}
.blog .sidebar .categories ul {
list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li+li {
padding-top: 10px;
}
.blog .sidebar .categories ul a {
color: var(--color-secondary);
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
color: var(--color-default);
}
.blog .sidebar .categories ul a span {
padding-left: 5px;
color: rgba(54, 77, 89, 0.4);
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item {
display: flex;
}
.blog .sidebar .recent-posts .post-item+.post-item {
margin-top: 15px;
}
.blog .sidebar .recent-posts img {
max-width: 80px;
margin-right: 15px;
}
.blog .sidebar .recent-posts h4 {
font-size: 15px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
color: var(--color-secondary);
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
color: var(--color-primary);
}
.blog .sidebar .recent-posts time {
display: block;
font-style: italic;
font-size: 14px;
color: rgba(54, 77, 89, 0.4);
}
.blog .sidebar .tags {
margin-bottom: -10px;
}
.blog .sidebar .tags ul {
list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {
display: inline-block;
}
.blog .sidebar .tags ul a {
color: #838893;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid rgba(131, 136, 147, 0.4);
display: inline-block;
transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {
color: var(--color-secondary);
border: 1px solid var(--color-primary);
background: var(--color-primary);
}
.blog .sidebar .tags ul a span {
padding-left: 5px;
color: rgba(131, 136, 147, 0.8);
font-size: 14px;
}
/*--------------------------------------------------------------
# Blog Comments
--------------------------------------------------------------*/
.blog .comments {
margin-top: 30px;
}
.blog .comments .comments-count {
font-weight: bold;
}
.blog .comments .comment {
margin-top: 30px;
position: relative;
}
.blog .comments .comment .comment-img {
margin-right: 14px;
}
.blog .comments .comment .comment-img img {
width: 60px;
}
.blog .comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
}
.blog .comments .comment h5 a {
font-weight: bold;
color: var(--color-default);
transition: 0.3s;
}
.blog .comments .comment h5 a:hover {
color: var(--color-primary);
}
.blog .comments .comment h5 .reply {
padding-left: 10px;
color: var(--color-secondary);
}
.blog .comments .comment h5 .reply i {
font-size: 20px;
}
.blog .comments .comment time {
display: block;
font-size: 14px;
color: rgba(82, 86, 94, 0.8);
margin-bottom: 5px;
}
.blog .comments .comment.comment-reply {
padding-left: 40px;
}
.blog .comments .reply-form {
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .comments .reply-form h4 {
font-weight: bold;
font-size: 22px;
}
.blog .comments .reply-form p {
font-size: 14px;
}
.blog .comments .reply-form input {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .comments .reply-form input:focus {
box-shadow: none;
border-color: rgba(254, 185, 0, 0.8);
}
.blog .comments .reply-form textarea {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .comments .reply-form textarea:focus {
box-shadow: none;
border-color: rgba(254, 185, 0, 0.8);
}
.blog .comments .reply-form .form-group {
margin-bottom: 25px;
}
.blog .comments .reply-form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: var(--color-secondary);
}
.blog .comments .reply-form .btn-primary:hover {
color: var(--color-secondary);
background-color: var(--color-primary);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
color: #fff;
/*  background: url("../img/footer-bg.jpg") top center no-repeat;*/
background-size: cover;
font-size: 14px;
padding: 0px 0 60px 0;
position: relative;
}
.footer:before {
content: "";
background: rgba(0, 0, 0, 0.8);
position: absolute;
inset: 0;
}
.footer-logo-img {
max-width: 140px !important;
height: 120px;
display: block;
}
.footer .footer-content .footer-info p {
line-height: 1.8;
margin-bottom: 5px;
color: rgba(255, 255, 255, 0.8);
}
.footer .footer-content .social-links a {
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.08);
width: 38px;
height: 38px;
transition: all 0.3s ease;
}
.footer .footer-content .social-links a:hover {
background: #f33f3f;
transform: translateY(-3px);
}
.footer-legal {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px 0;
margin-top: 40px;
}
.footer .footer-content .footer-info {
margin-bottom: 30px;
}
.footer .footer-content .footer-info h3 {
font-size: 28px;
margin: 0 0 20px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
}
.footer .footer-content .footer-info h3 span {
color: var(--color-primary);
}
.footer .footer-content .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: var(--font-primary);
color: #fff;
}
.footer .footer-content .social-links a {
font-size: 18px;
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 1;
margin-right: 8px;
border-radius: 4px;
width: 36px;
height: 36px;
transition: 0.3s;
}
.footer .footer-content .social-links a:hover {
background: var(--color-primary);
text-decoration: none;
}
.footer .footer-content h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
position: relative;
padding-bottom: 12px;
}
.footer .footer-content .footer-links {
margin-bottom: 30px;
}
.footer .footer-content .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-content .footer-links ul li {
padding: 8px 0;
}
.footer .footer-content .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-content .footer-links ul a {
color: rgba(255, 255, 255, 0.6);
transition: 0.3s;
display: inline-block;
line-height: 1;
}
.footer .footer-content .footer-links ul a:hover {
color: #fff;
}
.footer .footer-legal .copyright {
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer .footer-legal .credits {
padding-top: 4px;
font-size: 13px;
color: #fff;
}
.footer .footer-legal .credits a {
color: var(--color-primary);
}
/*--------------------------------------------------------------
/* Mobile Navigation sticky bar */
.mobile-quote-bar {
display: none !important;
}
@media screen and (max-width: 767px) {
.mobile-quote-bar {
display: flex !important;
position: fixed !important;
right: 0 !important;
top: 55% !important;
transform: translateY(-50%) !important;
background-color: var(--color-primary);
color: #ffffff !important;
padding: 15px 8px !important;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
border-radius: 10px 0 0 10px;
z-index: 99999 !important;
box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
user-select: none;
}
.mobile-quote-bar:active {
background-color: #a00d0d !important;
transform: translateY(-50%) scale(0.95) !important;
}
}
/* --------------------------------------------------------------
/* product Section Styling */
.product-slider-section {
background-color: var(--color-bg-light);
/*  padding: 60px 0;*/
}
/* Swiper Container Padding - Space for Arrows */
.myProductSwiper {
padding: 20px 50px 40px 50px !important;
position: relative;
}
/* Card Design */
.product-slider-section .card {
overflow: hidden;
border-radius: 12px;
border: 1px solid #eee;
background: #fff;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.product-slider-section .card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(44, 62, 80, 0.15) !important;
border-color: var(--color-primary);
}
/* Full Image Wrapper */
.full-img-wrap {
width: 100%;
height: 250px;
background: #fff;
overflow: hidden;
}
.full-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Arrows Styling */
.swiper-button-next,
.swiper-button-prev {
background: var(--color-primary) !important;
width: 45px !important;
height: 45px !important;
border-radius: 50%;
color: #fff !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
z-index: 10;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 18px !important;
font-weight: bold;
}
.swiper-button-prev {
left: 10px !important;
}
.swiper-button-next {
right: 10px !important;
}
/* Text & Buttons */
.text-primary {
color: var(--color-secondary) !important;
font-weight: 700;
}
.btn-view-cart {
background-color: var(--color-primary);
color: #fff;
border: none;
transition: 0.3s;
}
.btn-view-cart:hover {
background-color: var(--color-secondary);
color: #fff;
}
/* Mobile Specific Fixes */
@media (max-width: 768px) {
.myProductSwiper {
padding: 10px 15px 40px 15px !important;
}
.full-img-wrap {
height: 220px;
}
.swiper-button-next,
.swiper-button-prev {
width: 35px !important;
height: 35px !important;
display: flex !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px !important;
}
.product-title {
font-size: 15px !important;
}
}
/*=== LANGUAGE TRANSLATOR ===*/
iframe#\:1\.container,
a.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.goog-logo-link,
.goog-te-gadget span,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
#goog-gt-tt {
display: none !important
}
#google_translate_element select {
background: 0 0 !important;
border: none !important;
font-size: 16px !important;
height: 24px !important;
width: 100px;
padding: 0 !important;
margin: 0 !important;
cursor: pointer;
outline: 0 !important;
font-family: 'Poppins', sans-serif;
color: #333
}
.goog-te-gadget {
color: transparent !important;
font-size: 0 !important
}
.goog-te-combo {
margin: 0 !important;
padding: 2px !important
}
.goog-text-highlight {
background: 0 0 !important;
box-shadow: none !important
}
.lang-container {
display: flex;
align-items: center;
background: #fff;
padding: 0 5px;
border-radius: 4px;
height: 28px;
width: 120px;
border: 1px solid #ccc
}
.lang-select {
padding: 2px 8px;
border-radius: 4px;
border: none;
font-size: 13px
}