/* =========================================================
RELIABLE INTERNATIONAL QATAR
GLOBAL STYLES
========================================================= */
/* =========================================================
01. FONT
========================================================= */
@font-face {
font-family: "Manrope";
src: url("../fonts/Manrope-VariableFont_wght.ttf")
format("truetype");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* =========================================================
02. ROOT / DESIGN VARIABLES
========================================================= */
:root {
/* ---------- Brand ---------- */
--primary: #b50c09;
--primary-dark: #8f0806;
--primary-light: #d71915;
/* ---------- Text ---------- */
--heading: #111111;
--text: #555555;
--text-light: #777777;
--text-white: #ffffff;
/* ---------- Background ---------- */
--white: #ffffff;
--black: #000000;
--bg-light: #f7f7f5;
--bg-soft: #fafafa;
--bg-primary-light: #fff3f2;
/* ---------- Border ---------- */
--border: #e8e8e8;
--border-dark: #d8d8d8;
/* ---------- Font ---------- */
--font-primary: "Manrope", sans-serif;
/* ---------- Container ---------- */
--container-width: 1200px;
/* ---------- Radius ---------- */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-round: 50%;
/* ---------- Shadow ---------- */
--shadow-sm:
0 5px 20px rgba(0, 0, 0, 0.05);
--shadow-md:
0 15px 40px rgba(0, 0, 0, 0.08);
--shadow-lg:
0 25px 70px rgba(0, 0, 0, 0.12);
/* ---------- Transition ---------- */
--transition:
all 0.3s ease;
}
/* =========================================================
03. CSS RESET
========================================================= */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body,
button,
input,
textarea,
select {
font-family: var(--font-primary);
}
/* =========================================================
04. HTML ELEMENTS
========================================================= */
img {
display: block;
max-width: 100%;
height: auto;
}
svg {
display: block;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
button {
border: 0;
outline: 0;
cursor: pointer;
}
input,
textarea,
select {
outline: none;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin-top: 0;
margin-bottom: 20px;
}
p:last-child {
margin-bottom: 0;
}
/* =========================================================
05. HEADINGS
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
color: var(--heading);
font-family: var(--font-primary);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.035em;
}
h1 {
font-size: clamp(44px, 5.5vw, 76px);
}
h2 {
font-size: clamp(36px, 4vw, 56px);
}
h3 {
font-size: clamp(28px, 3vw, 38px);
}
h4 {
font-size: 24px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
/* =========================================================
06. CONTAINER
========================================================= */
.container-custom {
width: min(
calc(100% - 40px),
1800px
);
margin-left: auto;
margin-right: auto;
}
/* =========================================================
07. SECTIONS
========================================================= */
.section {
position: relative;
width: 100%;
padding-top: 110px;
padding-bottom: 110px;
}
.section-sm {
padding-top: 70px;
padding-bottom: 70px;
}
.section-lg {
padding-top: 140px;
padding-bottom: 140px;
}
/* =========================================================
08. SECTION LABEL
========================================================= */
.section-label {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 20px;
color: var(--primary);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.section-label::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
background: var(--primary);
border-radius: 50%;
}
/* =========================================================
09. COMMON TEXT
========================================================= */
.text-primary {
color: var(--primary) !important;
}
.text-dark {
color: var(--heading) !important;
}
.text-muted {
color: var(--text-muted) !important;
}
.bg-light {
background: var(--bg-light) !important;
}
.bg-primary {
background: var(--primary) !important;
}
/* =========================================================
10. BUTTON FOUNDATION
========================================================= */
.btn-custom {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 26px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
line-height: 1;
transition: var(--transition);
}
.btn-primary-custom {
color: var(--white);
background: var(--primary);
}
.btn-primary-custom:hover {
color: var(--white);
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(181, 12, 9, 0.20);
}
.btn-outline-custom {
color: var(--heading);
background: var(--white);
border: 1px solid var(--border);
}
.btn-outline-custom:hover {
color: var(--white);
background: var(--primary);
border-color: var(--primary);
transform: translateY(-2px);
}
/* =========================================================
11. IMAGE HELPERS
========================================================= */
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.overflow-hidden {
overflow: hidden;
}
/* =========================================================
12. BORDER RADIUS HELPERS
========================================================= */
.radius-sm {
border-radius: var(--radius-sm);
}
.radius-md {
border-radius: var(--radius-md);
}
.radius-lg {
border-radius: var(--radius-lg);
}
.radius-xl {
border-radius: var(--radius-xl);
}
/* =========================================================
13. ANIMATION FOUNDATION
========================================================= */
.hover-up {
transition: var(--transition);
}
.hover-up:hover {
transform: translateY(-5px);
}
/* =========================================================
14. SELECTION
========================================================= */
::selection {
color: var(--white);
background: var(--primary);
}
/* =========================================================
15. SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* =========================================================
16. RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
:root {
--container-width: 100%;
}
.section {
padding-top: 90px;
padding-bottom: 90px;
}
.section-lg {
padding-top: 110px;
padding-bottom: 110px;
}
}
@media (max-width: 991px) {
.section {
padding-top: 80px;
padding-bottom: 80px;
}
.section-lg {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media (max-width: 767px) {
.container-custom {
width: calc(100% - 54px);
}
.section {
padding-top: 65px;
padding-bottom: 65px;
}
.section-sm {
padding-top: 50px;
padding-bottom: 50px;
}
.section-lg {
padding-top: 80px;
padding-bottom: 80px;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 28px;
}
.btn-custom {
min-height: 48px;
padding-left: 22px;
padding-right: 22px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
.section-label {
font-size: 11px;
}
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: relative;
z-index: 1000;
width: 100%;
padding: 22px 0;
background: var(--white);
border-bottom: 1px solid rgba(17, 17, 17, 0.06);
transition:
background 0.3s ease,
box-shadow 0.3s ease,
padding 0.3s ease;
}
/* =========================================================
NAV
========================================================= */
.main-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
min-height: 58px;
}
/* =========================================================
LOGO
========================================================= */
.site-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.site-logo img {
display: block;
width: auto;
max-width: 250px;
max-height: auto;
object-fit: contain;
}
/* =========================================================
DESKTOP NAVIGATION
========================================================= */
.nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 34px;
margin-left: auto;
}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 42px;
color: #444444;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 0;
height: 2px;
background: var(--primary);
border-radius: 10px;
transition: width 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* =========================================================
RIGHT SIDE ACTION
========================================================= */
.nav-action {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
/* =========================================================
EMERGENCY CONTACT
========================================================= */
.header-emergency {
display: flex;
align-items: center;
gap: 10px;
}
.header-emergency-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--primary);
background: var(--bg-primary-light);
border-radius: 50%;
font-size: 20px;
}
.header-emergency-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.header-emergency-label {
color: #888888;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.header-emergency-content a {
color: var(--heading);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
}
.header-emergency-content a:hover {
color: var(--primary);
}
/* =========================================================
HEADER BUTTON
========================================================= */
.header-btn {
min-height: 48px;
padding: 0 21px;
font-size: 16px;
white-space: nowrap;
}
.header-btn i {
font-size: 16px;
transition: transform 0.3s ease;
}
.header-btn:hover i {
transform: translateX(3px);
}
/* =========================================================
MOBILE TOGGLE
========================================================= */
.mobile-menu-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
}
.mobile-menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--heading);
border-radius: 5px;
transition: all 0.3s ease;
}
/* =========================================================
MOBILE MENU
========================================================= */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 2000;
visibility: hidden;
opacity: 0;
background: rgba(0, 0, 0, 0.35);
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.mobile-menu-inner {
position: absolute;
top: 0;
right: 0;
width: min(88%, 400px);
height: 100%;
padding: 25px;
background: var(--white);
transform: translateX(100%);
transition: transform 0.35s ease;
box-shadow: -15px 0 50px rgba(0, 0, 0, 0.12);
}
.mobile-menu.active {
visibility: visible;
opacity: 1;
}
.mobile-menu.active .mobile-menu-inner {
transform: translateX(0);
}
/* =========================================================
MOBILE MENU HEADER
========================================================= */
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
border-bottom: 1px solid var(--border);
}
.mobile-menu-header .site-logo img {
max-width: 165px;
}
.mobile-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--heading);
background: var(--bg-light);
border-radius: 50%;
font-size: 17px;
transition: var(--transition);
}
.mobile-menu-close:hover {
color: var(--white);
background: var(--primary);
}
/* =========================================================
MOBILE NAV LINKS
========================================================= */
.mobile-nav-links {
display: flex;
flex-direction: column;
padding: 20px 0;
}
.mobile-nav-link {
display: flex;
align-items: center;
padding: 15px 0;
color: var(--heading);
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.mobile-nav-link:hover {
color: var(--primary);
padding-left: 5px;
}
/* =========================================================
MOBILE CTA
========================================================= */
.mobile-menu-action {
margin-top: 10px;
}
.mobile-menu-action .btn-custom {
width: 100%;
}
/* =========================================================
HEADER RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.nav-menu {
gap: 24px;
}
.header-emergency {
display: none;
}
}
@media (max-width: 991px) {
.site-header {
padding: 17px 0;
}
.nav-menu,
.nav-action {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.main-nav {
min-height: 52px;
}
}
@media (max-width: 575px) {
.site-logo img {
max-width: 160px;
max-height: 50px;
}
.mobile-menu-inner {
width: 92%;
padding: 20px;
}
}
/* =========================================================
HERO SECTION
========================================================= */
.hero-section {
position: relative;
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
padding-top: 20px;
padding-bottom: 5px;
}
/* =========================================================
HERO WRAPPER
========================================================= */
.hero-wrapper {
position: relative;
width: 100%;
}
/* =========================================================
HERO IMAGE
========================================================= */
.hero-image {
position: relative;
width: 100%;
height: min(690px, 68vh);
min-height: 800px;
overflow: hidden;
border-radius: var(--radius-xl);
background: #222;
}
.hero-image > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
HERO OVERLAY
========================================================= */
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.76) 0%,
rgba(0, 0, 0, 0.48) 35%,
rgba(0, 0, 0, 0.10) 70%,
rgba(0, 0, 0, 0.18) 100%
);
pointer-events: none;
}
/* =========================================================
HERO CONTENT
========================================================= */
.hero-content {
position: absolute;
z-index: 3;
top: 50%;
left: 7%;
width: min(620px, 52%);
transform: translateY(-50%);
}
.hero-label {
display: inline-flex;
align-items: center;
margin-bottom: 22px;
color: rgba(255, 255, 255, 0.90);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
}
.hero-label::before {
content: "";
width: 7px;
height: 7px;
margin-right: 10px;
background: var(--primary);
border-radius: 50%;
}
.hero-content h1 {
margin-bottom: 24px;
color: var(--white);
font-size: clamp(48px, 5vw, 76px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.055em;
}
.hero-content h1 span {
display: block;
color: var(--white);
}
.hero-content p {
max-width: 570px;
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
line-height: 1.75;
}
/* =========================================================
HERO ACTIONS
========================================================= */
.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.hero-actions .btn-custom {
min-height: 54px;
padding-left: 26px;
padding-right: 26px;
}
.hero-actions .btn-outline-custom {
color: var(--white);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(8px);
}
.hero-actions .btn-outline-custom:hover {
color: var(--heading);
background: var(--white);
border-color: var(--white);
}
/* =========================================================
EMERGENCY FLOATING CARD
========================================================= */
.hero-emergency-card {
position: absolute;
z-index: 5;
right: 4.5%;
bottom: 8%;
display: flex;
align-items: center;
gap: 15px;
width: min(350px, 34%);
padding: 18px 20px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 18px;
box-shadow:
0 20px 55px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(15px);
}
.hero-emergency-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
color: var(--white);
background: var(--primary);
border-radius: 14px;
font-size: 18px;
}
.hero-emergency-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero-card-label {
color: var(--primary);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.3;
}
.hero-emergency-content strong {
color: var(--heading);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.hero-emergency-content > span:last-child {
color: var(--text-light);
font-size: 15px;
line-height: 1.4;
}
/* =========================================================
AVAILABILITY BADGE
========================================================= */
.hero-availability {
position: absolute;
z-index: 5;
right: 4.5%;
top: 8%;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
color: var(--white);
background: rgba(15, 15, 15, 0.48);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
font-size: 15px;
font-weight: 600;
backdrop-filter: blur(10px);
}
.hero-availability-dot {
width: 8px;
height: 8px;
background: #48d35c;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(72, 211, 92, 0.13);
}
/* =========================================================
HERO RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.hero-image {
height: 650px;
}
.hero-content {
left: 6%;
width: 58%;
}
.hero-content h1 {
font-size: 62px;
}
.hero-emergency-card {
width: 320px;
}
}
@media (max-width: 991px) {
.hero-section {
padding-top: 18px;
padding-bottom: 55px;
}
.hero-image {
min-height: 650px;
height: 72vh;
border-radius: 26px;
}
.hero-content {
top: auto;
left: 30px;
right: 30px;
bottom: 45px;
width: auto;
transform: none;
}
.hero-content h1 {
font-size: 54px;
}
.hero-content p {
max-width: 600px;
}
.hero-emergency-card {
top: 25px;
right: 25px;
bottom: auto;
width: 300px;
}
.hero-availability {
top: 25px;
left: 25px;
right: auto;
}
}
@media (max-width: 767px) {
.hero-section {
padding-top: 12px;
padding-bottom: 0;
}
.hero-image {
min-height: 690px;
height: auto;
border-radius: 22px;
}
.hero-overlay {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.18) 0%,
rgba(0, 0, 0, 0.40) 35%,
rgba(0, 0, 0, 0.88) 100%
);
}
.hero-content {
left: 22px;
right: 22px;
bottom: 30px;
}
.hero-label {
margin-bottom: 15px;
font-size: 12px;
letter-spacing: 0.12em;
}
.hero-content h1 {
margin-bottom: 18px;
font-size: 43px;
letter-spacing: -0.045em;
}
.hero-content p {
margin-bottom: 24px;
font-size: 14px;
line-height: 1.65;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn-custom {
width: 100%;
}
.hero-emergency-card {
top: 20px;
right: 20px;
width: calc(100% - 40px);
padding: 14px 15px;
}
.hero-emergency-icon {
flex-basis: 42px;
width: 42px;
height: 42px;
}
.hero-availability {
top: 20px;
left: 20px;
display: none;
}
}
@media (max-width: 480px) {
.hero-image {
min-height: 650px;
}
.hero-content h1 {
font-size: 32px;
text-align: center;
}
.hero-emergency-card {
width: calc(100% - 40px);
}
}
/* =========================================================
FEATURE STRIP
========================================================= */
.feature-strip {
position: relative;
padding: 28px 0 34px;
background: var(--white);
}
.feature-strip-inner {
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-bottom: 1px solid var(--border);
padding-bottom: 32px;
}
/* =========================================================
FEATURE ITEM
========================================================= */
.feature-item {
display: flex;
align-items: center;
gap: 15px;
min-height: 70px;
padding: 0 30px;
}
.feature-item:first-child {
padding-left: 0;
}
.feature-item:last-child {
padding-right: 0;
}
/* =========================================================
FEATURE SEPARATORS
========================================================= */
.feature-item + .feature-item {
border-left: 1px solid var(--border);
}
/* =========================================================
FEATURE ICON
========================================================= */
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
color: var(--primary);
font-size: 45px;
}
/* =========================================================
FEATURE CONTENT
========================================================= */
.feature-content {
min-width: 0;
}
.feature-content h4 {
margin-bottom: 4px;
color: var(--heading);
font-size: 18px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.02em;
}
.feature-content p {
margin: 0;
color: var(--text-light);
font-size: 15px;
line-height: 1.5;
}
/* =========================================================
HOVER
========================================================= */
.feature-item {
transition: var(--transition);
}
.feature-item:hover .feature-icon {
transform: translateY(-2px);
color: var(--primary-dark);
}
.feature-icon {
transition: var(--transition);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.feature-item {
padding-left: 20px;
padding-right: 20px;
}
.feature-content h4 {
font-size: 14px;
}
}
@media (max-width: 991px) {
.feature-strip-inner {
grid-template-columns:
repeat(2, 1fr);
row-gap: 25px;
}
.feature-item {
min-height: 60px;
}
.feature-item:nth-child(3) {
border-left: 0;
}
}
@media (max-width: 575px) {
.feature-strip {
padding-top: 20px;
padding-bottom: 25px;
}
.feature-strip-inner {
display: flex;
flex-direction: column;
gap: 0;
padding-bottom: 0px;
}
.feature-item,
.feature-item:first-child,
.feature-item:last-child {
padding: 15px 0;
border-left: 0;
}
.feature-item + .feature-item {
border-top: 1px solid var(--border);
border-left: none;
}
}
/* =========================================================
ABOUT SECTION - EXACT IMAGE PROPORTION
========================================================= */
.about-section {
position: relative;
width: 100%;
padding: 0;
background: #ffffff;
}
.about-section .container-custom {
width: calc(100% - 40px);
max-width: 1280px;
margin: 0 auto 32px;
}
/* =========================================================
MAIN GRID
========================================================= */
.about-layout {
display: grid;
grid-template-columns:
536px
minmax(0, 1fr);
column-gap: 30px;
align-items: stretch;
width: 100%;
}
/* =========================================================
LEFT IMAGE AREA
========================================================= */
.about-image-wrap {
position: relative;
width: 536px;
height: 599px;
}
/* =========================================================
MASKED IMAGE
========================================================= */
.about-main-image {
position: relative;
width: 536px;
height: 599px;
overflow: hidden;
background: #eeeeee;
-webkit-mask:
url("data:image/svg+xml;utf8,\
")
center / 100% 100% no-repeat;
mask:
url("data:image/svg+xml;utf8,\
")
center / 100% 100% no-repeat;
}
/* =========================================================
IMAGE
========================================================= */
.about-main-image img {
position: absolute;
top: -8%;
left: 0;
width: 100%;
height: 116%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
will-change: transform;
}
/* =========================================================
24/7 CARD
========================================================= */
.about-stat-card {
position: absolute;
z-index: 10;
right: 24px;
bottom: 28px;
display: flex;
align-items: center;
gap: 13px;
width: 208px;
min-height: 75px;
padding: 20px;
background: #ffffff;
border-radius: 18px;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.12);
}
.about-stat-card strong {
color: #b50c09;
font-size: 42px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.045em;
}
.about-stat-card span {
color: #171717;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.about-right {
min-width: 0;
padding-left: 40px;
border-left: 1px solid #b50c09;
}
/* =========================================================
HEADING
========================================================= */
.about-heading-wrap {
max-width: 700px;
}
.about-heading-wrap .section-label {
margin-bottom: 20px;
}
.about-heading-wrap h2 {
margin: 0 0 22px;
color: #161616;
font-size: 52px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
.about-heading-wrap p {
max-width: 700px;
margin: 0 0 9px;
color: #696969;
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
BOTTOM CARDS
========================================================= */
.about-card-row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
210px;
width: 100%;
margin-top: 35px;
}
/* =========================================================
BENEFITS
========================================================= */
.about-benefits-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 225px;
padding: 27px 30px;
background: #ffffff;
border: 1px solid #e4e4e4;
border-right: 0;
border-radius: 18px 0 0 18px;
}
.about-benefits-card ul {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 20px;
}
.about-benefits-card li {
display: flex;
align-items: center;
gap: 10px;
color: #171717;
font-size: 14px;
font-weight: 500;
}
.about-benefits-card li i {
color: #b50c09;
font-size: 9px;
}
/* =========================================================
BUTTON
========================================================= */
.btn-dark-custom {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
gap: 10px;
height: 48px;
padding: 0 23px;
color: #ffffff;
background: #17191e;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
transition: all .3s ease;
}
.btn-dark-custom:hover {
color: #ffffff;
background: #b50c09;
transform: translateY(-2px);
}
/* =========================================================
SIDE IMAGE
========================================================= */
.about-side-card {
position: relative;
min-height: 225px;
overflow: hidden;
border-radius: 0 18px 18px 0;
background: #fff3f2;
}
.about-side-card img {
position: absolute;
top: -8%;
left: 0;
width: 100%;
height: 116%;
max-width: none;
object-fit: cover;
will-change: transform;
}
.about-side-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 35%,
rgba(0, 0, 0, .50) 100%
);
}
/* =========================================================
CALL PILL
========================================================= */
.about-call {
position: absolute;
z-index: 5;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
min-height: 31px;
padding: 4px 9px 4px 5px;
color: #161616;
background: rgba(255,255,255,.96);
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
.about-call span:first-child {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
flex: 0 0 25px;
color: #ffffff;
background: #b50c09;
border-radius: 50%;
font-size: 8px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199px) {
.about-section .container-custom {
max-width: calc(100% - 40px);
}
.about-layout {
grid-template-columns:
450px
minmax(0, 1fr);
}
.about-image-wrap,
.about-main-image {
width: 450px;
height: 503px;
}
.about-heading-wrap h2 {
font-size: 44px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991px) {
.about-section {
padding: 80px 0;
}
.about-layout {
grid-template-columns: 1fr;
row-gap: 20px;
}
.about-call {
font-size: 17px;
}
.about-image-wrap {
width: 100%;
height: auto;
}
.about-main-image {
width: 100%;
height: auto;
aspect-ratio: 536 / 599;
}
.about-right {
padding-left: 25px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 767px) {
.about-section {
padding: 0;
}
.about-section .container-custom {
width: calc(100% - 54px);
}
.about-heading-wrap h2 {
font-size: 36px;
}
.about-card-row {
grid-template-columns: 1fr;
gap: 12px;
}
.about-benefits-card {
border: 1px solid #e4e4e4;
border-radius: 18px;
}
.about-side-card {
min-height: 260px;
border-radius: 18px;
}
}
/* =========================================================
SERVICES SECTION
RELIABLE INTERNATIONAL QATAR
========================================================= */
.services-section {
position: relative;
width: calc(100% - 40px);
margin: 20px;
padding: 80px 0 20px;
background: #fff4f3;
border-radius: 33px;
overflow: hidden;
}
/* =========================================================
SERVICES INNER CONTAINER
========================================================= */
.services-container {
width: calc(100% - 40px);
max-width: 1280px;
margin: 0 auto 20px;
background: transparent;
}
/* =========================================================
SERVICES HEADER
========================================================= */
.services-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
padding-bottom: 38px;
border-bottom: 1px solid #ead7d5;
}
/* =========================================================
SERVICES LABEL
========================================================= */
.services-heading .section-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: #b50c09;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.services-heading .section-label::before {
content: "";
width: 6px;
height: 6px;
background: #b50c09;
border-radius: 50%;
}
/* =========================================================
SERVICES MAIN HEADING
========================================================= */
.services-heading h2 {
margin: 0;
max-width: 560px;
color: #171717;
font-size: 52px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
/* =========================================================
SEE ALL SERVICES BUTTON
========================================================= */
.services-view-all {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
padding: 0 24px;
color: #ffffff;
background: #b50c09;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition:
color .3s ease,
background .3s ease,
transform .3s ease;
}
.services-view-all:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
}
.services-view-all i {
font-size: 11px;
transition:
transform .3s ease;
}
.services-view-all:hover i {
transform: translateX(4px);
}
/* =========================================================
SERVICE ITEM
========================================================= */
.service-item {
width: 100%;
border-bottom:
1px solid
#ead7d5;
}
/* =========================================================
SERVICE TITLE ROW
========================================================= */
.service-title-row {
display: grid;
grid-template-columns:
52px
minmax(0, 1fr)
44px;
align-items: center;
column-gap: 12px;
min-height: 94px;
cursor: pointer;
}
/* =========================================================
SERVICE NUMBER
========================================================= */
.service-number {
color: #b50c09;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
}
/* =========================================================
SERVICE TITLE
========================================================= */
.service-title-row h3 {
margin: 0;
color: #171717;
font-size: 26px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.035em;
}
/* =========================================================
SERVICE TOGGLE
========================================================= */
.service-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-left: auto;
padding: 0;
color: #171717;
background: #ffffff;
border:
1px solid
#e0dada;
border-radius: 50%;
font-size: 10px;
transition:
color .3s ease,
background .3s ease,
border-color .3s ease,
transform .3s ease;
}
.service-toggle:hover,
.service-item.active .service-toggle {
color: #ffffff;
background: #b50c09;
border-color: #b50c09;
}
/* =========================================================
SERVICE CONTENT
========================================================= */
.service-content {
display: grid;
grid-template-columns:
minmax(0, 0.98fr)
minmax(0, 1.45fr);
gap: 10px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height .55s ease,
opacity .35s ease;
}
.service-item.active .service-content {
max-height: 650px;
padding-bottom: 30px;
opacity: 1;
}
/* =========================================================
RED INFORMATION CARD
========================================================= */
.service-info-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 315px;
padding: 30px;
color: #ffffff;
background: #b50c09;
border-radius:
18px;
}
/* =========================================================
SERVICE DESCRIPTION
========================================================= */
.service-info-card p {
margin: 0;
color: rgba(255, 255, 255, 0.95);
font-size: 16px;
font-weight: 400;
line-height: 1.85;
}
/* =========================================================
SERVICE TAG AREA
========================================================= */
.service-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
padding-top: 20px;
border-top:
1px solid
rgba(255, 255, 255, 0.23);
}
/* =========================================================
SERVICE TAG
========================================================= */
.service-tags span {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 28px;
padding:
4px
12px
4px
5px;
color: #ffffff;
background: #17191e;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* =========================================================
CIRCULAR CHECK ICON
========================================================= */
.service-tags span i {
display: flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
flex: 0 0 19px;
color: #ffffff;
background: #b50c09;
border-radius: 50%;
font-size: 7px;
}
/* =========================================================
VIEW DETAILS
========================================================= */
.service-details {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
align-self: flex-start;
margin-top: 22px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration:
underline;
text-underline-offset: 4px;
}
.service-details:hover {
color: #ffffff;
}
.service-details i {
font-size: 10px;
transition:
transform .3s ease;
}
.service-details:hover i {
transform: translateX(4px);
}
/* =========================================================
SERVICE IMAGE
========================================================= */
.service-image {
position: relative;
min-height: 440px;
overflow: hidden;
background: #eeeeee;
border-radius:18px;
}
.service-image img {
position: absolute;
top: -8%;
left: 0;
width: 100%;
height: 116%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
will-change: transform;
}
/* =========================================================
IMAGE OVERLAY
========================================================= */
.service-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0)
);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.services-section {
margin: 20px;
width:
calc(100% - 40px);
border-radius: 33px;
}
.services-container {
width: calc(100% - 40px);
}
}
/* =========================================================
DESKTOP
========================================================= */
@media (max-width: 1199px) {
.services-section {
padding:
90px 0
100px;
}
.services-container {
width:
calc(100% - 70px);
}
.services-heading h2 {
font-size: 46px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.services-section {
width:
calc(100% - 30px);
margin:
15px;
padding:
75px 0
85px;
border-radius: 28px;
}
.services-container {
width:
calc(100% - 40px);
}
.services-header {
align-items: flex-start;
flex-direction: column;
gap: 28px;
}
.services-heading h2 {
font-size: 43px;
}
.services-view-all {
align-self: flex-start;
}
.service-title-row {
grid-template-columns:
45px
minmax(0, 1fr)
44px;
min-height: 86px;
}
.service-title-row h3 {
font-size: 23px;
}
.service-content {
grid-template-columns: 1fr;
}
.service-info-card {
min-height: 280px;
border-radius: 18px;
}
.service-image {
min-height: 300px;
border-radius: 18px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.services-section {
width:
calc(100% - 24px);
margin:
12px;
padding:
60px 0
70px;
border-radius: 24px;
}
.services-container {
width:
calc(100% - 54px);
}
.services-heading .section-label {
margin-bottom: 16px;
}
.services-heading h2 {
font-size: 35px;
}
.services-header {
gap: 25px;
padding-bottom: 30px;
}
.service-title-row {
grid-template-columns:
34px
minmax(0, 1fr)
40px;
min-height: 78px;
column-gap: 8px;
}
.service-number {
font-size: 12px;
}
.service-title-row h3 {
font-size: 19px;
}
.service-toggle {
width: 37px;
height: 37px;
font-size: 12px;
}
.service-item.active .service-content {
max-height: 850px;
padding-bottom: 22px;
}
.service-info-card {
min-height: auto;
padding: 25px;
border-radius: 18px;
}
.service-info-card p {
font-size: 14px;
line-height: 1.75;
}
.service-tags {
gap: 7px;
margin-top: 20px;
padding-top: 18px;
}
.service-tags span {
font-size: 12px;
}
.service-tags span i {
width: 18px;
height: 18px;
flex-basis: 18px;
}
.service-image {
min-height: 240px;
border-radius: 18px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.services-section {
width:
calc(100% - 20px);
margin:
10px;
padding:5px 0 0px;
border-radius: 22px;
}
.services-container {
width:
calc(100% - 28px);
}
.services-heading h2 {
font-size: 31px;
}
.service-title-row {
grid-template-columns:
30px
minmax(0, 1fr)
36px;
min-height: 72px;
}
.service-title-row h3 {
font-size: 18px;
}
.service-toggle {
width: 34px;
height: 34px;
}
}
/* =========================================================
WHY CHOOSE US SECTION
========================================================= */
.why-choose-section {
position: relative;
width: 100%;
padding: 50px 0 50px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.why-choose-container {
width: calc(100% - 40px);
max-width: 1280px;
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.why-choose-header {
position: relative;
z-index: 10;
text-align: center;
margin-bottom: 20px;
}
/* =========================================================
LABEL
========================================================= */
.why-choose-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
color: #b50c09;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.why-choose-label i {
font-size: 11px;
}
/* =========================================================
HEADING
========================================================= */
.why-choose-header h2 {
max-width: 760px;
margin: 0 auto;
color: #171717;
font-size: 58px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.052em;
}
/* =========================================================
MAIN 3-COLUMN LAYOUT
========================================================= */
.why-choose-layout {
position: relative;
display: grid;
grid-template-columns:
minmax(340px, 1fr)
440px
minmax(340px, 1fr);
align-items: center;
width: 100%;
min-height: 620px;
}
/* =========================================================
FEATURE COLUMNS
========================================================= */
.why-features {
position: relative;
z-index: 20;
display: flex;
flex-direction: column;
justify-content: center;
gap: 88px;
height: 100%;
}
/* =========================================================
FEATURE ITEM
========================================================= */
.why-feature {
position: relative;
display: flex;
align-items: center;
min-height: 125px;
z-index: 30;
}
/* =========================================================
LEFT FEATURE ITEM
========================================================= */
.why-feature-left {
justify-content: flex-end;
padding-right: 25px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.why-features-left .why-feature-content {
position: relative;
z-index: 35;
width: 290px;
text-align: right;
}
/* =========================================================
RIGHT FEATURE ITEM
========================================================= */
.why-feature-right {
justify-content: flex-start;
padding-left: 120px;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.why-features-right .why-feature-content {
position: relative;
z-index: 35;
width: 290px;
text-align: left;
}
/* =========================================================
FEATURE TITLE
========================================================= */
.why-feature-content h3 {
margin: 0 0 10px;
color: #171717;
font-size: 24px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.025em;
}
/* =========================================================
FEATURE DESCRIPTION
========================================================= */
.why-feature-content p {
max-width: 280px;
margin: 0;
color: #727272;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
/* =========================================================
POINT
========================================================= */
.why-feature-point {
position: absolute;
z-index: 60;
top: 50%;
width: 17px;
height: 17px;
background: #ffffff;
border: 2px solid #cfeaca;
border-radius: 50%;
transform: translateY(-50%);
}
/* =========================================================
RED INNER DOT
========================================================= */
.why-feature-point::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: #b50c09;
border-radius: 50%;
transform:
translate(-50%, -50%);
}
/* =========================================================
LEFT POINT POSITION
========================================================= */
.why-feature-left .why-feature-point {
right: -8px;
}
/* =========================================================
RIGHT POINT POSITION
========================================================= */
.why-feature-right .why-feature-point {
left: -8px;
}
/* =========================================================
LINE BETWEEN LEFT TEXT AND POINT
========================================================= */
.why-features-left
.why-feature-content::after {
content: "";
position: absolute;
top: 50%;
right: -184px;
width: 176px;
height: 1px;
background: #e7e7e7;
transform: translateY(-50%);
pointer-events: none;
}
/* =========================================================
LINE BETWEEN RIGHT TEXT AND POINT
========================================================= */
.why-features-right
.why-feature-content::before {
content: "";
position: absolute;
top: 50%;
left: -184px;
width: 176px;
height: 1px;
background: #e7e7e7;
transform: translateY(-50%);
pointer-events: none;
}
/* =========================================================
LINE BETWEEN LEFT POINT AND CENTER
========================================================= */
.why-feature-left .why-feature-point::before {
content: "";
position: absolute;
top: 50%;
left: 13px;
width: 118px;
height: 1px;
background: #e7e7e7;
transform: translateY(-50%);
pointer-events: none;
}
/* =========================================================
LINE BETWEEN RIGHT POINT AND CENTER
========================================================= */
.why-feature-right .why-feature-point::before {
content: "";
position: absolute;
top: 50%;
right: 13px;
width: 118px;
height: 1px;
background: #e7e7e7;
transform: translateY(-50%);
pointer-events: none;
}
/* =========================================================
CENTER VISUAL
========================================================= */
.why-center {
position: relative;
z-index: 10;
width: 440px;
height: 620px;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* =========================================================
CENTER ARCH
========================================================= */
.why-center-arch {
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
width: 335px;
height: 575px;
transform:
translateX(-50%);
background:
linear-gradient(
180deg,
#ffd9d5 0%,
#fff1ef 45%,
#ffffff 100%
);
border-radius:
170px
170px
0
0;
}
/* =========================================================
ARCH INNER AREA
========================================================= */
.why-center-arch::before {
content: "";
position: absolute;
z-index: 1;
top: 22px;
left: 22px;
width: calc(100% - 44px);
height: calc(100% - 22px);
background:
linear-gradient(
180deg,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.98) 65%,
#ffffff 100%
);
border-radius:
150px
150px
0
0;
}
/* =========================================================
CENTER CAR / TOP VIEW IMAGE
========================================================= */
.why-center-car {
position: absolute;
z-index: 15;
left: 53%;
bottom: 12px;
width: 554px;
height: auto;
max-width: none;
display: block;
transform:
translateX(-50%);
object-fit: contain;
object-position: center bottom;
filter:
drop-shadow(
0 18px 25px
rgba(0,0,0,0.12)
);
}
/* =========================================================
IMPORTANT: KEEP CONNECTORS ABOVE ARCH
========================================================= */
.why-feature-point,
.why-feature-point::before,
.why-feature-point::after {
pointer-events: none;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
.why-choose-section {
padding:50px 0 50px;
}
.why-choose-header {
margin-bottom: 20px;
}
.why-choose-header h2 {
font-size: 62px;
}
.why-choose-layout {
grid-template-columns:
minmax(390px, 1fr)
500px
minmax(390px, 1fr);
min-height: 680px;
}
.why-center {
width: 500px;
height: 660px;
}
.why-center-arch {
width: 365px;
height: 620px;
border-radius:
185px
185px
0
0;
}
.why-center-arch::before {
border-radius:
165px
165px
0
0;
}
.why-center-car {
width: 554px;
}
.why-features {
gap: 95px;
}
.why-feature-left {
padding-right: 25px;
}
.why-feature-right {
padding-left: 25px;
}
.why-features-left
.why-feature-content::after {
right: -205px;
width: 197px;
}
.why-features-right
.why-feature-content::before {
left: -205px;
width: 197px;
}
.why-feature-left .why-feature-point::before {
width: 145px;
}
.why-feature-right .why-feature-point::before {
width: 145px;
}
}
/* =========================================================
1200 - 1499
========================================================= */
@media (max-width: 1499px) {
.why-choose-layout {
grid-template-columns:
minmax(280px, 1fr)
390px
minmax(280px, 1fr);
}
.why-center {
width: 390px;
height: 570px;
}
.why-center-arch {
width: 300px;
height: 535px;
border-radius:
155px
155px
0
0;
}
.why-center-arch::before {
border-radius:
135px
135px
0
0;
}
.why-center-car {
width: 400px;
}
.why-feature-left {
padding-right: 85px;
}
.why-feature-right {
padding-left: 85px;
}
.why-features-left
.why-feature-content::after {
right: -124px;
width: 116px;
}
.why-features-right
.why-feature-content::before {
left: -124px;
width: 116px;
}
.why-feature-left .why-feature-point::before {
width: 80px;
}
.why-feature-right .why-feature-point::before {
width: 80px;
}
.why-feature-content {
width: 240px !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.why-choose-section {
padding:
90px 0
100px;
}
.why-choose-header {
margin-bottom: 55px;
}
.why-choose-header h2 {
font-size: 46px;
}
.why-choose-layout {
grid-template-columns:
minmax(190px, 1fr)
320px
minmax(190px, 1fr);
min-height: 500px;
}
.why-center {
width: 320px;
height: 500px;
}
.why-center-arch {
width: 250px;
height: 455px;
border-radius:
130px
130px
0
0;
}
.why-center-arch::before {
border-radius:
110px
110px
0
0;
}
.why-center-car {
width: 345px;
}
.why-features {
gap: 55px;
}
.why-feature {
min-height: 110px;
}
.why-feature-left {
padding-right: 50px;
}
.why-feature-right {
padding-left: 50px;
}
.why-features-left
.why-feature-content {
width: 175px !important;
}
.why-features-right
.why-feature-content {
width: 175px !important;
}
.why-features-left
.why-feature-content::after {
right: -76px;
width: 70px;
}
.why-features-right
.why-feature-content::before {
left: -76px;
width: 70px;
}
.why-feature-left .why-feature-point::before {
width: 45px;
}
.why-feature-right .why-feature-point::before {
width: 45px;
}
.why-feature-content h3 {
font-size: 15px;
}
.why-feature-content p {
font-size: 11px;
line-height: 1.65;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.why-choose-section {
padding: 10px 0 44px;
}
.why-choose-container {
width:
calc(100% - 54px);
}
.why-choose-header {
margin-bottom: 35px;
}
.why-choose-label {
font-size: 10px;
}
.why-choose-header h2 {
font-size: 36px;
line-height: 1.10;
}
.why-choose-layout {
display: flex;
flex-direction: column;
gap: 0px;
min-height: auto;
}
/* CENTER */
.why-center {
order: 1;
width: 100%;
height: 430px;
}
.why-center-arch {
width: 250px;
height: 420px;
border-radius:
125px
125px
0
0;
}
.why-center-arch::before {
border-radius:
105px
105px
0
0;
}
.why-center-car {
width: 320px;
bottom: 0;
}
/* LEFT */
.why-features-left {
order: 2;
}
/* RIGHT */
.why-features-right {
order: 3;
}
.why-features {
width: 100%;
gap: 0;
}
.why-feature {
min-height: auto;
padding:
22px 0;
border-bottom:
1px solid
#eeeeee;
}
.why-feature-left,
.why-feature-right {
justify-content: flex-start;
padding: 13px 0;
}
.why-features-left
.why-feature-content,
.why-features-right
.why-feature-content {
width: 100% !important;
text-align: left;
}
.why-feature-content h3 {
font-size: 17px;
}
.why-feature-content p {
max-width: 100%;
font-size: 14px;
}
.why-feature-left::after,
.why-feature-right::before,
.why-features-left
.why-feature-content::after,
.why-features-right
.why-feature-content::before,
.why-feature-point,
.why-feature-point::before,
.why-feature-point::after {
display: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.why-choose-header h2 {
font-size: 31px;
}
.why-center {
height: 390px;
}
.why-center-arch {
width: 225px;
height: 380px;
border-radius:
112px
112px
0
0;
}
.why-center-arch::before {
border-radius:
94px
94px
0
0;
}
.why-center-car {
width: 290px;
}
}
/* =========================================================
HOW IT WORKS SECTION
RELIABLE INTERNATIONAL QATAR
========================================================= */
.how-it-works-section {
position: relative;
width: calc(100% - 40px);
margin: 20px;
min-height: 720px;
padding: 100px 0 60px;
background: #101820;
border-radius: 33px;
overflow: hidden;
}
/* =========================================================
BACKGROUND
========================================================= */
.how-it-works-bg {
position: absolute;
z-index: 0;
inset: 0;
overflow: hidden;
}
.how-it-works-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.how-it-works-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(5, 15, 26, 0.78) 0%,
rgba(5, 15, 26, 0.70) 42%,
rgba(5, 15, 26, 0.86) 100%
);
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.how-it-works-container {
position: relative;
z-index: 5;
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.how-it-works-header {
text-align: center;
margin-bottom: 48px;
}
/* =========================================================
LABEL
========================================================= */
.how-it-works-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 18px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.how-it-works-label i {
color: #b50c09;
font-size: 11px;
}
/* =========================================================
MAIN HEADING
========================================================= */
.how-it-works-header h2 {
margin: 0;
color: #ffffff;
font-size: 52px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
/* =========================================================
PROCESS GRID
========================================================= */
.how-it-works-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
width: 100%;
}
/* =========================================================
PROCESS CARD
========================================================= */
.process-card {
position: relative;
min-width: 0;
height: 300px;
}
/* =========================================================
MASKED INNER BLOCK
========================================================= */
.process-card .inner-block {
position: relative;
width: 100%;
height: 100%;
padding: 30px 30px 21px;
background: #ffffff;
border-radius: 20px;
-webkit-mask-image:
url("../images/about/working1-mask1.png");
mask-image:
url("../images/about/working1-mask1.png");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
}
/* =========================================================
TOP BOX
========================================================= */
.process-card .top-box {
display: flex;
align-items: flex-start;
justify-content: flex-end;
min-height: 48px;
}
/* =========================================================
NUMBER CIRCLE
========================================================= */
.working-count {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #666666;
background: #f2f2f2;
border-radius: 50%;
font-size: 16px;
font-weight: 500;
line-height: 1;
}
/* =========================================================
NUMBER DOT
========================================================= */
.working-count::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 6px;
height: 6px;
background: #b50c09;
border-radius: 50%;
transform: translateY(-50%);
}
/* =========================================================
CONTENT
========================================================= */
.process-card .content {
margin-top: 24px;
}
/* =========================================================
WORKING TITLE
========================================================= */
.working-title {
position: relative;
padding-left: 15px;
color: #171717;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.02em;
}
/* =========================================================
RED VERTICAL TITLE LINE
========================================================= */
.working-title::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: #b50c09;
}
/* =========================================================
CARD DIVIDER
========================================================= */
.working-details::before {
content: "";
display: block;
width: 100%;
height: 1px;
margin-top: 28px;
margin-bottom: 28px;
background: #dedede;
}
/* =========================================================
DETAILS
========================================================= */
.working-details {
margin-top: 18px;
color: #666666;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
/* =========================================================
BOTTOM STATISTICS
========================================================= */
.how-it-works-stats {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 45px;
width: 100%;
margin-top: 62px;
}
/* =========================================================
STAT
========================================================= */
.how-stat {
position: relative;
min-width: 0;
}
/* Vertical divider */
.how-stat + .how-stat::before {
content: "";
position: absolute;
top: 2px;
left: -23px;
width: 1px;
height: 42px;
background:
rgba(
255,
255,
255,
0.20
);
}
/* =========================================================
STAT LABEL
========================================================= */
.how-stat-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
}
.how-stat-label > span {
width: 6px;
height: 6px;
flex: 0 0 6px;
background: #b50c09;
border-radius: 50%;
}
.how-stat-label small {
color:
rgba(
255,
255,
255,
0.82
);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
/* =========================================================
STAT NUMBER / VALUE
========================================================= */
.how-stat strong {
display: block;
margin: 0;
color: #ffffff;
font-size: 52px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.05em;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.how-it-works-section {
min-height: 760px;
padding:
105px 0
65px;
}
.how-it-works-container {
width: 1200px;
}
.how-it-works-header {
margin-bottom: 52px;
}
.how-it-works-header h2 {
font-size: 58px;
}
.how-it-works-grid {
gap: 22px;
}
.process-card {
height: 315px;
}
.process-card .inner-block {
padding:
30px
30px
22px;
}
.working-title {
font-size: 20px;
}
.working-details {
font-size: 16px;
}
.how-it-works-stats {
margin-top: 66px;
}
.how-stat strong {
font-size: 56px;
}
}
/* =========================================================
1200 - 1399
========================================================= */
@media (max-width: 1399px) {
.how-it-works-container {
width:
calc(100% - 60px);
}
.how-it-works-grid {
gap: 16px;
}
.process-card {
height: 300px;
}
.process-card .inner-block {
padding:
28px
25px
21px;
mask-position: top;
}
.working-title {
font-size: 15px;
}
.working-details {
font-size: 11px;
}
.how-it-works-stats {
gap: 35px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.how-it-works-section {
min-height: auto;
padding:
85px 0
60px;
}
.how-it-works-container {
width:
calc(100% - 40px);
}
.how-it-works-header {
margin-bottom: 42px;
}
.how-it-works-header h2 {
font-size: 45px;
}
.how-it-works-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 18px;
}
.process-card {
height: 285px;
}
.process-card .inner-block {
padding:
26px
24px
20px;
}
.working-title {
font-size: 16px;
}
.working-details {
font-size: 12px;
}
.how-it-works-stats {
grid-template-columns:
repeat(2, minmax(0, 1fr));
row-gap: 32px;
margin-top: 48px;
}
.how-stat + .how-stat::before {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.how-it-works-section {
width:
calc(100% - 24px);
margin:
12px;
padding:
65px 0
50px;
border-radius: 24px;
}
.how-it-works-container {
width:
calc(100% - 54px);
}
.how-it-works-header {
margin-bottom: 35px;
}
.how-it-works-label {
font-size: 10px;
}
.how-it-works-header h2 {
font-size: 36px;
}
.how-it-works-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.process-card {
height: 245px;
}
.process-card .inner-block {
padding:
25px
22px
20px;
}
.process-card .top-box {
min-height: 42px;
}
.working-count {
width: 44px;
height: 44px;
font-size: 13px;
}
.working-count::before {
left: -8px;
width: 5px;
height: 5px;
}
.process-card .content {
margin-top: 20px;
}
.working-title {
padding-left: 13px;
font-size: 17px;
}
.working-details {
font-size: 12px;
line-height: 1.75;
}
.process-card .content::after {
margin-top: 24px;
}
.how-it-works-stats {
grid-template-columns: 1fr;
gap: 22px;
margin-top: 40px;
}
.how-stat + .how-stat::before {
display: none;
}
.how-stat strong {
font-size: 44px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.how-it-works-section {
width:
calc(100% - 20px);
margin: 10px;
padding:30px 0 40px;
border-radius: 22px;
}
.how-it-works-container {
width:
calc(100% - 28px);
}
.how-it-works-header h2 {
font-size: 31px;
}
.process-card {
height: 230px;
}
.process-card .inner-block {
padding:
22px
20px
18px;
}
.working-title {
font-size: 20px;
}
.working-details {
font-size: 14px;
}
.how-stat strong {
font-size: 40px;
}
.working-details::before {
margin-top: 15px;
margin-bottom: 15px;
}
}
/* =========================================================
TESTIMONIAL SECTION
========================================================= */
.testimonials-section {
position: relative;
width: 100%;
padding: 50px 0 50px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.testimonials-container {
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 0.92fr)
minmax(0, 1.08fr);
gap: 75px;
align-items: center;
}
/* =========================================================
LEFT LABEL
========================================================= */
.testimonial-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: #b50c09;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.testimonial-label i {
font-size: 11px;
}
/* =========================================================
LEFT HEADING
========================================================= */
.testimonial-intro h2 {
margin: 0;
color: #171717;
font-size: 50px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
/* =========================================================
RATING
========================================================= */
.testimonial-rating {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
}
.rating-stars {
display: flex;
align-items: center;
gap: 3px;
color: #b50c09;
font-size: 16px;
}
.rating-text {
color: #555555;
font-size: 16px;
line-height: 1.4;
}
/* =========================================================
LEFT IMAGE
========================================================= */
.testimonial-image {
width: 100%;
max-width: 500px;
overflow: visible;
}
.testimonial-image img {
display: block;
width: 100%;
height: 270px;
object-fit: contain;
object-position: left center;
}
/* =========================================================
ALL TESTIMONIALS
========================================================= */
.testimonial-all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 24px;
color: #ffffff;
background: #b50c09;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
line-height: 1;
transition: all .3s ease;
}
.testimonial-all-btn:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
}
.testimonial-all-btn i {
transition: transform .3s ease;
}
.testimonial-all-btn:hover i {
transform: translateX(4px);
}
/* =========================================================
RIGHT SLIDER
========================================================= */
.testimonial-slider {
position: relative;
min-height: 480px;
padding-left: 28px;
}
/* =========================================================
BLACK BACK CARD
========================================================= */
.testimonial-back-card {
position: absolute;
z-index: 1;
top: 80px;
left: 0;
width: 28px;
height: 310px;
background: #17191e;
border-radius:
20px
0
0
20px;
}
/* =========================================================
MAIN CARD
========================================================= */
.testimonial-card {
position: relative;
z-index: 2;
width: 100%;
height: 480px;
padding:
45px
45px
35px;
color: #ffffff;
background: #b50c09;
border-radius:
18px
0
18px
18px;
overflow: hidden;
}
/* =========================================================
ANGULAR TOP RIGHT
========================================================= */
.testimonial-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: #ffffff;
clip-path:
polygon(
100% 0,
100% 100%,
0 0
);
}
/* =========================================================
DECORATIVE QUOTE ICON
========================================================= */
.testimonial-quote {
position: absolute;
z-index: 1;
top: 28px;
left: 40px;
width: 105px;
height: 105px;
color: rgba(255,255,255,.20);
font-family: Georgia, serif;
font-size: 150px;
font-weight: 700;
line-height: .78;
pointer-events: none;
}
/* =========================================================
SLIDER WINDOW
========================================================= */
.testimonial-slider-window {
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius:
18px
0
18px
18px;
}
/* =========================================================
TRACK
========================================================= */
.testimonial-track {
display: flex;
width: 100%;
height: 100%;
transition:
transform .6s cubic-bezier(
.77,
0,
.175,
1
);
}
/* =========================================================
INDIVIDUAL SLIDE
========================================================= */
.testimonial-slide {
position: relative;
flex:
0 0 100%;
width: 100%;
height: 100%;
padding:
115px
45px
35px;
}
/* =========================================================
SLIDE TEXT
========================================================= */
.testimonial-slide-content {
max-width: 520px;
}
.testimonial-slide-content p {
margin: 0;
color: rgba(255,255,255,.97);
font-size: 17px;
font-weight: 400;
line-height: 1.82;
letter-spacing: -0.01em;
}
/* =========================================================
SLIDE BOTTOM
========================================================= */
.testimonial-slide-bottom {
position: absolute;
left: 45px;
right: 45px;
bottom: 35px;
padding-top: 22px;
border-top:
1px solid
rgba(
255,
255,
255,
.22
);
}
/* =========================================================
AUTHOR
========================================================= */
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
overflow: hidden;
border-radius: 50%;
background: #ffffff;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-author-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.testimonial-author-info strong {
color: #ffffff;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.testimonial-author-info span {
color:
rgba(
255,
255,
255,
.72
);
font-size: 11px;
line-height: 1.3;
}
/* =========================================================
NAVIGATION
========================================================= */
.testimonial-nav {
position: absolute;
z-index: 20;
right: 40px;
bottom: 35px;
display: flex;
align-items: center;
gap: 8px;
}
.testimonial-nav button {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
color: #171717;
background: #ffffff;
border: none;
border-radius: 50%;
font-size: 10px;
cursor: pointer;
transition: all .3s ease;
}
.testimonial-nav button:hover {
color: #ffffff;
background: #17191e;
transform: translateY(-2px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 1400px) {
.testimonials-section {
padding:50px 0 50px;
}
.testimonials-container {
width: 1200px;
gap: 85px;
}
.testimonial-intro h2 {
font-size: 54px;
}
.testimonial-image img {
height: 290px;
}
.testimonial-card {
height: 500px;
}
.testimonial-slide {
padding:
120px
50px
35px;
}
.testimonial-slide-content p {
font-size: 18px;
}
}
@media (max-width: 991px) {
.testimonials-section {
padding:
90px 0
100px;
}
.testimonials-container {
grid-template-columns: 1fr;
gap: 55px;
}
.testimonial-intro h2 {
font-size: 45px;
}
.testimonial-image {
max-width: 100%;
}
.testimonial-slider {
min-height: 470px;
}
}
@media (max-width: 767px) {
.testimonials-section {
padding:20px 0 20px;
}
.testimonials-container {
width:
calc(100% - 54px);
gap: 40px;
}
.testimonial-intro h2 {
font-size: 36px;
}
.testimonial-rating {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
.testimonial-image img {
height: 240px;
}
.testimonial-slider {
min-height: 520px;
padding-left: 15px;
}
.testimonial-back-card {
width: 18px;
top: 90px;
height: 310px;
}
.testimonial-card {
height: 520px;
padding: 0;
border-radius:
16px
0
16px
16px;
}
.testimonial-slide {
padding:
105px
25px
30px;
}
.testimonial-slide-content p {
font-size: 16px;
line-height: 1.75;
}
.testimonial-slide-bottom {
left: 25px;
right: 25px;
bottom: 25px;
}
.testimonial-nav {
right: 25px;
bottom: 25px;
}
.testimonial-quote {
top: 25px;
left: 22px;
font-size: 110px;
}
}
@media (max-width: 480px) {
.testimonial-intro h2 {
font-size: 31px;
}
.testimonial-slider {
padding-left: 10px;
}
.testimonial-card {
height: 540px;
}
}
/* =========================================================
FAQ SECTION
========================================================= */
.faq-section {
position: relative;
width: calc(100% - 40px);
margin: 20px;
padding: 80px 0 20px;
background: #fff4f3;
border-radius: 33px;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.faq-container {
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
display: grid;
grid-template-columns:
0.82fr
1.18fr;
column-gap: 45px;
align-items: stretch;
}
/* =========================================================
LEFT SIDE
========================================================= */
.faq-intro {
position: relative;
padding-right: 45px;
}
/* =========================================================
RED DIVIDER
========================================================= */
.faq-intro::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #b50c09;
}
/* =========================================================
LABEL
========================================================= */
.faq-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: #b50c09;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.faq-label i {
font-size: 11px;
}
/* =========================================================
HEADING
========================================================= */
.faq-intro h2 {
margin: 0;
color: #171717;
font-size: 50px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
/* =========================================================
FAQ IMAGE
========================================================= */
.faq-image {
width: 100%;
margin-top: 38px;
overflow: hidden;
}
.faq-image img {
display: block;
width: 100%;
max-width: 430px;
height: 260px;
object-fit: contain;
object-position: left bottom;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.faq-content {
display: flex;
flex-direction: column;
gap: 14px;
}
/* =========================================================
FAQ ITEM
========================================================= */
.faq-item {
width: 100%;
background: var(--white);
border-radius: 16px;
overflow: hidden;
transition:
background .3s ease;
}
.faq-item.active {
background: var(--white);
}
/* =========================================================
QUESTION BUTTON
========================================================= */
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 62px;
padding: 0 24px;
color: #171717;
background: transparent;
border: none;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.faq-question span {
padding-right: 20px;
}
/* =========================================================
QUESTION ICON
========================================================= */
.faq-question i {
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
flex: 0 0 27px;
color: #171717;
background: #ffffff;
border-radius: 50%;
font-size: 9px;
transition:
color .3s ease,
background .3s ease,
transform .3s ease;
}
.faq-item.active
.faq-question i {
color: #ffffff;
background: #b50c09;
}
/* =========================================================
ANSWER
========================================================= */
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition:
grid-template-rows .45s ease;
}
.faq-answer p {
overflow: hidden;
margin: 0;
padding:
0
24px;
color: #6c6c6c;
font-size: 16px;
line-height: 1.8;
opacity: 0;
transition:
opacity .25s ease,
padding .35s ease;
}
.faq-item.active
.faq-answer {
grid-template-rows: 1fr;
}
.faq-item.active
.faq-answer p {
padding:
0
24px
23px;
opacity: 1;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.faq-cta {
width: min(
calc(100% - 40px),
1200px
);
min-height: 138px;
margin: 45px auto 0;
padding:
25px
38px;
display: grid;
grid-template-columns:
minmax(0, 1fr)
260px
auto;
align-items: center;
gap: 25px;
border:
1px solid
#dedede;
border-radius: 17px;
background: #ffffff;
}
/* =========================================================
CTA TEXT
========================================================= */
.faq-cta-content h3 {
margin: 0 0 8px;
color: #171717;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.faq-cta-content p {
max-width: 560px;
margin: 0;
color: #6c6c6c;
font-size: 16px;
line-height: 1.75;
}
/* =========================================================
CTA IMAGE
========================================================= */
.faq-cta-image {
height: 95px;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.faq-cta-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
/* =========================================================
CTA BUTTON
========================================================= */
.faq-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
color: #ffffff;
background: #b50c09;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: all .3s ease;
}
.faq-cta-button:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
}
.faq-cta-button i {
font-size: 10px;
transition: transform .3s ease;
}
.faq-cta-button:hover i {
transform: translateX(4px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.faq-section {
padding:80px 0 20px;
}
.faq-container,
.faq-cta {
width: 1200px;
}
.faq-intro h2 {
font-size: 54px;
}
.faq-question {
font-size: 20px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.faq-section {
padding:
90px 0
100px;
}
.faq-container {
grid-template-columns: 1fr;
row-gap: 50px;
}
.faq-intro {
padding-right: 0;
}
.faq-intro::after {
display: none;
}
.faq-intro h2 {
font-size: 45px;
}
.faq-image img {
max-width: 450px;
}
.faq-cta {
grid-template-columns:
1fr
220px
auto;
width:
calc(100% - 40px);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.faq-section {
padding:
70px 0
80px;
}
.faq-container {
width:
calc(100% - 54px);
}
.faq-intro h2 {
font-size: 36px;
}
.faq-content {
gap: 10px;
}
.faq-question {
min-height: 60px;
padding:
0
18px;
font-size: 14px;
}
.faq-answer p {
padding:
0
18px;
font-size: 14px;
}
.faq-item.active
.faq-answer p {
padding:
0
18px
20px;
}
.faq-cta {
width:
calc(100% - 54px);
grid-template-columns: 1fr;
gap: 20px;
padding:
25px;
text-align: left;
}
.faq-cta-image {
height: 100px;
justify-content: flex-start;
}
.faq-cta-button {
justify-self: flex-start;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.faq-intro h2 {
font-size: 31px;
}
.faq-item {
padding: 12px;
}
.faq-question {
font-size: 16px;
}
.faq-cta {
border-radius: 17px;
}
}
/* =========================================================
CONTACT SECTION
========================================================= */
.contact-section {
position: relative;
width: 100%;
padding: 50px 0 50px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.contact-container {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
align-items: stretch;
gap: 45px;
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
}
/* =========================================================
LEFT SIDE
========================================================= */
.contact-left {
position: relative;
padding-right: 0;
}
/* =========================================================
CONTACT LABEL
========================================================= */
.contact-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: #b50c09;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.contact-label i {
font-size: 11px;
}
/* =========================================================
MAIN HEADING
========================================================= */
.contact-left h2 {
margin: 0;
color: #171717;
font-size: 50px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.045em;
}
/* =========================================================
MAP
========================================================= */
.contact-map {
position: relative;
width: 100%;
height: 380px;
margin-top: 38px;
overflow: hidden;
border-radius: 0;
}
.contact-map-inner {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #eeeeee;
}
.contact-map-inner iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* =========================================================
FLOATING MAP CARDS
========================================================= */
.contact-map-card {
position: absolute;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
min-width: 245px;
padding:
10px
20px
10px
10px;
color: #171717;
background: #ffffff;
border-radius: 50px;
box-shadow:
0 10px 30px
rgba(0, 0, 0, 0.10);
transition:
transform 0.3s ease;
}
.contact-map-card:hover {
color: #171717;
transform: translateY(-3px);
}
/* =========================================================
MAP CARD POSITIONS
========================================================= */
.contact-phone-card {
left: 15px;
bottom: 90px;
}
.contact-email-card {
left: 15px;
bottom: 15px;
}
/* =========================================================
MAP ICON
========================================================= */
.contact-map-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
color: #ffffff;
background: #b50c09;
border-radius: 50%;
font-size: 20px;
}
/* =========================================================
MAP CARD TEXT
========================================================= */
.contact-map-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.contact-map-text small {
color: #777777;
font-size: 14px;
line-height: 1.2;
}
.contact-map-text strong {
color: #171717;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.contact-right {
position: relative;
display: grid;
grid-template-columns:
1px
minmax(0, 1fr);
gap: 28px;
}
/* =========================================================
VERTICAL RED DIVIDER
========================================================= */
.contact-divider {
width: 1px;
height: 100%;
background: #b50c09;
}
/* =========================================================
FORM WRAPPER
========================================================= */
.contact-form-wrapper {
width: 100%;
overflow: hidden;
border-radius: 18px;
background: #fff2f1;
}
/* =========================================================
FORM HEADER
========================================================= */
.contact-form-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 120px;
padding:
28px
30px;
background: #191d25;
}
/* =========================================================
FORM HEADER TITLE
========================================================= */
.contact-form-heading {
display: flex;
align-items: flex-start;
gap: 14px;
}
.contact-form-line {
width: 2px;
height: 46px;
margin-top: 2px;
flex: 0 0 2px;
background: #b50c09;
}
.contact-form-heading h3 {
margin: 0;
color: #ffffff;
font-size: 24px;
font-weight: 500;
line-height: 1.35;
letter-spacing: -0.025em;
}
/* =========================================================
PAPER PLANE
========================================================= */
.contact-send-icon {
display: flex;
align-items: center;
justify-content: center;
color: #b50c09;
font-size: 46px;
transform: rotate(-8deg);
}
/* =========================================================
FORM BODY
========================================================= */
.contact-form-body {
padding:
28px
30px
30px;
}
/* =========================================================
FORM ROW
========================================================= */
.contact-form-row {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
/* =========================================================
FORM FIELD
========================================================= */
.contact-field {
width: 100%;
}
.contact-field input,
.contact-field textarea {
display: block;
width: 100%;
color: #171717;
background: #ffffff;
border:
1px solid
transparent;
border-radius: 8px;
outline: none;
font-family: inherit;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.contact-field input {
height: 48px;
padding:
0
16px;
font-size: 16px;
}
.contact-field textarea {
min-height: 110px;
padding:
15px
16px;
resize: vertical;
font-size: 16px;
line-height: 1.6;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: #767676;
opacity: 1;
}
/* =========================================================
INPUT FOCUS
========================================================= */
.contact-field input:focus,
.contact-field textarea:focus {
border-color: #b50c09;
box-shadow:
0 0 0 3px
rgba(181, 12, 9, 0.08);
}
/* =========================================================
MESSAGE
========================================================= */
.contact-message {
margin-bottom: 20px;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding:
0
23px;
color: #ffffff;
background: #b50c09;
border: 0;
border-radius: 50px;
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.contact-submit:hover {
background: #8f0806;
transform: translateY(-2px);
}
.contact-submit i {
font-size: 10px;
transition:
transform 0.3s ease;
}
.contact-submit:hover i {
transform: translateX(4px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.contact-section {
padding:20px 0 20px;
}
.contact-container {
width: 1200px;
gap: 55px;
}
.contact-left h2 {
font-size: 54px;
}
.contact-map {
height: 400px;
}
.contact-form-heading h3 {
font-size: 26px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.contact-section {
padding:
90px 0
100px;
}
.contact-container {
grid-template-columns: 1fr;
gap: 50px;
}
.contact-left {
padding-right: 0;
}
.contact-left h2 {
font-size: 45px;
}
.contact-map {
height: 350px;
}
.contact-right {
grid-template-columns:
1px
minmax(0, 1fr);
gap: 25px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.contact-section {
padding: 20px 0 20px;
}
.contact-container {
width:
calc(100% - 54px);
}
.contact-left h2 {
font-size: 36px;
}
.contact-map {
height: 320px;
}
.contact-right {
display: block;
}
.contact-divider {
display: none;
}
.contact-form-header {
min-height: 105px;
padding:
24px;
}
.contact-form-heading h3 {
font-size: 21px;
}
.contact-send-icon {
font-size: 38px;
}
.contact-form-body {
padding:
22px
20px
24px;
}
.contact-form-row {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 12px;
}
.contact-map-card {
min-width: 210px;
padding-right: 15px;
}
.contact-map-text strong {
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.contact-left h2 {
font-size: 31px;
}
.contact-map {
height: 290px;
}
.contact-map-card {
left: 10px;
}
.contact-phone-card {
bottom: 80px;
}
.contact-email-card {
bottom: 10px;
}
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position: relative;
width: calc(100% - 40px);
margin: 20px;
background: #191d25;
border-radius: 33px;
overflow: hidden;
color: #ffffff;
}
/* =========================================================
SUBTLE BACKGROUND
========================================================= */
.site-footer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 0% 100%,
rgba(181, 12, 9, 0.10),
transparent 32%
);
}
/* =========================================================
CONTAINER
========================================================= */
.footer-container {
position: relative;
z-index: 2;
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
}
/* =========================================================
TOP
========================================================= */
.footer-top {
display: grid;
grid-template-columns:
1.15fr
.8fr
1fr;
align-items: center;
gap: 50px;
padding: 80px 0 55px;
}
/* =========================================================
BRAND
========================================================= */
.footer-brand {
max-width: 360px;
}
.footer-logo {
display: inline-flex;
align-items: center;
margin-bottom: 22px;
}
.footer-logo img {
display: block;
width: 165px;
height: auto;
max-height: 45px;
object-fit: contain;
}
.footer-brand p {
margin: 0;
color:
rgba(
255,
255,
255,
.52
);
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
CENTER VISUAL
========================================================= */
.footer-visual {
display: flex;
align-items: flex-end;
justify-content: center;
height: 150px;
}
.footer-visual img {
display: block;
width: 240px;
height: 150px;
object-fit: contain;
object-position: center bottom;
}
/* =========================================================
NAVIGATION
========================================================= */
.footer-navigation {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 28px;
}
.footer-nav {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 22px;
}
.footer-nav a {
color:
rgba(
255,
255,
255,
.90
);
font-size: 16px;
font-weight: 500;
transition:
color .3s ease;
}
.footer-nav a:hover {
color: #b50c09;
}
/* =========================================================
SOCIAL
========================================================= */
.footer-social {
display: flex;
align-items: center;
gap: 9px;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: #ffffff;
background: #30343c;
border-radius: 50%;
font-size: 11px;
transition:
color .3s ease,
background .3s ease,
transform .3s ease;
}
.footer-social a:hover {
color: #ffffff;
background: #b50c09;
transform: translateY(-2px);
}
/* =========================================================
CONTACT CARDS
========================================================= */
.footer-contact-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
padding-bottom: 70px;
}
.footer-contact-card {
display: flex;
align-items: center;
gap: 15px;
min-height: 86px;
padding:
15px 20px;
color: #ffffff;
background: #b50c09;
border-radius: 7px;
transition:
transform .3s ease,
background .3s ease;
}
.footer-contact-card:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-3px);
}
/* =========================================================
CONTACT ICON
========================================================= */
.footer-contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
color: #ffffff;
background: #191d25;
border-radius: 50%;
font-size: 13px;
}
/* =========================================================
CONTACT TEXT
========================================================= */
.footer-contact-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.footer-contact-content small {
color:
rgba(
255,
255,
255,
.72
);
font-size: 14px;
line-height: 1.2;
}
.footer-contact-content strong {
color: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
overflow-wrap: anywhere;
}
/* =========================================================
BOTTOM
========================================================= */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
min-height: 70px;
border-top:
1px solid
rgba(
255,
255,
255,
.10
);
}
/* =========================================================
COPYRIGHT
========================================================= */
.footer-copyright {
color:
rgba(
255,
255,
255,
.46
);
font-size: 14px;
}
/* =========================================================
LEGAL
========================================================= */
.footer-legal {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 30px;
}
.footer-legal a {
color:
rgba(
255,
255,
255,
.46
);
font-size: 14px;
transition:
color .3s ease;
}
.footer-legal a:hover {
color: #b50c09;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.site-footer {
margin: 20px;
width:
calc(100% - 40px);
}
.footer-container {
width: 1200px;
}
.footer-top {
padding-top: 85px;
gap: 60px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.site-footer {
width:
calc(100% - 30px);
margin: 15px;
border-radius: 28px;
}
.footer-container {
width:
calc(100% - 40px);
}
.footer-top {
grid-template-columns:
1fr 1fr;
row-gap: 40px;
padding:
65px 0
45px;
}
.footer-brand {
max-width: 100%;
}
.footer-visual {
order: 2;
}
.footer-navigation {
grid-column: 1 / -1;
align-items: flex-start;
}
.footer-nav {
justify-content: flex-start;
}
.footer-contact-grid {
grid-template-columns:
1fr;
padding-bottom: 45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.site-footer {
width:
calc(100% - 24px);
margin: 12px;
border-radius: 24px;
}
.footer-container {
width:
calc(100% - 54px);
}
.footer-top {
grid-template-columns: 1fr;
padding:
55px 0
35px;
gap: 30px;
}
.footer-brand p {
font-size: 16px;
}
.footer-visual {
height: 130px;
justify-content: flex-start;
}
.footer-visual img {
width: 210px;
height: 130px;
}
.footer-navigation {
grid-column: auto;
align-items: flex-start;
}
.footer-nav {
justify-content: flex-start;
gap: 14px 20px;
}
.footer-nav a {
font-size: 14px;
}
.footer-contact-grid {
grid-template-columns: 1fr;
gap: 10px;
padding-bottom: 35px;
}
.footer-contact-card {
min-height: 78px;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: 15px;
padding:
20px 0;
}
.footer-legal {
justify-content: flex-start;
gap: 15px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.site-footer {
width:
calc(100% - 20px);
margin: 10px;
border-radius: 22px;
}
.footer-logo img {
width: 145px;
}
.footer-nav {
gap: 12px 16px;
}
.footer-contact-content strong {
font-size: 12px;
}
}
/* =========================================================
BACK TO TOP
========================================================= */
.back-to-top {
position: fixed;
right: 30px;
bottom: 95px;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
color: #ffffff;
background: #b50c09;
border: 0;
border-radius: 50%;
box-shadow:
0 8px 25px
rgba(181, 12, 9, 0.25);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform:
translateY(20px)
scale(.8);
transition:
opacity .35s ease,
visibility .35s ease,
transform .35s cubic-bezier(.22, 1, .36, 1),
background .25s ease,
box-shadow .25s ease;
}
/* Visible */
.back-to-top.show {
opacity: 1;
visibility: visible;
transform:
translateY(0)
scale(1);
}
/* Hover */
.back-to-top:hover {
color: #ffffff;
background: #8f0806;
box-shadow:
0 12px 30px
rgba(181, 12, 9, 0.35);
transform:
translateY(-4px)
scale(1.05);
}
/* Arrow */
.back-to-top i {
font-size: 13px;
transition:
transform .35s ease;
}
.back-to-top:hover i {
transform:
translateY(-4px);
}
/* Pulse Ring */
.back-to-top::before {
content: "";
position: absolute;
inset: -5px;
border:
1px solid
rgba(181, 12, 9, .35);
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.back-to-top.show::before {
animation:
backTopPulse 2.4s ease-out infinite;
}
@keyframes backTopPulse {
0% {
opacity: .55;
transform: scale(.85);
}
70% {
opacity: 0;
transform: scale(1.35);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
/* =========================================================
WHATSAPP WRAPPER
========================================================= */
.whatsapp-chat-wrapper {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 9999;
}
/* =========================================================
WHATSAPP FLOAT BUTTON
========================================================= */
.whatsapp-float {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
padding: 0;
color: #ffffff;
background: #25d366;
border: 0;
border-radius: 50%;
box-shadow:
0 10px 30px
rgba(37, 211, 102, .35);
cursor: pointer;
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.whatsapp-float i {
font-size: 27px;
}
.whatsapp-float:hover {
color: #ffffff;
background: #20bd5c;
transform:
translateY(-4px)
scale(1.05);
box-shadow:
0 14px 35px
rgba(37, 211, 102, .45);
}
/* WhatsApp pulse */
.whatsapp-float::before {
content: "";
position: absolute;
inset: -5px;
border:
2px solid
rgba(37, 211, 102, .35);
border-radius: 50%;
pointer-events: none;
animation:
whatsappPulse 2s infinite;
}
@keyframes whatsappPulse {
0% {
opacity: .8;
transform: scale(.9);
}
70% {
opacity: 0;
transform: scale(1.35);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
/* =========================================================
WHATSAPP CHAT BOX
========================================================= */
.whatsapp-chat-box {
position: absolute;
right: 0;
bottom: 72px;
width: 360px;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 20px 60px
rgba(0, 0, 0, .18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(15px)
scale(.96);
transform-origin:
bottom right;
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s cubic-bezier(.22, 1, .36, 1);
}
/* Open */
.whatsapp-chat-box.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0)
scale(1);
}
/* =========================================================
WHATSAPP HEADER
========================================================= */
.whatsapp-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
padding:
12px 15px;
color: #ffffff;
background: #25d366;
}
.whatsapp-chat-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.whatsapp-chat-header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
color: #25d366;
background: #ffffff;
border-radius: 50%;
}
.whatsapp-chat-header-icon i {
font-size: 20px;
}
.whatsapp-chat-title > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.whatsapp-chat-title strong {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}
.whatsapp-chat-title small {
font-size: 10px;
opacity: .9;
}
/* =========================================================
WHATSAPP CLOSE
========================================================= */
.whatsapp-chat-close {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
color: #ffffff;
background:
rgba(255, 255, 255, .16);
border: 0;
border-radius: 50%;
cursor: pointer;
transition:
background .25s ease,
transform .25s ease;
}
.whatsapp-chat-close:hover {
background:
rgba(255, 255, 255, .28);
transform:
rotate(90deg);
}
/* =========================================================
WHATSAPP BODY
========================================================= */
.whatsapp-chat-body {
display: flex;
flex-direction: column;
min-height: 220px;
max-height: 300px;
padding: 18px;
overflow-y: auto;
background: #efeae2;
background-image:
radial-gradient(
rgba(255,255,255,.25) 1px,
transparent 1px
);
background-size: 18px 18px;
}
/* =========================================================
BOT MESSAGE
========================================================= */
.whatsapp-message {
max-width: 85%;
padding:
10px 12px;
border-radius: 10px;
font-size: 12px;
line-height: 1.6;
}
.whatsapp-message-bot {
color: #171717;
background: #ffffff;
border-top-left-radius: 3px;
box-shadow:
0 2px 4px
rgba(0,0,0,.05);
}
/* =========================================================
WHATSAPP FOOTER
========================================================= */
.whatsapp-chat-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: #ffffff;
border-top:
1px solid
#eeeeee;
}
/* =========================================================
MESSAGE INPUT
========================================================= */
.whatsapp-message-input {
flex: 1;
min-width: 0;
height: 42px;
padding:
0 14px;
color: #171717;
background: #f5f5f5;
border: 0;
border-radius: 22px;
outline: none;
font-family: inherit;
font-size: 12px;
}
.whatsapp-message-input:focus {
box-shadow:
inset 0 0 0 1px
rgba(37, 211, 102, .35);
}
.whatsapp-message-input::placeholder {
color: #888888;
}
/* =========================================================
SEND BUTTON
========================================================= */
.whatsapp-send {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
padding: 0;
color: #ffffff;
background: #25d366;
border: 0;
border-radius: 50%;
cursor: pointer;
transition:
background .25s ease,
transform .25s ease;
}
.whatsapp-send:hover {
background: #20bd5c;
transform: scale(1.05);
}
.whatsapp-send i {
font-size: 13px;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
/* Back to top above WhatsApp */
.back-to-top {
right: 15px;
bottom: 78px;
width: 44px;
height: 44px;
}
/* WhatsApp stays at bottom */
.whatsapp-chat-wrapper {
right: 15px;
bottom: 15px;
}
.whatsapp-float {
width: 52px;
height: 52px;
}
.whatsapp-float i {
font-size: 24px;
}
.whatsapp-chat-box {
right: 0;
bottom: 64px;
width:
min(
340px,
calc(100vw - 30px)
);
}
}
/* =========================================================
DIRECT CALL BUTTON
========================================================= */
.direct-call-button {
position: fixed;
left: 25px;
bottom: 25px;
z-index: 9998;
display: flex;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 7px 20px 7px 7px;
color: #ffffff;
background: #b50c09;
border-radius: 50px;
box-shadow:
0 10px 30px
rgba(181, 12, 9, .28);
text-decoration: none;
transition:
transform .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.direct-call-button:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-4px);
box-shadow:
0 14px 35px
rgba(181, 12, 9, .38);
}
/* =========================================================
ICON
========================================================= */
.direct-call-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
color: #b50c09;
background: #ffffff;
border-radius: 50%;
}
.direct-call-icon i {
font-size: 15px;
}
/* =========================================================
TEXT
========================================================= */
.direct-call-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.direct-call-text small {
color: rgba(255,255,255,.72);
font-size: 9px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .08em;
}
.direct-call-text strong {
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.direct-call-button {
left: 15px;
bottom: 15px;
min-height: 52px;
padding:
6px 16px 6px 6px;
}
.direct-call-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.direct-call-text small {
font-size: 8px;
}
.direct-call-text strong {
font-size: 12px;
}
}
/* =========================================================
MOBILE KEYBOARD STATE
========================================================= */
@media (max-width: 767px) {
.whatsapp-chat-box.keyboard-open {
position: fixed;
left: 10px;
right: 10px;
bottom: 10px;
width: auto;
max-width: none;
max-height: 45vh;
}
.whatsapp-chat-box.keyboard-open
.whatsapp-chat-body {
min-height: 90px;
max-height: 120px;
}
}
/* =========================================================
WHATSAPP MOBILE KEYBOARD STATE
========================================================= */
@media (max-width: 767px) {
.whatsapp-chat-box.keyboard-open {
/*
* Only changes while the keyboard is active.
*/
max-height: 45vh;
}
.whatsapp-chat-box.keyboard-open
.whatsapp-chat-body {
min-height: 90px;
max-height: 120px;
}
}
/* =========================================================
PAGE BREADCRUMB
========================================================= */
.page-breadcrumb {
position: relative;
width: calc(100% - 325px);
height: 355px;
margin: 20px 160px;
border-radius: 28px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
BACKGROUND
========================================================= */
.page-breadcrumb-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.page-breadcrumb-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
/* =========================================================
DARK OVERLAY
========================================================= */
.page-breadcrumb-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(5, 20, 15, .82),
rgba(5, 20, 15, .58),
rgba(5, 20, 15, .72)
);
}
/* =========================================================
CONTENT
========================================================= */
.page-breadcrumb-content {
position: relative;
z-index: 2;
text-align: center;
color: #ffffff;
}
/* =========================================================
TITLE
========================================================= */
.page-breadcrumb-content h1 {
margin: 0 0 18px;
color: #ffffff;
font-size: 56px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.045em;
}
/* =========================================================
BREADCRUMB NAV
========================================================= */
.breadcrumb-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(255,255,255,.85);
font-size: 13px;
line-height: 1.4;
}
.breadcrumb-nav a {
color: #ffffff;
font-weight: 500;
text-decoration: none;
transition:
color .25s ease;
}
.breadcrumb-nav a:hover {
color: #b50c09;
}
.breadcrumb-separator {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.75);
font-size: 9px;
}
.breadcrumb-current {
color:
rgba(255,255,255,.72);
font-weight: 400;
}
/* =========================================================
SMALL BRAND ACCENT
========================================================= */
.page-breadcrumb-content::before {
content: "";
display: block;
width: 30px;
height: 3px;
margin: 0 auto 18px;
background: #b50c09;
border-radius: 10px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.page-breadcrumb {
height: 375px;
}
.page-breadcrumb-content h1 {
font-size: 62px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.page-breadcrumb {
width: calc(100% - 30px);
margin: 15px;
height: 300px;
}
.page-breadcrumb-content h1 {
font-size: 46px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.page-breadcrumb {
width: calc(100% - 24px);
height: 240px;
margin: 12px;
border-radius: 16px;
}
.page-breadcrumb-content h1 {
font-size: 36px;
margin-bottom: 14px;
}
.breadcrumb-nav {
font-size: 12px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.page-breadcrumb {
height: 210px;
}
.page-breadcrumb-content h1 {
font-size: 31px;
}
}
/* =========================================================
SERVICES SECTION
========================================================= */
.services-gallery-section {
position: relative;
width: 100%;
padding: 20px 0 20px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
CONTAINER
========================================================= */
.services-gallery-container {
width: min(
calc(100% - 40px),
1200px
);
margin: 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.services-gallery-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 42px;
}
/* =========================================================
LABEL
========================================================= */
.services-gallery-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: #b50c09;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.20em;
text-transform: uppercase;
}
.services-gallery-label i {
font-size: 10px;
}
/* =========================================================
HEADING
========================================================= */
.services-gallery-heading h2 {
margin: 0;
color: #171717;
font-size: 50px;
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.05em;
}
/* =========================================================
SEE ALL SERVICES
========================================================= */
.services-gallery-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 24px;
color: #ffffff;
background: #b50c09;
border: 0;
border-radius: 50px;
font-family: inherit;
font-size: 11px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.services-gallery-button:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
box-shadow:
0 10px 25px
rgba(181, 12, 9, 0.18);
}
.services-gallery-button i {
font-size: 10px;
transition:
transform 0.3s ease;
}
.services-gallery-button:hover i {
transform: translateX(4px);
}
/* =========================================================
SERVICES GRID
========================================================= */
.services-gallery-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
/* =========================================================
SERVICE BLOCK
========================================================= */
.service-block-style2 {
position: relative;
min-width: 0;
}
/* =========================================================
CARD
SAME DESIGN FOR ALL SIX
========================================================= */
.service-block-style2 .inner-block {
position: relative;
width: 100%;
height: 392px;
overflow: hidden;
border-radius: 18px;
transition:
transform 0.45s
cubic-bezier(.22, 1, .36, 1),
box-shadow 0.45s ease;
}
/* =========================================================
IMAGE
========================================================= */
.service-block-style2 .image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.service-block-style2 .image img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
transform: scale(1.001);
transition:
transform 0.7s
cubic-bezier(.22, 1, .36, 1);
}
/* =========================================================
DARK BOTTOM GRADIENT
========================================================= */
.service-block-style2 .content {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding:
120px
22px
20px;
background:
linear-gradient(
to bottom,
rgba(7, 11, 16, 0) 0%,
rgba(7, 11, 16, 0.05) 20%,
rgba(7, 11, 16, 0.35) 52%,
rgba(7, 11, 16, 0.92) 100%
);
}
/* =========================================================
TITLE BOX
========================================================= */
.service-block-style2 .title-box {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
width: 100%;
}
/* =========================================================
TITLE
========================================================= */
.service-block-style2 .service-title {
max-width: 280px;
margin: 0;
color: #ffffff;
font-size: 18px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.025em;
}
/* =========================================================
ARROW
========================================================= */
.service-block-style2 .btn-more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
padding: 0;
color: #b50c09;
background: transparent;
border: 0;
border-radius: 0;
font-size: 15px;
line-height: 1;
text-decoration: none;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.service-block-style2 .btn-more i {
display: block;
font-size: 15px;
line-height: 1;
}
/* =========================================================
ARROW HOVER
========================================================= */
.service-block-style2:hover .btn-more {
color: #ffffff;
transform:
translate(3px, 3px);
}
/* =========================================================
CARD HOVER
========================================================= */
.service-block-style2:hover .inner-block {
transform: translateY(-4px);
box-shadow:
0 20px 45px
rgba(0, 0, 0, 0.16);
}
.service-block-style2:hover .image img {
transform: scale(1.06);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.services-gallery-section {
padding:20px 0 20px;
}
.services-gallery-container {
width: 1200px;
}
.services-gallery-heading h2 {
font-size: 52px;
}
.service-block-style2 .inner-block {
height: 392px;
}
.service-block-style2 .service-title {
font-size: 18px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.services-gallery-section {
padding:
85px 0
100px;
}
.services-gallery-container {
width:
calc(100% - 40px);
}
.services-gallery-header {
align-items: flex-start;
flex-direction: column;
gap: 25px;
margin-bottom: 35px;
}
.services-gallery-heading h2 {
font-size: 43px;
}
.services-gallery-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.service-block-style2 .inner-block {
height: 340px;
clip-path: polygon(
0 40px,
40px 0,
calc(100% - 16px) 0,
100% 16px,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
16px 100%,
0 calc(100% - 16px)
);
}
.service-block-style2 .content {
padding:
100px
18px
18px;
}
.service-block-style2 .service-title {
font-size: 16px;
}
.service-block-style2 .btn-more,
.service-block-style2 .btn-more i {
font-size: 14px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.services-gallery-section {
padding:
70px 0
80px;
}
.services-gallery-container {
width:
calc(100% - 32px);
}
.services-gallery-heading h2 {
font-size: 36px;
}
.services-gallery-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.service-block-style2 .inner-block {
height: 320px;
clip-path: polygon(
0 40px,
40px 0,
calc(100% - 16px) 0,
100% 16px,
100% calc(100% - 16px),
calc(100% - 16px) 100%,
16px 100%,
0 calc(100% - 16px)
);
}
.service-block-style2 .content {
padding:
90px
18px
17px;
}
.service-block-style2 .service-title {
max-width: 250px;
font-size: 17px;
}
.service-block-style2 .btn-more,
.service-block-style2 .btn-more i {
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.services-gallery-container {
width:
calc(100% - 24px);
}
.services-gallery-heading h2 {
font-size: 31px;
}
.service-block-style2 .inner-block {
height: 300px;
clip-path: polygon(
0 35px,
35px 0,
calc(100% - 14px) 0,
100% 14px,
100% calc(100% - 14px),
calc(100% - 14px) 100%,
14px 100%,
0 calc(100% - 14px)
);
}
}
.service-image-wrap {
position: relative;
width: 392px;
height: 392px;
}
.service-main-image{
position: relative;
width: 392px;
height: 435px;
overflow: hidden;
background: #eeeeee;
-webkit-mask: url("data:image/svg+xml;utf8,\ ") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml;utf8,\ ") center / 100% 100% no-repeat;
}
.service-main-image img {
position: absolute;
top: -8%;
left: 0;
width: 100%;
height: 116%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
will-change: transform;
}
/* =========================================================
SERVICE CONTENT
========================================================= */
.service-block-style2 .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
padding:
120px
22px
20px;
background:
linear-gradient(
to bottom,
rgba(7, 11, 16, 0) 0%,
rgba(7, 11, 16, 0.08) 20%,
rgba(7, 11, 16, 0.45) 58%,
rgba(7, 11, 16, 0.94) 100%
);
pointer-events: none;
}
/* =========================================================
TITLE BOX
========================================================= */
.service-block-style2 .title-box {
position: relative;
z-index: 21;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}
/* =========================================================
TITLE
========================================================= */
.service-block-style2 .service-title {
margin: 0;
max-width: 280px;
color: #ffffff;
font-size: 18px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
}
/* =========================================================
ARROW
========================================================= */
.service-block-style2 .btn-more {
position: relative;
z-index: 30;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
margin: 0;
padding: 0;
color: #b50c09;
background: transparent;
border: 0;
outline: none;
font-size: 0;
line-height: 1;
text-decoration: none;
pointer-events: auto;
cursor: pointer;
opacity: 1;
visibility: visible;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* =========================================================
ICON
========================================================= */
.service-block-style2 .btn-more i {
display: block;
color: #b50c09;
font-size: 19px;
line-height: 1;
transform:
rotate(45deg);
transform-origin: center;
opacity: 1;
visibility: visible;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* =========================================================
HOVER
========================================================= */
.service-block-style2 .btn-more:hover {
color: #ffffff;
transform:
translate(3px, 3px);
}
.service-block-style2 .btn-more:hover i {
color: #ffffff;
transform:
rotate(45deg)
scale(1.08);
}
/* =========================================================
SERVICE CONTENT
========================================================= */
.service-block-style2 .content {
padding: 18px 18px;
}
/* =========================================================
HOVER GLASS EFFECT
========================================================= */
.service-block-style2:hover .content {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 20;
padding: 18px 18px;
border: 1px solid transparent;
border-radius: 14px;
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
box-sizing: border-box;
transition:
background .35s ease,
border-color .35s ease,
box-shadow .35s ease,
backdrop-filter .35s ease,
-webkit-backdrop-filter .35s ease;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0.04)
);
border-color:
rgba(255, 255, 255, 0.38);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.service-block-style2:hover .btn-more {
color: #ffffff;
transform: translateY(-2px);
}
.service-block-style2:hover .btn-more i {
color: #ffffff;
transform:
rotate(-45deg);
}
/* =========================================================
CONTACT-two SECTION
========================================================= */
.contact-two-section {
position: relative;
width: 100%;
padding: 20px 0 20px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.contact-two-container {
width: calc(100% - 40px);
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, 1.25fr)
minmax(0, .75fr);
gap: 55px;
align-items: start;
}
/* =========================================================
SECTION LABEL
========================================================= */
.contact-two-section-label {
display: block;
margin-bottom: 18px;
color: #5c5f68;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .28em;
text-transform: uppercase;
}
/* =========================================================
SECTION TITLE
========================================================= */
.contact-two-section-title {
margin: 0 0 20px;
color: #1b1f29;
font-size: 38px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -.045em;
}
/* =========================================================
CONTACT-two DESCRIPTION
========================================================= */
.contact-two-description {
max-width: 470px;
margin: 0 0 30px;
color: #666a73;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
/* =========================================================
FORM
========================================================= */
.contact-two-form {
width: 100%;
}
/* =========================================================
FORM ROW
========================================================= */
.contact-two-form-row {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 15px;
margin-bottom: 12px;
}
/* =========================================================
FIELD
========================================================= */
.contact-two-field {
width: 100%;
}
/* =========================================================
INPUT
========================================================= */
.contact-two-field input,
.contact-two-field textarea {
display: block;
width: 100%;
box-sizing: border-box;
color: #1b1f29;
background: #f4f5f8;
border: 1px solid transparent;
border-radius: 5px;
outline: none;
font-family: inherit;
transition:
background .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.contact-two-field input {
height: 49px;
padding:
0 22px;
font-size: 14px;
}
.contact-two-field textarea {
min-height: 140px;
padding:
17px 22px;
resize: vertical;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.contact-two-field input::placeholder,
.contact-two-field textarea::placeholder {
color: #3f424a;
opacity: 1;
}
/* =========================================================
FOCUS
========================================================= */
.contact-two-field input:focus,
.contact-two-field textarea:focus {
background: #ffffff;
border-color:
rgba(181, 12, 9, .35);
box-shadow:
0 0 0 3px
rgba(181, 12, 9, .06);
}
/* =========================================================
MESSAGE
========================================================= */
.contact-two-message-field {
margin-top: 0;
margin-bottom: 13px;
}
/* =========================================================
BUTTONS
========================================================= */
.contact-two-form-buttons {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.contact-two-submit-btn,
.contact-two-reset-btn {
min-height: 44px;
padding:
0 25px;
border: 0;
border-radius: 50px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
/* Submit */
.contact-two-submit-btn {
color: #ffffff;
background: #b50c09;
}
.contact-two-submit-btn:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
box-shadow:
0 8px 20px
rgba(181, 12, 9, .18);
}
/* Reset */
.contact-two-reset-btn {
color: #ffffff;
background: #b50c09;
}
.contact-two-reset-btn:hover {
color: #ffffff;
background: #8f0806;
transform: translateY(-2px);
}
/* =========================================================
CONTACT-two INFO
========================================================= */
.contact-two-info-column {
padding-top: 0;
}
/* =========================================================
CONTACT-two INFO ITEMS
========================================================= */
.contact-two-info-item {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 14px;
color: #1b1f29;
text-decoration: none;
transition:
transform .3s ease;
}
.contact-two-info-item:hover {
color: #1b1f29;
transform: translateX(4px);
}
/* =========================================================
ICON
========================================================= */
.contact-two-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
flex: 0 0 62px;
color: #ffffff;
background: #1c2029;
border-radius: 0;
font-size: 19px;
}
.contact-two-info-icon i {
font-size: 18px;
}
/* =========================================================
INFO TEXT
========================================================= */
.contact-two-info-content {
display: flex;
flex-direction: column;
gap: 7px;
}
.contact-two-info-content strong {
color: #1b1f29;
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.contact-two-info-content small {
color: #6d7079;
font-size: 16px;
line-height: 1.4;
}
/* =========================================================
MAP
========================================================= */
.contact-two-map-section {
width: 100%;
height: 420px;
margin-top: 60px;
overflow: hidden;
}
.contact-two-map-section iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.contact-two-section {
padding-top: 20px;
}
.contact-two-container {
width: calc(100% - 40px);
gap: 65px;
}
.contact-two-section-title {
font-size: 41px;
}
.contact-two-map-section {
margin-top: 60px;
height: 440px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.contact-two-section {
padding:
90px 0
0;
}
.contact-two-container {
width:
calc(100% - 40px);
grid-template-columns: 1fr;
gap: 55px;
}
.contact-two-info-column {
padding-top: 0;
}
.contact-two-map-section {
margin-top: 65px;
height: 380px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.contact-two-section {
padding:
70px 0
0;
}
.contact-two-container {
width:
calc(100% - 32px);
gap: 45px;
}
.contact-two-section-label {
font-size: 10px;
margin-bottom: 15px;
}
.contact-two-section-title {
font-size: 34px;
line-height: 1.1;
margin-bottom: 18px;
}
.contact-two-description {
font-size: 12px;
line-height: 1.7;
margin-bottom: 25px;
}
.contact-two-form-row {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 10px;
}
.contact-two-field input {
height: 48px;
padding:
0 17px;
}
.contact-two-field textarea {
min-height: 130px;
padding:
15px 17px;
}
.contact-two-form-buttons {
gap: 8px;
}
.contact-two-submit-btn,
.contact-two-reset-btn {
min-height: 44px;
padding:
0 20px;
}
.contact-two-info-item {
gap: 15px;
margin-bottom: 12px;
}
.contact-two-info-icon {
width: 52px;
height: 52px;
flex-basis: 52px;
font-size: 15px;
}
.contact-two-info-icon i {
font-size: 15px;
}
.contact-two-info-content strong {
font-size: 13px;
}
.contact-two-info-content small {
font-size: 11px;
}
.contact-two-map-section {
height: 320px;
margin-top: 55px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.contact-two-section {
padding-top: 60px;
}
.contact-two-container {
width:
calc(100% - 24px);
}
.contact-two-section-title {
font-size: 30px;
}
.contact-two-map-section {
height: 280px;
}
}
#contact_submit_loader {
width: 14px;
height: 14px;
border: 4px solid rgb(0 0 0 / 0.1);
border-left: 4px solid #000;
border-right: 4px solid #000;
animation: spinner 1s linear infinite forwards;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* =========================================================
TOWING & RECOVERY SERVICE PAGE
========================================================= */
.service-detail-section {
position: relative;
width: 100%;
padding: 20px 0 20px;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.service-detail-container {
width: calc(100% - 40px);
margin: 0 auto;
max-width: 1280px;
}
/* =========================================================
MAIN TWO-COLUMN LAYOUT
========================================================= */
.service-detail-layout {
display: grid;
grid-template-columns:
280px
minmax(0, 1fr);
gap: 55px;
align-items: start;
}
/* =========================================================
SIDEBAR
========================================================= */
.service-sidebar {
position: relative;
width: 100%;
}
/* =========================================================
SERVICE MENU
========================================================= */
.service-sidebar-menu {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
/* =========================================================
SERVICE MENU ITEM
========================================================= */
.service-sidebar-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 56px;
padding:
0 14px
0 28px;
color: #252a34;
background: #f3f7fb;
border-radius: 10px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
text-decoration: none;
transition:
color .3s ease,
background .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.service-sidebar-item:hover {
color: #1e232d;
background: #eaf1f8;
transform: translateX(3px);
}
/* =========================================================
ACTIVE SERVICE
========================================================= */
.service-sidebar-item.active {
color: #252a34;
background: #edf6ff;
}
/* =========================================================
SIDEBAR ARROW
========================================================= */
.service-sidebar-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
color: #252a34;
background: #ffffff;
border-radius: 50%;
font-size: 9px;
transition:
color .3s ease,
background .3s ease,
transform .3s ease;
}
.service-sidebar-item:hover
.service-sidebar-arrow {
color: #ffffff;
background: #b50c09;
transform: translateX(2px);
}
.service-sidebar-item.active
.service-sidebar-arrow {
color: #ffffff;
background: #252a34;
}
/* =========================================================
SIDEBAR CTA
========================================================= */
.service-sidebar-cta {
position: relative;
min-height: 285px;
margin-top: 22px;
padding: 34px 28px;
overflow: hidden;
background: #b50c09;
border-radius: 10px;
isolation: isolate;
}
/* =========================================================
CTA CONTENT
========================================================= */
.service-sidebar-cta-content {
position: relative;
z-index: 3;
}
.service-sidebar-cta h3 {
margin: 0 0 25px;
color: #ffffff;
font-size: 30px;
font-weight: 400;
line-height: 1.08;
letter-spacing: -.04em;
}
/* =========================================================
SIDEBAR CTA BUTTON
========================================================= */
.service-sidebar-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 44px;
padding: 0 20px;
color: #b50c09;
background: #ffffff;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
.service-sidebar-cta-btn:hover {
color: #ffffff;
background: #171b22;
transform: translateY(-2px);
}
/* =========================================================
CTA DECORATIVE CIRCLE
========================================================= */
.service-sidebar-cta-shape {
position: absolute;
right: -70px;
bottom: -75px;
width: 230px;
height: 230px;
background:
rgba(255,255,255,.12);
border-radius: 50%;
z-index: 1;
}
/* =========================================================
CTA DECORATIVE TRIANGLE
========================================================= */
.service-sidebar-cta::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background:
rgba(255,255,255,.08);
clip-path:
polygon(
100% 0,
100% 100%,
0 0
);
z-index: 1;
}
/* =========================================================
MAIN CONTENT
========================================================= */
.service-detail-content {
position: relative;
width: 100%;
min-width: 0;
}
/* =========================================================
MAIN SERVICE IMAGE
========================================================= */
.service-detail-image {
position: relative;
width: 100%;
height: 390px;
overflow: hidden;
background: #edf1f5;
border-radius: 0;
}
.service-detail-image img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transform: scale(1);
transition:
transform .7s
cubic-bezier(.22,1,.36,1);
}
.service-detail-image:hover img {
transform: scale(1.03);
}
/* =========================================================
SERVICE OVERVIEW
========================================================= */
.service-overview {
padding-top: 25px;
}
.service-overview h1 {
margin: 0 0 18px;
color: #1a1f28;
font-size: 34px;
font-weight: 400;
line-height: 1.12;
letter-spacing: -.045em;
}
.service-overview p {
margin: 0 0 15px;
color: #696d76;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
.service-overview p:last-child {
margin-bottom: 0;
}
/* =========================================================
FEATURE GRID
========================================================= */
.service-feature-list {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 15px;
margin-top: 35px;
}
/* =========================================================
FEATURE ITEM
========================================================= */
.service-feature-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
background: #f7f8fa;
border-radius: 10px;
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.service-feature-item:hover {
background: #ffffff;
transform: translateY(-3px);
box-shadow:
0 10px 30px
rgba(0,0,0,.08);
}
/* =========================================================
FEATURE ICON
========================================================= */
.service-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
color: #ffffff;
background: #b50c09;
border-radius: 50%;
font-size: 18px;
}
/* =========================================================
FEATURE CONTENT
========================================================= */
.service-feature-item h3 {
margin: 0 0 5px;
color: #202530;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
}
.service-feature-item p {
margin: 0;
color: #737780;
font-size: 16px;
line-height: 1.6;
}
/* =========================================================
RECOVERY CONTENT
========================================================= */
.service-content-block {
margin-top: 48px;
}
.service-content-block h2 {
margin: 0 0 18px;
color: #1a1f28;
font-size: 29px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -.04em;
}
.service-content-block h3 {
margin:
30px 0 15px;
color: #1a1f28;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.service-content-block p {
margin: 0 0 15px;
color: #696d76;
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
CHECK LIST
========================================================= */
.service-check-list {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px 25px;
margin: 0;
padding: 0;
list-style: none;
}
.service-check-list li {
display: flex;
align-items: center;
gap: 10px;
color: #656a73;
font-size: 16px;
line-height: 1.5;
}
.service-check-list li i {
display: flex;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
flex: 0 0 19px;
color: #ffffff;
background: #b50c09;
border-radius: 50%;
font-size: 8px;
}
/* =========================================================
BOTTOM EMERGENCY CTA
========================================================= */
.service-bottom-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 48px;
padding: 30px;
color: #ffffff;
background: #b50c09;
border-radius: 14px;
overflow: hidden;
position: relative;
}
.service-bottom-cta::before {
content: "";
position: absolute;
right: -60px;
bottom: -100px;
width: 250px;
height: 250px;
border: 1px solid
rgba(255,255,255,.15);
border-radius: 50%;
}
.service-bottom-cta > div {
position: relative;
z-index: 2;
}
.service-bottom-cta-label {
display: block;
margin-bottom: 8px;
color:
rgba(255,255,255,.75);
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: .15em;
}
.service-bottom-cta h2 {
margin: 0 0 8px;
color: #ffffff;
font-size: 27px;
font-weight: 500;
line-height: 1.15;
}
.service-bottom-cta p {
max-width: 500px;
margin: 0;
color:
rgba(255,255,255,.82);
font-size: 16px;
line-height: 1.65;
}
/* =========================================================
BOTTOM CTA BUTTONS
========================================================= */
.service-bottom-cta-actions {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.service-bottom-call,
.service-bottom-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 19px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
transform .3s ease,
background .3s ease;
}
.service-bottom-call {
color: #b50c09;
background: #ffffff;
}
.service-bottom-call:hover {
color: #b50c09;
background: #f4f4f4;
transform: translateY(-2px);
}
.service-bottom-whatsapp {
color: #ffffff;
background: #25d366;
}
.service-bottom-whatsapp:hover {
color: #ffffff;
background: #20bd5c;
transform: translateY(-2px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.service-detail-section {
padding:20px 0 20px;
}
.service-detail-container {
width: calc(100% - 40px);
}
.service-detail-layout {
grid-template-columns:
280px
minmax(0, 1fr);
gap: 60px;
}
.service-detail-image {
height: 405px;
}
.service-overview h1 {
font-size: 36px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.service-detail-section {
padding:
85px 0
100px;
}
.service-detail-container {
width:
calc(100% - 40px);
}
.service-detail-layout {
grid-template-columns:
240px
minmax(0, 1fr);
gap: 35px;
}
.service-sidebar-item {
min-height: 52px;
padding:
0 12px
0 18px;
font-size: 12px;
}
.service-sidebar-arrow {
width: 32px;
height: 32px;
flex-basis: 32px;
}
.service-sidebar-cta {
min-height: 250px;
padding:
30px 22px;
}
.service-sidebar-cta h3 {
font-size: 26px;
}
.service-detail-image {
height: 330px;
}
.service-feature-list {
grid-template-columns: 1fr;
}
.service-bottom-cta {
align-items: flex-start;
flex-direction: column;
}
.service-bottom-cta-actions {
width: 100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.service-detail-section {
padding:10px 0 10px;
}
.service-detail-container {
width:
calc(100% - 32px);
}
.service-detail-layout {
grid-template-columns: 1fr;
gap: 40px;
}
/* Sidebar first */
.service-sidebar {
order: 1;
}
/* Content second */
.service-detail-content {
order: 2;
}
/* Sidebar */
.service-sidebar-menu {
gap: 7px;
}
.service-sidebar-item {
min-height: 52px;
padding:
0 12px
0 18px;
font-size: 14px;
}
.service-sidebar-arrow {
width: 32px;
height: 32px;
flex-basis: 32px;
}
/* Sidebar CTA */
.service-sidebar-cta {
min-height: 215px;
padding:
28px 22px;
}
.service-sidebar-cta h3 {
font-size: 28px;
}
/* Main image */
.service-detail-image {
height: 280px;
}
/* Heading */
.service-overview {
padding-top: 22px;
}
.service-overview h1 {
font-size: 30px;
line-height: 1.12;
}
.service-overview p {
font-size: 14px;
line-height: 1.75;
}
/* Features */
.service-feature-list {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 30px;
}
.service-feature-item {
padding: 16px;
}
.service-feature-item h3 {
font-size: 15px;
}
.service-feature-item p {
font-size: 14px;
}
/* Recovery content */
.service-content-block {
margin-top: 38px;
}
.service-content-block h2 {
font-size: 26px;
}
.service-content-block h3 {
font-size: 18px;
}
.service-content-block p {
font-size: 14px;
line-height: 1.75;
}
/* Checklist */
.service-check-list {
grid-template-columns: 1fr;
gap: 11px;
}
.service-check-list li {
font-size: 14px;
}
/* Bottom CTA */
.service-bottom-cta {
align-items: flex-start;
flex-direction: column;
gap: 25px;
margin-top: 38px;
padding:
25px 20px;
}
.service-bottom-cta h2 {
font-size: 25px;
}
.service-bottom-cta p {
font-size: 14px;
}
.service-bottom-cta-actions {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
width: 100%;
gap: 8px;
}
.service-bottom-call,
.service-bottom-whatsapp {
width: 100%;
padding: 0 12px;
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.service-detail-container {
width:
calc(100% - 24px);
}
.service-detail-image {
height: 240px;
}
.service-sidebar-cta {
min-height: 200px;
padding:
24px 20px;
}
.service-sidebar-cta h3 {
font-size: 25px;
}
.service-overview h1 {
font-size: 28px;
}
.service-feature-item {
padding: 14px;
gap: 11px;
}
.service-feature-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
font-size: 12px;
}
.service-bottom-cta-actions {
grid-template-columns: 1fr;
}
}
/* =========================================================
COMPLETE CLICKABLE CONTENT PANEL
========================================================= */
.service-block-style2 .content.service-content-link {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 20;
display: block;
width: auto;
padding: 17px 18px;
box-sizing: border-box;
color: #ffffff;
background: transparent;
border: 1px solid transparent;
border-radius: 14px;
text-decoration: none;
cursor: pointer;
/*
* Important:
* allow the full panel to receive the click
*/
pointer-events: auto;
transition:
background .35s ease,
border-color .35s ease,
box-shadow .35s ease,
backdrop-filter .35s ease,
-webkit-backdrop-filter .35s ease;
}
/* =========================================================
HOVER GLASS PANEL
========================================================= */
.service-block-style2:hover
.content.service-content-link {
background:
linear-gradient(
135deg,
rgba(255,255,255,.16),
rgba(255,255,255,.05)
);
border-color:
rgba(255,255,255,.42);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 8px 25px
rgba(0,0,0,.18),
inset 0 1px 0
rgba(255,255,255,.18);
}
/* =========================================================
REMOVE DEFAULT ANCHOR STYLES
========================================================= */
.service-block-style2
.content.service-content-link:hover,
.service-block-style2
.content.service-content-link:focus,
.service-block-style2
.content.service-content-link:active {
color: #ffffff;
text-decoration: none;
outline: none;
}
/* =========================================================
TITLE BOX
========================================================= */
.service-block-style2
.content.service-content-link
.title-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
}
/* =========================================================
TITLE
========================================================= */
.service-block-style2
.content.service-content-link
.service-title {
margin: 0;
max-width: 280px;
color: #ffffff;
font-size: 17px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -.02em;
}
/* =========================================================
ARROW
========================================================= */
.service-block-style2
.content.service-content-link
.btn-more {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
padding: 0;
margin: 0;
color: #b50c09;
background: transparent;
border: 0;
pointer-events: none;
transition:
color .35s ease,
transform .35s ease;
}
/* =========================================================
ARROW ICON
========================================================= */
.service-block-style2
.content.service-content-link
.btn-more i {
display: block;
color: #b50c09;
font-size: 17px;
line-height: 1;
transition:
color .35s ease,
transform .35s
cubic-bezier(.22,1,.36,1);
}
/* =========================================================
HOVER ARROW
RIGHT → 45° UP-RIGHT
========================================================= */
.service-block-style2:hover
.content.service-content-link
.btn-more {
color: #ffffff;
transform:
translateY(-1px);
}
.service-block-style2:hover
.content.service-content-link
.btn-more i {
color: #ffffff;
transform:
rotate(-45deg);
}