/* google font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* root color */

:root{
    --blue:#0188df;
    --black:#444d53;
    --wight:#fff;
}

/* custom css */
*{
    font-family: "Roboto", sans-serif;
    margin: 0;padding: 0;
    text-decoration: none;
    text-transform: capitalize;
    outline: none;
    box-sizing: border-box;
    transition: all linear .2s;
}

html{
    font-size: 100%;
    overflow-x:hidden;
}

/* button */
.button{
    height: 3.5rem;
    width: 15rem;
    background: var(--blue);
    color: var(--wight);
    font-size: 1.7rem;
    text-transform: capitalize;
    border-radius: .5rem;
    cursor: pointer;
    margin: 1rem 0;
    border: .1rem solid var(--blue);
} 

.button:hover{
    border: .1rem solid var(--blue);
    background-color: var(--wight);
    color: var(--blue);
    letter-spacing: .2rem;
}

        /* heading */
.heading{
    text-align: center;
    font-size: 4rem;
    padding: 1rem;
    padding-top: 8rem;
    color: var(--blue);
    letter-spacing: .1rem;
}

         /* title */
.title{
    text-align: center;
    padding: 0rem 1rem;
    font-size: 2.5rem;
    color: var(--black);
    font-weight: 300;
}

/* header navbar section start */

header{
    width: 96%;
    background: var(--wight);
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content:space-between ;
    padding: 1rem 2rem;
    z-index: 1000;
}





/* logo name */
header a{
    color: var(--black);
    font-size: 2rem;
}

header a:hover{
    color: var(--blue);
}

header .logo{
    font-size: 2.5rem;
    font-weight: bold;
    width: 50%;
    flex-shrink: 0;
}

header .logo span{
    color: var(--blue);
}


/* navbar lik */
header .navbar ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

header .navbar ul li{
    margin: 0 1rem;
}

header .navbar ul li a{
    font-size: 1rem;
    color:var(--black);
}

header .navbar ul li a:hover{
    color: var(--blue);
}

header .fa-bars{
    font-size: 3rem;
    color: var(--blue);
    cursor:pointer;
    display: none;
}

header .fa-times{
    transform: rotate(180deg);
}

.header-active{
    top: 0;
    width: 100%;
    box-shadow: .1rem .3rem rgba(0,0,0,.3);
}


/* navbar active links */
header .navbar ul li a.active {
    color: var(--blue);
    font-weight: bold;
    border-bottom: 2px solid var(--blue);
}


/* header section end */


/* home section start */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* ===== HERO ===== */
.home-hero {
  width: 100%;
  height: 100vh;
  background: url("imageses/bad-baado-44.jpeg") center/cover no-repeat;
  position: relative;
}


.hero-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.hero-overlay h3 {
  font-size: 2.5rem;
  padding-left: 18rem;
  margin-top: 7rem;
  padding-bottom: 0 1rem;
  color: rgb(54, 202, 71);
}

.hero-overlay p {
  margin: 1rem 0;
  padding-left: 27rem;
  padding-bottom: 1rem;
  color: antiquewhite;
  font-size: 1.2rem;

}


.hero-overlay button {
  padding: 0.5rem 1rem;
  cursor: pointer;
   background: var(--wight);
    color: var(--black);
    font-size: 1.2rem;
    text-transform: capitalize;
    border-radius: .5rem;
    cursor: pointer;
    letter-spacing: 0rem;
    border: .1rem solid var(--blue);
    margin: 1rem 0;
}

.hero-overlay button:hover{
    border: .1rem solid var(--blue);
    background-color: var(--blue);
    color: var(--wight);
    letter-spacing: .2rem;
}

/* ===== READ MORE SECTION ===== */
.readmore-section {
  display: none;
  position: fixed;
  inset: 0;
  background: #f5f5f5;
  z-index: 9999;
  overflow-y: auto;
}

/* ===== CARDS ===== */
.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 5rem;
}

.info-card {
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1);
  text-align: center;
  overflow: hidden;
  min-height: 26rem;
  display: flex;
  flex-direction: column;
}

.info-card img {
  width: 100%;
  height: 24rem;
  object-fit: cover;
  background: #f2f2f2;

}

.info-card h3 {
  margin: 1rem 0 0.5rem;
}

.info-card p {
  padding: 0 1rem 1.2rem;
  font-size: 0.95rem;
}

/* BACK BUTTON */
#backToHomeBtn {
    font-size: 1.7rem;

  margin: 1rem auto 2rem;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  letter-spacing: .2rem;
  color: var(--wight);
  background: var(--blue);
  border-radius: .5rem;
  margin-left: 25rem;
  /* margin-bottom: 16rem; */
border: .1rem solid var(--blue);
}

#backToHomeBtn:hover{
        border: .1rem solid var(--blue);
    background-color: var(--wight);
    color: var(--blue);
    letter-spacing: .2rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 64rem) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .cards-container {
    grid-template-columns: 1fr;
    padding: 2rem 1.2rem;
  }

  /* Buttons mobile-ka responsive ka dhigo */
  #learnMoreBtn,
  #backBtn {
    width: 80%;           /* width-ka mobile */
    max-width: 200px;     /* xad u samee */
    font-size: 1rem;      /* font-ka yar mobile */
    padding: 0.8rem 1rem; /* gudaha button-ka */
    margin: 0.5rem auto;  /* center button horizontal */
    display: block;       /* block si center loogu dhigo */
  }
}

/* home  section end */


/* About  section  start */
.about {
  width: 90%;
  margin: 0 auto;
  padding: 4rem 0;
}

.about .heading {
  font-size: 3rem;
  text-align: center;
  color: var(--blue);
}

.about .title {
  font-size: 1.8rem;
  text-align: center;
  color: #555;
  margin-bottom: 3rem;
}

/* Cards Container */
.about .box-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.about .box {
  flex: 1 1 30%;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.about .box:hover {
  transform: translateY(-0.5rem);
}

.about .box .images {
  width: 100%;
  height: 16rem;
  overflow: hidden;
}

.about .box .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about .box .content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about .box .content h3 {
  font-size: 2rem;
  color: var(--blue);
  margin-bottom: 1rem;
}

.about .box .content p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Button */
.readMoreBtn {
  padding: 0.8rem 2rem;
  font-size: 1.4rem;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  align-self: center;
}

.readMoreBtn:hover{
    border: .1rem solid var(--blue);
    background-color: var(--wight);
    color: var(--blue);
    letter-spacing: .2rem;
}

/* About More Sections */
.about-more {
  display: none;
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  padding: 2rem 0;
}

.about-more-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  padding-top: 7rem;
}

.about-more-container .card {
  flex: 1 1 30%;
  margin: 1rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
  
}

.about-more-container .card img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  margin-bottom: 1rem;
  /* padding-top: 5rem; */
}
.about-more .card:hover{
    transform: translateY(-0.5rem);
}

.about-more-container .card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--blue);
}

.about-more-container .card p {
  font-size: 1rem;
  color: #333;
}

.backBtn {
  display: block;
  margin: 2rem auto 0 auto;
  padding: 1rem 2rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
}

.backBtn:hover{
    border: .1rem solid var(--blue);
    background-color: var(--wight);
    color: var(--blue);
    letter-spacing: .2rem;
}

/* Responsive About Section Cards */
@media screen and (max-width: 992px) {
  .about .box-container {
    flex-direction: column;
    align-items: center;
  }
  .about .box {
    flex: 1 1 90%;
  }

  .about-more-container .card {
    flex: 1 1 45%;
  }
}

@media screen and (max-width: 600px) {
  .about .box {
    flex: 1 1 100%;
  }
  .about-more-container .card {
    flex: 1 1 100%;
  }
}
/* About  section  End */


/* card sectuion section start */

.card .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 110rem;      /* xakameeya ballaca guud */
    margin: 0 auto;        /* dhexda keenaya */
}

.card .box-container .box{
    width: 28rem;          /* card-ka la yareeyay */
    height: auto;          /* ka hortag in uu hoos & kor baxo */
    margin: 1.2rem;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    background: #fff;
}

.card .box-container .box img{
    width: 100%;
    height: 32rem;         /* sawirka la yareeyay */
    object-fit: cover;
    display: block;
}

.card .box-container .box .content{
    padding: 1rem 1.3rem;
}

.card .box-container .box .content h2{
    font-size: 2rem;
    text-align: center;
    color: var(--black);
}

.card .box-container .box .content h2:hover{
    color: var(--blue);
    text-decoration: underline;
}

.card .box-container .box .content p{
    font-size: 1.7rem;
    text-align: center;
    color: var(--black);
}

.card .box-container .box .content .icons{
    text-align: center;
}

.card .box-container .box .content .icons a{
    font-size: 2rem;
    color: var(--blue);
    margin: 1rem;
}

/* card sectuion section end */


/* review section start */

.review .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
    max-width: 110rem;   /* xakameeya ballaca guud */
    margin: 0 auto;     /* dhexda keenaya */
}

.review .box-container .box{
    width: 30rem;       /* card-ka la yareeyay */
    text-align: center;
    padding: 1.5rem;
    margin: 2rem 1rem;  /* margin la dhimay */
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    border-radius: .5rem;
    background: #fff;
}

/* images container */
.review .box-container .box .images{
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-bottom: 1rem;
}

/* image */
.review .box-container .box .images img{
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    object-fit: cover;
}

/* quote icon */
.review .box-container .box i{
    font-size: 5rem;
    margin-top: -2rem;
    color: var(--blue);
    opacity: .4;
}

.review .box-container .box p{
    color: var(--black);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    color: var(--black);
    font-weight: bold;
}

.review .box-container .box .info h3{
    color: var(--blue);
    font-size: 1.9rem;
}

.review .box-container .box .info span{
    color: rgb(0, 187, 255);
    font-size: 1rem;
}

/* review section end */
/* booking section start */
.booking {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}

.booking .heading {
    font-size: 2.8rem;
    color: #111;
    margin-bottom: 0.5rem;
}

.booking .title {
    font-size: 1.4rem;
    color: #007bff;
    margin-bottom: 2.5rem;
}

.booking-container {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.booking-container form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.form-group label {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    display: block;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1.3rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #007bff;
}

.form-btns {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-booking,
.btn-clear {
    flex: 1;
    padding: 1rem;
    font-size: 1.3rem;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
}

.btn-booking {
    background: #007bff;
    color: #fff;
}

.btn-booking:hover {
    background: #0056b3;
}

.btn-clear {
    background: #ddd;
}

.btn-clear:hover {
    background: #bbb;
}

@media (max-width: 768px) {
    .form-btns {
        flex-direction: column;
    }
    .booking .heading {
        font-size: 2.2rem;
    }
}
/* booking section end */



/* checj biikng status start */

#checkStatusSection {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

#checkStatusSection input {
  width: 90%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

#checkStatusSection button {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  background: #0d6efd;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

#checkStatusSection button:hover {
  background: #084298;
}

#statusResult {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1rem;
}

@media (max-width: 768px) {
  #checkStatusSection {
    width: 95%;
    padding: 1rem;
  }
}








/* checj biikng status start */

/* blog section start */

.blog .heading{
    color: var(--blue);
    padding-bottom: 0.5rem;
}

.blog .title{
    padding-bottom: 1.5rem;
    font-size: 2rem;
}

.blog{
    padding-bottom: 1.5rem;
}
.blog .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.blog .box-container .box{
    width: 25rem;
    border-radius: .6rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,.25);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* hover effect */
.blog .box-container .box:hover{
    transform: translateY(-1rem);
    box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.35);
}

/* blog images */
.blog .box-container .box img{
    width: 100%;
    height: 18rem;
    object-fit: cover;
    transition: transform .4s ease;
}

.blog .box-container .box:hover img{
    transform: scale(1.05);
}

.blog .box-container .box .content{
    padding: 1.5rem;
    text-align: center;
}

.blog .box-container .box .content h2{
    font-size: 2rem;
    color: var(--blue);
    margin-bottom: .8rem;
}

.blog .box-container .box .content p{
    font-size: 1rem;
    color: var(--black);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

/* blog sticker */
.blog .box-container .box .blog-sticker{
    display: inline-block;
    padding: .4rem 1.2rem;
    font-size: 1.2rem;
    background: var(--blue);
    color: #fff;
    border-radius: 2rem;
}

/* blog section end */


/* footer section start */

.footer{
    background: var(--black);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
    width: 100%;
}

.footer .box{
    width: 20rem;
    margin: 2rem;
    text-align: center;
}

.footer .box:nth-child(1){
    text-align: left;
}
/* logo */
.footer .box .logo{
    padding: 2rem 0;
    font: 3rem;
    color: var(--wight);
}

.footer .box .logo:hover{
    color: var(--blue);
}

.footer .box .logo span{
    color: var(--blue);
}

.footer .box p{
    font-size: 0.8rem;
    color: var(--wight);
}

.footer .box a{
    color: var(--wight);
    font-size: 1rem;
    display: block;
    padding: .2rem 0;
}

.footer .box a:hover{
    text-decoration: underline;
}

.footer .credit{
    width: 85%;
    padding-top: 1rem;
    font-size: 1.5rem;
    color: var(--wight);
    text-align: center;
    border-top: .2rem solid var(--wight);
}

.footer .credit span{
    color: var(--blue);
    text-decoration: underline;
    letter-spacing: .5rem;
}

/* footer section end */



/* media query */
@media(max-width:768px){
    
html{
    font-size: 55%;
}

header .fa-bars{
    display: block;
}

header .navbar{
    position:fixed;
    top: -100rem; left:0;
    width: 100%;
    background: var(--wight);
    opacity: 0;
}

header .navbar ul{
    flex-flow: column;
    padding: 2rem;
}

header .navbar ul li{
    margin: 1rem;
    width: 100%;text-align: center;
}

header .navbar ul li a{
    font-size: 1.5rem;
    display: block;
}

header .nav-toggle{
    top: 5.5rem;
    opacity: 1;
}


    /* home media query */
    .home .row{
        flex-flow: column;
    }
    .home .row .content{
        text-align: right;
    }
/* home images */
    .home .row .images img{
        width: 100%;
    }
    /* about media query */
  .about .box-container .box{
    flex-flow: column;
    width: 90%;
  }
  .about .box-container .box:nth-child(even){
    flex-flow: column;
  }
  .about .box-container .box .images{
    width: 100%;
  }
  .about .box-container .box .content{
    width: 100%;
  }
  
}

body{
    overflow-x: hidden;
}


/* ================= ADMIN ACCESS ================= */
/* ADMIN ACCESS BUTTON */
.admin-access { 
  text-align: center;
   margin: 2rem 0;
   }
.admin-login-btn {
  background: linear-gradient(135deg, #0d6efd, #084298);
  color: #fff;
   padding: 0.8rem 1.6rem;
    border-radius: 30px;
  border: none;
   font-size: 0.95rem;
    cursor: pointer;
     transition: 0.3s;
}
.admin-login-btn:hover { 
  transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(0,0,0,0.25); }

/* LOGIN OVERLAY */
.admin-login-overlay {
   position: fixed;
   inset:0;
   background: rgba(0,0,0,0.6);
   display: none;
   align-items: center;
   justify-content: center;
    z-index: 999; 
  }
.admin-login-box { 
  background:#fff; 
  padding:2rem; 
  width:90%; 
  max-width:350px; 
  border-radius:12px; 
  text-align:center; 
}
.admin-login-box h2 { 
  margin-bottom:1rem; 
  color:#0d6efd; 
}
.admin-login-box input { 
  width:100%; 
  padding:0.7rem; 
  margin-bottom:0.8rem; 
  border-radius:6px; 
  border:1px solid #ccc; 
}
.admin-login-box button { 
  width:100%; 
  padding:0.7rem; 
  background:#0d6efd; 
  color:#fff; 
  border:none; 
  border-radius:6px; 
  cursor:pointer; 
}
#loginError { 
  color:red; 
  font-size:0.85rem;
   margin-top:0.5rem; 
  }

/* ADMIN PANEL */
.admin-panel { 
  padding:2rem 1rem; 
}
.hidden { 
  display:none; 
}
.admin-title {
   text-align:center; 
   font-size:2rem; 
   color:#0d6efd; 
  }
.admin-subtitle { 
  text-align:center; 
  color:#555; 
  margin-bottom:1.5rem; 
}
.admin-actions { 
  display:flex; 
  justify-content:center; 
  gap:1rem; 
  flex-wrap:wrap; 
  margin-bottom:1rem; 
}
select, .btn { 
  padding:0.5rem 1rem; 
  border-radius:6px; 
  border:1px solid #ccc; 
  cursor:pointer; 
  font-size:0.85rem; 
  transition:0.3s;
 }
select:hover, .btn:hover { 
  opacity:0.85; 
}
.btn-logout { 
  background:#dc3545; 
  color:#fff; 
  border:none;
 }
.btn-logout:hover { 
  background:#b02a37; 
}

/* TABLE */
.table-wrapper { 
  overflow-x:auto; 
  margin-top:1rem; 
}
table { 
  width:100%; 
  border-collapse:collapse; 
  background:#fff; 
  border-radius:10px; 
  overflow:hidden; 
}
thead { 
  background:#0d6efd; 
  color:#fff; 
}
thead th { 
  padding:0.75rem; 
  font-size:0.8rem; 
  text-transform:uppercase;
 }
tbody td { 
  padding:0.7rem; 
  font-size:0.85rem; 
  border-bottom:1px solid #eee; 
  text-align:center; 
}
tbody tr:hover { 
  background:#f1f5ff; 
}
.delete-btn { 
  background:#dc3545; 
  color:#fff; 
  border:none; 
  padding:0.4rem 0.7rem; 
  border-radius:4px; 
  cursor:pointer; 
  margin:0 2px; 
}
.approve-btn { 
  background:#198754; 
  color:#fff; 
  border:none; 
  padding:0.4rem 0.7rem; 
  border-radius:4px; 
  cursor:pointer; 
  margin:0 2px; 
}
.reject-btn { 
  background:#ffc107; 
  color:#000; 
  border:none; 
  padding:0.4rem 0.7rem; 
  border-radius:4px; 
  cursor:pointer; 
  margin:0 2px; 
}

/* RESPONSIVE */
@media(max-width:768px){
  .admin-title{
    font-size:1.5rem;
  }
  .admin-subtitle{
    font-size:1rem;
  }
  .admin-actions{
    flex-direction:column; 
    align-items:center;
  }
  select, .btn{
    width:100%;
  }
  tbody td{
    font-size:0.75rem; 
    padding:0.5rem;
  }
}