/* =====================================================================
RESPONSIVE.CSS — Global mobile-fix layer for Fairway Energy site
Link this AFTER your page's own CSS file in every HTML , e.g.:
===================================================================== */
/* ---------- UNIVERSAL SAFETY NET ---------- */
img, svg{
max-width: 100%;
height: auto;
}
* {
-webkit-text-size-adjust: 100%;
font-family: Georgia,Helvetica, serif;
}
html{
overflow-x: hidden;
}
body{
overflow-x: hidden;
width: 100%;
}
/* ---------- TABLET (≤900px) ---------- */
@media (max-width: 900px){
.container{
padding: 0 18px;
}
/* Any two/three-column hero or content grid collapses to 1 column
(covers .hero-grid, .whlg-hero-grid, .fbg-grid, .reg-grid, etc.) */
[class*="-grid"]{
grid-template-columns: 1fr !important;
}
.feature-cards,
.benefit-list,
.footer-top{
grid-template-columns: 1fr !important;
}
section{
padding-top: 40px;
padding-bottom: 40px;
}
}
/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px){
/* --- Topbar --- */
.top-flex{
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 10px 18px;
}
.left-info{
flex-wrap: wrap;
row-gap: 6px;
}
.right-info{
width: 100%;
justify-content: flex-start;
}
/* --- Header / Nav --- */
.nav{
padding: 12px 18px;
flex-wrap: wrap;
}
.logo img{
height: 38px;
}
.mobile-nav-toggle{
display: block !important;
margin-left: auto;
}
#mainNav,
nav#mainNav{
display: none;
width: 100%;
order: 3;
}
#mainNav.mobile-open,
nav.mobile-open{
display: block;
}
#mainNav ul{
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 4px;
padding: 12px 0;
}
.has-dropdown{
width: 100%;
}
.dropdown-toggle{
width: 100%;
justify-content: space-between;
padding: 12px 4px;
}
.dropdown-menu{
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
width: 100%;
padding-left: 14px;
display: none;
}
.has-dropdown.open .dropdown-menu{
display: block;
}
.call-btn{
width: 100%;
justify-content: center;
margin-top: 10px;
}
/* --- Typography scale-down --- */
h1{ font-size: clamp(26px, 7vw, 34px) !important; }
h2{ font-size: clamp(22px, 6vw, 28px) !important; }
/* --- Table of contents / lists that used multi-column --- */
.toc-list a{
font-size: 15px;
gap: 12px;
}
}
/* ---------- SMALL PHONES (≤480px) ---------- */
@media (max-width: 480px){
.container{
padding: 0 14px;
}
.topbar{
font-size: 12px;
}
.left-info span:nth-child(2){
display: none; /* hide email on very small screens, keep phone number */
}
.nav{
padding: 10px 14px;
}
.logo img{
height: 32px;
}
.apply-box,
.apply-box.dark,
[class*="apply-box"]{
padding: 20px !important;
}
.apply-box h2{
font-size: 17px !important;
}
/* --- Footer --- */
.footer-bottom .container{
flex-direction: column;
align-items: flex-start;
gap: 10px;
text-align: left;
}
.logo-row{
gap: 20px !important;
}
.logo-row img{
max-height: 32px !important;
}
/* --- Cards / accordions full-width, tighter padding --- */
.feature-card,
.benefit-item,
.accordion-header,
.accordion-body{
padding: 20px !important;
}
}
/* ================= MOBILE HEADER FIX ================= */
@media (max-width: 768px) {
/* Social media icons hide on mobile */
.right-info {
display: none !important;
}
/* Top bar sirf phone number rakhe */
.top-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 8px 18px;
}
.left-info {
display: flex;
align-items: center;
gap: 0;
}
/* Email hide */
.left-info span:nth-child(2) {
display: none !important;
}
/* Phone number */
.left-info span:first-child {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
white-space: nowrap;
}
/* Phone icon */
.left-info span:first-child i {
font-size: 17px;
line-height: 1;
width: 20px;
text-align: center;
}
/* Free Expert Advice button */
.call-btn {
width: 100%;
min-height: 64px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 18px;
padding: 16px 20px;
border-radius: 14px;
}
/* Call icon inside button */
.call-btn i {
font-size: 21px;
line-height: 1;
flex-shrink: 0;
}
}
/* ================= SMALL PHONE FIX ================= */
@media (max-width: 480px) {
.top-flex {
padding: 7px 14px;
}
.left-info span:first-child {
font-size: 14px;
}
.left-info span:first-child i {
font-size: 16px;
}
.call-btn {
min-height: 58px;
font-size: 17px;
border-radius: 13px;
gap: 9px;
}
.call-btn i {
font-size: 19px;
}
}
/* Hide phone number/top contact bar on mobile */
@media (max-width: 768px) {
.top-flex {
display: none !important;
}
}
/* Hide Free Expert Advice button on mobile */
@media (max-width: 768px) {
.call-btn {
display: none !important;
}
}