.newsletter-section{width: 97%; min-height: 400px; background-image: url(../images/2.jpeg); background-position: center; background-size: cover; background-repeat: no-repeat; margin: 3rem 20px; border-radius: 20px; position: relative; overflow: hidden;}
.newsletter-section::before{ content: ""; position: absolute; top: 0; left: 0; background: linear-gradient(rgba(0,0,0,.3));}
.newsletter-section .newsletter-option{padding: 8rem 2rem;}
/* .newsletter-section img{width: 100%; height: 100%;} */



footer{background-color: #403226; margin: 0 15px; border-radius: 20px; padding: 20px; color: var(--white); position: relative;}
footer .copyright{position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 14px; background-color: var(--white); color: #403226; padding: 20px 30px; border-radius: 20px; width: 90%; display: flex; justify-content: space-between; align-items: center;}
footer .copyright p{margin-bottom: 0 !important;}
footer .copyright p a{text-decoration: none; color: #000;}
footer .copyright::before{content: ""; position: absolute; bottom: 9px; left: -39px; width: 40px; height: 40px; z-index: 1; background: #c3373700; border-radius: 50%; pointer-events: none; box-shadow: 25px 25px 0 10px var(--white);}
footer .copyright::after{content: ""; position: absolute; bottom: 9px; right: -39px; width: 40px; height: 40px; z-index: 1; background: #c3373700; border-radius: 50%; pointer-events: none; box-shadow: -25px 25px 0 10px var(--white);}
.footer-section{display: flex; justify-content: space-between; padding: 4rem 2rem; }
.footer-section .footer-option{width: 30%;}
.footer-section .footer-option.service-footer{padding-left: 6rem;}
.footer-option.logo{display: flex; justify-content: center; align-items: center;}
.footer-option.logo img{width: 75%;}
.footer-option h4{text-transform: uppercase; color: var(--primary); font-size: 1rem; margin-bottom: 1rem;}
.footer-option ul{list-style: none; padding-left: 0rem !important;}
.footer-option ul li{margin-bottom: 12px;}
.footer-option ul li a{color: var(--white);  text-decoration: none;}
.footer-option ul li i {margin-right: 10px; color: var(--primary);}




.footer-option form input { padding: .5rem; border-radius: 5px; border: 1px solid #cbd5e1; outline: 0;}
.email-signup{position: relative;}
.email-signup input { width: 280px; border: 0; outline: 0;}

.footer-option form button { position: absolute; background-color: var(--primary); color: var(--white); border: 0; outline: 0; padding: .5rem .8rem; border-radius: 5px; font-size: 14px; cursor: pointer; transition: all 0.5s; right: 12px; bottom: 2px;}
.footer-section .social-icons { display: flex; gap: 15px; margin: 20px 0;}
.footer-section .social-icons a { color: #d1d5db; font-size: 14px; transition: color 0.3s ease;}
.footer-section .social-icons a i{ border: 1px solid #d1d5db; padding: 10px 12px; border-radius: 50%;}

.gallery-box{display: flex; justify-content: space-between; align-items: center;}
.gallery-box .gallery-img{width: 350px; height: 280px; padding: 12px; position: relative; overflow: hidden;  filter: grayscale(100%) brightness(0.8) contrast(1.1); transition: filter 0.4s ease;}
.gallery-img p{margin-bottom: 0 !important; position: absolute; bottom: -20%; left: 4%; width: 92%; padding: .5rem 0; background: #00000070; transition: bottom .3s ease-in-out;}
.gallery-img:hover p{bottom: 24%; transition: bottom .3s ease-in-out;}
.gallery-box .gallery-img:hover{filter: grayscale(0%) brightness(1) contrast(1); transition: filter 0.4s ease;}



@media (max-width: 527px){
    .footer-section {
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem;
}
.footer-section .footer-option {
    width: 100%; margin-bottom: 2rem;
}
.footer-section .footer-option.service-footer {
    padding-left: 0rem;
}
.gallery-box{display: none;}
footer .copyright::before, footer .copyright::after{display: none;}
footer .copyright{bottom: -15px; justify-content: center; flex-wrap: wrap;}
footer .copyright p{margin-bottom: 0 !important; text-align: center;}
}



/* ---------------------- gallery section css ---------------------- */

.gallery-section { padding: 60px 20px;}
.gallery-title { text-align: center; font-size: 36px; margin-bottom: 30px;}
.gallery-grid { max-width: 1300px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 15px;}
.gallery-item { overflow: hidden; border-radius: 12px; cursor: pointer; position: relative;}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease;}
.gallery-item:hover img { transform: scale(1.08);}
.gallery-item.big { grid-column: span 2; grid-row: span 2;}
.gallery-item.tall { grid-row: span 2;}
.gallery-item.wide { grid-column: span 2;}
.gallery-item p{position: absolute; left: 1rem; bottom: 1rem; margin-bottom: 0 !important; width: auto; height: auto; padding: 1rem 3rem; background: #00000063; color: #fff; border-radius: 5px; display: none; transition: all 0.3s ease;}
.gallery-item:hover p{display: block;  transition: all 0.3s ease;}
.lightbox { position: fixed; inset: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.92); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 20px;}
.lightbox.active { display: flex;}
.lightbox img { max-width: 90%; max-height: 85vh; object-fit: contain; border-radius: 10px;}
.close-btn,
.prev-btn,
.next-btn { position: absolute; color: #fff; font-size: 32px; background: rgba(255, 255, 255, 0.12); border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.close-btn { top: 20px; right: 20px; font-size: 28px;}
.prev-btn { left: 20px; top: 50%; transform: translateY(-50%);}
.next-btn { right: 20px; top: 50%; transform: translateY(-50%);}
.close-btn:hover,
.prev-btn:hover,
.next-btn:hover { background: rgba(255, 255, 255, 0.25);}

@media (max-width: 992px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px;}

    .gallery-item.big,
    .gallery-item.tall,
    .gallery-item.wide { grid-column: span 1; grid-row: span 1;}

    .gallery-title { font-size: 28px;}

    .close-btn,
    .prev-btn,
    .next-btn { width: 44px; height: 44px; font-size: 24px;}
}