@import url('https://fonts.googleapis.com/css?family=Poppins');
*{margin:0;padding:0;border:0;outline:none;  box-sizing: border-box;}
.top{position:fixed;width:150px;text-align:center;bottom:15px;right:15px;z-index:101;font-size:14px; font-weight:bold;}
#btp{background-color:#262626;cursor:pointer;color:#fff;text-decoration:none; border-radius:7px; padding:5px 10px;}
#bt2{background-color:#262626;cursor:pointer;color:#fff;text-decoration:none; border-radius:7px; padding:5px 10px;}

.more {display:none;}
a.showLink, a.hideLink { text-decoration: none;color: #000;padding:8px 10px;background:#FEF200;}
a.showLink:hover, a.hideLink:hover {color:#fff;background:#C81A21;}


body{font-family:Poppins,verdana,arial; font-size:16px;font-weight:normal;line-height:25px;color:#000; letter-spacing: 0.75px; background:#E8F0F8;}

.main {width:1140px; margin:0 auto;}
#topbg{width:100%;height:43px;margin:0 auto;background:#133660;}
.fl {text-align:left; color:#fff; padding:10px 0; font-size:15px; width:40%;}
.fr {color:#fff; padding:8px; float:right; width:50%; text-align:right;}

.logo{width:172px; position:absolute; z-index:1001; float:left;}

#smo{ float:right ; width:200px;}
.us{float:left; padding:5px 0px 0 0px;}
#menubg{ margin:0 auto;width:100%;}

#menu{float:right; padding-left:172px;}
#content {margin:0 auto; }
#content p{font-size:15px;font-weight:normal;line-height:25px;padding:0 20px 0 20px; text-align:justify;}
.heading {text-decoration:none; padding:25px 0 0 0px;font-weight:bold;font-size:30px;text-align:center;text-transform:uppercase;line-height:35px; letter-spacing:2px;color:#FFF; font-family:Quando, Verdana, Geneva, sans-serif;}
.heading a {text-decoration:none;color:#00145F; font-weight:700;}
.heading p {padding:10px; font-size:14px;line-height:24px;text-transform:capitalize;}

.area{ width:100%; background:#143761; padding:5px 0 20px 0;}
.f2 {color:#fff; font-size:25px; text-align:center;font-weight:normal; text-transform:uppercase; line-height:50px;font-family:Quando, serif; width:1200px; margin:0 auto; padding:10px 0;}


.acc {text-align: center; color:#083487; padding:25px 0; font-size:25px; line-height:45px; font-family:Quando, Verdana, Geneva, sans-serif;}
.topbg{width:100%;margin:0 auto;background:#fff;}

#footer{width:100%;background:#133660; color:#fff; padding-bottom:20px;}
.details {float:left;padding:10px 0 0 0;width:1080px;}
#hotel {float:left;margin-top:15px;}
/*.col-one {float:left;margin-left:80px;width:250px;margin-top:15px;}*/
.col-one {float:right; text-align:left;width:400px;color:#fff;padding:15px 0px;}
.col-one ul{float:left; width:200px;}
.col-one li{list-style: inside; line-height:28px; }
.col-one ul li a{ font-weight:normal; color:#fff; text-decoration:none;}
#choice {float: right;padding:0px; width:200px;}
.col-two {float:left;margin-left:70px;width:448px;margin-top:15px;}
.col-three {float:left;width:1100px;margin-top:15px;margin-left:50px;}
.add {float:right;margin-top:15px;width:485px;}
.line {text-align:center; padding:5px;}
#bottom{width:100%;height:50px;clear:both; border-top:1px solid #ffdd00; background:#133660; color:#fff;}
.owner {padding:15px 0 0 0;text-align:center;line-height:24px;width:1140px; font-weight:500; color:#000000;}
.title{font-size:18px; padding-bottom:10px; color:#172E56;}
.title2{font-size: 18px;
    margin-left:50px;
    font-weight: 900;
    color:#172E56;
}

.c5{
padding:7px 7px;
width:350px;
background:#f0f0f0;
border-bottom: 1px double #000;
border-top: 1px double #000;
border-left:1px double #000;
border-right:1px double #000;
overflow:hidden; 
margin:0 auto;
margin:25px 15px 15px 0;
color:#00315f;
float:left;
}
.map1{ font-size:12px;padding:10px; width:50%;margin-right:15px; background:#fff;border: 1px double #929292;color:#444;float:left; border-radius: 20px; font-family:Quando,verdana,arial}

a.cgsl:link, a.cgsl:visited {color:#133660;font-weight:normal;text-decoration:none;}
a.cgsl:hover {color:#133660;}

a.cgs2:link, a.cgs2:visited {color:#ffdd00;font-weight:normal;text-decoration:none;}
a.cgs2:hover {color:#ffdd00;}

a.cgs:link, a.cgs:visited {color:#000;font-weight:normal;text-decoration:none;}
a.cgs:hover {color:#000;}

.cc_dialog.simple {
left: 0 !important;
top: auto;
bottom: 0;
right: auto !important;
max-width:100% !important;
position: fixed;
opacity:0.9 !important;
}


#resbg{background:#143761; margin:0 auto; padding:15px 0 20px 0;}

#resbg1{background:#083487 ; margin:0 auto; padding:80px 0 20px 0;}
#reservation {width:930px; margin:0 auto;}
.reserve {width:99%; text-align:center;text-transform:capitalize;padding-bottom:20px;font-size:28px;color:#fff; font-family:Lora, Verdana, Geneva, sans-serif;}
.check1{float:left;width:200px; margin-right:5px; font-size:15px;}
.check{width:520px;float:left; font-size:15px;}
.adult{float:left;width:110px; margin-right:15px;}
.message1{font-size:14px;padding:9px 8px;width:81%;background:#f9f9f9;margin:0 auto;color:#333;float:left;border:1px solid #ccc; text-transform:uppercase; border-radius:10px;}
.message{font-size:14px;padding:8px;width:95%;background:#f9f9f9;margin:0 auto;color:#333;float:left;border:1px solid #ccc; text-transform:uppercase; border-radius:10px;}
#submit{float:left;margin-top:25px;}
input[type="submit"]
.palace-button, input[type="submit"], input#searchsubmit {background-color:#FFDD00;border:none;color:#172E56;padding:10px 30px; font-weight:bold; border-radius:10px;}
::-webkit-input-placeholder {color: #333333;}
:-moz-placeholder {color: #333333;}
::-moz-placeholder {color: #333333;}
:-ms-input-placeholder {color: #333333;}




.amenities{background: linear-gradient(135deg, #1e1b4b, #133660, #000428);

    color: white;
    padding:20px 0 60px 0;
    overflow-x: hidden;}

  .amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto; 	
	
  }

  .card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05));
    opacity: 0;
    transition: 0.5s;
  }

  .card:hover {
    transform: translateY(-15px) scale(1.05);
    border-color: #00ffff;
    box-shadow: 0 25px 50px rgba(0, 255, 255, 0.4);
  }

  .card:hover::before { opacity: 1; }

  .icon {
    font-size:3rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px currentColor;
    transition: all 0.4s;
  }

  .card:hover .icon {
    transform: scale(1.2);
    text-shadow: 0 0 40px currentColor;
  }

  h4 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 12px;
    color:#30649f;
    -webkit-background-clip: text;
  }

  p {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.6;
  }

  /* Unique Neon Glow Colors */
  .c1 .icon { color: #0AEBFF; }  /* Cyan */
  .c2 .icon { color: #0AEBFF; }  /* Magenta */
  .c3 .icon { color: #0AEBFF; }  /* Yellow */
  .c4 .icon { color: #0AEBFF; }  /* Orange */
  .c5 .icon { color: #0AEBFF; }  /* Lime */
  .c6 .icon { color: #0AEBFF; }  /* Hot Pink */
  .c7 .icon { color: #0AEBFF; }  /* Mint */
  .c8 .icon { color: #0AEBFF; }  /* Bright Orange */
  .c9 .icon { color: #0AEBFF; }  /* Purple */
  .c10 .icon { color: #0AEBFF; } /* Neon Pink */

  @media (max-width: 768px) {
    h1 { font-size: 3rem; }
    .icon { font-size: 3.2rem; }
    .card { padding: 35px 15px; }
  }
  
  
 /* Rooms*/
 .rooms-section {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
      padding:40px 0;         
    }
    .rooms-section h5{
      font-size: 1.4rem;
      color: #1f2937;
      margin-bottom: 16px; 
    }

    .rooms-section .subtitle {
      font-size: 1.15rem;
      color: #6b7280;
      margin-bottom: 50px;
   text-align:center;
    }

    .rooms-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 32px;
    }

    .room-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.07);
      transition: all 0.4s ease;
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .room-card:hover {
      transform: translateY(-14px);
      box-shadow: 0 22px 50px rgba(0,0,0,0.14); border:1px solid #e6b800;
    }

    .room-image {
      height: 260px;
      overflow: hidden;
    }

    .room-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s ease;
    }

    .room-card:hover .room-image img {
      transform: scale(1.09);border:1px solid #e6b800;
    }

    .room-content {
      padding: 1px 24px 10px;       /* bottom padding àª˜àªŸàª¾àª¡à«àª¯à«àª‚ */
    }

    .room-title {
      font-size: 1.65rem;
      margin: 16px 0 20px;
      color: #111827;
      text-align: center;
    }

    .room-desc {
      color: #4b5563;
      font-size: 0.98rem;
      line-height: 1.65;
      margin-bottom: 24px;           /* description àª¨à«€ àª¨à«€àªšà«‡ àª¥à«‹àª¡à«àª‚ space àª°àª¾àª–à«àª¯à«àª‚ */
      text-align: center; padding:0 15px;
    }

    .room-footer {
      display: flex;
      justify-content: center;
      padding: 16px 0 20px;          /* footer àª¨à«€ àª¨à«€àªšà«‡ àªµà«àª¹àª¾àª‡àªŸ àª¸à«àªªà«‡àª¸ àª˜àªŸàª¾àª¡à«€ */
      border-top: 1px solid #f3f4f6;
    }

    .btn-book {
      background: #133660;
      color: white;
      padding: 14px 48px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.05rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
      min-width: 170px;
      text-align: center;
    }

    .btn-book:hover {
      background:#e6b800;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35); border:1px solid ;
    }

    @media (max-width: 768px) {
      .rooms-section { padding-bottom: 10px; }
      .rooms-grid { gap: 24px; }
      .room-image { height: 240px; }
      .room-content { padding: 18px 24px 16px; }
      .room-desc { margin-bottom: 20px; }
      .room-footer { padding: 12px 0 16px; }
    }
	/*Sitemap*/
    .sitemap-section {
        max-width: 1000px;
        margin: 40px auto;
        padding: 0 15px;
    }
    .sitemap-box {
        background: #143761;
        color: #fff;
        padding: 25px 30px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    .sitemap-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px 30px;
        margin-top: 15px;
    }
    .sitemap-columns ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sitemap-columns li {
        margin: 10px 0;
        font-size: 1.12rem;
        line-height: 1.45;
    }
    .sitemap-columns a {
        color: #ffffff;
        text-decoration: none;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sitemap-columns a:hover {
        color: #ffdd00;
        transform: translateX(4px);
    }
    .sitemap-columns .sub {
        font-size: 1.02rem;
        padding-left: 28px;
        opacity: 0.92;
    }
    .sitemap-columns i {
        width: 20px;
        text-align: center;
        font-size: 1.18rem;
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .sitemap-box {
            padding: 20px 18px;
        }
        .sitemap-columns {
            grid-template-columns: 1fr;
            gap: 8px;
        }
    }

/*faq*/

    .faq-container {
        max-width: 960px;
        margin: 60px auto;
        padding: 0 20px;
    }
    .faq-main-title {
        text-align: center;
        color: #ffdd00;
        font-size: 2.6rem;
        margin-bottom: 55px;
        font-weight: bold;
    }
    .faq-block {
        margin-bottom: 40px;
        background: #143761;
        border-radius: 14px;
        padding: 32px 36px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.28);
        transition: all 0.35s ease;
    }

    /* Hover animation: lift + stronger shadow */
    .faq-block:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.38);
    }

    .faq-question {
        color: #ffdd00;
        font-size: 1.42rem;
        font-weight: 600;
        margin: 0 0 20px 0;
        line-height: 1.4;
    }
    .faq-answer {
        color: #e8f0f8;
        font-size: 1.14rem;
        line-height: 1.72;
        margin: 0;
    }
    .faq-answer a {
        color: #ffdd00;
        text-decoration: none;
        font-weight: 500;
    }
    .faq-answer a:hover {
        text-decoration: underline;
        color: #ffffff;
    }

    @media (max-width: 768px) {
        .faq-main-title {
            font-size: 2.2rem;
            margin-bottom: 45px;
        }
        .faq-block {
            padding: 26px 24px;
        }
        .faq-question {
            font-size: 1.32rem;
        }
        .faq-answer {
            font-size: 1.08rem;
        }
    }
/*Photo Gallery*/

 .gallery-section {
        max-width: 1200px;
        margin: 50px auto;
        padding: 0 20px;
    }
    .gallery-title {
        text-align: center;
        color: #ffdd00;
        font-size: 2.6rem;
        margin-bottom: 50px;
        font-weight: bold;
    }
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
    }
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        cursor: pointer;
        transition: all 0.35s ease;
    }
    .gallery-item:hover {
        transform: scale(1.05);
        box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }
    .gallery-item img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }
    .gallery-item:hover img {
        transform: scale(1.15);
    }
    .gallery-caption {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: rgba(19,54,96,0.9);
        color: #fff;
        padding: 12px 16px;
        text-align: center;
        font-size: 1.05rem;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .gallery-item:hover .gallery-caption { opacity: 1; }

    /* ──────────────────────────────────────────────── */
    /* Lightbox – minimal top/bottom space               */
    /* ──────────────────────────────────────────────── */
    .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(19, 54, 96, 0.98);
        justify-content: center;
        align-items: center;
        padding: 0;                    /* no extra padding */
        overflow: hidden;
    }
    .lightbox.active { display: flex; }

    .lightbox-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .lightbox img {
        max-width: 98vw;
        max-height: 92vh;              /* very tall – almost full screen */
        width: auto;
        height: auto;
        object-fit: contain;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .lightbox-caption {
        color: #ffdd00;
        font-size: 1.4rem;
        font-weight: 500;
        margin-top:10px;
        text-align: center;
        max-width: 90%;
        background: rgba(0,0,0,0.5);
        padding: 8px 20px;
        border-radius: 8px;
    }

    .lightbox-close {
        position: absolute;
        top: 10px;
        right: 55px;
        color: #ffdd00;
        font-size: 3.4rem;
        cursor: pointer;
        z-index: 10000;
    }
    .lightbox-close:hover { 
        color: white; 
        transform: rotate(90deg) scale(1.15); 
    }

    .lightbox-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #ffdd00;
        font-size: 4.2rem;
        cursor: pointer;
        padding: 10px 20px;
        z-index: 10000;
    }
    .lightbox-arrow:hover { 
        color: white; 
        transform: translateY(-50%) scale(1.15); 
    }
    .lightbox-arrow.left  { left: 12px; }
    .lightbox-arrow.right { right: 12px; }

    .lightbox-counter {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: #ffdd00;
        font-size: 1.15rem;
        background: rgba(0,0,0,0.6);
        padding: 6px 18px;
        border-radius: 30px;
        z-index: 10000;
    }

    @media (max-width: 768px) {
        .lightbox img { max-height: 90vh; }
        .lightbox-caption { font-size: 1.2rem; margin-top: 6px; padding: 6px 16px; }
        .lightbox-arrow { font-size: 3.4rem; padding: 8px 16px; }
        .lightbox-close { top: 8px; right: 12px; font-size: 3rem; }
    }
	
	
/*amenities*/

.amenities-wrap {
        max-width: 1100px;
        margin:0px auto;
        padding: 0 15px;
    }
    .amenities-title {
        text-align: center;
        color: #ffdd00;
        font-size: 2.4rem;
        margin-bottom: 12px;
    }
    .amenities-lead {
        text-align: center;
        font-size: 1.25rem;
        color: #e8f0f8;
        margin-bottom: 40px;
        max-width: 780px;
        margin-left: auto;
        margin-right: auto;
    }

    .highlight-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-bottom: 50px;
    }
    .highlight-card {
        background: #143761;
        border-radius: 12px;
        padding: 20px 28px;
        min-width: 160px;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    }
    .highlight-card i {
        font-size: 2.6rem;
        color: #ffdd00;
        margin-bottom: 10px;
    }
    .highlight-card p{
        margin: 0;
        font-size: 1.1rem;
        color: #ffffff;
    }

    .category {
        margin-bottom: 40px;
    }
    .category h3 {
        color: #143761;
        font-size: 1.5rem;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .amenity-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px 30px;
    }
    .amenity-row {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1rem;
       
    }
    .amenity-row i {
        color: #143761;
        min-width: 20px;
        font-size: 1.3rem;
    }

    @media (max-width: 768px) {
        .amenities-title   { font-size: 2.1rem; }
        .amenities-lead    { font-size: 1.15rem; margin-bottom: 35px; }
        .highlight-row     { gap: 16px; }
        .highlight-card    { padding: 16px 20px; min-width: 140px; }
        .category h3       { font-size: 1.65rem; }
        .amenity-grid      { gap: 12px 20px; }
        .amenity-row       { font-size: 1.08rem; }
    }
	
	/*direction*/
	
	    .directions-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 600px;
        margin: 0 auto 40px;
    }
    .directions-input {
        padding: 16px 20px;
        border: none;
        border-radius: 8px;
        font-size: 1.15rem;
        background: #ffffff;
        color: #133660;
    }
    .directions-button {
        background: #ffdd00;
        color: #133660;
        padding: 16px;
        border: none;
        border-radius: 8px;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
    }
    .directions-button:hover {
        background: #e6b800;
        transform: translateY(-3px);
    }
    @media (max-width: 768px) {
        .directions-section { padding: 0 15px; }
        .directions-title { font-size: 1.9rem; padding-top: 30px; }
        .directions-address { font-size: 1.15rem; }
        .directions-form { gap: 15px; }
        .directions-input { padding: 14px 18px; font-size: 1.1rem; }
        .directions-button { padding: 14px; font-size: 1.15rem; }
    }
	/*area attraction*/
	    
    .attractions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px 32px;
    }
    .attraction-item {
        background: #143761;
        border-radius: 12px;
        padding: 28px 24px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        transition: all 0.35s ease;
    }
    .attraction-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    }
    .attraction-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }
    .attraction-icon {
        font-size: 2.8rem;
        color: #ffdd00;
        flex-shrink: 0;
    }
    .attraction-name {
        color: #ffdd00;
        font-size: 1.45rem;
        font-weight: 600;
        margin: 0;
    }
    .attraction-desc {
        color: #e0e8f5;
        font-size: 1.08rem;
        line-height: 1.65;
        margin: 0 0 12px;
    }
    .attraction-distance {
        color: #a3bffa;
        font-size: 1rem;
        font-style: italic;
    }

    @media (max-width: 768px) {
        .attractions-title { font-size: 2.2rem; }
        .attraction-name { font-size: 1.35rem; }
        .attraction-desc { font-size: 1.04rem; }
        .attraction-icon { font-size: 2.4rem; }
    }
	/*other attraction*/
	
	
    .content-container {
        max-width: 1100px;
        margin: 20px auto 80px;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    .main-content {
        background: rgba(20,55,97,0.92);
        border-radius: 16px;
        padding: 50px 40px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.45);
        backdrop-filter: blur(6px);
        color: #f0f8ff;
        font-size: 2rem;
        line-height: 1.8;
    }