/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/
 @import url(default_them.css);
 @import url(preloader.css);
 

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

.container {
     max-width: 1170px;
}
.apartments-container{
    max-width: 1170px;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #000000;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

.btn :hover{
    background-color: #001c53;
}
img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader_bga{
    position: fixed;
     z-index: 9999999;
     background: #fff;
     justify-content: center;
     align-self: center;
     align-items: center;
     width: 25%;
     height: 25%;
     margin-top: 350px;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*-- navigation--*/

.navigation.navbar {
     float: right;
     padding-top: 14px !important;
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 7px 0px 27px 0px;
     margin: 0 22px;
     color: #010101;
     font-size: 12px;
     line-height: 20px;
     font-weight: 500;
     text-transform: uppercase;
     border-bottom: #fff solid 3px;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #fe0000;
     border-bottom: #fe0000 solid 3px;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #fe0000;
     border-bottom: #fe0000 solid 3px;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.header {
     width: 100%;
     height: 86px;
     padding: 15px 0px 15px 0px;
     background: #fff;
}


/** banner section **/

.banner_main {
     position: relative;
}

.banner .carousel-indicators li {
     width: 20px;
     height: 20px;
     border-radius: 30px;
     background: #000;
}

.banner .carousel-indicators .active {
     background-color: #fe0000;
}

.booking_ocline {
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
}

.book_room {
     background-color: #000000c7;
     padding: 30px 35px;
     border-left: #ff0909 solid 5px;
}

.book_room h1 {
     font-weight: 500;
     font-size: 30px;
     line-height: 30px;
     color: #fff;
     padding-bottom: 20px;
     text-transform: uppercase;
     text-align: center;
}

.book_now span {
     display: block;
     color: #fff;
     font-size: 18px;
     padding-bottom: 5px;
}

.book_now .online_book {
     width: 100%;
     height: 50px;
     border: #fff solid 1px;
     background-color: transparent;
     color: #fff;
     padding: 0 10px;
     padding-right: 61px;
     margin-bottom: 25px;
     position: relative;
}

.date_cua {
     position: absolute;
     width: 29px;
     height: 29px;
     top: 48px;
     background-repeat: no-repeat;
     right: 30px;
}

.av-btn{
     background-color: #0f1521;
     max-width: 189px;
     text-align: center;
     width: 100%;
     margin: 0 auto;
     padding: 10px 0;
     color: #fff;
     font-size: 14px;
     transition: ease-in 0.5s;
     display: block;  
}



.book_btn {
     background-color: #fe0000;
     max-width: 189px;
     text-align: center;
     width: 100%;
     margin: 0 auto;
     padding: 10px 0;
     border-radius: 50px;
     color: #fff;
     font-size: 20px;
     transition: ease-in 0.5s;
     display: block;
}

.book_btn:hover {
     background-color: #fff;
     color: #fe0000;
     transition: ease-in 0.5s;
}

.carousel-control-next,
.carousel-control-prev {
     display: none;
}

.carousel-indicators {
     right: inherit;
     bottom: 53px;
     margin-left: 9%;
}


/** end banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 40px;
}

.titlepage h2 {
     font-size: 40px;
     color: #121212;
     line-height: 45px;
     font-weight: bold;
     text-transform: uppercase;
     padding: 0;
}

.titlepage h2::before {
     position: absolute;
     content: "";
     background-color: #ff0909;
     width: 20px;
     height: 4px;
     transform: rotate(-36deg);
}

.titlepage h2::after {
     position: absolute;
     content: "";
     background-color: #ff0909;
     width: 20px;
     height: 4px;
     transform: rotate(-36deg);
     bottom: 10px;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.read_more {
     font-size: 17px;
     background-color: #121212;
     color: #fff;
     padding: 8px 0px;
     width: 100%;
     max-width: 144px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     font-weight: 500;
     border-radius: 30px;
}

.read_more:hover {
     background: #fe0000;
     color: #fff;
     transition: ease-in all 0.5s;
}

/** about section **/

.about {
     background-color: #fff;
     padding-top: 85px;
}

.about .titlepage {
     text-align: left;
     padding-bottom: 0;
     max-width: 443px;
     width: 100%;
     float: right;
}

.about .titlepage h2 {
     margin-bottom: 35px;
}

.about .titlepage p {
     font-weight: 400;
     font-size: 17px;
     line-height: 28px;
     padding-bottom: 35px;
}

.about_img {
     margin-right: 40px;
     overflow: hidden;
}

.about_img figure {
     margin: 0;
}

.about_img figure img {
     width: 100%;
     transition: all .5s;
}

.about_img figure img:hover {
     transform: scale(1.2);
}
/** end about section **/

/** our_room section **/

.our_room {
    
     padding-top: 0 !important;
     margin-top: 0 !important;
     margin-block-start: 0 !important;
 }

.room {
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    transform: rotateY(-6px);
} 
 
 .our_room .titlepage {
     text-align: center;
 }
 
 .our_room .titlepage p {
     color: #121212;
     font-size: 17px;
     margin-top: 20px;
 }
 
 .our_room .room {
     background-color: #d8d8d83a;
     margin-top: 20px !important; /* Adjust this if needed */
     margin-bottom: 30px;
     transition: ease-in all 0.5s;
     box-shadow: #000000;
 }
 
 
 .our_room .room .room_img {
     overflow: hidden;
 }
 
 .our_room .room .room_img figure {
     margin: 0;
 }
 
 .our_room .room .room_img figure img {
     width: 100%;
     transition: all 0.5s;
 }
 
 .our_room .room .room_img figure img:hover {
     transform: scale(1.5);
 }
 
 .our_room .room .bed_room {
     padding: 33px 30px;
 }
 
 .our_room .room .bed_room h3 {
     color: #121212;
     font-size: 25px;
     line-height: 20px;
     font-weight: 500;
     transition: ease-in all 0.5s;
     margin: auto;
 }
 
 #serv_hover:hover.room {
     cursor: pointer;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
     transition: ease-in all 0.5s;
     border: #0056b3;
     transform: translateY(-5px);


 } 


/** end our_room section **/


/** gallery  section **/

.gallery {
     padding-top: 60px;
}

.gallery .titlepage {
     text-align: center;
}

.gallery .gallery_img {
     overflow: hidden;
     margin-bottom: 30px;
}

.gallery .gallery_img figure {
     margin: 0;
}

.gallery .gallery_img figure img {
     width: 100%;
     transition: all .5s;
}

.gallery .gallery_img figure img:hover {
     transform: scale(1.2);
}


/** end gallery  section **/


/** blog section **/

.blog {
     background: url(../assets/images/blog_bg.jpg);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     padding: 60px 0 30px 0;
     margin-top: 60px;
}

.blog .titlepage {
     text-align: center;
}

.blog .titlepage h2 {
     color: #fff;
}

.blog .titlepage p {
     color: #fff;
     font-size: 17px;
     margin-top: 20px;
}

.blog .blog_box {
     text-align: left;
     background-color: #fff;
     margin-bottom: 30px;
     transition: ease-in all 0.5s;
}

.blog .blog_box .blog_img {
     overflow: hidden;
}

.blog .blog_box .blog_img figure {
     margin: 0;
}

.blog .blog_box .blog_img figure img {
     width: 100%;
     transition: all .5s;
}

.blog .blog_box .blog_img figure img:hover {
     transform: scale(1.2);
}

.blog .blog_box .blog_room {
     padding: 33px 30px;
     text-align: left;
}

.blog .blog_box .blog_room h3 {
     color: #121212;
     font-size: 25px;
     line-height: 20px;
     font-weight: 500;
     padding-bottom: 5px;
     transition: ease-in all 0.5s;
     margin: auto;
}

.blog .blog_box .blog_room span {
     font-size: 15px;
     color: #ff0909;
     font-weight: bold;
     margin-bottom: 10px;
     display: block;
}

.blog .blog_box .blog_room p {
     font-size: 14px;
     line-height: 20px;
}


/** end blog section **/


/** contact section **/

.contact {
     background: #fff;
     margin-top: 90px;
}

.main_form .contactus {
     border: #fff solid 1px;
     padding: 0 15px;
     margin-bottom: 25px;
     width: 100%;
     height: 58px;
     background: #fff;
     color: #8a8787;
     font-size: 18px;
     font-weight: normal;
     box-shadow: 2px 0px 6px rgba(255, 9, 9, 0.20);
}

.main_form input{
     color: #8a8787;
}

.main_form .textarea {
     border: #fff solid 1px;
     margin-bottom: 25px;
     width: 100%;
     background: #fff;
     color: #000000;
     font-size: 18px;
     font-weight: normal;
     padding: 12px 15px 0 15px;
     box-shadow: 2px 0px 6px rgba(255, 9, 9, 0.20);
     height: 150px;
}

.main_form .send_btn {
     font-size: 22px;
     transition: ease-in all 0.5s;
     background-color: #000000;
     text-transform: uppercase;
     color: #fff;
     padding: 10px 0px;
     max-width: 193px;
     width: 100%;
     display: block;
     margin-top: 10px !important;
     font-weight: 500;
     border-radius: 50px;
}

.main_form .send_btn:hover {
    background-color: #353232;
     transition: ease-in all 0.5s;
     color: #fff;
}

#request *::placeholder {
     color: #000000;
     opacity: 1;
}

.map figure {
     margin: 0;
}

.map figure img {
     width: 100%;
}


/** end contact section **/


/** footer **/

.footer {
    background: #0f1521;
     margin-top: 90px;
     padding-top: 70px;
     text-align: center;
}

.footer h3 {
     font-weight: 600;
     font-size: 25px;
     line-height: 24px;
     text-align: left;
     color: #fff;
     margin-bottom: 15px;
     border-bottom: #ff0909 solid 3px;
     padding-bottom: 3px;
     display: table;
}

ul.conta li {
     color: #fff;
     text-align: left;
     padding-bottom: 20px;
     font-size: 16px;
}

ul.conta li i {
     padding-right: 15px;
     text-align: center;
     font-size: 20px;
}

ul.conta li a {
     color: #fff;
}

ul.link_menu li {
     display: block;
     text-align: left;
}

ul.link_menu li.active a {
     color: #ff0909;
}

ul.link_menu li a {
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     display: block;
     width: -moz-max-content;
}

ul.link_menu li a:hover {
     color: #ff0909;
}

.bottom_form {
     display: none;
     flex-wrap: wrap;
     margin-top: 32px;
}

.bottom_form h3 {
     font-weight: 600;
     font-size: 20px;
     line-height: 25px;
     text-align: left;
     color: #fff;
     padding-top: 12px;
     margin-right: 93px;
     text-transform: uppercase;
     border: inherit;
}

.bottom_form .enter {
     border: inherit;
     padding: 0px 19px;
     width: 100%;
     height: 45px;
     background: #fffffff2;
     color: #ccc8c8;
     font-size: 17px;
     font-weight: 300;
     float: left;
     margin-bottom: 20px;
}

.sub_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #fff;
     color: #ff0909;
     padding: 8px 0px;
     max-width: 147px;
     width: 100%;
     font-weight: 500;
     text-transform: uppercase;
     height: 47px;
}

.sub_btn:hover {
     background-color: #ff0909;
     transition: ease-in all 0.5s;
     color: #fff;
}

ul.social_icon {
     padding-top: 24px;
     width: 100%;
     float: left;
     text-align: left;
}

ul.social_icon li {
     display: inline-block;
}

ul.social_icon li a {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 27px;
     border-radius: 30px;
     margin: 0 9px;
     color: #fff;
}

ul.social_icon li a:hover {
     color: #ff0909;
}

.copyright {
     margin-top: 60px;
     padding-bottom: 20px;
     margin-bottom: -35px;
     background-color: #fff;
     border: #f1f1f1 solid 3px;
     border-right: inherit;
     border-left: inherit;
}

.copyright p {
     color: #000;
     font-size: 18px;
     line-height: 22px;
     text-align: center;
     border-top: #a3aec6 solid 1px;
     padding-top: 25px;
     font-weight: normal;
}

.copyright a {
     color: #000;
}

.copyright a:hover {
     color: #ff0909;
}


/** end footer **/


/**  inner page css **/
.back_re {
     height: 70px;
}
.back_re .title {
     text-align: center;
}

.back_re .title h2 {
color: black;
font-size: 30px;
padding: 20px 0;
font-weight: 600;
text-transform: uppercase;
line-height: 35px;
}
.margin_0 {
     margin:0 !important;
}


.inner_page .gallery {
     padding-top: 90px;
}
.inner_page .blog {
     margin-top: 90px;
}

.center-desk{
     margin-top: 13px;
     margin-left: -40px;
}

.logo img[src='images/logo.png'] {
     margin-left: 100px;
     margin-top: 5px;
     height: 50px;
 }
 .search{
     background: linear-gradient(135deg, #f4ccc5 0%, #ffede9 100%);
     margin-bottom: 0px;
 } 

 .container {
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .search-box {
     margin-top: 10px; 
     margin-bottom: 30px;
     margin-left: 0px;
     border: #010101;
  }
  
  #searchInput {
     padding: 10px;
     font-size: 16px;
     width: 100%;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 5px;
  }

.first-slide img[src='images/9.webp'] {
     width: 4000px; 
}  

.carousel-item img {
     width: 100%; /* Makes the image take the full width of the container */
     height: auto; /* Keeps the aspect ratio */
 }

 .back-btn {
     position: fixed;
     top: 20px;
     left: 20px;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 10px 15px;
     border-radius: 30px;
     text-align: center;
     text-decoration: none;
     font-weight: bold;
     z-index: 1000;
 }
 .image-gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
 }
 .image-gallery img {
     max-width: 300px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 .description {
     text-align: center;
     margin-top: 20px;
 }

 .back-btn {
     position: fixed;
     top: 20px;
     left: 20px;
     background-color: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 10px 15px;
     border-radius: 30px;
     text-align: center;
     text-decoration: none;
     font-weight: bold;
     z-index: 1000;
 }
 .image-gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
 }
 .image-gallery img {
     max-width: 300px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 .description {
     text-align: center;
     margin-top: 20px;
 }
  /* Custom styling for fixed back button */
  .back-btn {
     position: fixed;
     top: 80px; /* Positioning below the header */
     left: 20px;
     background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent */
     color: white;
     padding: 10px 15px;
     border-radius: 30px;
     text-align: center;
     text-decoration: none;
     font-weight: bold;
     font-size: 16px;
     z-index: 1000;
     transition: background-color 0.3s;
 }
 .back-btn:hover {
     background-color: rgba(0, 0, 0, 0.85);
 }

 .hero-section {
     background: url('images/hero-bg.jpg') no-repeat center;
     background-size: cover;
     color: white;
     padding: 30px 0;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 }

 .our-room .room {
     transition: transform 0.3s;
 }
 .our-room .serv_hover:hover {
     transform: scale(1.05);
 }
 .social_icon a {
     margin: 0 10px;
     color: #fff;
 }
 .footer {
     background: #333;
     color: #fff;
     padding: 30px 0;
 }
 .footer h3 {
     margin-bottom: 20px;
 }


 /** Advertisment section **/
/* Main Container Styling */
/* Main Container */
.advert-form-section {
    background-color: #ffffff !important; /* Ensure white background */
    padding: 40px 30px;
    border-radius: 8px;
    max-width: 700px;
    margin: 40px auto;
    font-family: 'Arial', sans-serif;
}
 
.advert-container {
    background-color: #ffffff !important; /* Ensure white background */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.advert-form {
    background-color: transparent !important; /* Ensure no background color conflict */
}
 
 .advert-form-section h2 {
     font-size: 28px;
     color: #333333;
     margin-bottom: 25px;
     text-align: center;
     font-weight: 700;
     letter-spacing: 1px;
 }
 
 /* Form Styling */
 .advert-form .input-group {
     margin-bottom: 25px;
 }
 
 .advert-form .input-group label {
     display: block;
     font-size: 16px;
     font-weight: 600;
     color: #555555;
     margin-bottom: 8px;
 }
 
 .advert-form textarea,
 .advert-form input[type="file"] {
     width: 100%;
     padding: 15px;
     border: 2px solid #cccccc;
     border-radius: 6px;
     transition: border-color 0.3s, box-shadow 0.3s;
     font-size: 15px;
     color: #333;
     background-color: #f9f9f9;
 }
 
 .advert-form textarea:focus,
 .advert-form input[type="file"]:focus {
     border-color: #5c85d6;
     box-shadow: 0 0 8px rgba(92, 133, 214, 0.2);
     outline: none;
 }
 
 .advert-form textarea {
     resize: vertical;
     min-height: 180px;
     width: 580px;
     font-family: 'Arial', sans-serif;
 }
 /* Submit Button */
 .submit-btn {
     display: block;
     width: 100%;
     padding: 15px;
     background-color: #ff5a5a;
     color: #ffffff;
     border: none;
     border-radius: 6px;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     text-transform: uppercase;
     transition: background-color 0.3s, transform 0.2s;
 }
 
 .submit-btn:hover {
    background-color: #001c53;
     transform: translateY(-2px);
 }
 
 .submit-btn:active {
     background-color: #d94a4a;
     transform: translateY(0);
 }  

 html, body {
     height: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
 }
 
 .main-layout {
     flex: 1; /* Ensures the main content takes up the remaining space */
 }
 
 .footer {
     background: #0f1521;
     margin-top: 20px;
     padding-top: 70px;
     text-align: center;
     color: white;
 }
 
 
 .adv {
     padding-top: 0 !important;
     margin-top: 0 !important;
     margin-block-start: 0 !important;
 }

 .adv .container {
     display: grid;
     place-items: center; /* Centers the child both horizontally and vertically */ 
 }


 
 /** Admin log-in section **/
 /* Login Section Styling */
.login-section {
     margin-top: 60px;
     margin-bottom: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 60vh;
     background-color: transparent;
 }
 
 /* Container Styling */
 .login-container {
     background-color: #ffffff;
     padding: 50px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
     border-radius: 8px;
     width: 500px;
     text-align: center;
     font-family: Arial, sans-serif;
 }
 
 /* Header */
 .login-container h2 {
     font-size: 24px;
     color: #2d3436;
     font-weight: bold;
     margin-bottom: 30px;
 }
 
 /* Input Fields */
 .input-group input {
     width: 100%;
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 16px;
     background-color: #f9f9f9;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .input-group input:focus {
     border-color: #2980b9;
     box-shadow: 0 0 5px rgba(41, 128, 185, 0.3);
     outline: none;
 }
 
 /* Login Button */
 .login-btn {
     width: 100%;
     padding: 15px;
     background: #0f1521;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .login-btn:hover {
     background-color: #04085f;
     transform: translateY(-3px);
 }
 
 .login-btn:active {
     background-color: #041057;
     transform: translateY(0);
 }

 /** my booking section **/
/* Search Filters Styling */
.search-filters {
     padding: 10px;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }
 
 .search-filters select,
 .search-filters input,
 .search-filters button {
     padding: 10px;
     margin: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
 
 /* Booking Table Styling */
 #bookingsTable {
     width: 100%;
     margin: 0px auto;
     border-collapse: collapse;
 }
 
 #bookingsTable th, #bookingsTable td {
     padding: 10px;
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
 
 #bookingsTable th {
     background-color: #000e1d;
     color: #fff;
 }
 
 .confirmed {
     color: green;
     font-weight: bold;
 }
 
 /* Pagination Controls */
 .pagination-controls {
     text-align: center;
     margin-top: 15px;
 }
 
 .pagination-btn {
     padding: 8px 12px;
     margin: 0 5px;
     cursor: pointer;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 
 .pagination-btn.active {
     background-color: #000c27;
     color: #fff;
     border-color: #000c27;
 }
 
 /* Flatpickr Date Picker Custom Styles */
 .flatpickr-presets {
     display: flex;
     gap: 10px;
     padding: 10px;
 }
 
 .preset-button {
     background-color: #007bff;
     color: #fff;
     border: none;
     padding: 5px 10px;
     border-radius: 4px;
     cursor: pointer;
 }
 
 .preset-button:hover {
     background-color: #0056b3;
 }

 .table-wrapper {
     overflow-x: auto;
     width: 100%;
 }
 
 #bookingsTable {
     width: 100%;
     border-collapse: collapse;
     min-width: 1200px; /* Adjust this as needed for a wider table */
 }
 
 #bookingsTable th, #bookingsTable td {
     padding: 12px 15px;
     text-align: left;
     white-space: nowrap; /* Prevent text from wrapping within cells */
 }
 
 .pagination-controls {
     margin-top: 10px;
     display: flex;
     justify-content: center;
 }

 .filter-buttons {
     background-color: #000e1d; /* Light red color */
     color: #fff;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 .filter-buttons:hover {
    background-color: #011f3f; /* Darker red for hover */
    transform: translateY(-3px);
 }
 
 .booking-error {
     color: red; 
     display: none; 
     font-weight: bold; 
     font-size: 15px;
     margin-left: 10px;
 }
 
 /**Status color control*/
 .status {
     font-weight: bold;
 }
 
 /* Confirmed status: green */
.status-confirmed {
    color: green;
    font-weight: bold;
}

/* Canceled status: red */
.status-canceled {
    color: red;
    font-weight: bold;
}

 
 /* Add hover effect to table rows */
#bookingsTable tbody tr:hover {
     background-color: #b6b7ca; /* Light gray on hover */
     cursor: pointer;
     transition: background-color 0.3s ease; /* Smooth transition */
 }
 
 /* Optional: Adjust text color or styles for the hovered row */
 #bookingsTable tbody tr:hover td {
     color: #333; /* Darker text color on hover */
 }
 
 /*Emoji picking styles */
 /* Custom Styles */
 .advert-form-section {
     background-color: transparent; /* Adjust background color */
     
 }
 
 .room {
     border-radius: 12px;
     border: 1px;
     background: white;
     font-size: 15px;
        border: 0;
       border-radius: 5px;
       -webkit-box-shadow:0px 0px 6px var(--rayal-white-borders);
       -moz-box-shadow:0px 0px 6px var(--rayal-white-borders);
       cursor: pointer;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

 }
 
 .btn-primary {
    background-color: #0f1521;/* Your brand color */
     border: none;
 }
 
 .btn-primary:hover {
    background-color: #001d58; /* Darker hover color */
 }
 
 /* Emoji Picker Container Styling */
 /* Position the emoji picker relative to the emoji button */
 .emoji-menu {
     position: absolute;
     top: 88%;
     margin-right: 162px;
     transform: translateX(10px); /* Add spacing between button and picker */
     z-index: 999;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 5px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     width: 600px; /* Adjust the width here */
 }
 
 
 /* Ensure the emoji icon is positioned relative for correct placement */
 .emoji-picker-icon-container {
     position: relative;
 }


 /* Optional: Style the emoji button to be consistent */
 #emoji-trigger {
     background: transparent;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     transition: color 0.3s ease;
 }
 
 #emoji-trigger:hover {
     color: #007bff; /* Blue on hover */
 }
 
 /* Position the picker relative to the emoji button (adjust if necessary) */
 .input-group {
     position: relative;
 }
 
 #pickerContainer {
     top: 100%; /* Position below the emoji button */
     left: 0;
     margin-top: 5px; /* Small gap below the button */
 }
 

 /* Style and position the generated emoji picker icon */
/* Position the generated emoji icon container below the textarea */
.input-group .emoji-picker-icon {
     display: inline-flex;
     margin-top: -2px; /* Adjusts space between textarea and emoji icon */
     margin-left: 10px;
     font-size: 1.5rem; /* Adjust icon size */
     cursor: pointer;
     position: relative; /* Allows more control over position adjustments */
 }
 
 /* Optional: Center the icon within the input-group */
 .input-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
 
 /* Style for the textarea */
.ad-texto {
     width: 400px; /* Make it responsive within the container */
     max-width: 400px; /* Prevent overflow beyond container */
     height: 150px; /* Set a fixed height */
     max-height: 150px; /* Ensure height does not exceed this value */
     resize: none; /* Disable manual resizing by the user */
     overflow-y: auto; /* Show vertical scrollbar if text overflows */
     padding: 10px; /* Add some padding for better readability */
     border: 1px solid #ccc; /* Optional: border styling */
     border-radius: 5px; /* Optional: rounded corners */
     font-family: Arial, sans-serif; /* Optional: font style */
     font-size: 14px; /* Optional: font size */
     line-height: 1.5; /* Optional: line height for readability */
 }

 




 /* KHALIDI CHANGES : Styles for the red button */
.btn-red {
    background-color: #0f1521;
 }
 
 .btn-red:hover {
    background-color: #001c53;
 }
 
 

/*Gallery CSS*/
 .gallery {
     padding: 10px 0; /* Reduce vertical padding */
     background-color: #f8f9fa; /* Light background for contrast */
 }
 
 .gallery-item {
     position: relative;
     overflow: hidden; /* Ensure that any enlarged images stay within bounds */
     transition: transform 0.3s ease; /* Smooth scaling */
     padding: 5px; /* Add padding to create space between items */
 }
 
 .gallery-item a {
     display: block; /* Make the whole area clickable */
 }
 
 .gallery-item img {
     width: 100%;
     height: auto;
     transition: transform 0.3s ease; /* Smooth transition on hover */
 }
 
 .gallery-item:hover {
     transform: scale(1.05); /* Slightly enlarge on hover */
 }
 
 .gallery-item:hover img {
     filter: brightness(90%); /* Darken image on hover */
 }
 
 /* Lightbox overlay styles */
 .lb-outerContainer {
     background-color: rgba(0, 0, 0, 0.9); /* Darker background for lightbox */
 }
 .lb-caption {
     color: #ffffff; /* White text for captions */
 }


 
 
 
 
 
 
 
 
 /* General Styles for the Search Bar */
 /* General Styles for the Search Bar */
.search-bar-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: #ffffff;
}
 
 .search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f1521;
    padding: 3px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    gap: 3px;
    max-width: 93%;
}


/* Individual Search Items */
.search-item {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 2px solid #e0e0e0;
    flex: 1;
    height: 50px;
}

.search-item .search-item .dates{
    max-width: 50%;
}

.search-item.location,
.search-item.guests {
    max-width: 180px;
}

.search-item.dates {
    flex: 2;
    display: flex;
    align-items: center;
}

.search-item input {
    border: none;
    outline: none;
    padding: 8px;
    background: transparent;
    color: #333;
    font-size: 16px;
    width: 100%;
    text-align: center;
}

.search-item input::placeholder {
    color: #000000;
    text-align: center;
}

/* Divider in Dates Section */
.search-item.dates span {
    color: #555;
    font-size: 16px;
    margin: 0 5px;
}

/* Icons for Input Fields */
.icon-location,
.icon-calendar,
.icon-user {
    margin-right: 8px;
    font-size: 18px;
    color: #000000;
}

/* Search Button */
#search-btn {
    background-color: #007bff;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    height: 50px;
    transition: background-color 0.3s ease;
}

#search-btn:hover {
    background-color: #0056b3;
}
   
   /** Additionals*/

   .Price-range{
     font-weight: bold;
     font-size: 20px;
     margin-bottom: 20px;
   }


/*CHDJHV*/
.room {
     border-radius: 10px;
     overflow: hidden;
     margin-bottom: 15px;
     box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
      font-size: 15px;
	border: 0;
    border-radius: var(--border-radius);
    -webkit-box-shadow:0px 0px 6px var(--rayal-white-borders);
    -moz-box-shadow:0px 0px 6px var(--rayal-white-borders);
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
   }
   

   
   .card-header .recommended {
     background-color: #0f1521af;
     color: #ffffff;
     font-size: 12px;
     padding: 5px 10px;
     border-radius: 3px;
     font-weight: bold;
     margin-left: -21px;
   }

   .card-header {
     text-align: left;
     border-bottom: none;
 }
 
   
   .card-title {
     font-weight: bold;
     color: #0f1521;
   }
   
   .ratings {
     display: flex;
     align-items: center;
   }
   

  .badge-primary {
     background-color: #0f1521;; /* Change the background to red */
     color: white; /* Make sure the text is readable */
   }


   .rating-score {
     font-size: 14px;
     padding: 5px;
     border-radius: 5px;
   }
   
   .rating-text {
     font-size: 12px;
     color: #444;
     margin-left: 8px;
   }
   .card-location {
     margin-top: 10px;
     color: #0f1521;
     font-family: 'Arial', 'Helvetica', sans-serif;
     
     
   }
   
   .card-location u {
     cursor: pointer;
     font-size: 14px;
   }
   
   .distance {
     color: #666;
     font-size: 12px;
   }
   
   .description-title {
     font-weight: bold;
     color: #333;
     font-size: 12px;
   }
   
   .description-text {
     color: #666;
     font-size: 14px;
     margin: 10px 0;
     font-family: 'Arial', 'Helvetica', sans-serif;

   }
   
   .price {
     margin-top: 10px;
     text-align: right;
     font-family: 'Arial', 'Helvetica', sans-serif;
     margin-bottom: 20px;
   }
   
   .price-o {
    margin-top: 10px;
    text-align: center;
    font-family: 'Arial', 'Helvetica', sans-serif;
    margin-bottom: 20px;
  }


   .discounted-price {
     text-decoration: line-through;
     color: #777;
     font-size: 12px;
     
   }
   
   .final-price {
     color: #ca1818;
     font-size: 1.5rem;
   }

   .final-pric {
    color: #ca1818;
    font-size: 1rem;
  }

   
   
   .btn-primary {
     background-color: #0f1521;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     font-size: 14px;
     color: #fff;
     cursor: pointer;
     display: block; /* Make the button a block element */
     margin: 0 auto; /* Center the block element horizontally */
   }
   
   .btn-primary:hover {
     background-color: #05070c;
   }

   .nights{
     text-align: right;
   }
 
   .room img {
     cursor: pointer;
     transition: transform 0.3s ease-in-out;
   }
   
   .room img:hover {
     transform: scale(1.1); /* Zooms the image by 10% */
   }



/*test */
.testimonials {
     padding: 50px 0;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
 }
 
 .section-title {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: black;
 }
 
 .swiper-container {
     overflow: hidden;
     padding-bottom: 50px;
 }
 
 .swiper-wrapper {
     display: flex;
 }

 .testimonials .swiper-slide {
     padding: 10px !important;
     display: flex;
     justify-content: center;
     width: auto;  /* Ensure each slide is automatically adjusting */
 }
 
 
 .testimonials .swiper-slide {
     padding: 10px !important;
     display: flex;
     justify-content: center;
     margin-top: 70px;
 }
 
 .testimonial {
     background-color: #0f1521;
     border-radius: 10px;
     padding: 30px;
     text-align: center;
     box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.1);
     width: 350px;
     margin: 0 15px;
 }
 
 /* Position the testimonial image at the top */
.testimonial-image {
     position: absolute;
     top: -50px;
     left: 50%;
     transform: translateX(-50%);
     background-color: #ffffff;
     border: 5px solid #ffffff;
     border-radius: 50%;
     width: 120px;
     height: 120px;
     overflow: hidden;
     padding-bottom: 40px;
}

.testimonials h2 {
     text-align: center;
}

.testimonial-image img {
     width: 100%;
     height: auto;
 }
 
 .testimonial-content h3 {
     font-size: 1.25rem;
     margin-bottom: 10px;
     color: white;
     font-weight: bolder;
     margin-top: 30px;
 }

 
 .testimonial-content p {
     font-size: 1rem;
     color: white;
     font-family: 'Arial', 'Helvetica', sans-serif;
     margin-bottom: 20px;
 }
 
 
 .swiper-button-prev, .swiper-button-next {
     color: rgb(0, 0, 0) !important;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     position: absolute;
     top: 20%;
     transform: translateY(-50%);
 }
 
 .swiper-button-prev {
     left: -50px;
 }
 
 .swiper-button-next {
     right: -50px;
 }


 /*Pagination*/
 .swiper-pagination {
     position: absolute;
     text-align: center;
     width: 100%;
     bottom: 10px;
     z-index: 10;
 }
 
 .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background-color: #999;
     border-radius: 50%;
     display: inline-block;
     margin: 0 5px;
     opacity: 0.5;
     transition: opacity 0.3s ease;
 }
 
 .swiper-pagination-bullet-active {
     background-color: #333;
     opacity: 1;
 }
 
 .abou-cont{
     font-family: 'Arial', 'Helvetica', sans-serif;
 }

 .price-box{
     margin-top: 10px;
     margin-right: 5px;
 }



 /*Payment form*/
 .payment {
     align-content: center;
     justify-items: center;
     justify-content: center;
     align-items: center;
 }
 .payment form {
     width: 700px;
     padding: 20px;
     box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
    
     margin-bottom: 100px;
 }
 
 .container form .row {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
 }
 
 .container form .row .col {
     flex: 1 1 250px;
 }
 
 .col .title {
     font-size: 20px;
     color: #0f1521;
     padding-bottom: 5px;
 }
 
 .col .inputBox {
     margin: 15px 0;
 }
 
 .col .inputBox label {
     margin-bottom: 10px;
     display: block;
 }
 
 .col .inputBox input,
 .col .inputBox select {
     width: 100%;
     border: 1px solid #ccc;
     padding: 10px 15px;
     font-size: 15px;
 }

 .col .inputBox input:focus,
 .col .inputBox select:focus {
     border: 1px solid #000;
 }
 
 .col .flex {
     display: flex;
     gap: 15px;
 }
 
 .col .flex .inputBox {
     flex: 1 1;
     margin-top: 5px;
 }
 
 .col .inputBox img {
     height: 22px;
     margin-top: 5px;
 }
 
 .container form .submit_btn {
     width: 100%;
     padding: 12px;
     font-size: 17px;
     background-color: #0f1521;
     color: #fff;
     margin-top: 5px;
     cursor: pointer;
     letter-spacing: 1px;
     border: #0f1521;
 }
 
 .container form .submit_btn:hover {
    background-color: #002061;
 }
 
 input::-webkit-inner-spin-button,
 input::-webkit-outer-spin-button {
     display: none;
 } 


/*testimonial admin section*/
/* Admin Testimonial Form Styles */
.test-ad {
     font-family: Arial, sans-serif;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     margin-top: 50px;
     margin-bottom: 50px;

 }
 
 .admin-container {
     background-color: #ffffff;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
     max-width: 500px;
     width: 90%;
 }
 
 .admin-container h2 {
     font-size: 1.8rem;
     color: #0f1521; /* Dark background color for header text */
     text-align: center;
     margin-bottom: 30px;
     font-weight: bold;
 }
 
 .admin-container label {
     display: block;
     font-size: 1rem;
     font-weight: bold;
     color: #333;
     margin-bottom: 8px;
     margin-top: 15px;
 }
 
 .admin-container input[type="text"],
 .admin-container input[type="file"],
 .admin-container textarea {
     width: 100%;
     padding: 12px;
     font-size: 1rem;
     color: #333;
     background-color: #f5f5f5;
     border: 2px solid #ddd;
     border-radius: 8px;
     box-sizing: border-box;
     transition: border-color 0.3s ease;
 }
 
 .admin-container input[type="text"]:focus,
 .admin-container textarea:focus {
     border-color: #0f1521;
     outline: none;
 }
 
 .admin-container textarea {
     resize: vertical;
     min-height: 80px;
 }
 
 .admin-container button {
     width: 100%;
     padding: 12px;
     font-size: 1rem;
     font-weight: bold;
     color: #ffffff;
     background-color: #0f1521; /* Dark button color */
     border: none;
     border-radius: 8px;
     cursor: pointer;
     margin-top: 20px;
     transition: background-color 0.3s ease;
 }
 
 .admin-container button:hover {
     background-color: #333;
 }
 
 .admin-container button:active {
     background-color: #222;
 }
 
 .raw{
    text-align: center;
 }

 .raw .final-price{
    margin-top: 20px;
    margin-bottom: 10px;
 }
 
 .btn.btn-danger{
    background-color: #0f1521;
    border:#0f1521;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
 }

 .btn.btn-danger :hover{
    background-color: #0744c0;
 }

 .btn.btn-danger :focus{
    background-color: #0744c0;
 }
 
 .room {
    border-radius: 10px;
 }


.error-1 {
    color: red;
}

/** modal*/
/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay effect */
    z-index: 1000; /* Sit above everything else */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.input-group {
    margin: 10px 0;
}

.confirm-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

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



/* General Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Ensure it's above other elements */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}

/* Modal Content Box */
.modal-content {
    background-color: #fff;
    margin: 15% auto; /* Centered vertically and horizontally */
    padding: 20px;
    border-radius: 10px;
    width: 80%; /* Adjust width as needed */
    max-width: 400px; /* Ensure it doesn't get too wide */
    text-align: center; /* Center-align content */
}

/* Input Field Styling */
.modal .input-group input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Confirm Button Styling */
.modal .confirm-btn {
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

/* Confirm Button Hover */
.modal .confirm-btn:hover {
    background-color: #0056b3;
}

/* Additional Styling */
h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

p {
    font-size: 16px;
    color: #555;
}

.admin-error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.5rem; /* Adds spacing between input and message */
    position: absolute;
    bottom: -20px; /* Ensures it stays below the input field */
}





.input-group {
    position: relative;
    width: 100%;
    
}

#password {
    width: 100%;
    padding-right: 40px; /* Space for the toggle button */
    box-sizing: border-box; /* Ensure padding doesn't affect the width */
    margin-top: 10px; /* Add some space above the password field */
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px; /* Adjust size of the icon */
    padding: 5px;
}

.toggle-password:focus {
    outline: none; /* Remove focus outline */
}

.toggle-password i {
    color: #555; /* Default color for the icon */
}

.login-form {
    margin-top: -10px; /* Move the form upwards slightly */
}

.login-btn {
    margin-top: 20px; /* Add space between the inputs and the login button */
}


.admin-error-message-1 {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}















.admin-contain {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 90%;
}

.admin-contain h2 {
    font-size: 1.8rem;
    color: #0f1521;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

.admin-contain label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    margin-top: 15px;
}

/* General form input styles */
.admin-contain input[type="text"],
.admin-contain input[type="number"],
.admin-contain input[type="file"],
.admin-contain select,
.admin-contain textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    color: #333;
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    appearance: none; /* Remove default styling */
}

/* Focus state */
.admin-contain input[type="text"]:focus,
.admin-contain input[type="number"]:focus,
.admin-contain select:focus,
.admin-contain textarea:focus {
    border-color: #0f1521;
    outline: none;
}

/* Custom arrow for select dropdown */
.admin-contain .form-group {
    position: relative;
}

.admin-contain select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23333" d="M2 0L0 2h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 30px; /* Space for the arrow */
}

/* Remove default arrow in IE */
.admin-contain select::-ms-expand {
    display: none;
}

.admin-contain button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #0f1521;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.admin-contain button:hover {
    background-color: #333;
}

.admin-contain button:active {
    background-color: #222;
}

option:hover {
    box-shadow: inset 0 0 0 1000px #b10606; /* Desired hover color */
}


.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
}

.input-group input {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.confirm-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 5px;
}

.confirm-btn:hover {
    background-color: #2980b9;
}



.nav-link i {
    color: black; /* Set the icon color to black */
    margin-right: 8px; /* Add spacing between icon and text */
    font-size: 1rem; /* Adjust icon size if needed */
    vertical-align: middle; /* Align icon with text */
}

.nav-item.active .nav-link i {
    color: rgb(235, 8, 8); /* Keep the active icon black as well */
}

.metric-valuee{
    color: white;
}

.addhide{
    width: 800px;
}

.addhide button{
    margin-right: 18px;
    width: 228px;
}