/* =====================================================
   MOBILE POLISH - PART 1
   (Add at the END of responsive.css)
===================================================== */

@media (max-width:768px){

/* Better spacing */

.container{
    width:92%;
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
}

/* Hero */

.hero{

    padding-top:130px !important;
    padding-bottom:70px !important;

}

.hero-content{

    padding:0 10px;

}

.hero h1{

    font-size:36px !important;
    line-height:1.25;

}

.hero p{

    font-size:17px !important;
    line-height:1.8;
    margin:20px 0 30px;

}

.hero-buttons{

    width:100%;
    gap:15px;

}

.hero-buttons a{

    width:100%;
    max-width:100%;
    padding:16px 20px;
    box-sizing:border-box;

}

/* Booking Search */

.search-form{

    flex-direction:column;
    align-items:stretch;
    gap:15px;

}

.search-form input,
.search-form select,
.search-form button{

    width:100%;
    box-sizing:border-box;

}

/* Property Cards */

.property-card{

    overflow:hidden;

}

.property-info{

    padding:22px;

}

.property-info .btn-primary,
.property-info .btn-secondary{

    width:100%;
    display:block;
    text-align:center;
    margin-top:15px;
    box-sizing:border-box;

}

}/* =====================================================
   MOBILE POLISH - PART 2
===================================================== */

@media (max-width:768px){

/* ==========================================
   BOOKING PAGE
========================================== */

.booking-wrapper{

    display:flex;
    flex-direction:column;
    gap:30px;

}

.booking-left,
.booking-right{

    width:100%;

}

.booking-summary{

    padding:25px;

}

.booking-summary h2{

    font-size:28px;

}

.summary-row{

    font-size:16px;

}

.booking-btn,
.whatsapp-btn{

    width:100%;
    display:block;
    text-align:center;
    box-sizing:border-box;
    margin-top:15px;

}

/* ==========================================
   CONTACT PAGE
========================================== */

/* ==========================================
CONTACT PAGE MOBILE
========================================== */

.contact-page{

padding:60px 0;

}

.contact-grid{

display:flex;
flex-direction:column;
gap:30px;

}

.contact-info,
.contact-form-box{

width:100%;
padding:22px;
box-sizing:border-box;

}

.contact-info h2,
.contact-form-box h2{

font-size:30px;
margin-bottom:20px;

}

.contact-item{

margin-bottom:22px;

}

.contact-item strong{

display:block;
margin-top:8px;
margin-bottom:6px;
font-size:18px;

}

.contact-item p{

display:block;
margin:0;
line-height:1.8;
word-break:break-word;

}

/* FORM */

.contact-form-box form{

display:flex;
flex-direction:column;
align-items:stretch;

}

.contact-form-box label{

display:block;
width:100%;
margin:15px 0 8px;
font-size:16px;
font-weight:600;

}

.contact-form-box input,
.contact-form-box textarea{

display:block;
width:100%;
margin:0;
padding:14px;
box-sizing:border-box;

}

.contact-form-box textarea{

min-height:140px;

}

.contact-btn{

display:block;
width:100%;
margin-top:22px;

}

/* ==========================================
   ABOUT PAGE
========================================== */

.about-grid{

    grid-template-columns:1fr;
    gap:35px;

}

.about-image img{

    width:100%;
    height:auto;

}

.about-features{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;
    gap:20px;

}

.cta-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.cta-buttons a{

    width:100%;
    box-sizing:border-box;

}

/* ==========================================
   REVIEWS
========================================== */

.reviews-grid{

    grid-template-columns:1fr;
    gap:25px;

}

.review-card{

    padding:22px;

}

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

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-item img{

    width:100%;
    height:auto;
    display:block;

}

/* ==========================================
   PROPERTY PAGE
========================================== */

.property-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:35px;

}

.property-left,
.booking-card{

    width:100%;

}

.thumbnail-row{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;

}

.booking-card{

    margin-top:25px;

}

/* ==========================================
   FOOTER
========================================== */

.footer-grid{

    grid-template-columns:1fr;
    gap:30px;
    text-align:center;

}

.footer-bottom{

    text-align:center;

}

/* ==========================================
   WHATSAPP FLOAT
========================================== */

.whatsapp-float{

    right:15px;
    bottom:15px;
    width:58px;
    height:58px;

}

}/* =====================================================
   MOBILE POLISH - PART 3 (FINAL)
===================================================== */

@media (max-width:768px){

/* ==========================================
   SECTION SPACING
========================================== */

section{

    padding-left:0;
    padding-right:0;

}

.section-title{

    margin-bottom:35px;
    text-align:center;

}

.section-title h2{

    font-size:32px !important;
    line-height:1.3;
    margin-bottom:15px;

}

.section-title p{

    font-size:16px;
    line-height:1.8;

}

/* ==========================================
   HEADINGS
========================================== */

h1{

    font-size:34px !important;
    line-height:1.3;

}

h2{

    font-size:30px !important;
    line-height:1.3;

}

h3{

    font-size:24px !important;

}

p{

    line-height:1.8;

}

/* ==========================================
   BUTTONS
========================================== */

.btn,
.btn-primary,
.btn-secondary,
.book-btn,
.contact-btn,
.booking-btn{

    width:100%;
    display:block;
    text-align:center;
    box-sizing:border-box;

}

/* ==========================================
   TABLES
========================================== */

table{

    display:block;
    overflow-x:auto;

}

/* ==========================================
   IMAGES
========================================== */

img{

    max-width:100%;
    height:auto;

}

/* ==========================================
   FORMS
========================================== */

input,
select,
textarea{

    font-size:16px;

}

/* ==========================================
   PROPERTY DETAILS
========================================== */

.property-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

}

.amenities-grid{

    grid-template-columns:1fr;

}

/* ==========================================
   BOOKING SUCCESS
========================================== */

.success-card{

    padding:30px 20px;

}

.success-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.success-buttons a{

    width:100%;
    box-sizing:border-box;

}

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

.faq-item{

    padding:18px;

}

/* ==========================================
   STATS
========================================== */

.stat-box{

    padding:25px;

}

.stat-box h2{

    font-size:36px !important;

}

/* ==========================================
   NAVBAR SPACING
========================================== */

body{

    padding-top:90px;

}

}