@charset "UTF-8";
.flex, .customer-main .service, .customer-main .service-chat .service-chat2 .topic p, .customer-main .service-chat .service-chat1 .service-chat-contents p, .customer-main .service-chat .service-chat1 .service-chat-contents, .customer-main .service-chat .service-chat1 h1, #customerPage .navbar-customer ul, #customerPage .navbar-customer img, .hotel-main .pupolar-places .location-places .box, .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel .card1, .hotel-main .booking-box .search-btn, #hotelPage #hookhotel, #hotelPage #hotel-pupolar, #hotelPage .navbar-hotel ul, #hotelPage .navbar-hotel img, .about-main .why-should-we-go, .about-main .about-content-important-travel, #aboutPage #hook, #aboutPage #aboutus, #aboutPage .navbar-about ul, #aboutPage .navbar-about img, footer .footer-main .travel-destination, footer .footer-main .logo-footer, main .total-price .price, main .partners .all-partner, main .content .promotion, header .navbar ul, header .navbar img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-sp-bet, #customerPage .navbar-customer, #hotelPage .navbar-hotel, #aboutPage .navbar-about, header .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.padding-ri-le, #hotelPage, #aboutPage, main, header {
  padding: 0px 100px;
}

.padding-top-bottom {
  padding: 100px 0px;
}

.btn, #customerPage .navbar-customer ul #sign, .hotel-main .popular-restaurant .but #phnom, .hotel-main .popular-restaurant .but #siem, #hotelPage .navbar-hotel ul #sign, #aboutPage .navbar-about ul #sign, main .content .popular-restaurant .but #phnom, main .content .popular-restaurant .but #siem, header .navbar ul #sign {
  padding: 10px 20px;
  background: #0050FF;
  border-radius: 8px;
}

.btn-table {
  padding: 5px 10px;
  background: #0050FF;
  border-radius: 4px;
}

.btn2, header button {
  padding: 10px 20px;
  background: #FF8C00;
  border-radius: 8px;
}

.animation, .about-main .download img, .about-main .online-hotel-booking .show-more, .about-main .online-hotel-booking .text-hotel-booking, .about-main .online-hotel-booking .sub-hotel-booking, .about-main .online-hotel-booking h1, .about-main .payment-partners .img-payment-partners img, .about-main .payment-partners .text-payment-partners p, .about-main .payment-partners .text-payment-partners h1, .about-main .hotel-partners .img-hotel-partners img, .about-main .hotel-partners .text-hotel-partners p, .about-main .hotel-partners .text-hotel-partners .sub-paragram, .about-main .hotel-partners .text-hotel-partners h1, .about-main .about-partner-with-us, .about-main .why-should-we-go .why-should-we-go-text p, .about-main .why-should-we-go .why-should-we-go-text h1, .about-main .why-should-we-go, .about-main .about-content-important-travel .about-text-important-travel p, .about-main .about-content-important-travel .about-text-important-travel h1, .about-main .about-content-important-travel img, main .total-price .price .price-1, main .total-price .total-text, main .content .popular-restaurant .cards-rest-all .cards-rest, main .content .card-pro .cards {
  animation: appear 1.5s ease-out;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

.places-style, .hotel-main .pupolar-places .location-places .box {
  background-size: cover;
  background-position: center;
  width: 180px;
  height: 180px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
}

header {
  background: linear-gradient(rgba(4, 20, 250, 0.5), rgba(6, 23, 249, 0.5)), url("../images/welcome-home.png");
  background-size: cover;
  background-position: top center;
  height: 80vh;
  padding-top: 50px;
}
header .navbar .material-symbols-outlined {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  header .navbar .material-symbols-outlined {
    color: #FFFFFF;
    opacity: 1;
    position: absolute;
    top: 22px;
    right: 20px;
    font-size: 2rem;
  }
}
header .navbar img {
  width: 150px;
}
@media screen and (max-width: 768px) {
  header .navbar img {
    width: 100px;
    position: absolute;
    top: 14px;
    left: 20px;
  }
}
header .navbar ul {
  list-style: none;
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  header .navbar ul {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  header .navbar ul {
    display: none;
  }
}
header .navbar ul a {
  text-decoration: none;
  color: #FFFFFF;
}
header .navbar ul a:hover {
  color: #FF8C00;
}
header .navbar ul #sign a {
  color: #FFFFFF;
}
header .navbar ul #home {
  color: #FF8C00;
}
header h1 {
  margin-top: 200px;
  font-size: 40px;
  color: #FFFFFF;
}
header h1 span {
  color: #FF8C00;
}
@media screen and (max-width: 768px) {
  header h1 {
    font-size: 32px;
  }
}
header p {
  color: #FFFFFF;
  font-weight: 300;
}
header p span {
  color: #FF8C00;
  font-weight: 600;
}
header .socil {
  margin-top: 10px;
}
header .socil a .bx {
  color: #FFFFFF;
  font-size: 24px;
}
header .socil a .bx:hover {
  color: #ffbf72;
}
header button {
  margin: 10px 0px;
  border: solid 2px #FF8C00;
  color: #FF8C00;
  background: none;
}
header button:hover {
  background: #FF8C00;
  color: #FFFFFF;
}
@media screen and (max-width: 768px) {
  header {
    padding: 0px 20px;
    height: 60vh;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
main {
  padding-top: 50px;
  padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
  main {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 768px) {
  main .content .promotion h1 {
    font-size: 1.3rem;
  }
}
main .content .card-pro {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  main .content .card-pro {
    gap: 20px;
  }
}
main .content .card-pro .cards {
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
}
main .content .card-pro .cards:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 425px) {
  main .content .card-pro .cards {
    animation: none;
  }
}
main .content .card-pro .cards img {
  width: 420px;
}
@media screen and (max-width: 768px) {
  main .content .card-pro .cards img {
    width: 220px;
  }
}
@media screen and (max-width: 425px) {
  main .content .card-pro .cards img {
    width: 350px;
  }
}
main .content .card-pro .cards h1 {
  color: #001E60;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  main .content .card-pro .cards h1 {
    font-size: 10px;
  }
}
@media screen and (max-width: 425px) {
  main .content .card-pro .cards h1 {
    font-size: 16px;
  }
}
main .content .card-pro .cards p {
  flex-wrap: wrap;
  color: #7F8CAB;
  font-size: 0.8rem;
}
@media screen and (max-width: 768px) {
  main .content .card-pro .cards p {
    width: 180px;
    font-size: 0.6rem;
  }
}
main .content .popular-restaurant {
  flex-wrap: wrap;
  margin-bottom: 50px;
}
main .content .popular-restaurant .text h1 {
  font-size: 24px;
  color: #001E60;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .text h1 {
    font-size: 20px;
  }
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .text h1 {
    font-size: 16px;
  }
}
main .content .popular-restaurant .but {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .but {
    margin: 10px 0px;
  }
}
main .content .popular-restaurant .but #siem {
  background: #001E60;
  color: #FFFFFF;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .but #siem {
    padding: 8px 15px;
    font-size: 10px;
    border-radius: 6px;
  }
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .but #siem {
    padding: 6px 12px;
    font-size: 8px;
  }
}
main .content .popular-restaurant .but #phnom {
  background: #FFFFFF;
  font-weight: 300;
  border: solid 2px #001E60;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .but #phnom {
    padding: 8px 15px;
    font-size: 10px;
    border-radius: 6px;
  }
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .but #phnom {
    padding: 6px 12px;
    font-size: 8px;
  }
}
main .content .popular-restaurant .cards-rest-all {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .cards-rest-all {
    gap: 10px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest {
  background-color: #FFFFFF;
  border-radius: 16px;
  transition: transform 0.3s ease-in-out;
}
main .content .popular-restaurant .cards-rest-all .cards-rest:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest {
    width: 150px;
  }
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest {
    width: 170px;
    animation: none;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest img {
  width: 310px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest img {
    width: 150px;
  }
}
@media screen and (max-width: 425px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest img {
    width: 170px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest p {
  color: #1b1b1b;
  font-size: 20px;
  font-weight: 600;
  padding-top: 10px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest p {
    font-size: 10px;
    font-weight: 500;
    padding-top: 2px;
    padding-left: 8px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest .stars {
  display: flex;
  align-items: center;
}
main .content .popular-restaurant .cards-rest-all .cards-rest .stars p {
  font-size: 12px;
  color: rgb(82, 82, 82);
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest .stars p {
    font-size: 8px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest .stars .star i {
  color: #FF8C00;
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest .stars .star i {
    font-size: 10px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest #address {
  flex-wrap: wrap;
  width: 280px;
  font-size: 14px;
  font-weight: 300;
  color: #7F8CAB;
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest #address {
    width: 150px;
    font-size: 8px;
    padding-bottom: 10px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest .US {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
}
main .content .popular-restaurant .cards-rest-all .cards-rest .US p {
  font-size: 14px;
  color: gray;
  top: 40px;
  padding-top: 5px;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest .US p {
    font-size: 6px;
  }
}
main .content .popular-restaurant .cards-rest-all .cards-rest .US h2 {
  color: #001E60;
}
@media screen and (max-width: 768px) {
  main .content .popular-restaurant .cards-rest-all .cards-rest .US h2 {
    font-size: 10px;
  }
}
main .content .popular-restaurant .cards-rest-all .koh img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
main .partners .text {
  text-align: center;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  main .partners .text {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 425px) {
  main .partners .text {
    margin-bottom: 20px;
  }
}
main .partners .text h1 {
  font-size: 32px;
  font-weight: 800;
}
@media screen and (max-width: 768px) {
  main .partners .text h1 {
    font-size: 24px;
    font-weight: 600;
  }
}
@media screen and (max-width: 425px) {
  main .partners .text h1 {
    font-size: 20px;
    font-weight: 500;
  }
}
main .partners .all-partner {
  margin-bottom: 60px;
  gap: 40px;
  animation: scroll 10s linear infinite;
}
@media screen and (max-width: 768px) {
  main .partners .all-partner {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 425px) {
  main .partners .all-partner {
    gap: 20px;
  }
}
main .partners .all-partner img {
  width: 150px;
  transition: transform 0.3s ease-in-out;
}
main .partners .all-partner img:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  main .partners .all-partner img {
    width: 120px;
  }
}
@media screen and (max-width: 425px) {
  main .partners .all-partner img {
    width: 80px;
  }
}
main .total-price {
  margin-bottom: 50px;
}
main .total-price .total-text {
  text-align: center;
  padding: 0px 0px 50px 0px;
}
@media screen and (max-width: 425px) {
  main .total-price .total-text {
    padding: 0px 0px 20px 0px;
    animation: none;
  }
}
main .total-price .total-text h1 {
  font-size: 32px;
  font-weight: 800;
}
@media screen and (max-width: 768px) {
  main .total-price .total-text h1 {
    font-size: 24px;
    font-weight: 600;
  }
}
@media screen and (max-width: 425px) {
  main .total-price .total-text h1 {
    font-size: 20px;
    font-weight: 500;
  }
}
main .total-price .price {
  flex-wrap: wrap;
  gap: 200px;
}
@media screen and (max-width: 768px) {
  main .total-price .price {
    gap: 100px;
  }
}
@media screen and (max-width: 425px) {
  main .total-price .price {
    display: block;
  }
}
main .total-price .price .price-1 {
  text-align: center;
  color: #001E60;
}
@media screen and (max-width: 425px) {
  main .total-price .price .price-1 {
    margin-bottom: 40px;
    animation: none;
  }
}
main .total-price .price .price-1 span {
  font-size: 60px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  main .total-price .price .price-1 span {
    font-size: 32px;
  }
}
@media screen and (max-width: 425px) {
  main .total-price .price .price-1 span {
    font-size: 56px;
    font-weight: 500;
  }
}
@media screen and (max-width: 768px) {
  main .total-price .price .price-1 h1 {
    font-size: 20px;
  }
}
@media screen and (max-width: 425px) {
  main .total-price .price .price-1 h1 {
    font-size: 28px;
  }
}
main .total-price .price .price-1 .p-total {
  font-size: 14px;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  main .total-price .price .price-1 .p-total {
    font-size: 8px;
  }
}
@media screen and (max-width: 425px) {
  main .total-price .price .price-1 .p-total {
    font-size: 16px;
    color: #7F8CAB;
  }
}

footer {
  background-color: rgb(241, 241, 241);
}
footer .footer-main .footer-all {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 180px;
  padding: 20px 0px;
}
@media screen and (max-width: 768px) {
  footer .footer-main .footer-all {
    gap: 70px;
  }
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all {
    display: block;
    padding-left: 20px;
  }
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-contact {
    margin-bottom: 20px;
    padding-top: 20px;
  }
}
footer .footer-main .footer-all .footer-contact h2 {
  font-size: 16px;
  padding-bottom: 10px;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-contact h2 {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
footer .footer-main .footer-all .footer-contact ul {
  list-style-type: none;
  padding-bottom: 5px;
}
footer .footer-main .footer-all .footer-contact ul li a {
  text-decoration: none;
  font-size: 12px;
  color: #7F8CAB;
}
footer .footer-main .footer-all .footer-contact .icon a i {
  font-size: 18px;
  color: #001E60;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-about {
    margin-bottom: 20px;
  }
}
footer .footer-main .footer-all .footer-about h2 {
  font-size: 16px;
  padding-bottom: 10px;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-about h2 {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
footer .footer-main .footer-all .footer-about ul {
  list-style-type: none;
  padding-bottom: 5px;
}
footer .footer-main .footer-all .footer-about ul li a {
  text-decoration: none;
  font-size: 12px;
  color: #7F8CAB;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-contents {
    margin-bottom: 20px;
  }
}
footer .footer-main .footer-all .footer-contents h2 {
  font-size: 16px;
  padding-bottom: 10px;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .footer-contents h2 {
    font-size: 16px;
    padding-bottom: 5px;
  }
}
footer .footer-main .footer-all .footer-contents ul {
  list-style-type: none;
  padding-bottom: 5px;
}
footer .footer-main .footer-all .footer-contents ul li a {
  text-decoration: none;
  font-size: 12px;
  color: #7F8CAB;
}
footer .footer-main .footer-all .peyments-partner .peyments-cards p {
  font-size: 12px;
  padding-bottom: 6px;
  color: #7F8CAB;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .peyments-partner .peyments-cards p {
    color: rgb(63, 63, 63);
  }
}
footer .footer-main .footer-all .peyments-partner .peyments-cards .cards {
  width: 180px;
}
footer .footer-main .footer-all .peyments-partner .peyments-cards .cards img {
  width: 30px;
}
footer .footer-main .footer-all .peyments-partner .footer-partner p {
  font-size: 12px;
  padding: 6px 0px;
  color: #7F8CAB;
}
@media screen and (max-width: 425px) {
  footer .footer-main .footer-all .peyments-partner .footer-partner p {
    color: rgb(63, 63, 63);
  }
}
footer .footer-main .footer-all .peyments-partner .footer-partner .partners-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
footer .footer-main .footer-all .peyments-partner .footer-partner .partners-logo img {
  width: 50px;
}
footer .footer-main .logo-footer {
  gap: 40px;
  margin: 25px 0px;
  padding: 20px 0px;
  border-top: solid 1px rgb(196, 196, 196);
  border-bottom: solid 1px rgb(196, 196, 196);
}
@media screen and (max-width: 425px) {
  footer .footer-main .logo-footer {
    gap: 20px;
    margin: 20px 0px;
    padding: 10px 0px;
  }
}
footer .footer-main .logo-footer img {
  width: 120px;
}
@media screen and (max-width: 425px) {
  footer .footer-main .logo-footer img {
    width: 60px;
  }
}
footer .footer-main .travel-destination {
  text-align: center;
  padding-bottom: 25px;
}
footer .footer-main .travel-destination p {
  font-size: 12px;
  color: rgb(93, 93, 93);
}
@media screen and (max-width: 425px) {
  footer .footer-main .travel-destination p {
    font-size: 8px;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
#aboutPage {
  background: linear-gradient(rgba(4, 20, 250, 0.296), rgba(6, 22, 249, 0.285)), url("../images/aboutPage/aboutpage.png");
  background-size: cover;
  background-position: center;
  height: 80vh;
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
  #aboutPage {
    height: 50vh;
  }
}
#aboutPage .navbar-about .material-symbols-outlined {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #aboutPage .navbar-about .material-symbols-outlined {
    color: #FFFFFF;
    opacity: 1;
    position: absolute;
    top: 22px;
    right: 20px;
    font-size: 2rem;
  }
}
#aboutPage .navbar-about img {
  width: 150px;
}
@media screen and (max-width: 768px) {
  #aboutPage .navbar-about img {
    width: 100px;
    position: absolute;
    top: 14px;
    left: 20px;
  }
}
#aboutPage .navbar-about ul {
  list-style: none;
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  #aboutPage .navbar-about ul {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  #aboutPage .navbar-about ul {
    display: none;
  }
}
#aboutPage .navbar-about ul #aboutContent {
  color: #FF8C00;
}
#aboutPage .navbar-about ul a {
  text-decoration: none;
  color: #FFFFFF;
}
#aboutPage .navbar-about ul a:hover {
  color: #FF8C00;
}
#aboutPage .navbar-about ul #sign a {
  color: #FFFFFF;
}
#aboutPage .navbar-about ul #home {
  color: #FF8C00;
}
#aboutPage #aboutus {
  font-size: 56px;
}
@media screen and (max-width: 768px) {
  #aboutPage #aboutus {
    font-size: 40px;
  }
}
@media screen and (max-width: 425px) {
  #aboutPage #aboutus {
    font-size: 30px;
    margin-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  #aboutPage #hook {
    font-size: 16px;
  }
}
@media screen and (max-width: 425px) {
  #aboutPage #hook {
    font-size: 14px;
  }
}

.about-main .about-content-important-travel {
  padding-top: 50px;
  padding-bottom: 50px;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .about-main .about-content-important-travel {
    padding-top: 50px;
    display: flow-root;
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-content-important-travel {
    flex-wrap: wrap;
    gap: 50px;
  }
}
.about-main .about-content-important-travel img {
  width: 600px;
  border-bottom-left-radius: 200px;
  border-top-left-radius: 200px;
}
@media screen and (max-width: 768px) {
  .about-main .about-content-important-travel img {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    width: 280px;
    float: left;
    shape-outside: inset(-100px);
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-content-important-travel img {
    width: 350px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    float: none;
    shape-outside: none;
  }
}
.about-main .about-content-important-travel .about-text-important-travel h1 {
  flex-wrap: wrap;
  color: #001E60;
  padding-bottom: 24px;
}
.about-main .about-content-important-travel .about-text-important-travel h1 span {
  color: #FF8C00;
}
@media screen and (max-width: 768px) {
  .about-main .about-content-important-travel .about-text-important-travel h1 {
    font-size: 24px;
    padding-bottom: 20px;
    padding-left: 300px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-content-important-travel .about-text-important-travel h1 {
    font-size: 16px;
    flex-wrap: wrap;
    color: #001E60;
    padding-bottom: 10px;
    padding-top: 8px;
    padding-left: 0px;
  }
}
.about-main .about-content-important-travel .about-text-important-travel p {
  flex-wrap: wrap;
  padding-bottom: 24px;
  width: 700px;
  text-align: justify;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .about-main .about-content-important-travel .about-text-important-travel p {
    font-size: 12px;
    width: 100%;
    padding-bottom: 10px;
    padding-left: 300px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-content-important-travel .about-text-important-travel p {
    padding-left: 0px;
    font-size: 10px;
    padding-bottom: 5px;
  }
}
@media screen and (max-width: 768px) {
  .about-main .about-content-important-travel .about-text-important-travel #bottom {
    padding-left: 0px;
    padding-top: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-content-important-travel .about-text-important-travel #bottom {
    padding-top: 0px;
  }
}
.about-main .why-should-we-go {
  background: linear-gradient(rgba(174, 170, 170, 0.627), rgba(147, 147, 147, 0.558)), url("../images/aboutPage/Group 83.png");
  background-size: cover;
  background-position: center;
  height: 60vh;
}
@media screen and (max-width: 768px) {
  .about-main .why-should-we-go {
    height: 32vh;
  }
}
@media screen and (max-width: 425px) {
  .about-main .why-should-we-go {
    height: 40vh;
  }
}
.about-main .why-should-we-go .why-should-we-go-text {
  text-align: center;
  width: 60%;
}
@media screen and (max-width: 768px) {
  .about-main .why-should-we-go .why-should-we-go-text {
    width: 90%;
  }
}
.about-main .why-should-we-go .why-should-we-go-text h1 {
  color: #FFFFFF;
  padding-bottom: 20px;
}
.about-main .why-should-we-go .why-should-we-go-text h1 span {
  color: #FF8C00;
}
@media screen and (max-width: 768px) {
  .about-main .why-should-we-go .why-should-we-go-text h1 {
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .why-should-we-go .why-should-we-go-text h1 {
    font-size: 16px;
    color: #001E60;
    padding-bottom: 5px;
  }
}
.about-main .why-should-we-go .why-should-we-go-text p {
  color: #FFFFFF;
  padding-bottom: 20px;
  font-weight: 300;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .about-main .why-should-we-go .why-should-we-go-text p {
    font-size: 12px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .why-should-we-go .why-should-we-go-text p {
    font-size: 10px;
    color: rgb(18, 18, 18);
    font-weight: 500;
  }
}
@media screen and (max-width: 425px) {
  .about-main .why-should-we-go .why-should-we-go-text .seeMore {
    display: none;
  }
}
.about-main .about-partner-with-us {
  background-color: #A17D45;
  margin: 100px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-left-radius: 240px;
  border-top-right-radius: 240px;
}
@media screen and (max-width: 768px) {
  .about-main .about-partner-with-us {
    margin: 72px 0px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-partner-with-us {
    margin: 40px 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    flex-direction: column;
  }
}
.about-main .about-partner-with-us .about-text-partner-with-us {
  text-align: center;
}
.about-main .about-partner-with-us .about-text-partner-with-us h1 {
  color: #FFFFFF;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .about-main .about-partner-with-us .about-text-partner-with-us h1 {
    font-size: 20px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-partner-with-us .about-text-partner-with-us h1 {
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: 400;
    font-size: 16px;
  }
}
.about-main .about-partner-with-us .about-text-partner-with-us p {
  color: #FFFFFF;
  padding: 0px 100px;
  font-size: 18px;
  font-weight: 300;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .about-main .about-partner-with-us .about-text-partner-with-us p {
    padding: 0px 40px;
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-partner-with-us .about-text-partner-with-us p {
    font-size: 10px;
    padding-bottom: 10px;
  }
}
.about-main .about-partner-with-us .about-img-partner-with-us img {
  width: 680px;
  height: auto;
  border-top-right-radius: 240px;
}
@media screen and (max-width: 768px) {
  .about-main .about-partner-with-us .about-img-partner-with-us img {
    width: 364px;
    border-top-right-radius: 100px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .about-partner-with-us .about-img-partner-with-us img {
    width: 350px;
    border-top-right-radius: 0px;
  }
}
.about-main .hotel-partners {
  display: flex;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: solid 1px rgba(199, 199, 199, 0.725);
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners {
    gap: 20px;
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners {
    flex-direction: column;
    padding-bottom: 15px;
  }
}
.about-main .hotel-partners .text-hotel-partners {
  width: 30%;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .text-hotel-partners {
    width: 40%;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .text-hotel-partners {
    width: 100%;
  }
}
.about-main .hotel-partners .text-hotel-partners h1 {
  color: #001E60;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .text-hotel-partners h1 {
    font-size: 20px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .text-hotel-partners h1 {
    font-size: 16px;
  }
}
.about-main .hotel-partners .text-hotel-partners .sub-paragram {
  font-size: 14px;
  color: gray;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .text-hotel-partners .sub-paragram {
    font-size: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .text-hotel-partners .sub-paragram {
    font-size: 8px;
  }
}
.about-main .hotel-partners .text-hotel-partners p {
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .text-hotel-partners p {
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .text-hotel-partners p {
    font-size: 10px;
  }
}
.about-main .hotel-partners .img-hotel-partners {
  width: 70%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .img-hotel-partners {
    width: 70%;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .img-hotel-partners {
    width: 100%;
  }
}
.about-main .hotel-partners .img-hotel-partners img {
  width: 190px;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  .about-main .hotel-partners .img-hotel-partners img {
    width: 100px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .hotel-partners .img-hotel-partners img {
    width: 100px;
    padding-right: 14px;
  }
}
.about-main .payment-partners {
  display: flex;
  gap: 50px;
  padding-bottom: 50px;
  padding-top: 50px;
  border-bottom: solid 1px rgba(199, 199, 199, 0.725);
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners {
    gap: 20px;
    padding-bottom: 25px;
    padding-top: 25px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners {
    gap: 10px;
    flex-direction: column;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.about-main .payment-partners .text-payment-partners {
  width: 30%;
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners .text-payment-partners {
    width: 40%;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners .text-payment-partners {
    width: 100%;
  }
}
.about-main .payment-partners .text-payment-partners h1 {
  color: #001E60;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners .text-payment-partners h1 {
    font-size: 20px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners .text-payment-partners h1 {
    font-size: 16px;
  }
}
.about-main .payment-partners .text-payment-partners p {
  font-size: 18px;
  width: 95%;
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners .text-payment-partners p {
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners .text-payment-partners p {
    font-size: 10px;
  }
}
.about-main .payment-partners .img-payment-partners {
  width: 70%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners .img-payment-partners {
    width: 60%;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners .img-payment-partners {
    width: 100%;
  }
}
.about-main .payment-partners .img-payment-partners img {
  width: 150px;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  .about-main .payment-partners .img-payment-partners img {
    width: 100px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .payment-partners .img-payment-partners img {
    width: 60px;
  }
}
.about-main .online-hotel-booking {
  padding-bottom: 50px;
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
  .about-main .online-hotel-booking {
    padding: 25px 0px;
  }
}
.about-main .online-hotel-booking h1 {
  text-align: center;
  padding-bottom: 40px;
  color: #001E60;
}
@media screen and (max-width: 768px) {
  .about-main .online-hotel-booking h1 {
    font-size: 20px;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .online-hotel-booking h1 {
    font-size: 16px;
    padding-bottom: 10px;
  }
}
.about-main .online-hotel-booking .sub-hotel-booking {
  text-align: center;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .about-main .online-hotel-booking .sub-hotel-booking {
    padding-bottom: 20px;
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .online-hotel-booking .sub-hotel-booking {
    font-size: 10px;
    padding-bottom: 10px;
  }
}
.about-main .online-hotel-booking .text-hotel-booking {
  text-align: center;
  font-size: 18px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .about-main .online-hotel-booking .text-hotel-booking {
    padding-bottom: 20px;
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .online-hotel-booking .text-hotel-booking {
    font-size: 10px;
    text-align: justify;
  }
}
.about-main .online-hotel-booking .show-more {
  color: #7F8CAB;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .about-main .online-hotel-booking .show-more {
    font-size: 12px;
  }
}
.about-main .download {
  text-align: center;
}
.about-main .download img {
  width: 1000px;
}
@media screen and (max-width: 768px) {
  .about-main .download img {
    width: 730px;
  }
}
@media screen and (max-width: 425px) {
  .about-main .download img {
    width: 350px;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
#hotelPage {
  background: linear-gradient(rgba(99, 109, 252, 0.5), rgba(57, 66, 196, 0.5)), url("../images/hotel&pupolar/Home-page_HanumanTravel.jpg");
  background-size: cover;
  background-position: center;
  height: 60vh;
  padding-top: 50px;
}
#hotelPage .navbar-hotel .material-symbols-outlined {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #hotelPage .navbar-hotel .material-symbols-outlined {
    color: #FFFFFF;
    opacity: 1;
    position: absolute;
    top: 22px;
    right: 20px;
    font-size: 2rem;
  }
}
#hotelPage .navbar-hotel img {
  width: 150px;
}
@media screen and (max-width: 768px) {
  #hotelPage .navbar-hotel img {
    width: 100px;
    position: absolute;
    top: 14px;
    left: 20px;
  }
}
#hotelPage .navbar-hotel ul {
  list-style: none;
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  #hotelPage .navbar-hotel ul {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  #hotelPage .navbar-hotel ul {
    display: none;
  }
}
#hotelPage .navbar-hotel ul #hotelContent {
  color: #FF8C00;
}
#hotelPage .navbar-hotel ul a {
  text-decoration: none;
  color: #FFFFFF;
}
#hotelPage .navbar-hotel ul a:hover {
  color: #FF8C00;
}
#hotelPage .navbar-hotel ul #sign a {
  color: #FFFFFF;
}
#hotelPage .navbar-hotel ul #home {
  color: #FF8C00;
}
#hotelPage #hotel-pupolar {
  font-size: 56px;
  flex-wrap: wrap;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  #hotelPage #hotel-pupolar {
    font-size: 40px;
    margin-top: 100px;
  }
}
@media screen and (max-width: 425px) {
  #hotelPage #hotel-pupolar {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  #hotelPage #hookhotel {
    font-size: 16px;
  }
}
@media screen and (max-width: 425px) {
  #hotelPage #hookhotel {
    font-size: 12px;
  }
}

.hotel-main .booking-box {
  background: white;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin: auto;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box {
    width: 100%;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .booking-box {
    padding: 10px;
  }
}
.hotel-main .booking-box h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: #007bff;
}
.hotel-main .booking-box .form-group {
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hotel-main .booking-box .form-group label {
  font-size: 14px;
  font-weight: bold;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box .form-group label {
    font-weight: 400;
  }
}
.hotel-main .booking-box .form-group input,
.hotel-main .booking-box .form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 8px;
}
.hotel-main .booking-box .form-group input:focus,
.hotel-main .booking-box .form-group select:focus {
  border-color: #007bff;
  outline: none;
}
.hotel-main .booking-box .box-check-in-out {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box .box-check-in-out {
    flex-direction: column;
    padding-top: 0px;
    gap: 0;
  }
}
.hotel-main .booking-box .box-check-in-out .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  flex: 1;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box .box-check-in-out .form-group {
    margin-bottom: 5px;
    flex-direction: column;
  }
}
.hotel-main .booking-box .box-check-in-out .form-group label {
  font-size: 14px;
  font-weight: bold;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box .box-check-in-out .form-group label {
    font-weight: 400;
    margin-top: 5px;
  }
}
.hotel-main .booking-box .box-check-in-out .form-group .material-symbols-outlined {
  position: absolute;
}
.hotel-main .booking-box .box-check-in-out .form-group input,
.hotel-main .booking-box .box-check-in-out .form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: gray;
}
.hotel-main .booking-box .box-check-in-out .form-group input:focus,
.hotel-main .booking-box .box-check-in-out .form-group select:focus {
  border-color: #007bff;
  outline: none;
}
.hotel-main .booking-box label {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
}
.hotel-main .booking-box input,
.hotel-main .booking-box select {
  flex: 2;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: gray;
}
.hotel-main .booking-box input:focus,
.hotel-main .booking-box select:focus {
  border-color: #007bff;
  outline: none;
}
.hotel-main .booking-box .search-btn {
  width: 100%;
  background: #ff5722;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 15px;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .hotel-main .booking-box .search-btn {
    margin-top: 8px;
  }
}
.hotel-main .booking-box .search-btn:hover {
  background: #e64a19;
}
.hotel-main .booking-box .pay-option {
  font-size: 14px;
  color: #007bff;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hotel-main .booking-box .pay-option img {
  width: 20px;
}
.hotel-main .popular-hotels {
  background: white;
  width: 100%;
  height: auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin: auto;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-hotels {
    width: 100%;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels {
    padding: 10px;
  }
}
.hotel-main .popular-hotels h1 {
  font-size: 24px;
  padding-bottom: 20px;
  color: #1a1a1a;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels h1 {
    font-size: 16px;
    padding-bottom: 10px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels {
    flex-direction: column-reverse;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .map {
    width: 100%;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .map-watch iframe {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels {
  display: flex;
  flex-direction: column;
  border: solid 1px rgb(225, 223, 223);
  padding: 16px 16px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .filter {
  border-bottom: solid 1px rgb(207, 207, 207);
  padding-bottom: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star {
  font-weight: 700;
  font-size: 14px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .padd-top {
  padding-top: 20px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star-rating {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star-rating label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star-rating label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 22px;
  height: 22px;
  border: 1px solid #a2a2a2;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star-rating label input[type=checkbox]:checked {
  background-color: #4caf50;
  border-color: #4caf50;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .map .star-hotels .star-rating label input[type=checkbox]:checked::after {
  content: "✔";
  color: white;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards {
  width: 70%;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards :hover {
  background-color: rgba(214, 233, 255, 0.4784313725);
  border-radius: 12px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards :hover {
    background-color: rgba(214, 233, 255, 0);
    border-radius: 0px;
  }
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards {
    width: 100%;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel {
  border: solid 1px #006ce4;
  display: flex;
  justify-content: space-around;
  border-radius: 6px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel .card1 {
  padding: 16px 20px;
  border-right: solid 1px #006ce4;
  flex: 1;
  font-size: 12px;
  color: #006ce4;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel .card1:last-child {
  border-right: none;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel .card1 {
    font-size: 8px;
    padding: 6px 2px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .contents-check-hotel .color-btn {
  background-color: #006ce4;
  color: white;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels {
  margin-top: 10px;
  cursor: pointer;
  transition: transform 0.4s ease-in-out;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels:hover {
    transform: none;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels {
    transition: none;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border: solid 1px rgb(232, 232, 232);
  border-radius: 8px;
  gap: 16px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards {
    gap: 10px;
    padding: 4px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards img {
  width: 200px;
  border-radius: 6px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards img {
    width: 80px;
    height: 80px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text {
  flex: 1;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left {
  margin-bottom: 5px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left a {
  text-decoration: none;
  color: #006ce4;
  font-weight: bold;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left a {
    font-size: 12px;
    font-weight: 600;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left a i {
  width: 10px;
  color: gold;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left a i {
    display: none;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left .location {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  margin: 4px 0px 8px 0px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left .location span {
  font-size: 16px;
  font-weight: 600;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left .location span {
    font-weight: 300;
    font-size: 12px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left .location {
    font-size: 6px;
    margin-top: 0px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left p {
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 10px;
  color: rgb(36, 36, 36);
  line-height: 1.5;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left p {
    display: none;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-left #show-more {
    font-size: 8px;
    font-weight: 400;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right {
    gap: 10px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top {
    gap: 4px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .texts {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .texts .exceptional {
  font-size: 14px;
  font-weight: 600;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .texts .exceptional {
    font-size: 8px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .texts .view {
  font-size: 12px;
  color: gray;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .texts .view {
    font-size: 6px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .reting {
  background-color: #001E60;
  color: white;
  padding: 4px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .reting {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .reting p {
  font-size: 14px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-top .reting p {
    font-size: 6px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom {
  display: flex;
  justify-content: start;
  align-items: end;
  flex-direction: column;
  gap: 4px;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .price-from {
  font-size: 12px;
  color: gray;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .price-from {
    font-size: 6px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .KHR {
  color: #008234;
  font-size: 20px;
  font-weight: 600;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .KHR {
    font-size: 10px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .night {
  font-size: 12px;
  color: gray;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .box-text .text .text-right .text-right-bottom .night {
    font-size: 6px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .buttom {
  display: flex;
  justify-content: end;
  align-items: end;
  margin-top: 16px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .buttom {
    margin-top: 2px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .buttom button {
  padding: 10px;
  background-color: #006ce4;
  color: white;
  font-weight: 600;
  border: none;
  font-size: 12px;
  border-radius: 4px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .cards-list-hotels .box-cards .buttom button {
    padding: 4px;
    font-size: 6px;
    display: none;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .see-all {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #006ce4;
  padding: 10px;
  margin-top: 10px;
  border-radius: 12px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .see-all {
    border-radius: 6px;
  }
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .see-all:hover {
  background-color: #0054b3;
}
.hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .see-all p {
  color: white;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-hotels .hotel-map-cards-hotels .hotel-cards .see-all p {
    font-size: 12px;
  }
}
.hotel-main .popular-restaurant {
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.035) 0px 10px 20px, rgba(0, 0, 0, 0.051) 0px 6px 6px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant {
    width: 100%;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant {
    padding: 10px;
  }
}
.hotel-main .popular-restaurant .text {
  width: 80%;
}
.hotel-main .popular-restaurant .text h1 {
  font-size: 24px;
  color: #001E60;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .text h1 {
    font-size: 20px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .text h1 {
    font-size: 16px;
  }
}
.hotel-main .popular-restaurant .but {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .but {
    margin: 10px 0px;
  }
}
.hotel-main .popular-restaurant .but #siem {
  background: #001E60;
  color: #FFFFFF;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .but #siem {
    padding: 8px 15px;
    font-size: 10px;
    border-radius: 6px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .but #siem {
    padding: 6px 12px;
    font-size: 8px;
  }
}
.hotel-main .popular-restaurant .but #phnom {
  background: #FFFFFF;
  font-weight: 300;
  border: solid 2px #001E60;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .but #phnom {
    padding: 8px 15px;
    font-size: 10px;
    border-radius: 6px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .but #phnom {
    padding: 6px 12px;
    font-size: 8px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .cards-rest-all {
    gap: 10px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest {
  width: 201px;
  background-color: #FFFFFF;
  border-radius: 10px;
  border: solid 1px rgb(227, 227, 227);
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest {
    width: 150px;
    border-radius: 10px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest {
    width: 150px;
    animation: none;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest img {
  width: 200px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest img {
    width: 148px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest img {
    width: 148px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest p {
  color: #1b1b1b;
  font-size: 16px;
  font-weight: 600;
  padding-top: 10px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest p {
    font-size: 10px;
    font-weight: 500;
    padding-top: 2px;
    padding-left: 8px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .stars {
  display: flex;
  align-items: center;
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .stars p {
  font-size: 12px;
  color: rgb(255, 0, 0);
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest .stars p {
    font-size: 8px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .stars .star i {
  color: #FF8C00;
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest .stars .star i {
    font-size: 10px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest #address {
  flex-wrap: wrap;
  width: 200px;
  font-size: 10px;
  font-weight: 300;
  color: #7F8CAB;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest #address {
    width: 150px;
    font-size: 8px;
    padding-bottom: 10px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .US {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .US p {
  font-size: 10px;
  color: gray;
  top: 40px;
  padding-top: 5px;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest .US p {
    font-size: 6px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .cards-rest .US h2 {
  color: #001E60;
}
@media screen and (max-width: 768px) {
  .hotel-main .popular-restaurant .cards-rest-all .cards-rest .US h2 {
    font-size: 10px;
  }
}
.hotel-main .popular-restaurant .cards-rest-all .koh img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
@media screen and (max-width: 425px) {
  .hotel-main .popular-restaurant .cards-rest-all .koh img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
.hotel-main .pupolar-places {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  margin-top: 20px;
  padding: 20px;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .hotel-main .pupolar-places {
    width: 100%;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .pupolar-places {
    padding: 10px;
  }
}
.hotel-main .pupolar-places h1 {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 20px;
  color: #001E60;
}
@media screen and (max-width: 425px) {
  .hotel-main .pupolar-places h1 {
    font-size: 20px;
    padding-bottom: 10px;
  }
}
.hotel-main .pupolar-places .location-places {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 425px) {
  .hotel-main .pupolar-places .location-places {
    gap: 10px;
  }
}
.hotel-main .pupolar-places .location-places .box {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.hotel-main .pupolar-places .location-places .box:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .hotel-main .pupolar-places .location-places .box {
    width: 200px;
    height: 200px;
    font-size: 20px;
  }
}
@media screen and (max-width: 425px) {
  .hotel-main .pupolar-places .location-places .box {
    width: 160px;
    height: 160px;
    font-size: 14px;
  }
}
.hotel-main .pupolar-places .location-places .bayon {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Bayon Temple.png");
}
.hotel-main .pupolar-places .location-places .pub {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Pub Stree.png");
}
.hotel-main .pupolar-places .location-places .ta {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Ta Prohm Temple.png");
}
.hotel-main .pupolar-places .location-places .angkor {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Angkor Wat.png");
}
.hotel-main .pupolar-places .location-places .royal {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Royal Palace.png");
}
.hotel-main .pupolar-places .location-places .museum {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Museum.png");
}
.hotel-main .pupolar-places .location-places .genocide {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Genocide Museum.png");
}
.hotel-main .pupolar-places .location-places .walking {
  background-image: linear-gradient(rgba(5, 5, 5, 0.5), rgba(10, 10, 10, 0.5)), url("../images/hotel&pupolar/places/Walking Street.png");
}
.hotel-main .faq-container {
  width: 100%;
  margin: auto;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .hotel-main .faq-container {
    width: 100%;
  }
}
.hotel-main .faq-container h1 {
  margin-bottom: 10px;
  color: black;
}
@media screen and (max-width: 425px) {
  .hotel-main .faq-container h1 {
    font-size: 20px;
  }
}
.hotel-main .faq-container .faq-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px gray;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}
.hotel-main .faq-container .faq-card:hover {
  transform: scale(1.1);
}
.hotel-main .faq-container .faq-card .faq-question {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: black;
}
@media screen and (max-width: 425px) {
  .hotel-main .faq-container .faq-card .faq-question {
    font-size: 16px;
  }
}
.hotel-main .faq-container .faq-card .faq-answer {
  padding: 0 15px 15px;
  color: gray;
  font-size: 16px;
}
@media screen and (max-width: 425px) {
  .hotel-main .faq-container .faq-card .faq-answer {
    font-size: 14px;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
#customerPage {
  background: #00a59e;
  background-size: cover;
  background-position: center;
  height: 60vh;
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
  #customerPage {
    height: 50vh;
  }
}
#customerPage .navbar-customer .material-symbols-outlined {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #customerPage .navbar-customer .material-symbols-outlined {
    color: #FFFFFF;
    opacity: 1;
    position: absolute;
    top: 22px;
    right: 20px;
    font-size: 2rem;
  }
}
#customerPage .navbar-customer img {
  width: 150px;
}
@media screen and (max-width: 768px) {
  #customerPage .navbar-customer img {
    width: 100px;
    position: absolute;
    top: 14px;
    left: 20px;
  }
}
#customerPage .navbar-customer ul {
  list-style: none;
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  #customerPage .navbar-customer ul {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  #customerPage .navbar-customer ul {
    display: none;
  }
}
#customerPage .navbar-customer ul #customerContent {
  color: #FF8C00;
}
#customerPage .navbar-customer ul a {
  text-decoration: none;
  color: #FFFFFF;
}
#customerPage .navbar-customer ul a:hover {
  color: #FF8C00;
}
#customerPage .navbar-customer ul #sign a {
  color: #FFFFFF;
}
#customerPage .navbar-customer ul #home {
  color: #FF8C00;
}
#customerPage .welcome-img {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #customerPage .welcome-img {
    padding: 0px;
    margin: 0px;
  }
}
#customerPage .welcome-img #customer {
  font-size: 56px;
  margin-top: 140px;
}
@media screen and (max-width: 768px) {
  #customerPage .welcome-img #customer {
    font-size: 40px;
  }
}
@media screen and (max-width: 425px) {
  #customerPage .welcome-img #customer {
    font-size: 30px;
    margin-top: 100px;
  }
}
@media screen and (max-width: 768px) {
  #customerPage .welcome-img #hook {
    font-size: 16px;
  }
}
@media screen and (max-width: 425px) {
  #customerPage .welcome-img #hook {
    font-size: 14px;
  }
}
#customerPage .welcome-img .but {
  transition: transform 0.2s ease-in-out;
}
#customerPage .welcome-img .but button {
  color: white;
  border: solid 1px white;
  font-size: 16px;
}
@media screen and (max-width: 425px) {
  #customerPage .welcome-img .but button {
    font-size: 10px;
  }
}
#customerPage .welcome-img .but button:hover {
  background: #FF8C00;
  color: #FFFFFF;
  border: solid 1px #FF8C00;
}
#customerPage .welcome-img .but:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  #customerPage .welcome-img .but:hover {
    display: none;
  }
}
#customerPage .welcome-img img {
  width: 200px;
  margin-top: 100px;
}
@media screen and (max-width: 768px) {
  #customerPage .welcome-img img {
    width: 180px;
    margin-top: 200px;
  }
}
@media screen and (max-width: 425px) {
  #customerPage .welcome-img img {
    display: none;
  }
}

.customer-main {
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .customer-main {
    width: 100%;
  }
}
.customer-main .service-chat {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat {
    padding: 10px;
  }
}
.customer-main .service-chat .service-chat1 {
  margin-bottom: 20px;
}
.customer-main .service-chat .service-chat1 h1 {
  font-size: 32px;
  margin-bottom: 30px;
  width: 50%;
  justify-content: flex-start;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat1 h1 {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 h1 {
    width: 100%;
    font-size: 20px;
  }
}
.customer-main .service-chat .service-chat1 h1 span {
  width: 20px;
  height: 20px;
  background-color: #50c8c2;
  margin-right: 10px;
  color: #ffffff;
  border-radius: 100%;
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 h1 span {
    width: 15px;
    height: 15px;
  }
}
.customer-main .service-chat .service-chat1 .service-chat-contents {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 .service-chat-contents {
    gap: 4px;
  }
}
.customer-main .service-chat .service-chat1 .service-chat-contents p {
  padding: 6px 40px;
  border: solid 1px rgb(212, 212, 212);
  border-radius: 6px;
  font-size: 14px;
  gap: 5px;
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 .service-chat-contents p {
    padding: 4px 10px;
    font-size: 10px;
  }
}
.customer-main .service-chat .service-chat1 .service-chat-contents p span {
  color: gray;
  font-size: 20px;
}
.customer-main .service-chat .service-chat1 .service-chat-question {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat1 .service-chat-question {
    flex-direction: column;
  }
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 .service-chat-question {
    gap: 4px;
  }
}
.customer-main .service-chat .service-chat1 .service-chat-question p {
  width: 49%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 16px;
  background-color: rgba(245, 245, 245, 0.8470588235);
  border-radius: 4px;
  color: #1b1b1b;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat1 .service-chat-question p {
    width: 100%;
    padding: 20px 12px;
  }
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat1 .service-chat-question p {
    font-size: 12px;
    padding: 10px 6px;
  }
}
.customer-main .service-chat .service-chat2 h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat2 h1 {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 425px) {
  .customer-main .service-chat .service-chat2 h1 {
    width: 100%;
    font-size: 20px;
  }
}
.customer-main .service-chat .service-chat2 .topic {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat2 .topic {
    gap: 4px;
  }
}
.customer-main .service-chat .service-chat2 .topic p {
  padding: 10px 16px;
  background-color: #f8f8f8;
  font-size: 14px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .customer-main .service-chat .service-chat2 .topic p {
    font-size: 12px;
    padding: 6px 12px;
  }
}
.customer-main .service {
  background-color: white;
  justify-content: space-between;
  margin-top: 20px;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .customer-main .service {
    margin-top: 10px;
  }
}
.customer-main .service p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border-right: solid 1px rgb(196, 196, 196);
  padding: 20px;
  color: gray;
}
@media screen and (max-width: 768px) {
  .customer-main .service p {
    padding: 12px;
    font-size: 14px;
  }
}
@media screen and (max-width: 425px) {
  .customer-main .service p {
    padding: 8px;
    font-size: 10px;
  }
}
.customer-main .service p span {
  font-size: 20px;
  margin-right: 4px;
}
@media screen and (max-width: 425px) {
  .customer-main .service p span {
    font-size: 16px;
  }
}
.customer-main .service p:last-child {
  border-right: none;
}
.customer-main .service #first {
  color: #0050FF;
}

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

body {
  background-color: #F2F6FF;
}/*# sourceMappingURL=styles.css.map */