/* ================================
FAREES RAHMAN BRAND THEME
================================ */

:root{
--farees-navy:#1F4E79;
--farees-gold:#BF9B54;
--farees-white:#FFFFFF;
--farees-offwhite:#F8F9FA;
}

/* GENERAL */

body{
background:#ffffff;
color:#333;
}

/* HEADINGS */

h1,h2,h3,h4,h5{
color:var(--farees-navy);
}

/* HERO SUBTITLE */

.banner-content h6{
color:var(--farees-gold) !important;
font-weight:600;
}

/* HERO BUTTONS */

.banner-section-four .btn-secondary{
background:var(--farees-gold) !important;
border-color:var(--farees-gold) !important;
color:white !important;
}

.banner-section-four .btn-secondary:hover{
background:#a68444 !important;
border-color:#a68444 !important;
}

.banner-section-four .btn-primary{
background:var(--farees-navy) !important;
border-color:var(--farees-navy) !important;
color:white !important;
}

.banner-section-four .btn-primary:hover{
background:#173a5a !important;
border-color:#173a5a !important;
}

/* HEADER BUTTONS */

.header-btn .btn-primary{
background:var(--farees-navy) !important;
border-color:var(--farees-navy) !important;
}

.header-btn .btn-secondary{
background:var(--farees-gold) !important;
border-color:var(--farees-gold) !important;
}

/* REGISTER BUTTON HOVER FIX */

.header-btn .btn-secondary:hover{
background:#a68444 !important;
border-color:#a68444 !important;
color:white !important;
}

/* REMOVE PINK BORDER */

.btn-secondary{
box-shadow:none !important;
}

/* NAVBAR */

.main-nav li a:hover{
color:var(--farees-gold) !important;
}

/* STAR RATING */

.rating i{
color:var(--farees-gold) !important;
}

/* VISION SECTION FIX */

.vision-section{
background:var(--farees-navy) !important;
padding:40px 0;
}

/* FEATURE CARDS */

.vision-item{
background:#ffffff !important;
border-radius:12px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* ICON BACKGROUND */

.vision-icon{
background:#F8F9FA !important;
border-radius:10px;
padding:12px;
}

/* ICON BORDER */

.vision-icon.border{
border:1px solid #eee !important;
}

/* BUTTON GLOBAL */

.btn-xl{
padding:12px 28px;
font-weight:600;
}

/* LINKS */

a{
color:var(--farees-navy);
}

a:hover{
color:var(--farees-gold);
}

/* FOOTER */

/* footer{
background:var(--farees-navy);
color:white;
} */

/* FOOTER BACKGROUND FIX */

.footer-bottom{
background:#1F4E79 !important;
}

.footer-bottom .container{
background:#1F4E79 !important;
}

/* SECTION SUBTITLE (eg: Dedicated Environment, What's New) */

.text-secondary{
color:var(--farees-gold) !important;
}

/* SECONDARY BUTTONS */

.btn-secondary{
background:#BF9B54 !important;
border-color:#BF9B54 !important;
color:#ffffff !important;
}

.btn-secondary:hover{
background:#a68444 !important;
border-color:#a68444 !important;
}

/* PREMIUM FOOTER ICONS */

.footer-icon{
color:#BF9B54;
font-size:16px;
min-width:18px;
margin-top:4px;
}

/* remove old icon styling */

.footer-address img{
display:none;
}

/* APP-STYLE BADGES */

.footer-badge{
display:flex;
align-items:center;
gap:12px;
padding:10px 16px;
border-radius:12px;
text-decoration:none;
color:#fff;
min-width:170px;
transition:all 0.25s ease;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* ICON */

.footer-badge i{
font-size:22px;
}

/* TEXT */

.footer-badge small{
display:block;
font-size:11px;
opacity:0.8;
line-height:1;
}

.footer-badge span{
font-size:15px;
font-weight:600;
line-height:1.2;
}

/* WHATSAPP STYLE */

.footer-badge.whatsapp{
background:linear-gradient(135deg,#1F4E79,#163a5c);
}

/* EMAIL STYLE */

.footer-badge.email{
background:linear-gradient(135deg,#BF9B54,#a68444);
}

/* HOVER */

.footer-badge:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,0.18);
color:#fff;
}

/* CONTACT MAP */

.contact-sec .contact-map {
  margin-top: 60px;
}
.contact-sec .contact-map iframe {
  filter: grayscale(0.3);
  transition: 0.3s;
  width: 100%;
  height: 260px;
}
.contact-sec .contact-map iframe:hover {
  filter: grayscale(0);
}


/* =========================
   BASE (MOBILE FIRST - 2 Columns)
   ========================= */
.memory-masonry {
    column-count: 2; /* Changed from 1 to 2 for better mobile density */
    column-gap: 10px;
    padding: 0 10px;
    width: 100%;
}

.memory-item {
    position: relative;
    margin-bottom: 10px; /* Reduced gap for mobile */
    break-inside: avoid;
    border-radius: 8px; /* Slightly smaller radius for smaller screens */
    overflow: hidden;
    background: #f0f0f0; /* Light gray placeholder look */
    -webkit-backface-visibility: hidden; /* Fixes flickering during scroll */
}

/* =========================
   TABLET (3 Columns)
   ========================= */
@media(min-width: 600px) {
    .memory-masonry {
        column-count: 3;
        column-gap: 14px;
    }
}

/* =========================
   DESKTOP (4 Columns)
   ========================= */
@media(min-width: 1024px) {
    .memory-masonry {
        column-count: 4; /* Increased for wider screens */
        column-gap: 18px;
    }
    
    .memory-item:hover img {
        transform: scale(1.05); /* Added hover effect for desktop */
    }
}

/* =========================
   IMAGE & CAPTION REFINEMENT
   ========================= */
.memory-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.memory-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 10px 8px 10px; /* More bottom padding for thumb-safety */
    font-size: 11px; /* Smaller font looks cleaner on 2-column mobile */
    line-height: 1.2;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    pointer-events: none; /* Allows clicks to go through to the image */
}

/* Lightbox Background */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px); /* Modern blur effect */
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* The Image */
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* When lightbox is active, scale up image */
.lightbox.active .lightbox-content {
    transform: scale(1);
}

/* Caption Text */
.lightbox-caption {
    margin-top: 20px;
    color: #ccc;
    font-size: 18px;
    text-align: center;
    width: 80%;
}

/* Close Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Navigation Arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 50px;
    padding: 20px;
    cursor: pointer;
    z-index: 10002;
    transition: 0.3s;
    user-select: none;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

.lightbox-nav:hover { color: #fff; scale: 1.1; }

/* Hide arrows on small mobile devices to prevent accidental clicks */
@media (max-width: 575px) {
    .lightbox-nav {
        display: none; /* Mobile users will use Swipe */
    }
}

/* Ensure image stays centered during swipe */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}