/* =========================================================
ABBEYLINCON A/C & REFRIGERATION SERVICES
REV-WHY PAGE STYLES
========================================================= */

/* =========================
GLOBAL
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, sans-serif;
background: #f4f9ff;
color: #333;
line-height: 1.6;
overflow-x: hidden;
}

img {
max-width: 100%;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

/* =========================
SHARED SECTION TITLE
========================= */

.section-title {
position: relative;
text-align: center;
color: #023e7d;
margin-bottom: 45px;
font-size: clamp(26px, 4vw, 34px);
font-weight: 800;
line-height: 1.2;
}

.section-title::after {
content: "";
display: block;
width: 70px;
height: 4px;
margin: 14px auto 0;
background: linear-gradient(90deg, #00b4d8, #0077b6);
border-radius: 50px;
}

/* =========================
WHY CHOOSE US
========================= */

.why-us {
padding: 80px 20px;
background:
radial-gradient(
circle at top left,
rgba(0, 180, 216, 0.08),
transparent 35%
),
#ffffff;
}

.why-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
max-width: 1150px;
margin: 0 auto;
}

.why-card {
position: relative;
text-align: center;
padding: 35px 22px 30px;
background: linear-gradient(145deg, #f8fcff, #eef8ff);
border: 1px solid rgba(0, 119, 182, 0.1);
border-bottom: 4px solid #00b4d8;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(2, 62, 125, 0.07);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
overflow: hidden;
}

.why-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #0077b6, #00b4d8);
}

.why-card:hover {
transform: translateY(-8px);
border-bottom-color: #0077b6;
box-shadow: 0 15px 35px rgba(2, 62, 125, 0.14);
}

.why-icon {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #e0f7ff, #caf0f8);
border-radius: 50%;
font-size: 40px;
box-shadow: 0 8px 20px rgba(0, 180, 216, 0.12);
}

.why-card h3 {
color: #023e7d;
margin-bottom: 12px;
font-size: 20px;
font-weight: 800;
}

.why-card p {
color: #555;
font-size: 15px;
line-height: 1.7;
}

/* =========================
FAQ
========================= */

.faq {
padding: 80px 20px;
background:
linear-gradient(
180deg,
#eaf7ff 0%,
#ffffff 100%
);
}

.faq-container {
max-width: 850px;
margin: 0 auto;
}

.faq-item {
background: #ffffff;
margin-bottom: 15px;
border: 1px solid rgba(0, 119, 182, 0.1);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 5px 18px rgba(2, 62, 125, 0.06);
transition:
box-shadow 0.3s ease,
border-color 0.3s ease;
}

.faq-item:hover {
border-color: rgba(0, 180, 216, 0.35);
box-shadow: 0 8px 24px rgba(2, 62, 125, 0.1);
}

.faq-item.active {
border-color: rgba(0, 180, 216, 0.45);
}

.faq-question {
position: relative;
min-height: 64px;
padding: 20px 55px 20px 22px;
color: #023e7d;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
user-select: none;
transition:
background 0.3s ease,
color 0.3s ease;
}

.faq-question:hover {
background: #f4fbff;
}

.faq-item.active .faq-question {
background: linear-gradient(
90deg,
#e9f8ff,
#f8fcff
);
color: #0077b6;
}

.faq-question span {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #e0f7ff;
color: #0077b6;
border-radius: 50%;
font-size: 21px;
font-weight: 700;
line-height: 1;
}

.faq-item.active .faq-question span {
background: #0077b6;
color: #ffffff;
}

.faq-answer {
padding: 0 22px 22px;
color: #4a4a4a;
font-size: 15px;
line-height: 1.75;
display: none;
}

.faq-item.active .faq-answer {
display: block;
}

.faq-anchor {
color: #0077b6;
text-decoration: none;
font-weight: 700;
transition: color 0.2s ease;
}

.faq-anchor:hover {
color: #023e7d;
text-decoration: underline;
}

/* =========================
GALLERY
========================= */

.gallery {
padding: 80px 20px;
background: #e0f2ff;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
max-width: 1150px;
margin: 0 auto;
}

.gallery-item {
position: relative;
min-height: 250px;
overflow: hidden;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 8px 25px rgba(2, 62, 125, 0.1);
}

.gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(2, 62, 125, 0.65),
transparent 55%
);
pointer-events: none;
}

.gallery-item img {
width: 100%;
height: 280px;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}

.gallery-item:hover img {
transform: scale(1.08);
}

.gallery-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 15px;
font-weight: 700;
background: rgba(2, 62, 125, 0.82);
}

/* =========================
BEFORE / AFTER
========================= */

.before-after {
padding: 80px 20px;
background:
radial-gradient(
circle at bottom right,
rgba(0, 180, 216, 0.1),
transparent 35%
),
#e0f2ff;
}

.slider-container {
position: relative;
max-width: 850px;
margin: 0 auto;
overflow: hidden;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 12px 35px rgba(2, 62, 125, 0.2);
}

.slider-img {
width: 100%;
display: block;
height: auto;
}

.img-wrapper {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
border-right: 3px solid #ffffff;
}

.img-wrapper .slider-img {
width: auto;
max-width: none;
height: 100%;
object-fit: cover;
}

.slider-range {
position: absolute;
left: 0;
bottom: 18px;
z-index: 10;
width: 100%;
height: 42px;
margin: 0;
padding: 0 15px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: ew-resize;
}

.slider-range::-webkit-slider-runnable-track {
height: 5px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}

.slider-range::-moz-range-track {
height: 5px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}

.slider-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 42px;
height: 42px;
margin-top: -18px;
border: 3px solid #ffffff;
border-radius: 50%;
background: #00b4d8;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
cursor: ew-resize;
}

.slider-range::-moz-range-thumb {
width: 42px;
height: 42px;
border: 3px solid #ffffff;
border-radius: 50%;
background: #00b4d8;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
cursor: ew-resize;
}

.label {
position: absolute;
top: 20px;
z-index: 5;
padding: 7px 14px;
color: #ffffff;
background: rgba(2, 62, 125, 0.78);
border-radius: 7px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.label.before {
left: 20px;
}

.label.after {
right: 20px;
}

/* =========================
TESTIMONIALS
========================= */

.testimonials {
padding: 80px 20px;
background:
radial-gradient(
circle at top right,
rgba(0, 180, 216, 0.08),
transparent 35%
),
#ffffff;
}

.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 25px;
max-width: 1150px;
margin: 0 auto;
}

.testimonial-card {
position: relative;
padding: 28px;
background: linear-gradient(
145deg,
#f8fcff,
#eef8ff
);
border: 1px solid rgba(0, 119, 182, 0.1);
border-left: 5px solid #00b4d8;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(2, 62, 125, 0.07);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}

.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px rgba(2, 62, 125, 0.13);
}

.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.testimonial-header img {
width: 62px;
height: 62px;
flex: 0 0 62px;
margin-right: 15px;
border: 3px solid #caf0f8;
border-radius: 50%;
object-fit: cover;
}

.testimonial-name {
color: #023e7d;
font-size: 18px;
font-weight: 800;
}

.testimonial-location {
color: #666;
font-size: 14px;
margin-top: 2px;
}

.stars {
margin: 8px 0 12px;
color: #ffd700;
font-size: 18px;
letter-spacing: 1px;
}

.testimonial-text {
color: #444;
font-size: 15px;
font-style: italic;
line-height: 1.75;
}

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

@media (max-width: 1000px) {

.why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 800px;
}

.gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 850px;
}

.testimonial-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 850px;
}
}

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

@media (max-width: 768px) {

.why-us,
.faq,
.gallery,
.before-after,
.testimonials {
padding: 65px 18px;
}

.section-title {
margin-bottom: 35px;
}

.why-grid {
gap: 18px;
}

.why-card {
padding: 30px 18px 25px;
}

.why-icon {
width: 68px;
height: 68px;
font-size: 34px;
}

.gallery-grid {
gap: 15px;
}

.gallery-item img {
height: 230px;
}

.testimonial-grid {
gap: 18px;
}

.testimonial-card {
padding: 24px;
}

.slider-container {
border-radius: 14px;
}

.label {
top: 15px;
padding: 6px 11px;
font-size: 12px;
}

.label.before {
left: 15px;
}

.label.after {
right: 15px;
}
}

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

@media (max-width: 600px) {

.why-grid,
.gallery-grid,
.testimonial-grid {
grid-template-columns: 1fr;
max-width: 500px;
}

.why-card {
padding: 30px 22px;
}

.faq-question {
min-height: 60px;
padding: 18px 50px 18px 18px;
font-size: 15px;
}

.faq-question span {
right: 15px;
width: 28px;
height: 28px;
font-size: 19px;
}

.faq-answer {
padding: 0 18px 20px;
font-size: 14px;
}

.gallery-item img {
height: 260px;
}

.testimonial-card {
padding: 22px;
}

.slider-range {
bottom: 12px;
padding: 0 10px;
}

.slider-range::-webkit-slider-thumb {
width: 36px;
height: 36px;
margin-top: -15px;
}

.slider-range::-moz-range-thumb {
width: 36px;
height: 36px;
}

.label {
top: 12px;
}
}

/* =========================
SMALL PHONES
========================= */

@media (max-width: 480px) {

.why-us,
.faq,
.gallery,
.before-after,
.testimonials {
padding: 55px 14px;
}

.section-title {
font-size: 25px;
margin-bottom: 30px;
}

.section-title::after {
width: 55px;
height: 3px;
margin-top: 11px;
}

.why-card h3 {
font-size: 18px;
}

.why-card p {
font-size: 14px;
}

.faq-item {
margin-bottom: 12px;
border-radius: 12px;
}

.faq-question {
min-height: 56px;
padding: 16px 47px 16px 16px;
font-size: 14px;
}

.faq-question span {
right: 12px;
width: 27px;
height: 27px;
}

.faq-answer {
padding: 0 16px 18px;
font-size: 14px;
line-height: 1.7;
}

.gallery-item {
border-radius: 13px;
}

.gallery-item img {
height: 230px;
}

.gallery-caption {
padding: 11px;
font-size: 13px;
}

.testimonial-header img {
width: 55px;
height: 55px;
flex-basis: 55px;
}

.testimonial-name {
font-size: 17px;
}

.testimonial-text {
font-size: 14px;
}

.label {
padding: 5px 9px;
font-size: 11px;
}

.label.before {
left: 10px;
}

.label.after {
right: 10px;
}
}

/* =========================
REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}


/* =========================================================
   28. TEXT SELECTION
   ========================================================= */

h2::selection,
span::selection,
label::selection,
p::selection,
h1::selection,
div::selection,
form::selection,
footer::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
strong::selection,
a::selection,
li::selection,
th::selection,
td::selection,
img::selection,
sup::selection,
sub::selection,
b::selection,
small::selection {
  color: inherit;
  background: none;
}


/* =========================================================
   29. CONTEXT MENU CURSOR
   ========================================================= */

h2,
span,
label,
p,
h1,
div,
form,
footer,
h3,
h4,
h5,
h6,
strong,
li,
th,
td,
img,
sup,
sub,
b,
small {
  cursor: context-menu;
}