:root {
--primary-theme-color: #dc2626;
--primary-black: #1f2937;
--primary-white: #fff;
--light-gray: #f8fafc;
--dark-gray: #6b7280;
--hover-red: #b91c1c;
--border-color: #e5e7eb;
--shadow-light: rgba(0,0,0,.1);
--shadow-medium: rgba(0,0,0,.15);
--gradient-red: linear-gradient(135deg,var(--primary-theme-color),var(--hover-red));
--footer-bg: #111827;
--footer-dark: #0f172a;
--overlay-dark: rgba(0,0,0,.4);
--overlay-gradient: linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,0,0,.3));
--text-shadow: 2px 2px 4px rgba(0,0,0,.7);
--content-bg: rgba(0,0,0,.5);
--text-dark: #374151;
--slide-transition: .8s cubic-bezier(0.65,0,0.35,1);
--teal-dark: #0f766e;
--complementary-color: #26dcd6;
--highlighter-color: 220, 38, 38;
}
@font-face {
font-family: vazir;
src: url(/assets/sitetheme/font/vazirmatn/Vazirmatn-Regular.woff2) format("woff2")
}
*, ::after, ::before {
margin: 0;
padding: 0;
box-sizing: border-box
}
body, html {
margin: 0;
padding: 0;
font-family: Vazir,Tahoma,sans-serif;
background-color: #f8f9fa;
font-size: 16px;
direction: rtl;
text-align: right
}
a {
color: var(--dark-gray);
text-decoration: none
}
.header {
background: linear-gradient(135deg,var(--primary-white) 0%,var(--light-gray) 100%);
border-bottom: 2px solid var(--primary-theme-color);
box-shadow: 0 2px 10px rgba(0,0,0,.08);
position: sticky;
top: 0;
z-index: 1000
}
.header-topbar {
padding: 15px 0;
min-height: 70px
}
.header-brand {
flex: 0 0 auto;
order: 1
}
.header-logo-wrapper {
display: flex;
align-items: center;
gap: 12px;
transition: all .3s ease
}
.header-logo-image {
max-height: 50px;
width: auto
}
.header-logo-text {
display: flex;
flex-direction: column
}
.header-logo-title {
font-size: 18px;
font-weight: 700;
color: var(--primary-black);
line-height: 1.2
}
.header-logo-subtitle {
font-size: 12px;
color: var(--primary-theme-color);
font-weight: 500
}
.header-logo-link {
text-decoration: none
}
.header-logo-link:hover .header-logo-wrapper {
transform: translateY(-2px)
}
.header-contact-info {
flex: 1;
justify-content: center;
order: 2
}
.header-contact-email, .header-contact-hours, .header-contact-location, .header-contact-phone {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 8px;
transition: all .3s ease
}
.header-contact-email:hover, .header-contact-hours:hover, .header-contact-location:hover, .header-contact-phone:hover {
background-color: rgba(var(--highlighter-color),.05)
}
.header-contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 10px;
font-size: 18px;
transition: all .3s ease
}
.header-contact-icon--email, .header-contact-icon--time {
background: linear-gradient(135deg,var(--primary-black),#333);
color: var(--primary-white)
}
.header-contact-icon--location, .header-contact-icon--phone {
background: linear-gradient(135deg,var(--primary-theme-color),var(--hover-red));
color: var(--primary-white)
}
.header-contact-content {
display: flex;
flex-direction: column;
line-height: 1.4
}
.header-contact-label {
font-size: 12px;
color: var(--dark-gray);
font-weight: 500;
margin-bottom: 2px
}
.header-contact-value {
color: var(--primary-theme-color);
font-size: 14px;
font-weight: 600;
text-decoration: none
}
.header-phone-number {
color: var(--primary-theme-color);
font-weight: 700;
letter-spacing: 1px
}
.header-social {
flex: 0 0 auto;
order: 3
}
.header-social-links {
display: flex;
gap: 10px
}
.header-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--dark-gray);
color: var(--primary-white);
font-size: 16px;
transition: all .3s ease;
text-decoration: none
}
.header-social-link:hover {
background-color: var(--primary-theme-color);
transform: translateY(-3px)
}
.header-mobile-toggle {
display: none;
background-color: var(--primary-theme-color);
color: var(--primary-white);
border: none;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: all .3s ease
}
.header-mobile-toggle:hover {
background-color: var(--hover-red)
}
.header-mobile-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: var(--primary-white);
z-index: 2000;
overflow-y: auto;
flex-direction: column
}
.header-mobile-menu.active {
display: flex;
animation: slideInRight .3s ease forwards
}
.header-mobile-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid var(--border-color)
}
.header-mobile-top-info {
display: flex;
align-items: center;
gap: 10px
}
.header-mobile-logo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: contain
}
.header-mobile-title-wrapper {
display: flex;
flex-direction: column
}
.header-mobile-title {
font-size: 16px;
font-weight: 700;
color: var(--primary-black);
margin: 0
}
.header-mobile-subtitle {
font-size: 12px;
color: var(--dark-gray);
margin: 0
}
.header-mobile-close {
background: none;
border: none;
font-size: 20px;
color: var(--dark-gray);
cursor: pointer
}
.header-mobile-tabs {
display: flex;
border-bottom: 1px solid var(--border-color)
}
.header-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: none;
border: none;
border-bottom: 3px solid transparent;
color: var(--dark-gray);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .3s ease
}
.header-mobile-tab i {
font-size: 18px;
margin-bottom: 5px
}
.header-mobile-tab.active {
color: var(--primary-theme-color);
border-bottom-color: var(--primary-theme-color)
}
.header-mobile-search {
padding: 15px;
border-bottom: 1px solid var(--border-color)
}
.header-search-form {
display: flex;
position: relative
}
.header-search-input {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px
}
.header-search-button {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 45px;
background-color: var(--primary-theme-color);
color: var(--primary-white);
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer
}
.header-mobile-tab-content {
display: none;
padding: 15px
}
.header-mobile-tab-content.active {
display: block
}
.header-mobile-services-list {
list-style: none;
padding: 0;
margin: 0
}
.header-mobile-service-item {
border-bottom: 1px solid var(--border-color);
position: relative
}
.header-mobile-service-link {
display: flex;
align-items: center;
padding: 15px;
color: var(--primary-black);
text-decoration: none;
font-weight: 500
}
.header-mobile-service-link i {
margin-left: 12px;
width: 20px;
text-align: center;
color: var(--primary-theme-color)
}
.header-mobile-service-toggle {
position: absolute;
left: 15px;
top: 15px;
background: none;
border: none;
color: var(--dark-gray);
font-size: 14px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease
}
.header-mobile-service-toggle.active i {
transform: rotate(180deg)
}
.header-mobile-submenu {
display: none;
list-style: none;
padding: 0;
margin: 0 0 10px;
background-color: rgba(0,0,0,.02)
}
.header-mobile-submenu.active {
display: block
}
.header-mobile-submenu-link {
display: block;
padding: 12px 15px 12px 40px;
color: var(--primary-black);
text-decoration: none;
font-size: 14px;
border-bottom: 1px solid rgba(0,0,0,.03)
}
.header-mobile-submenu-item:last-child .header-mobile-submenu-link {
border-bottom: none
}
.header-mobile-contact {
display: flex;
flex-direction: column;
gap: 20px
}
.header-mobile-social-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color)
}
.header-mobile-social-title {
font-size: 14px;
font-weight: 600;
color: var(--primary-black);
margin-bottom: 15px;
text-align: center
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.header-topbar > * {
animation: fadeInUp .6s ease forwards
}
.header-brand {
animation-delay: .1s
}
.header-contact-info {
animation-delay: .2s
}
.header-social {
animation-delay: .3s
}
@keyframes slideInRight {
0% {
transform: translateX(100%)
}
to {
transform: translateX(0)
}
}
.main-navigation {
background: var(--primary-white);
border-bottom: 1px solid var(--border-color);
box-shadow: 0 2px 10px rgba(0,0,0,.05);
position: sticky;
top: 0;
z-index: 990;
padding: 0
}
.navigation-wrapper {
padding: 12px 0;
min-height: 70px
}
.main-menu-section {
flex: 0 0 auto
}
.primary-menu {
display: flex;
gap: 5px;
margin: 0;
padding: 0;
list-style: none
}
.menu-item {
position: relative
}
.menu-link {
color: var(--primary-black);
text-decoration: none;
font-weight: 600;
font-size: 15px;
padding: 10px 16px;
border-radius: 8px;
transition: all .3s ease;
position: relative;
display: flex;
align-items: center;
gap: 6px
}
.menu-link:before {
content: "";
position: absolute;
bottom: 5px;
right: 50%;
width: 0;
height: 2px;
background: var(--primary-theme-color);
transition: all .3s ease;
transform: translateX(50%)
}
.menu-link:hover {
color: var(--primary-theme-color);
background: rgba(var(--highlighter-color),0.5)
}
.menu-link:hover:before {
width: 70%
}
.menu-item--home .menu-link {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.menu-item--home .menu-link:hover {
background: var(--hover-red);
color: var(--primary-white)
}
.menu-icon-left {
font-size: 14px
}
.menu-icon {
font-size: 10px;
margin-right: 2px;
transition: transform .3s ease
}
.menu-item--dropdown:hover .menu-icon {
transform: rotate(180deg)
}
.mega-dropdown {
position: absolute;
top: 100%;
right: 0;
background: var(--primary-white);
border-radius: 12px;
box-shadow: 0 15px 50px rgba(0,0,0,.1);
padding: 0;
margin-top: 15px;
min-width: 650px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s ease;
z-index: 100;
overflow: hidden;
animation: fadeInDown .3s ease;
animation-fill-mode: forwards;
animation-play-state: paused
}
.menu-item--dropdown:hover .mega-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
animation-play-state: running
}
.mega-dropdown:before {
content: "";
position: absolute;
top: -8px;
right: 30px;
width: 16px;
height: 16px;
background: var(--primary-white);
transform: rotate(45deg);
border-top: 1px solid rgba(0,0,0,.05);
border-right: 1px solid rgba(0,0,0,.05);
z-index: 1
}
.mega-dropdown-inner {
position: relative;
z-index: 2;
background: var(--primary-white)
}
.mega-dropdown-section {
padding: 20px
}
.mega-dropdown-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
color: var(--primary-theme-color);
font-weight: 700;
font-size: 15px
}
.mega-dropdown-header i {
font-size: 18px
}
.mega-dropdown-row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px
}
.mega-dropdown-col {
flex: 1;
padding: 0 10px;
min-width: 200px
}
.mega-dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
color: var(--primary-black);
text-decoration: none;
border-radius: 6px;
transition: all .3s ease;
margin-bottom: 5px;
position: relative
}
.mega-dropdown-item:before {
content: "\f104";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 12px;
opacity: 0;
transition: all .3s ease
}
.mega-dropdown-item:hover {
background: rgba(var(--highlighter-color),.05);
color: var(--primary-theme-color);
padding-left: 20px
}
.mega-dropdown-item:hover:before {
left: 8px;
opacity: 1
}
.mega-item-icon {
color: var(--primary-theme-color);
font-size: 14px;
width: 20px;
text-align: center
}
.mega-dropdown-divider {
height: 1px;
background: var(--border-color);
margin: 0
}
.mega-dropdown-footer {
background: rgba(0,0,0,.02);
padding: 15px 20px;
display: flex;
justify-content: flex-end
}
.mega-dropdown-all-link {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary-black);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all .3s ease
}
.mega-dropdown-all-link:hover {
color: var(--primary-theme-color)
}
.mega-dropdown-all-link:hover i {
transform: translateX(-5px)
}
.mega-dropdown-all-link i {
transition: transform .3s ease
}
.search-appointment-section {
flex: 1;
justify-content: flex-end;
gap: 20px
}
.search-section {
flex: 0 0 auto
}
.search-container {
position: relative;
width: 280px
}
.search-form {
background: rgba(0,0,0,.03);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 2px;
transition: all .3s ease;
position: relative;
overflow: hidden
}
.search-form:focus-within {
border-color: var(--primary-theme-color);
box-shadow: 0 0 0 2px rgba(var(--highlighter-color),.1)
}
.search-input {
background: transparent;
border: none;
outline: none;
padding: 10px 15px;
font-size: 14px;
width: 100%;
color: var(--primary-black)
}
.search-input::placeholder {
color: var(--dark-gray)
}
.search-submit-btn {
background: var(--primary-theme-color);
border: none;
color: var(--primary-white);
width: 36px;
height: 36px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s ease;
position: absolute;
left: 2px;
top: 2px
}
.search-submit-btn:hover {
background: var(--hover-red)
}
.appointment-button-section {
flex: 0 0 auto
}
.appointment-btn {
background: var(--primary-theme-color);
color: var(--primary-white);
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all .3s ease;
display: flex;
align-items: center;
gap: 8px
}
.appointment-btn:hover {
background: var(--hover-red);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(var(--highlighter-color),.2);
color: var(--primary-white)
}
.appointment-icon {
font-size: 16px
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.hero-slider {
position: relative;
overflow: hidden;
height: 85vh;
min-height: 650px;
max-height: 900px;
background-color: #000
}
.slider-container {
position: relative;
width: 100%;
height: 100%
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity var(--slide-transition),visibility var(--slide-transition)
}
.slide--active {
opacity: 1;
visibility: visible;
z-index: 2
}
.slide-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(.85);
transition: transform 10s ease,filter 1s ease
}
.slide--active .slide-image {
transform: scale(1.08)
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(270deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.1) 100%);
z-index: 2
}
.slide-content-wrapper {
position: relative;
height: 100%;
z-index: 3
}
.slide-content {
position: relative;
z-index: 3;
padding: 0;
max-width: 650px
}
.slide-badge {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
position: relative
}
.badge-text-slide {
color: var(--primary-white);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(var(--highlighter-color),.1);
padding: 8px 20px;
border-radius: 30px;
border: 1px solid var(--primary-theme-color)
}
.badge-text-slide:before {
content: "";
position: absolute;
top: 0;
left: -10px;
width: 20px;
height: 100%;
background: rgba(255,255,255,.3);
transform: skewX(-20deg);
transition: all .6s ease;
animation: badgeShine 3s infinite
}
@keyframes badgeShine {
0% {
left: -30px
}
20% {
left: 120%
}
to {
left: 120%
}
}
.slide-title {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
color: var(--primary-white);
position: relative
}
.title-highlight {
color: var(--primary-theme-color);
position: relative;
display: inline-block
}
.title-highlight:after {
content: "";
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 12px;
background-color: rgba(var(--highlighter-color),.3);
z-index: -1
}
.slide-description {
font-size: 18px;
line-height: 1.8;
margin-bottom: 40px;
color: rgba(255,255,255,.9);
max-width: 90%;
position: relative;
font-weight: 400
}
.slide-actions {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center
}
.slide-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: 0;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all .4s ease;
border: 2px solid transparent;
white-space: nowrap;
position: relative;
overflow: hidden;
z-index: 1
}
.btn-primary {
background: var(--primary-theme-color);
color: var(--primary-white);
box-shadow: 0 10px 20px rgba(var(--highlighter-color), .3);
--bs-btn-border-color: var(--primary-theme-color);
}
.btn-primary:hover {
color: var(--primary-black);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(var(--highlighter-color),.4)
}
.btn-primary:hover:before {
left: 0
}
.btn-secondary-slide {
background: transparent;
color: var(--primary-white);
border: 2px solid rgba(255,255,255,.3);
overflow: hidden
}
.btn-secondary-slide:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--primary-black);
transition: all .4s ease;
z-index: -1
}
.btn-secondary-slide:hover {
color: var(--hover-red);
border-color: var(--primary-white);
transform: translateY(-5px)
}
.btn-secondary:hover:before {
left: 0
}
.slider-controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
background: rgba(0,0,0,.2);
backdrop-filter: blur(10px);
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,.1)
}
.controls-wrapper {
display: flex;
align-items: center;
justify-content: space-between
}
.slider-progress {
flex: 1;
height: 2px;
background: rgba(255,255,255,.2);
position: relative;
margin: 0 30px;
overflow: hidden
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--primary-theme-color);
width: 0;
transition: width .1s linear
}
.slider-nav {
display: flex;
align-items: center;
gap: 30px
}
.slider-arrows {
display: flex;
gap: 15px
}
.arrow-btn {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s ease;
background: transparent;
border: none;
color: var(--primary-white);
font-size: 18px;
position: relative;
overflow: hidden
}
.arrow-btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-theme-color);
transform: translateY(100%);
transition: all .3s ease;
z-index: -1
}
.arrow-btn:hover {
color: var(--primary-white)
}
.arrow-btn:hover:before {
transform: translateY(0)
}
.slide-counter {
display: flex;
align-items: flex-end;
gap: 5px;
color: var(--primary-white);
font-size: 16px;
font-weight: 600
}
.current-slide {
color: var(--primary-white);
font-size: 32px;
line-height: 1;
font-weight: 800
}
.counter-divider {
opacity: .5;
align-self: flex-end;
margin-bottom: 5px
}
.total-slides {
opacity: .5;
align-self: flex-end;
margin-bottom: 5px
}
.slider-indicators {
display: flex;
gap: 10px
}
.indicator {
width: 30px;
height: 2px;
background: rgba(255,255,255,.3);
border: none;
cursor: pointer;
transition: all .3s ease;
padding: 0
}
.indicator--active {
background: var(--primary-theme-color);
width: 50px
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-50px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(.9)
}
to {
opacity: 1;
transform: scale(1)
}
}
.slide--active .slide-badge {
animation: fadeInRight .8s ease forwards
}
.slide--active .slide-title {
animation: fadeInUp .8s ease forwards;
animation-delay: .2s;
opacity: 0
}
.slide--active .slide-description {
animation: fadeInUp .8s ease forwards;
animation-delay: .4s;
opacity: 0
}
.slide--active .slide-actions {
animation: fadeInUp .8s ease forwards;
animation-delay: .6s;
opacity: 0
}
/* نمایش اسلایدر مناسب بر اساس اندازه صفحه */
.mobile-slider {
display: block; /* نمایش اسلایدر موبایل به صورت پیشفرض */
}
.desktop-slider {
display: none; /* مخفی کردن اسلایدر دسکتاپ به صورت پیشفرض */
}
@media (min-width: 992px) {
.mobile-slider {
display: none; /* مخفی کردن اسلایدر موبایل در صفحات بزرگ */
}
.desktop-slider {
display: block; /* نمایش اسلایدر دسکتاپ در صفحات بزرگ */
}
}
.modal-content {
border-radius: 0;
overflow: hidden;
border: none;
box-shadow: 0 25px 50px rgba(0,0,0,.5)
}
.modal-header {
background: var(--primary-theme-color);
color: var(--primary-white);
border-bottom: none;
padding: 20px
}
.modal-title {
font-weight: 700;
letter-spacing: 1px
}
.modal-header .btn-close {
color: var(--primary-white);
filter: brightness(0) invert(1);
opacity: 1
}
.modal-body {
padding: 0
}
.about-section {
padding: 120px 0;
position: relative;
overflow: hidden;
background-color: #f8f9fa
}
.about-section:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
z-index: 1
}
.about-wrapper {
position: relative;
z-index: 2
}
.about-content {
gap: 60px
}
.content-text {
flex: 1;
max-width: 600px
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
position: relative
}
.badge-text {
color: var(--primary-black);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(var(--highlighter-color),.1);
padding: 8px 20px;
border-radius: 30px;
border: 1px solid var(--primary-theme-color)
}
.badge-text:before {
content: "";
position: absolute;
top: 0;
left: -10px;
width: 20px;
height: 100%;
background: rgba(255,255,255,.3);
transform: skewX(-20deg);
animation: badgeShine 3s infinite
}
.section-title {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary-black);
line-height: 1.3;
margin-bottom: 10px;
flex-wrap: nowrap
}
.description-content {
margin-bottom: 40px
}
.description-text {
font-size: 16px;
color: var(--dark-gray);
line-height: 1.8;
margin-bottom: 25px
}
.trust-statement {
display: flex;
align-items: center;
gap: 20px;
background: rgba(var(--highlighter-color),.05);
padding: 25px;
border-radius: 0;
border-right: 4px solid var(--primary-theme-color);
position: relative;
overflow: hidden;
transition: all .3s ease
}
.trust-statement:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.trust-icon {
background: var(--primary-theme-color);
color: var(--primary-white);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
position: relative;
overflow: hidden
}
.trust-icon:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
background: rgba(255,255,255,.3);
border-radius: 50%;
animation: pulse 2s infinite
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 1
}
to {
transform: scale(10);
opacity: 0
}
}
.trust-text {
font-size: 18px;
font-weight: 600;
color: var(--primary-black);
margin: 0
}
.action-buttons {
display: flex;
gap: 20px;
margin-bottom: 50px
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 32px;
border-radius: 0;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all .4s ease;
border: 2px solid transparent;
white-space: nowrap;
position: relative;
overflow: hidden;
z-index: 1
}
.about-section .btn-primary {
color: var(--primary-white)
}
.btn-secondary {
background: transparent;
color: var(--primary-black);
border: 2px solid var(--primary-theme-color);
overflow: hidden
}
.btn-secondary:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--primary-black);
transition: all .4s ease;
z-index: -1
}
.btn-secondary:hover {
color: var(--primary-white);
border-color: var(--primary-black);
transform: translateY(-5px)
}
.content-visual {
flex: 1;
max-width: 550px
}
.visual-container {
position: relative;
height: 650px
}
.main-image {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,.2)
}
.mechanic-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: all .8s ease
}
.main-image:hover .mechanic-image {
transform: scale(1.05)
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top,rgba(0,0,0,.7),transparent);
opacity: 0;
transition: opacity .4s ease;
display: flex;
align-items: center;
justify-content: center
}
.experience-badge {
position: absolute;
top: -30px;
left: -30px;
background: var(--primary-white);
padding: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,.15);
text-align: center;
border-right: 5px solid var(--primary-theme-color);
border-bottom: 5px solid var(--primary-theme-color);
transition: all .4s ease
}
.experience-badge:hover {
transform: translateY(-10px) rotate(-5deg)
}
.experience-number {
display: block;
font-size: 3rem;
font-weight: 800;
color: var(--primary-theme-color);
line-height: 1
}
.experience-text {
font-size: 16px;
font-weight: 600;
color: var(--primary-black)
}
.stats-cards {
position: absolute;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
gap: 15px;
width: 300px
}
.stat-card {
background: var(--primary-white);
padding: 20px;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
display: flex;
align-items: center;
gap: 20px;
transition: all .4s ease;
border-right: 3px solid transparent
}
.stat-card:hover {
transform: translateX(-10px);
border-right-color: var(--primary-theme-color)
}
.stat-icon {
background: var(--primary-theme-color);
color: var(--primary-white);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
color: var(--primary-black);
line-height: 1
}
.stat-label {
font-size: 14px;
color: var(--dark-gray);
font-weight: 500
}
.decorative-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1
}
.deco-circle {
position: absolute;
border: 2px solid var(--primary-theme-color);
border-radius: 50%;
opacity: .2
}
.deco-circle--1 {
width: 120px;
height: 120px;
top: 50px;
right: -60px;
animation: float 6s ease-in-out infinite
}
.deco-circle--2 {
width: 80px;
height: 80px;
bottom: 100px;
left: -40px;
animation: float 4s ease-in-out infinite reverse
}
.deco-dots {
position: absolute;
bottom: 50px;
right: 50px;
width: 100px;
height: 100px;
background: url('data:image/svg+xml,') repeat;
background-size: 20px 20px;
opacity: .2
}
@keyframes float {
0%,to {
transform: translateY(0)
}
50% {
transform: translateY(-20px)
}
}
.features-row {
display: flex;
justify-content: space-between;
gap: 30px;
margin-top: 60px;
position: relative;
z-index: 10
}
.feature-card {
flex: 1;
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
background: #fff;
box-shadow: 0 15px 30px rgba(0,0,0,.08);
transition: all .4s cubic-bezier(0.165,0.84,0.44,1);
position: relative;
overflow: hidden;
border-bottom: 4px solid transparent
}
.feature-card:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: var(--primary-theme-color);
transition: all .4s ease
}
.feature-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0,0,0,.15);
border-bottom-color: var(--primary-theme-color)
}
.feature-card:hover:before {
height: 100%
}
.feature-card--active {
background: linear-gradient(135deg,var(--primary-theme-color),var(--hover-red))
}
.feature-card--active:before {
display: none
}
.feature-card--active .feature-desc, .feature-card--active .feature-title {
color: #fff
}
.feature-icon-wrap {
position: relative;
flex-shrink: 0
}
.feature-icon {
width: 70px;
height: 70px;
background: var(--primary-theme-color);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
transition: all .4s ease;
position: relative;
z-index: 2;
box-shadow: 0 10px 20px rgba(var(--highlighter-color),.2)
}
.feature-card--active .feature-icon {
background: #fff;
color: var(--primary-theme-color)
}
.feature-card:hover .feature-icon {
transform: rotateY(180deg)
}
.feature-icon:after {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px dashed var(--primary-theme-color);
border-radius: 50%;
animation: spin 20s linear infinite;
opacity: .3
}
.feature-card--active .feature-icon:after {
border-color: #fff
}
@keyframes spin {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
.feature-content {
flex: 1
}
.feature-title {
font-size: 20px;
font-weight: 700;
color: var(--primary-black);
margin-bottom: 10px;
transition: all .3s ease
}
.feature-desc {
font-size: 14px;
line-height: 1.6;
color: var(--dark-gray);
margin: 0;
transition: all .3s ease
}
.fade-in-left, .fade-in-right, .fade-in-up {
opacity: 0;
transition: all .8s ease
}
.fade-in-up {
transform: translateY(30px)
}
.fade-in-right {
transform: translateX(-30px)
}
.fade-in-left {
transform: translateX(30px)
}
.fade-in-left.active, .fade-in-right.active, .fade-in-up.active {
opacity: 1;
transform: translate(0)
}
.blog-section {
padding: 13px 0;
background-color: var(--primary-white);
overflow: hidden
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px
}
.section-header {
margin-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center
}
.section-header .section-badge {
justify-content: center
}
.badge-line {
width: 60px;
height: 3px;
background: var(--gradient-red);
border-radius: 2px
}
.title-highlight {
padding: 0 5px
}
.section-description {
font-size: 17px;
color: var(--dark-gray);
max-width: 600px;
line-height: 1.8
}
.blog-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 60px;
width: 100%
}
.blog-card {
width: calc((100% - 60px)/3);
display: flex;
flex-direction: column;
background: var(--primary-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
transition: all .4s cubic-bezier(0.165,0.84,0.44,1);
border: 1px solid var(--border-color);
opacity: 0;
animation: fadeInUp .6s ease-out forwards
}
.blog-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0,0,0,.15)
}
.blog-image-wrapper {
overflow: hidden;
position: relative
}
.blog-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(0.165,0.84,0.44,1)
}
.blog-card:hover .blog-image {
transform: scale(1.1)
}
.blog-card:hover .image-overlay {
opacity: 1
}
.read-more-link {
background: var(--primary-theme-color);
color: var(--primary-white);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 18px;
transform: scale(0);
transition: transform .4s cubic-bezier(0.175,0.885,0.32,1.275)
}
.blog-card:hover .read-more-link {
transform: scale(1)
}
.read-more-link:hover {
background: var(--hover-red)
}
.blog-category {
position: absolute;
top: 20px;
right: 20px;
z-index: 1
}
.category-text {
background: var(--gradient-red);
color: var(--primary-white);
padding: 6px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(var(--highlighter-color),.3);
display: inline-block
}
.blog-content {
padding: 30px;
display: flex;
flex-direction: column;
flex: 1
}
.blog-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--dark-gray)
}
.meta-item i {
color: var(--primary-theme-color);
font-size: 12px
}
.blog-title {
margin-bottom: 15px
}
.blog-title a {
color: var(--primary-black);
text-decoration: none;
font-size: 20px;
font-weight: 700;
line-height: 1.4;
transition: color .3s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.blog-title a:hover {
color: var(--primary-theme-color)
}
.blog-excerpt {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
margin-bottom: 25px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden
}
.blog-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid var(--border-color);
margin-top: auto
}
.read-more-btn {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary-theme-color);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all .3s ease
}
.read-more-btn:hover {
color: var(--hover-red);
gap: 12px
}
.blog-stats {
display: flex;
align-items: center;
gap: 15px
}
.stat-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--dark-gray)
}
.stat-item i {
color: var(--primary-theme-color);
font-size: 12px
}
.section-footer {
display: flex;
justify-content: center;
margin-top: 40px
}
.view-all-btn {
display: flex;
align-items: center;
gap: 12px;
background: var(--gradient-red);
color: var(--primary-white);
padding: 16px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all .4s ease;
box-shadow: 0 8px 25px rgba(var(--highlighter-color),.25);
overflow: hidden;
position: relative
}
.view-all-btn:after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transition: left .7s ease
}
.view-all-btn:hover {
background: linear-gradient(135deg,var(--hover-red),#991b1b);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(var(--highlighter-color),.4);
color: var(--primary-white)
}
.view-all-btn:hover:after {
left: 100%
}
.blog-card:nth-child(1) {
animation-delay: .2s
}
.blog-card:nth-child(2) {
animation-delay: .4s
}
.blog-card:nth-child(3) {
animation-delay: .6s
}
.main-footer {
background: var(--footer-bg);
color: var(--primary-white);
overflow: hidden
}
.footer-cta {
background: var(--gradient-red);
padding: 13px 0
}
.cta-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px
}
.cta-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary-white);
margin-bottom: 8px;
line-height: 1.3
}
.cta-description {
color: rgba(255,255,255,.9);
font-size: 16px;
margin: 0
}
.cta-btn {
display: flex;
align-items: center;
gap: 12px;
background: var(--primary-white);
color: var(--primary-theme-color);
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all .3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,.2)
}
.cta-btn:hover {
background: var(--primary-black);
color: var(--primary-white);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,.3)
}
.footer-main {
padding: 60px 0 40px;
background-image: radial-gradient(rgba(255,255,255,.03) 2px,transparent 2px);
background-size: 30px 30px
}
.footer-widgets {
display: flex;
flex-wrap: wrap;
gap: 30px
}
.footer-widget {
display: flex;
flex-direction: column
}
.widget-about {
flex: 1 1 450px
}
.widget-links {
flex: 1 1 250px
}
.widget-contact {
flex: 1 1 300px
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px
}
/* .footer-logo img {
filter: invert(1);
}*/
.logo-image {
width: 45px;
height: 45px;
border-radius: 10px
}
.company-name {
color: var(--primary-white);
font-size: 1.3rem;
font-weight: 700;
margin: 0
}
.company-description {
color: rgba(255,255,255,.7);
font-size: 14px;
line-height: 1.7;
margin-bottom: 25px
}
.social-links {
display: flex;
gap: 10px
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,.1);
color: var(--primary-white);
border-radius: 8px;
text-decoration: none;
transition: all .3s ease;
font-size: 16px
}
.social-link:hover {
background: var(--primary-theme-color);
color: var(--primary-white);
transform: translateY(-3px)
}
.widget-title {
color: var(--primary-white);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary-theme-color);
display: inline-block
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px
}
.footer-links a {
color: rgba(255,255,255,.7);
text-decoration: none;
font-size: 14px;
transition: all .3s ease;
display: flex;
align-items: center
}
.footer-links a:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 8px;
font-size: 10px;
color: var(--primary-theme-color);
opacity: 0;
transition: opacity .3s ease,transform .3s ease;
transform: translateX(5px)
}
.footer-links a:hover {
color: var(--primary-white);
padding-right: 5px
}
.footer-links a:hover:before {
opacity: 1;
transform: translateX(0)
}
.contact-info {
display: flex;
flex-direction: column;
gap: 15px
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 12px
}
.contact-icon {
background: rgba(var(--highlighter-color),.2);
color: var(--primary-theme-color);
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: all .3s ease
}
.contact-item:hover .contact-icon {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.contact-details {
flex: 1
}
.contact-label {
display: block;
color: var(--primary-white);
font-weight: 600;
font-size: 13px;
margin-bottom: 3px
}
.contact-text {
color: rgba(255,255,255,.7);
font-size: 14px;
line-height: 1.6;
text-decoration: none;
transition: color .3s ease
}
a.contact-text:hover {
color: var(--primary-theme-color)
}
.footer-bottom {
background: var(--footer-dark);
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,.1)
}
.bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px
}
.copyright p {
color: rgba(255,255,255,.6);
font-size: 13px;
margin: 0
}
.footer-menu {
display: flex;
gap: 20px
}
.footer-menu a {
color: rgba(255,255,255,.6);
text-decoration: none;
font-size: 13px;
transition: color .3s ease
}
.footer-menu a:hover {
color: var(--primary-theme-color)
}
.scroll-top-btn {
position: fixed;
bottom: 30px;
left: 30px;
width: 45px;
height: 45px;
background: var(--primary-theme-color);
color: var(--primary-white);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all .3s ease;
opacity: 0;
visibility: hidden;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center
}
.scroll-top-btn.show {
opacity: 1;
visibility: visible
}
.scroll-top-btn:hover {
background: var(--hover-red);
transform: translateY(-5px)
}
.floating-contact {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000
}
.floating-btn {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: var(--teal-dark);
color: var(--primary-white);
border-radius: 8px;
text-decoration: none;
font-size: 18px;
box-shadow: 0 4px 20px rgba(var(--highlighter-color),.4);
transition: all .3s ease
}
.floating-btn:hover {
background: var(--hover-red);
color: var(--primary-white);
transform: translateY(-5px)
}
.company-tagline {
color: var(--primary-theme-color);
font-size: .8rem;
display: block;
margin-top: 2px
}
.logo-text {
display: flex;
flex-direction: column
}
.blog-page-header_blog {
background: linear-gradient(135deg,#2c3e50,#1a1f36);
padding: 30px 0;
position: relative;
overflow: hidden;
color: var(--primary-white);
box-shadow: 0 4px 20px rgba(0,0,0,.15)
}
.blog-page-header_blog:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: .3
}
.blog-header-content_blog {
position: relative;
z-index: 1
}
.header-main_blog {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px
}
.header-text_blog {
flex: 1
}
.blog-page-title_blog {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 5px;
color: var(--primary-white)
}
.blog-page-title_blog .highlight_blog {
color: #6ee7b7;
position: relative
}
.blog-page-description_blog {
font-size: .95rem;
opacity: .9;
margin: 0
}
.blog-search-box_blog {
width: 300px;
flex-shrink: 0
}
.search-input-wrapper_blog {
display: flex;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: 8px;
overflow: hidden
}
.search-input_blog {
flex: 1;
border: none;
background: transparent;
padding: 10px 15px;
font-size: 14px;
outline: none;
color: var(--primary-white)
}
.search-input_blog::placeholder {
color: rgba(255,255,255,.7)
}
.search-btn_blog {
background: rgba(255,255,255,.1);
color: var(--primary-white);
border: none;
padding: 0 15px;
cursor: pointer;
transition: all .3s ease
}
.search-btn_blog:hover {
background: rgba(110,231,183,.3)
}
.header-categories_blog {
display: flex;
flex-wrap: wrap;
gap: 10px
}
.category-pill_blog {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
color: var(--primary-white);
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
text-decoration: none;
transition: all .3s ease
}
.category-pill_blog:hover {
background: rgba(110,231,183,.2);
border-color: rgba(110,231,183,.4);
color: #6ee7b7
}
.services-section-custom {
padding: 100px 0;
background-color: var(--primary-white);
border-top: 1px solid var(--border-color)
}
.services-section-custom .section-header {
text-align: center;
margin-bottom: 60px
}
.services-section-custom .service-card {
background-color: var(--primary-white);
padding: 35px 30px;
text-align: center;
border: 1px solid var(--border-color);
box-shadow: 0 10px 30px rgba(0,0,0,.05);
transition: all .4s cubic-bezier(0.165,0.84,0.44,1);
height: 100%;
border-bottom: 4px solid transparent;
align-items: center;
}
.services-section-custom .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 45px rgba(0,0,0,.1);
border-bottom-color: var(--primary-theme-color)
}
.services-section-custom .service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: var(--gradient-red);
color: var(--primary-white);
border-radius: 50%;
font-size: 28px;
margin-bottom: 25px;
box-shadow: 0 8px 15px rgba(var(--highlighter-color),.2);
transition: transform .3s ease
}
.services-section-custom .service-card:hover .service-icon {
transform: scale(1.1)
}
.services-section-custom .service-title {
font-size: 20px;
font-weight: 700;
color: var(--primary-black);
margin-bottom: 15px
}
.services-section-custom .service-desc {
font-size: 15px;
color: var(--dark-gray);
line-height: 1.7;
margin: 0
}
.testimonials-section-custom {
padding: 100px 0;
background-color: #f8f9fa;
border-top: 1px solid var(--border-color)
}
.testimonials-section-custom .section-header {
text-align: center;
margin-bottom: 60px
}
.testimonials-section-custom .testimonial-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 40px
}
.testimonials-section-custom .rating-card {
background: var(--primary-white);
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,.07);
border: 1px solid var(--border-color);
width: 100%;
max-width: 320px;
flex-shrink: 0
}
.testimonials-section-custom .rating-value {
font-size: 4rem;
font-weight: 800;
color: var(--primary-black);
line-height: 1
}
.testimonials-section-custom .rating-value span {
font-size: 1.5rem;
font-weight: 600;
color: var(--dark-gray)
}
.testimonials-section-custom .stars {
color: #ffc107;
font-size: 22px;
margin: 10px 0
}
.testimonials-section-custom .rating-count {
font-size: 14px;
color: var(--dark-gray);
margin: 0
}
.testimonials-section-custom .testimonial-card {
padding: 30px;
max-width: 550px;
border-right: 4px solid var(--primary-theme-color);
background: rgba(var(--highlighter-color),.03);
border-radius: 0 8px 8px 0;
position: relative
}
.testimonials-section-custom .quote-icon {
font-size: 28px;
color: var(--primary-theme-color);
opacity: .2;
position: absolute;
top: 20px;
right: 20px
}
.testimonials-section-custom .quote-text {
font-size: 17px;
font-weight: 500;
line-height: 1.8;
color: var(--primary-black);
margin-bottom: 20px;
font-style: italic
}
.testimonials-section-custom .quote-footer {
font-size: 16px;
font-weight: 700;
color: var(--primary-theme-color)
}
.testimonials-section-custom .quote-footer cite {
font-style: normal;
font-size: 14px;
font-weight: 400;
color: var(--dark-gray);
margin-right: 5px
}
.faq-section-custom {
padding: 100px 0;
background-color: var(--primary-white);
border-top: 1px solid var(--border-color)
}
.faq-section-custom .section-header {
text-align: center;
margin-bottom: 60px
}
.faq-section-custom .accordion {
max-width: 800px;
margin: 0 auto
}
.faq-section-custom .accordion-item {
background-color: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 8px !important;
margin-bottom: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.04);
transition: all .3s ease
}
.faq-section-custom .accordion-item:hover {
border-color: rgba(var(--highlighter-color),.4);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
transform: translateY(-2px)
}
.faq-section-custom .accordion-button {
font-size: 16px;
font-weight: 700;
color: var(--primary-black);
background-color: transparent;
padding: 16px 20px;
text-align: right;
width: 100%;
border: none;
box-shadow: none !important;
position: relative
}
.faq-section-custom .accordion-button:after {
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 900;
background-image: none !important;
font-size: 14px;
color: var(--primary-theme-color);
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%) rotate(0);
transition: transform .3s ease
}
.faq-section-custom .accordion-button:not(.collapsed):after {
content: "\f068";
transform: translateY(-50%) rotate(0)
}
.faq-section-custom .accordion-button:not(.collapsed) {
color: var(--primary-theme-color)
}
.faq-section-custom .accordion-button:focus {
box-shadow: none;
border-color: transparent
}
.faq-section-custom .accordion-body {
padding: 0 20px 16px;
font-size: 15px;
line-height: 1.8;
color: var(--dark-gray);
background-color: var(--primary-white)
}
.faq-section-custom .accordion-body p:last-of-type {
margin-bottom: 0
}
.faq-section-custom .accordion-body a {
color: var(--primary-theme-color);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(var(--highlighter-color),.3);
transition: all .3s ease
}
.faq-section-custom .accordion-body a:hover {
text-decoration-color: var(--primary-theme-color)
}
.breadcrumb {
padding: 12px 20px 0;
border-radius: 8px;
margin: 20px 0 0
}
.breadcrumb-item {
font-size: 1rem;
color: #b0b0b0
}
.breadcrumb-item a {
color: var(--primary-theme-color);
text-decoration: none;
transition: color .3s ease
}
.breadcrumb-item a:hover {
color: #80c4f4;
text-decoration: underline
}
.breadcrumb-item.active {
color: var(--dark-gray);
font-weight: 500
}
.breadcrumb-item + .breadcrumb-item:before {
content: ">";
color: #6c757d;
font-size: 1rem;
margin: 0 10px
}
.page-header-custom {
padding: 60px 0;
background: var(--primary-black) url(/assets/sitetheme/img/header-bg.png) center center/cover;
color: var(--primary-white);
text-align: center;
position: relative
}
.page-header-custom:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(17,24,39,.8)
}
.page-header-custom .container {
position: relative;
z-index: 2
}
.page-title-custom {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px
}
.page-subtitle-custom {
font-size: 1.1rem;
color: rgba(255,255,255,.8);
max-width: 700px;
margin: 0 auto
}
.section-landing {
padding: 60px 0
}
.section-title-landing {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-black);
margin-bottom: 30px;
text-align: center
}
.content-card {
background: var(--primary-white);
border-radius: 12px;
box-shadow: 0 5px 20px var(--shadow-light);
transition: all .3s ease;
height: 100%;
display: flex;
flex-direction: column;
margin-bottom: 30px
}
.content-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px var(--shadow-medium)
}
.content-card-image {
overflow: hidden;
border-top-left-radius: 12px;
border-top-right-radius: 12px
}
.content-card-image img {
width: 100%;
height: 100%;
object-fit: cover
}
.content-card-body {
padding: 25px;
flex-grow: 1
}
.content-card-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-black);
margin-bottom: 15px
}
.content-card-text {
font-size: 15px;
color: var(--dark-gray);
flex-grow: 1
}
.content-card-link {
color: var(--primary-theme-color);
text-decoration: none;
font-weight: 600;
margin-top: 20px;
display: inline-block
}
.product-gallery {
margin-bottom: 30px
}
.product-main-image {
width: 100%;
border-radius: 12px;
box-shadow: 0 10px 30px var(--shadow-light)
}
.product-features-list {
list-style: none;
padding: 0
}
.product-features-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px
}
.product-features-list i {
color: var(--primary-theme-color)
}
.product-cta-box {
background: var(--light-gray);
padding: 30px;
border-radius: 12px;
text-align: center
}
.product-price {
font-size: 2rem;
font-weight: 800;
color: var(--primary-theme-color);
margin-bottom: 20px
}
.location-info-card {
background: var(--light-gray);
padding: 25px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px
}
.location-info-icon {
font-size: 24px;
color: var(--primary-theme-color)
}
.about-section_About {
background-color: var(--light-gray);
padding: 60px 0
}
.section-header_About {
margin-bottom: 30px
}
.section-subtitle_About {
display: inline-block;
background: rgba(var(--highlighter-color),.1);
color: var(--primary-theme-color);
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px
}
.section-title_About {
color: var(--primary-black);
font-size: 1.8rem;
font-weight: 700;
position: relative;
margin-bottom: 0
}
.about-content_About {
padding-right: 20px
}
.about-text_About {
color: var(--dark-gray);
line-height: 1.8;
margin-bottom: 20px;
text-align: justify
}
.about-features_About {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px
}
.feature-item_About {
display: flex;
align-items: center;
gap: 10px;
width: calc(50% - 8px)
}
.feature-icon_About {
color: var(--primary-theme-color);
font-size: 18px
}
.feature-text_About {
color: var(--primary-black);
font-weight: 500;
font-size: 15px
}
.about-image-wrapper_About {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,.1)
}
.about-main-image_About {
width: 100%;
height: 400px;
object-fit: cover
}
.about-experience_About {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--primary-theme-color);
color: var(--primary-white);
padding: 15px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 100px;
box-shadow: 0 5px 15px rgba(0,0,0,.2)
}
.experience-number_About {
font-size: 2.5rem;
font-weight: 700;
line-height: 1
}
.experience-text_About {
font-size: 14px;
font-weight: 500
}
.why-us-card_About {
background: var(--primary-white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,.05);
height: 100%;
transition: all .3s ease;
text-align: center
}
.why-us-card_About:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.why-us-icon_About {
width: 70px;
height: 70px;
background: rgba(var(--highlighter-color),.1);
color: var(--primary-theme-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 20px
}
.why-us-title_About {
color: var(--primary-black);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px
}
.why-us-text_About {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7
}
.team-card_About {
background: var(--primary-white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,.05);
transition: all .3s ease
}
.team-card_About:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.team-image_About {
height: 250px;
overflow: hidden
}
.team-image_About img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease
}
.team-card_About:hover .team-image_About img {
transform: scale(1.05)
}
.team-content_About {
padding: 20px;
text-align: center
}
.team-name_About {
color: var(--primary-black);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px
}
.team-position_About {
color: var(--primary-theme-color);
font-size: 14px;
font-weight: 500;
margin-bottom: 8px
}
.team-experience_About {
color: var(--dark-gray);
font-size: 13px;
margin-bottom: 0
}
.stats-wrapper_About {
background: var(--primary-white);
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,.05);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px
}
.stats-item_About {
text-align: center;
flex: 1;
min-width: 200px
}
.stats-icon_About {
width: 60px;
height: 60px;
background: rgba(var(--highlighter-color),.1);
color: var(--primary-theme-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 15px
}
.stats-number_About {
color: var(--primary-black);
font-size: 2rem;
font-weight: 700;
margin-bottom: 5px
}
.stats-text_About {
color: var(--dark-gray);
font-size: 15px
}
.brands-wrapper_About {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 30px
}
.brand-item_About {
background: var(--primary-white);
padding: 15px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,.05);
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
transition: all .3s ease
}
.brand-item_About:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.brand-item_About img {
width: 60px;
height: 60px;
object-fit: contain;
margin-bottom: 10px
}
.brand-item_About span {
color: var(--primary-black);
font-size: 14px;
font-weight: 500
}
.testimonials-wrapper_About {
display: flex;
flex-wrap: wrap;
gap: 30px
}
.testimonial-card_About {
background: var(--primary-white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,.05);
flex: 1;
min-width: 300px;
transition: all .3s ease
}
.testimonial-card_About:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.testimonial-rating_About {
color: #ffb800;
font-size: 16px;
margin-bottom: 15px
}
.testimonial-text_About {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
position: relative;
padding-right: 10px
}
.testimonial-text_About:before {
content: '"';
font-size: 40px;
color: rgba(var(--highlighter-color),.1);
position: absolute;
top: -15px;
right: -10px
}
.testimonial-author_About {
display: flex;
align-items: center;
gap: 15px
}
.testimonial-author_About img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover
}
.testimonial-author_About h4 {
font-size: 16px;
font-weight: 600;
color: var(--primary-black);
margin-bottom: 2px
}
.testimonial-author_About p {
font-size: 14px;
color: var(--dark-gray);
margin-bottom: 0
}
.blog-main-content_blog {
padding: 80px 0;
background: var(--light-gray)
}
.blog-featured-post_blog {
background: var(--primary-white);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px var(--shadow-light);
margin-bottom: 50px;
transition: transform .3s ease,box-shadow .3s ease
}
.blog-featured-post_blog:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px var(--shadow-medium)
}
.featured-post-img_blog {
height: 400px;
position: relative
}
.featured-post-img_blog img {
width: 100%;
height: 100%;
object-fit: cover
}
.post-category-badge_blog {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-white);
color: var(--primary-theme-color);
padding: 8px 15px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
z-index: 1;
display: flex;
align-items: center;
gap: 6px
}
.post-category-badge_blog.featured_blog {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.post-category-badge_blog a {
color: inherit;
text-decoration: none
}
.featured-post-content_blog {
padding: 30px
}
.post-meta_blog {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
color: var(--dark-gray);
font-size: 14px
}
.post-meta_blog > div {
display: flex;
align-items: center;
gap: 6px
}
.post-meta_blog i {
color: var(--primary-theme-color)
}
.post-title_blog {
margin-bottom: 20px
}
.post-title_blog a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease
}
.post-title_blog a:hover {
color: var(--primary-theme-color)
}
.post-excerpt_blog {
color: var(--dark-gray);
margin-bottom: 25px;
line-height: 1.7
}
.post-footer_blog {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px
}
.read-more-btn_blog {
display: flex;
align-items: center;
gap: 10px;
color: var(--primary-white);
background: var(--primary-theme-color);
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
transition: all .3s ease
}
.read-more-btn_blog:hover {
background: var(--hover-red);
color: var(--primary-white);
transform: translateY(-3px)
}
.post-tags_blog {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.post-tag_blog {
background: var(--light-gray);
color: var(--dark-gray);
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
text-decoration: none;
transition: all .3s ease
}
.post-tag_blog:hover {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.blog-posts-grid_blog {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
gap: 30px;
margin-bottom: 50px
}
.blog-post-card_blog {
background: var(--primary-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px var(--shadow-light);
transition: transform .3s ease,box-shadow .3s ease;
height: 100%;
display: flex;
flex-direction: column
}
.blog-post-card_blog:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px var(--shadow-medium)
}
.post-thumbnail_blog {
height: 200px;
position: relative
}
.post-thumbnail_blog img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease
}
.blog-post-card_blog:hover .post-thumbnail_blog img {
transform: scale(1.05)
}
.post-content_blog {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column
}
.post-content_blog .post-meta_blog {
margin-bottom: 15px
}
.post-content_blog .post-title_blog {
font-size: 1.2rem;
margin-bottom: 15px
}
.post-content_blog .post-excerpt_blog {
font-size: 14px;
margin-bottom: 20px;
flex: 1
}
.read-more-link_blog {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary-theme-color);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: gap .3s ease
}
.read-more-link_blog:hover {
gap: 12px;
color: var(--hover-red)
}
.post-stats_blog {
display: flex;
gap: 15px
}
.post-stats_blog span {
display: flex;
align-items: center;
gap: 5px;
color: var(--dark-gray);
font-size: 13px
}
.post-stats_blog i {
color: var(--primary-theme-color)
}
.blog-pagination_blog {
margin-top: 40px
}
.pagination_blog {
justify-content: center;
gap: 5px;
display: flex;
list-style: none;
padding: 0
}
.page-item_blog .page-link_blog {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-black);
border: none;
border-radius: 8px;
font-weight: 600;
transition: all .3s ease;
text-decoration: none
}
.page-item_blog.active_blog .page-link_blog {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.page-item_blog .page-link_blog:hover:not(.page-item_blog.active_blog .page-link_blog) {
background: var(--light-gray);
color: var(--primary-theme-color)
}
.page-item_blog.disabled_blog .page-link_blog {
color: var(--dark-gray);
opacity: .5;
pointer-events: none
}
.blog-sidebar_blog {
position: sticky;
top: 100px
}
.sidebar-widget_blog {
background: var(--primary-white);
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 5px 15px var(--shadow-light)
}
.widget-title_blog {
color: var(--primary-black);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light-gray);
position: relative
}
.widget-title_blog:after {
content: "";
position: absolute;
bottom: -2px;
right: 0;
width: 60px;
height: 2px;
background: var(--primary-theme-color)
}
.categories-list_blog {
list-style: none;
padding: 0;
margin: 0
}
.categories-list_blog li {
margin-bottom: 10px;
border-bottom: 1px solid var(--light-gray)
}
.categories-list_blog li:last-child {
margin-bottom: 0;
border-bottom: none
}
.categories-list_blog a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
color: var(--dark-gray);
text-decoration: none;
transition: all .3s ease
}
.categories-list_blog a:hover {
color: var(--primary-theme-color);
padding-right: 5px
}
.category-count_blog {
background: var(--light-gray);
color: var(--dark-gray);
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
transition: all .3s ease
}
.categories-list_blog a:hover .category-count_blog {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.popular-posts_blog {
display: flex;
flex-direction: column;
gap: 20px
}
.popular-post_blog {
display: flex;
gap: 15px
}
.popular-post-image_blog {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0
}
.popular-post-image_blog img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease
}
.popular-post_blog:hover .popular-post-image_blog img {
transform: scale(1.1)
}
.popular-post-content_blog {
flex: 1
}
.popular-post-title_blog {
font-size: 15px;
margin-bottom: 8px;
line-height: 1.4
}
.popular-post-title_blog a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease
}
.popular-post-title_blog a:hover {
color: var(--primary-theme-color)
}
.popular-post-meta_blog {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--dark-gray)
}
.popular-post-meta_blog i {
color: var(--primary-theme-color)
}
.tags-cloud_blog {
display: flex;
flex-wrap: wrap;
gap: 10px
}
.tag-link_blog {
background: var(--light-gray);
color: var(--dark-gray);
padding: 8px 15px;
border-radius: 6px;
font-size: 13px;
text-decoration: none;
transition: all .3s ease
}
.tag-link_blog:hover {
background: var(--primary-theme-color);
color: var(--primary-white);
transform: translateY(-3px)
}
.contact-section_contact {
background-color: var(--light-gray);
padding: 80px 0
}
.contact-info-wrapper_contact {
background: var(--primary-white);
border-radius: 12px;
padding: 30px;
height: 100%;
box-shadow: 0 5px 20px rgba(0,0,0,.08);
display: flex;
flex-direction: column
}
.contact-info-header_contact {
margin-bottom: 30px;
border-bottom: 2px solid var(--light-gray);
padding-bottom: 15px
}
.contact-info-title_contact {
color: var(--primary-black);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px
}
.contact-info-subtitle_contact {
color: var(--dark-gray);
font-size: .95rem;
margin-bottom: 0
}
.contact-info-items_contact {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 30px;
flex: 1
}
.contact-info-item_contact {
display: flex;
gap: 15px
}
.contact-icon_contact {
width: 45px;
height: 45px;
min-width: 45px;
background: rgba(var(--highlighter-color),.1);
color: var(--primary-theme-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem
}
.contact-text_contact h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--primary-black)
}
.contact-text_contact p {
color: var(--dark-gray);
margin-bottom: 5px;
font-size: .95rem
}
.contact-link_contact {
color: var(--primary-theme-color);
text-decoration: none;
transition: all .3s ease
}
.contact-link_contact:hover {
color: var(--hover-red);
text-decoration: underline
}
.contact-social_contact {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--light-gray)
}
.contact-social_contact h5 {
font-size: 1rem;
margin-bottom: 15px;
color: var(--primary-black)
}
.social-icons_contact {
display: flex;
gap: 10px
}
.social-icon_contact {
width: 40px;
height: 40px;
background: var(--light-gray);
color: var(--dark-gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all .3s ease
}
.social-icon_contact:hover {
background: var(--primary-theme-color);
color: var(--primary-white);
transform: translateY(-3px)
}
.contact-form-wrapper_contact {
background: var(--primary-white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,.08)
}
.contact-form-header_contact {
margin-bottom: 30px;
border-bottom: 2px solid var(--light-gray);
padding-bottom: 15px;
position: relative
}
.contact-form-header_contact:after {
content: "";
position: absolute;
bottom: -2px;
right: 0;
width: 80px;
height: 2px;
background: var(--primary-theme-color)
}
.contact-form-title_contact {
color: var(--primary-black);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px
}
.contact-form-subtitle_contact {
color: var(--dark-gray);
font-size: .95rem;
margin-bottom: 0
}
.form-label_contact {
color: var(--primary-black);
font-weight: 600;
margin-bottom: 8px;
font-size: .95rem
}
.input-wrapper_contact {
position: relative
}
.input-icon_contact {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--dark-gray)
}
.textarea-icon_contact {
top: 20px;
transform: none
}
.form-control_contact {
padding: 12px 45px 12px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--primary-black);
width: 100%;
transition: all .3s ease
}
.form-control_contact:focus {
border-color: var(--primary-theme-color);
box-shadow: 0 0 0 3px rgba(var(--highlighter-color),.2);
outline: none
}
.textarea_contact {
min-height: 150px;
resize: vertical
}
.form-check_contact {
display: flex;
align-items: center;
gap: 8px
}
.form-check-input_contact {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid var(--border-color);
cursor: pointer
}
.form-check-input_contact:checked {
background-color: var(--primary-theme-color);
border-color: var(--primary-theme-color)
}
.form-check-label_contact {
color: var(--dark-gray);
font-size: .9rem;
cursor: pointer
}
.submit-btn_contact {
background: var(--primary-theme-color);
color: var(--primary-white);
border: none;
padding: 12px 25px;
border-radius: 8px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all .3s ease;
cursor: pointer
}
.submit-btn_contact:hover {
background: var(--hover-red);
transform: translateY(-3px)
}
.map-wrapper_contact {
background: var(--primary-white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,.08)
}
.map-title_contact {
color: var(--primary-black);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light-gray);
position: relative
}
.map-title_contact:after {
content: "";
position: absolute;
bottom: -2px;
right: 0;
width: 60px;
height: 2px;
background: var(--primary-theme-color)
}
.google-map_contact {
border-radius: 8px;
overflow: hidden;
height: 450px
}
.google-map_contact iframe {
width: 100%;
height: 100%;
border: none
}
.faq-section_contact {
background: var(--primary-white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0,0,0,.08)
}
.faq-title_contact {
color: var(--primary-black);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--light-gray);
position: relative
}
.faq-title_contact:after {
content: "";
position: absolute;
bottom: -2px;
right: 0;
width: 60px;
height: 2px;
background: var(--primary-theme-color)
}
.faq-item_contact {
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden
}
.faq-button_contact {
padding: 15px 20px;
font-weight: 600;
color: var(--primary-black);
background-color: var(--light-gray);
box-shadow: none
}
.faq-button_contact:not(.collapsed) {
color: var(--primary-theme-color);
background-color: rgba(var(--highlighter-color),.05)
}
.faq-button_contact:focus {
box-shadow: none
}
.faq-body_contact {
padding: 20px;
color: var(--dark-gray);
line-height: 1.7
}
.portfolio-section {
padding: 60px 0
}
.portfolio-filters {
margin-bottom: 40px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center
}
.filter-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--dark-gray);
padding: 8px 20px;
margin: 5px;
border-radius: 30px;
font-weight: 600;
transition: all .3s ease
}
.filter-btn.active, .filter-btn:hover {
background: var(--primary-theme-color);
color: var(--primary-white);
border-color: var(--primary-theme-color)
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
gap: 25px
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 5px 15px var(--shadow-light)
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease
}
.portfolio-item:hover img {
transform: scale(1.1)
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top,rgba(0,0,0,.8),transparent);
opacity: 0;
transition: opacity .4s ease;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 25px
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1
}
.portfolio-title {
color: var(--primary-white);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 5px;
transform: translateY(20px);
opacity: 0;
transition: all .4s ease .1s
}
.portfolio-category {
color: rgba(255,255,255,.8);
font-size: 14px;
transform: translateY(20px);
opacity: 0;
transition: all .4s ease .2s
}
.portfolio-item:hover .portfolio-category, .portfolio-item:hover .portfolio-title {
transform: translateY(0);
opacity: 1
}
.article-single-section {
padding: 60px 0;
background: var(--primary-white)
}
.article-breadcrumbs {
margin-bottom: 25px
}
.article-breadcrumbs .breadcrumb {
background: transparent;
padding: 0
}
.article-breadcrumbs .breadcrumb-item.active {
color: var(--dark-gray)
}
.article-breadcrumbs .breadcrumb-item a {
color: var(--primary-theme-color);
text-decoration: none;
transition: all .3s ease
}
.article-breadcrumbs .breadcrumb-item a:hover {
color: var(--hover-red)
}
.article-header h1.article-title {
font-size: 2.2rem;
font-weight: 800;
color: var(--primary-black);
line-height: 1.4;
margin-bottom: 20px
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid var(--border-color);
color: var(--dark-gray);
font-size: 14px
}
.article-meta .meta-item {
display: flex;
align-items: center;
gap: 8px
}
.article-meta .meta-item i {
color: var(--primary-theme-color)
}
.article-featured-image {
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px var(--shadow-light)
}
.article-featured-image img {
width: 100%
}
.article-body {
color: var(--primary-black);
line-height: 2;
font-size: 16px
}
.article-body h2, .article-body h3, .article-body ol, .article-body p, .article-body ul {
margin-bottom: 20px
}
.article-body h2, .article-body h3 {
font-weight: 700;
color: var(--primary-black);
margin-top: 40px
}
.article-body h2 {
font-size: 1.6rem
}
.article-body h3 {
font-size: 1.4rem
}
.article-body ol, .article-body ul {
padding-right: 20px
}
.article-body blockquote {
background: rgba(var(--highlighter-color),.05);
border-right: 4px solid var(--primary-theme-color);
padding: 20px;
margin: 30px 0;
font-size: 16px;
font-style: italic
}
.article-footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--border-color)
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 10px
}
.article-tag {
background: var(--light-gray);
color: var(--dark-gray);
padding: 8px 15px;
border-radius: 6px;
font-size: 13px;
text-decoration: none;
transition: all .3s ease
}
.article-tag:hover {
background: var(--primary-theme-color);
color: var(--primary-white)
}
.author-box {
background: var(--light-gray);
padding: 30px;
border-radius: 12px;
display: flex;
gap: 25px;
margin-top: 50px
}
.author-avatar img {
width: 80px;
height: 80px;
border-radius: 50%
}
.author-info h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 5px
}
.author-info .author-role {
color: var(--primary-theme-color);
font-weight: 600;
font-size: 14px;
margin-bottom: 10px
}
.author-info p {
font-size: 14px;
color: var(--dark-gray);
margin-bottom: 0
}
.related-posts {
margin-top: 60px
}
.related-posts .widget-title_blog {
font-size: 1.4rem
}
.comments-section {
margin-top: 60px
}
.comments-section .widget-title_blog {
font-size: 1.4rem;
margin-bottom: 30px
}
.comment-list {
list-style: none;
padding: 0
}
.comment {
display: flex;
gap: 20px;
margin-bottom: 30px
}
.comment-avatar img {
width: 60px;
height: 60px;
border-radius: 50%
}
.comment-body {
background: var(--light-gray);
padding: 20px;
border-radius: 10px;
flex: 1
}
.comment-author {
font-weight: 700;
margin-bottom: 5px
}
.comment-date {
font-size: 12px;
color: var(--dark-gray);
margin-bottom: 10px
}
.comment-text {
font-size: 15px;
line-height: 1.7
}
.comment-reply {
margin-right: 60px
}
.comment-form {
background: var(--light-gray);
padding: 30px;
border-radius: 12px;
margin-top: 40px
}
.related-items-widget ul {
list-style: none;
padding: 0
}
.related-items-widget li a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 5px;
color: var(--dark-gray);
text-decoration: none;
border-bottom: 1px solid var(--border-color);
transition: all .3s ease
}
.related-items-widget li a:hover {
color: var(--primary-theme-color);
background: rgba(var(--highlighter-color),.05);
padding-right: 10px
}
.related-items-widget li:last-child a {
border-bottom: none
}
.related-item-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
background: rgba(var(--highlighter-color),.1);
color: var(--primary-theme-color);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center
}
.service-list-section {
padding: 60px 0;
background: var(--light-gray)
}
.service-card-item {
height: 100%;
margin-bottom: 30px
}
.service-card {
background: var(--primary-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px var(--shadow-light);
transition: all .3s ease;
height: 100%;
display: flex;
flex-direction: column
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px var(--shadow-medium)
}
.service-card-image {
height: 200px;
overflow: hidden
}
.service-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease
}
.service-card:hover .service-card-image img {
transform: scale(1.05)
}
.service-card-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column
}
.service-card-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 15px
}
.service-card-title a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease
}
.service-card-title a:hover {
color: var(--primary-theme-color)
}
.service-card-excerpt {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
flex-grow: 1
}
.service-card-footer {
margin-top: auto
}
.service-details-btn {
color: var(--primary-theme-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .3s ease
}
.service-details-btn:hover {
color: var(--hover-red);
gap: 12px
}
.service-detail-header {
padding: 50px 0;
background: var(--primary-black);
color: var(--primary-white);
text-align: center
}
.service-detail-title {
font-size: 2.5rem;
font-weight: 800
}
.service-detail-section {
padding: 60px 0
}
.service-detail-image {
border-radius: 12px;
box-shadow: 0 10px 30px var(--shadow-light)
}
.service-feature-list {
list-style: none;
padding: 0
}
.service-feature-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-size: 16px
}
.service-feature-list i {
color: var(--primary-theme-color);
background: rgba(var(--highlighter-color),.1);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.search-page-header {
background-color: var(--light-gray);
padding: 40px 0;
border-bottom: 1px solid var(--border-color)
}
.search-page-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px
}
.search-page-title .query-highlight {
color: var(--primary-theme-color)
}
.search-form-page {
position: relative;
max-width: 600px;
margin: 0 auto
}
.search-input-page {
width: 100%;
padding: 15px 20px;
font-size: 16px;
border: 2px solid var(--border-color);
border-radius: 50px;
transition: all .3s ease
}
.search-input-page:focus {
border-color: var(--primary-theme-color);
box-shadow: 0 0 0 4px rgba(var(--highlighter-color),.1);
outline: none
}
.search-submit-page {
position: absolute;
left: 8px;
top: 8px;
bottom: 8px;
width: 100px;
border: none;
background: var(--primary-theme-color);
color: var(--primary-white);
font-weight: 600;
border-radius: 50px;
cursor: pointer
}
.search-results-section {
padding: 60px 0
}
.result-category-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid var(--light-gray);
display: flex;
align-items: center;
gap: 12px
}
.result-category-icon {
color: var(--primary-theme-color)
}
.result-count-badge {
font-size: 14px;
background: var(--primary-theme-color);
color: var(--primary-white);
padding: 3px 10px;
border-radius: 20px;
font-weight: 400
}
.search-result-item {
padding: 20px 0;
border-bottom: 1px solid var(--border-color);
transition: background-color .3s ease
}
.search-result-item:hover {
background-color: rgba(243,244,246,.5)
}
.result-item-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px
}
.result-item-type-icon {
width: 40px;
height: 40px;
background: var(--light-gray);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-theme-color);
font-size: 18px
}
.result-item-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0
}
.result-item-title a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease
}
.result-item-title a:hover {
color: var(--primary-theme-color)
}
.result-item-excerpt {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
padding-right: 55px
}
.result-item-excerpt .highlight {
background-color: #fff1a7;
font-weight: 700
}
.result-item-link {
display: block;
color: var(--primary-theme-color);
font-weight: 600;
font-size: 14px;
margin-top: 10px;
padding-right: 55px
}
.no-results {
text-align: center;
padding: 50px;
background: var(--light-gray);
border-radius: 12px
}
.no-results i {
font-size: 4rem;
color: var(--primary-theme-color);
margin-bottom: 20px
}
@media (max-width:1200px) {
.mega-dropdown {
min-width: 600px
}
.search-container {
width: 220px
}
.primary-menu {
gap: 1rem
}
.search-contact-section {
gap: 1rem
}
.section-title {
font-size: 2.4rem
}
.blog-grid {
gap: 25px
}
.blog-card {
width: calc((100% - 50px)/3)
}
}
@media (min-width:992px) and (max-width:1199px) {
.menu-link {
padding: 8px 12px;
font-size: 14px
}
.mega-dropdown {
min-width: 550px
}
.search-container {
width: 180px
}
.appointment-btn {
padding: 8px 15px;
font-size: 13px
}
.section-title {
font-size: 3rem
}
.visual-container {
height: 600px
}
.main-image {
height: 450px
}
.stats-cards {
width: 280px
}
}
@media (max-width:992px) {
.header-topbar {
flex-wrap: wrap;
justify-content: space-between;
padding: 15px 0
}
.header-brand {
flex: 1
}
.header-mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
order: 3
}
.main-navigation {
display: none
}
.blog-section {
padding: 80px 0
}
.section-title {
font-size: 2.2rem
}
.section-description {
font-size: 16px
}
.blog-grid {
gap: 20px
}
.blog-card {
width: calc((100% - 20px)/2)
}
.cta-content {
flex-direction: column;
text-align: center;
gap: 20px
}
.cta-title {
font-size: 1.4rem
}
.footer-main {
padding: 50px 0 30px
}
.footer-widgets {
gap: 25px
}
.widget-about {
flex: 1 1 100%
}
.widget-contact, .widget-links {
flex: 1 1 calc(50% - 15px)
}
.header-main_blog {
flex-direction: column;
align-items: flex-start;
gap: 20px
}
.blog-search-box_blog {
width: 100%
}
.header-text_blog {
text-align: center;
width: 100%
}
.blog-posts-grid_blog {
grid-template-columns: repeat(2,1fr)
}
.blog-sidebar_blog {
margin-top: 50px;
position: static
}
.contact-info-wrapper_contact {
margin-bottom: 30px
}
}
@media (max-width:991.98px) {
.hero-slider {
height: 100vh;
min-height: 600px
}
.slide-overlay {
background: linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.2) 100%)
}
.slide-content {
max-width: 100%;
padding: 0 20px
}
.slide-title {
font-size: 3rem
}
.scroll-down {
display: none
}
.about-section {
padding: 80px 0
}
.about-content {
flex-direction: column
}
.content-text, .content-visual {
max-width: 100%
}
.section-title {
font-size: 2.8rem
}
.visual-container {
height: 550px;
margin-top: 60px
}
.stats-cards {
width: 300px
}
.features-row {
flex-direction: column;
margin-top: 40px
}
.feature-card {
width: 100%;
margin-bottom: 20px
}
.feature-card:last-child {
margin-bottom: 0
}
.feature-card:hover {
transform: translateX(15px)
}
.about-section_About {
padding: 50px 0
}
.about-content_About {
padding-right: 0;
margin-bottom: 30px
}
.section-title_About {
font-size: 1.6rem
}
.cta-box_About {
flex-direction: column;
text-align: center;
padding: 30px
}
.stats-item_About {
min-width: 150px
}
}
@media (max-width:768px) {
.header-logo-title {
font-size: 16px
}
.header-logo-subtitle {
font-size: 11px
}
.header-mobile-contact .header-contact-item {
width: 100%
}
.search-container {
width: 100%;
max-width: 250px
}
.hero-slider {
height: 90vh;
min-height: 550px
}
.slide-content-wrapper {
display: flex;
align-items: flex-end;
padding-bottom: 120px
}
.slide-title {
font-size: 2.5rem;
margin-bottom: 20px
}
.slide-description {
font-size: 16px;
margin-bottom: 30px
}
.slider-controls {
padding: 15px 0
}
.slider-progress {
display: none
}
.controls-wrapper {
justify-content: center;
gap: 20px
}
.slide-counter {
display: none
}
.blog-section {
padding: 60px 0
}
.section-header {
margin-bottom: 40px
}
.section-title {
font-size: 2rem
}
.blog-meta {
gap: 12px
}
.meta-item {
font-size: 12px
}
.blog-title a {
font-size: 18px
}
.blog-content {
padding: 25px
}
.blog-image-wrapper {
height: 220px
}
.blog-card {
width: calc((100% - 20px)/2)
}
.footer-cta {
padding: 30px 0
}
.cta-title {
font-size: 1.3rem
}
.widget-contact, .widget-links {
flex: 1 1 calc(50% - 15px);
min-width: 200px
}
.bottom-content {
flex-direction: column;
text-align: center;
gap: 15px
}
.footer-menu {
justify-content: center
}
.floating-contact {
right: 20px
}
.blog-page-header_blog {
padding: 25px 0
}
.blog-page-title_blog {
font-size: 1.5rem
}
.blog-page-description_blog {
font-size: .9rem
}
.header-categories_blog {
justify-content: center
}
.featured-post-img_blog {
height: 300px
}
.featured-post-content_blog {
padding: 20px
}
.post-footer_blog {
flex-direction: column;
align-items: flex-start
}
.post-tags_blog {
margin-top: 10px
}
.contact-section_contact {
padding: 50px 0
}
.contact-form-wrapper_contact, .contact-info-wrapper_contact, .faq-section_contact, .map-wrapper_contact {
padding: 20px
}
.google-map_contact {
height: 350px
}
.contact-form-title_contact, .contact-info-title_contact, .faq-title_contact, .map-title_contact {
font-size: 1.3rem
}
.article-header h1.article-title {
font-size: 1.8rem
}
.author-box {
flex-direction: column;
text-align: center
}
.comment-reply {
margin-right: 20px
}
}
@media (max-width:767.98px) {
.about-section {
padding: 60px 0
}
.section-title {
font-size: 2.4rem
}
.visual-container {
height: 500px
}
.main-image {
height: 400px
}
.experience-badge {
padding: 20px;
top: -20px;
left: -20px
}
.experience-number {
font-size: 2.5rem
}
.stats-cards {
position: relative;
bottom: auto;
right: auto;
flex-direction: row;
width: 100%;
margin-top: 30px
}
.stat-card {
flex: 1
}
.action-buttons {
flex-direction: column;
gap: 15px
}
.action-btn {
width: 100%
}
.features-row {
margin-top: 30px
}
.feature-card {
padding: 20px
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 24px
}
.feature-title {
font-size: 18px;
margin-bottom: 5px
}
.feature-desc {
font-size: 13px
}
.about-section_About {
padding: 40px 0
}
.section-title_About {
font-size: 1.4rem
}
.about-main-image_About {
height: 300px
}
.testimonials-wrapper_About {
flex-direction: column
}
.stats-wrapper_About {
padding: 25px
}
.why-us-card_About {
padding: 20px
}
}
@media (max-width:576px) {
.header-logo-image {
max-height: 40px
}
.header-logo-title {
font-size: 14px
}
.header-logo-subtitle {
font-size: 10px
}
.header-contact-icon {
width: 40px;
height: 40px;
font-size: 16px
}
.contact-us-btn {
padding: 10px 16px;
font-size: 12px
}
.search-input {
font-size: 12px;
padding: 10px 50px 10px 15px
}
.hero-slider {
min-height: 500px
}
.slide-content-wrapper {
padding-bottom: 100px
}
.slide-badge {
margin-bottom: 15px
}
.badge-text {
font-size: 12px;
padding: 6px 15px
}
.slide-title {
font-size: 2rem;
margin-bottom: 15px
}
.slide-description {
font-size: 14px;
margin-bottom: 25px
}
.slide-btn {
padding: 12px 25px;
font-size: 14px
}
.slide-actions {
flex-direction: column;
align-items: flex-start;
gap: 15px
}
.arrow-btn {
width: 40px;
height: 40px;
font-size: 16px
}
.indicator {
width: 20px
}
.indicator--active {
width: 35px
}
.section-title {
font-size: 1.8rem
}
.blog-grid {
flex-direction: column;
gap: 30px
}
.blog-card {
width: 100%
}
.blog-meta {
flex-direction: column;
align-items: flex-start;
gap: 8px
}
.blog-footer {
flex-direction: column;
gap: 15px;
align-items: flex-start
}
.blog-stats {
align-self: flex-end
}
.view-all-btn {
padding: 14px 28px;
font-size: 15px
}
.blog-content {
padding: 20px
}
.blog-image-wrapper {
height: 200px
}
.widget-contact, .widget-links {
flex: 1 1 calc(50% - 10px);
min-width: 140px
}
.contact-item {
flex-direction: row;
text-align: start
}
.social-links {
justify-content: flex-start
}
.scroll-top-btn {
width: 40px;
height: 40px;
left: 20px;
bottom: 20px
}
.floating-btn {
width: 40px;
height: 40px
}
.floating-contact {
bottom: 80px;
right: 20px
}
.blog-page-header_blog {
padding: 20px 0
}
.category-pill_blog {
padding: 5px 10px;
font-size: 12px
}
.header-text_blog {
text-align: center
}
.blog-main-content_blog {
padding: 50px 0
}
.blog-posts-grid_blog {
grid-template-columns: repeat(2,1fr);
gap: 15px
}
.post-meta_blog {
flex-direction: column;
gap: 10px
}
.featured-post-img_blog {
height: 250px
}
.blog-featured-post_blog {
margin-bottom: 30px
}
.blog-post-card_blog {
border-radius: 8px
}
.post-thumbnail_blog {
height: 130px
}
.post-content_blog {
padding: 15px
}
.post-content_blog .post-title_blog {
font-size: .95rem;
margin-bottom: 8px
}
.post-content_blog .post-excerpt_blog {
font-size: 12px;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden
}
.read-more-link_blog {
font-size: 12px
}
.post-stats_blog {
gap: 8px
}
.post-stats_blog span {
font-size: 11px
}
.contact-section_contact {
padding: 40px 0
}
.social-icons_contact {
flex-wrap: wrap
}
.google-map_contact {
height: 300px
}
.submit-btn_contact {
width: 100%;
justify-content: center
}
.contact-icon_contact {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1rem
}
}
@media (max-width:575.98px) {
.section-title {
font-size: 2rem
}
.trust-statement {
flex-direction: column;
text-align: center;
padding: 20px
}
.trust-icon {
margin-bottom: 10px
}
.visual-container {
height: auto
}
.main-image {
height: 350px
}
.stats-cards {
flex-direction: column
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 20px
}
.feature-card {
gap: 15px
}
.about-section_About {
padding: 30px 0
}
.section-title_About {
font-size: 1.3rem
}
.about-main-image_About {
height: 250px
}
.about-experience_About {
bottom: 10px;
left: 10px;
padding: 10px
}
.experience-number_About {
font-size: 2rem
}
.feature-item_About {
width: 100%
}
.stats-wrapper_About {
padding: 20px;
gap: 25px
}
.stats-item_About {
width: 100%;
min-width: 100%
}
.brands-wrapper_About {
gap: 15px
}
.brand-item_About {
width: 100px;
padding: 10px
}
}
@media (max-width:400px) {
.post-content_blog .post-meta_blog {
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px
}
.post-content_blog .post-meta_blog > div {
font-size: 11px
}
.post-content_blog .post-excerpt_blog {
-webkit-line-clamp: 2
}
}
/* Home page empty content style*/
.empty-content-message {
background-color: #f8f9fa;
border-radius: 8px;
margin: 20px 0;
padding: 30px;
border: 1px dashed #dee2e6;
}
.empty-content-message i {
color: #adb5bd;
}
.empty-content-message h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #495057;
}
.empty-content-message p {
color: #6c757d;
}
.features-empty {
margin-top: 30px;
}
/* ===================================
Services Timeline Redesign
====================================== */
.service-timeline-section {
padding: 80px 0;
background-color: var(--light-gray);
}
.service-timeline-container {
position: relative;
max-width: 950px;
margin: 0 auto;
}
/* خط عمودی تایملاین */
.service-timeline-container::after {
content: '';
position: absolute;
width: 3px;
background-color: var(--border-color);
top: 0;
bottom: 0;
right: 40px; /* موقعیت در سمت راست */
margin-right: -1.5px;
z-index: 0;
}
.service-timeline-item-wrapper {
position: relative;
padding-right: 80px; /* ایجاد فضا برای نقطه و خط تایملاین */
margin-bottom: 40px;
}
/* دایره روی خط تایملاین */
.service-timeline-item-wrapper::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
right: 30px;
background-color: var(--primary-white);
border: 3px solid var(--primary-theme-color);
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
z-index: 1;
transition: all .3s ease;
}
.service-timeline-item-wrapper:hover::after {
background-color: var(--primary-theme-color);
}
/* کارت اصلی هر خدمت */
.service-timeline-card {
background-color: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all .3s ease;
display: flex;
overflow: hidden;
position: relative;
}
.service-timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-color: rgba(var(--highlighter-color), 0.5);
}
/* کانتینر تصویر - در سمت راست */
.service-timeline-image {
width: 250px;
flex-shrink: 0;
}
.service-timeline-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.service-timeline-card:hover .service-timeline-image img {
transform: scale(1.05);
}
/* کانتینر محتوا - در سمت چپ */
.service-timeline-content {
flex-grow: 1;
padding: 25px 30px;
text-align: right;
}
/* بج دستهبندی - بالای محتوا */
.service-timeline-category-badge {
background-color: var(--primary-theme-color);
color: var(--primary-white);
padding: 5px 15px;
font-size: 13px;
border-radius: 20px;
font-weight: 600;
display: inline-block;
margin-bottom: 15px;
text-decoration: none;
transition: background-color .3s;
}
.service-timeline-category-badge:hover {
background-color: var(--hover-red);
color: var(--primary-white);
}
.service-timeline-title {
font-size: 1.4rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
}
.service-timeline-title a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease;
}
.service-timeline-title a:hover {
color: var(--primary-theme-color);
}
.service-timeline-description {
color: var(--dark-gray);
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3; /* محدود کردن به ۳ خط */
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-timeline-link {
color: var(--primary-theme-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .3s ease;
}
.service-timeline-link i {
transition: transform .3s ease;
}
.service-timeline-link:hover {
color: var(--hover-red);
}
.service-timeline-link:hover i {
transform: translateX(-4px);
}
/* هدر دستهبندی در تایملاین */
.service-timeline-category-header {
position: relative;
padding-right: 80px;
margin-bottom: 30px;
}
.service-timeline-category-header h2 {
background: var(--light-gray);
border-right: 4px solid var(--primary-theme-color);
color: var(--primary-black);
padding: 12px 20px;
border-radius: 0 8px 8px 0;
font-size: 1.6rem;
font-weight: 700;
display: inline-block;
}
/* نقطه روی تایملاین برای هدر دستهبندی */
.service-timeline-category-header::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
right: 30px;
background-color: var(--primary-black);
border: 3px solid var(--primary-theme-color);
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
z-index: 1;
}
/* استایلهای واکنشگرا */
@media (max-width: 768px) {
.service-timeline-card {
flex-direction: column;
}
.service-timeline-image {
width: 100%;
height: 220px;
}
}
@media (max-width: 576px) {
.service-timeline-container::after {
right: 20px;
}
.service-timeline-item-wrapper,
.service-timeline-category-header {
padding-right: 45px;
}
.service-timeline-item-wrapper::after,
.service-timeline-category-header::after {
right: 10px;
width: 16px;
height: 16px;
}
.service-timeline-title {
font-size: 1.2rem;
}
.service-timeline-content {
padding: 20px;
}
}
/* ===================================
Product Zigzag Layout V4 (Creative)
====================================== */
.product-section-v4 {
padding: 80px 0;
background-color: var(--primary-white);
}
/* کانتینر اصلی کارتهای زیگزاگ */
.product-zigzag-container-v4 {
display: flex;
flex-direction: column;
gap: 25px;
}
.product-zigzag-card-v4 {
display: flex;
background-color: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all .3s ease;
align-items: center; /* باعث همترازی عمودی محتوا و تصویر میشود */
}
.product-zigzag-card-v4:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-color: rgba(var(--highlighter-color), 0.5);
}
/* کلاس reverse برای ایجاد حالت زیگزاگ */
.product-zigzag-card-v4.reverse {
flex-direction: row-reverse;
}
/* بخش تصویر */
.product-zigzag-image-v4 {
flex-shrink: 0;
width: 180px; /* عرض ثابت و جمعوجور برای تصویر */
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-zigzag-image-v4 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.product-zigzag-card-v4:hover .product-zigzag-image-v4 img {
transform: scale(1.1);
}
/* بخش محتوا */
.product-zigzag-body-v4 {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
gap: 20px;
}
.product-zigzag-content-v4 {
text-align: right;
}
.product-zigzag-category-v4 {
color: var(--dark-gray);
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.product-zigzag-title-v4 {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
}
.product-zigzag-title-v4 a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease;
}
.product-zigzag-title-v4 a:hover {
color: var(--primary-theme-color);
}
/* بخش دکمه */
.product-zigzag-link-v4 {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--primary-theme-color);
color: var(--primary-white);
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all .3s ease;
white-space: nowrap; /* جلوگیری از شکستن متن دکمه */
}
.product-zigzag-link-v4:hover {
background-color: var(--hover-red);
transform: scale(1.05);
}
/* استایل سایدبار دستهبندی */
.sidebar-category-list-v4 {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-category-list-v4 li a {
display: block;
padding: 12px 15px;
color: var(--dark-gray);
text-decoration: none;
font-weight: 500;
border-radius: 8px;
margin-bottom: 5px;
transition: all .3s ease;
border-right: 3px solid transparent;
}
.sidebar-category-list-v4 li a:hover {
background-color: rgba(var(--highlighter-color), .05);
color: var(--primary-theme-color);
transform: translateX(-5px);
}
.sidebar-category-list-v4 li a.active {
background-color: rgba(var(--highlighter-color), .1);
color: var(--primary-theme-color);
font-weight: 700;
border-right-color: var(--primary-theme-color);
}
/* استایل واکنشگرا */
@media (max-width: 991px) {
/* در تبلت، سایدبار به زیر محتوا منتقل میشود */
.product-section-v4 .col-lg-8 {
order: 1;
}
.product-section-v4 .col-lg-4 {
order: 2;
margin-top: 40px;
}
}
@media (max-width: 768px) {
/* در موبایل، چیدمان زیگزاگ به حالت عمودی ساده تغییر میکند */
.product-zigzag-card-v4,
.product-zigzag-card-v4.reverse {
flex-direction: column;
align-items: stretch;
}
.product-zigzag-image-v4 {
width: 100%;
height: 250px;
}
.product-zigzag-body-v4 {
flex-direction: column;
align-items: flex-start;
text-align: right;
}
.product-zigzag-action-v4 {
margin-top: 20px;
width: 100%;
}
.product-zigzag-link-v4 {
width: 100%;
justify-content: center;
}
}
/* ===================================
Portfolio Tabbed Gallery V4
====================================== */
.portfolio-section-v4 {
padding: 80px 0;
background-color: var(--light-gray);
}
/* استایل تبهای فیلتر */
.portfolio-filters-v4 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
}
.filter-btn-v4 {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 25px;
font-size: 16px;
font-weight: 600;
color: var(--primary-black);
background-color: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 8px;
text-decoration: none;
transition: all .3s ease;
}
.filter-btn-v4:hover {
background-color: var(--primary-theme-color);
color: var(--primary-white);
border-color: var(--primary-theme-color);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(var(--highlighter-color), 0.2);
}
.filter-btn-v4.active {
background-color: var(--primary-theme-color);
color: var(--primary-white);
border-color: var(--primary-theme-color);
box-shadow: 0 5px 15px rgba(var(--highlighter-color), 0.2);
}
/* استایل گرید نمونه کارها */
.portfolio-grid-v4 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}
.portfolio-card-v4 {
background-color: var(--primary-white);
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0,0,0,0.07);
transition: all .4s ease;
overflow: hidden;
}
.portfolio-card-v4:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.portfolio-card-img-container-v4 {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.portfolio-card-img-v4 {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.portfolio-card-v4:hover .portfolio-card-img-v4 {
transform: scale(1.08);
}
.portfolio-card-overlay-v4 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-black-rgb, 31, 41, 55), 0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--primary-white);
opacity: 0;
transform: scale(0.8);
transition: all .4s ease;
text-decoration: none;
}
.portfolio-card-v4:hover .portfolio-card-overlay-v4 {
opacity: 1;
transform: scale(1);
}
.portfolio-card-body-v4 {
padding: 20px 25px;
text-align: center;
border-top: 1px solid var(--border-color);
}
.portfolio-card-category-v4 {
color: var(--dark-gray);
font-size: 13px;
font-weight: 500;
margin-bottom: 5px;
}
.portfolio-card-title-v4 {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.portfolio-card-title-v4 a {
color: var(--primary-black);
text-decoration: none;
transition: color .3s ease;
}
.portfolio-card-title-v4 a:hover {
color: var(--primary-theme-color);
}