@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
  margin:0;
  padding:0;
  font-size:18px;
 /* list-style:none;*/
  text-decoration:none;
  outline:none;
  font-family: 'Poppins', sans-serif;
}
*{
  scrollbar-width:auto;
  scrollbar-color:#5e5e5e #fff
}
*::-webkit-scrollbar{
  width:9px
}
*::-webkit-scrollbar-track{
  background:#fff
}
*::-webkit-scrollbar-thumb{
  background-color:#f43676;
  border:0 #fff
}
html{
  scroll-behavior:smooth;
  letter-spacing:.2px
}
body {
  background-color: #fdfdff;

  color: #3c424a;
  font-size: 1.6rem;
}


header {
  background-color: #ffffff;
  padding: 2px;
  box-shadow: 20px 20px 20px #efefef;
}

section{
  width: 80%;
  margin: auto;
}

/* */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
}

.desktoplogo img {
    margin: auto;
    height: 45px;
    display: block;
    padding: 1px;
}

.container {
    margin: 10px  auto;
}

.desktop_category {
  display: flex;
  list-style: none;
  gap: 20px;
}
.desktop_category_flex{
  display: flex;
}

.desktop_category li {
  display: inline-block;
}

.desktop_category_link {
  text-decoration: none;
  color: #002b11;
  font-size: 14px;
  font-weight: 600;
}


.desktop_category_link:hover {

  color: #007833;
  
}


h1 {
    color: #002b11;
    font-size: 35px;
    margin: 15px 0px;
    line-height: 45px;
}

.mobilelogohy{
  height: 40px;
}

.flexcont{
  display: flex;
}


aside{
  width: 25%;


}
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: Arial, sans-serif;
}

.breadcrumb-item {
    background: white;
    padding: 2px 10px;
    border-radius: 20px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0 5px;
    text-decoration: none;
    color: #002b11;
    font-size: 12px;
    text-transform: uppercase;
    /* font-weight: bold; */
}

.separator {
  margin: 0 5px;
  font-size: 15px;
  color: #666;
}
.asidediv{
  margin: 25px 5px;
  box-shadow: 0px 5px 20px 0px #7272ff1f;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
}
#backToTop {
  position: fixed;
  bottom: 19px;
  right: 19px;
  width: 32px;
  height: 32px;
  background-color: #00ab42;
  color: rgb(69, 68, 68);
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

        .hotelcontainer {
            position: relative;
            text-align: center;
            height:200px;
        }
        .hotelimage {
            width: 100%;
            height: 200px;
                object-fit: cover;
        }
.hoteloverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Black background with low opacity */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2em;
            font-weight: bold;
        }



.arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid white;
}

.progress-circle {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: conic-gradient(#00ab42 0%, #ddd 0%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 2px 2px 20px #f2f2f2;
}
.progress-circle::before {
  content: '';
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
}
.asideul li a{
  text-decoration: none;
  color: #555;
  font-size: 16px;
  font-weight: 600;
}

.asideul li a:hover{
  color: #002b11;

}
.asideul li {
  list-style: none;
  color: #555;
  padding: 7px 0px;
}
/* Hide hamburger menu on desktop */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  display: none;
}

.hamburger:hover span {
  background-color: #002b11; /* Change to any color you like */
}

.hamburger span {
    display: block;
    width: 20px;
    height: 3px;
    background: #002b11;
    border-radius: 3px;
}

.categname{
  color: #696981;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 0px 20px 0px;

}

p {
  color: #141533;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}
h2 {
    font-size: 18px;
    margin: 8px 0px;
    font-family: "Poppins", sans-serif;
    padding: 0px 0px 5px 5px;
    color: #002b11;
    height: 50px;
    align-items: center;
    display: flex;
    font-weight: 600;
        line-height: 20px;
}

article {
  counter-reset: h3-counter;
}

.h3::before {
    counter-increment: h3-counter;
    content: counter(h3-counter);
    font-size: 23px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #002b11;
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin: 0px 8px 0px 0px;
    border-radius: 20px;
}

h3{
  color: #002b11;
  font-size: 25px;
  margin: 32px 0px 20px 0px;
}

strong{
  font-weight: 600;
}

.hotelcardflex {
    display: block;
}

article ul{
  padding: 20px 0px 20px 25px;
  color: #00ab42bd;
  line-height: 1.55;
  font-weight: 400;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}

article ul li{color: #00ab42bd;
  line-height: 1.55;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

article ul li::marker {
  color: #5955d1;
}
.post_image {
  position: relative;
  width: 500px;
  display: block;
  margin: auto;
  margin-bottom: 30px;
}
.post_image {
  text-align: center;
}

.post_image img {
  width: 500px;
  height: 100%;
  display: block;
  border: 1px solid #ddd;
  min-width: 200px;
  min-height: 250px;
  background-image: url(images/loading.gif);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0px 0px 20px #dbdada;
}

/* author*/
.article-header {
  text-align: center;
  margin-bottom: 20px;
  color: #a5a5a5;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.author {
  color: #4c6ef5;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
}

.note{
  padding: 15px;
  background-color: #00ab42bd;
  color: #fff;
  border-radius: 20px;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}

.affiliate_disclosure {
  padding: 10px 8px;
  background-color: #e9edff;
  border-radius: 4px;
}

.article-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.article-box {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 25px 0px #7272ff54;
  text-align: center;
  width: 250px;
  transition: transform 0.3s ease-in-out;
}

.article-box:hover {
  transform: translateY(-5px);
}

.article-box h3 {
  margin: 10px 0;
  font-size: 16px;
  color: #666;
  text-transform: uppercase;
}

.article-box a {
  /* text-decoration: none; */
  font-weight: 600;
  color: #222;
  font-size: 18px;
  position: initial;
}
.tags {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.tag {
  background: #ffffff;
  color: #00ab42bd;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 12px;
  box-shadow: 6px 7px 20px 0px #c8c8c8;
}

.prenext {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: #7d7c7c;
  margin-bottom: 12px;
}


.searchbarmenu {
  width: 25px;
  height: 25px;
  margin: 1px 12px;
  cursor: pointer;
  padding: 2px 1px 2px 4px;
  border-radius: 6px;
}
.searchbarmenu:hover {
  background-color: #e0e0e0;
}

.searchbarmenuimg {
  width: 23px;
  height: 23px;
}

hr {
  border-top: 1px solid #dad9d9;
  margin: 30px 0px;
}

.pinterest-btn {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: url('images/Pinterest-logo.png') no-repeat center center;
  background-size: cover;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
}

.post_image {
    position: relative;
    width: 500px;
    display: block;
    margin: auto;
    background-color: #fff;
    margin-bottom: 20px;
}


.cardxc {
    display: inline-grid;
    width: 29%;
    background-color: #ffff;
    border-radius: 25px;
    border: 1px solid #d7d4d4;
    color: #313131;
    /* max-width: 300px; */
    margin: 15px;
    box-shadow: 4px 24px 25px #0000001f;
    transition: 0.5s;
}

.imgandall:hover .imghyxc {
   transition: 0.5s;
  transform: scale(1.1);
}

.imgandall {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    height: 222px;
}

.imghyxc {
    border-radius: 25px 25px 0px 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.doteldetailesxs {
    padding: 5px 12px;
}
.hoteladdress {
    font-size: 13px;
    color: #666666;
    display: flex;
    align-items: center;
    line-height: 17px;
    margin-left: 0;
    justify-content: flex-start;
    height: 30px;
}
.hoteladdress::before {
    content: "";
    background-image: url("images/address2.svg");
    width: 20px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    margin-right: 8px; /* space between icon and text */
}

.hoteldescription {
    font-size: 14px;
    color: #555;
    padding: 0px 7px;
        height: 145px;
    overflow: clip;
}
.hotelfacilities {
    min-height: 70px;
}

.hotelcheckavailability {
    background-color: #00eb5b;
    font-size: 14px;
    padding: 8px;
    text-align: center;
    border-radius: 19px;
    margin: 5px;
    display: block;
    margin: auto;
    color: #002b11;
    font-weight: 600;
    border: 1.5px solid #00ab42;
    width: 48%;
    transition: 0.3s;
}

.hotelcheckavailability:hover {
transform: scale(1.05);
}

.hotelfacilitiestext {
    display: flex;
    font-size: 12px;
    line-height: 25px;
    color: #555;
    min-width: 56px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    margin: 3px;
    display: inline-flex;
    padding: 0px 5px 0px 2px;
}
.hotesymb {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;

    margin: 2px;
}

.hotelwifi {background-image: url("images/icons/wifi.svg");}
.hotelpet {background-image: url("images/icons/pet.svg");}
.hotelbar {background-image: url("images/icons/bar.svg");}
.hotelgym {background-image: url("images/icons/gym.svg");}
.hotelac {background-image: url("images/icons/ac.svg");}
.hotelparking {background-image: url("images/icons/parking.svg");}
.hotelbreakfast {background-image: url("images/icons/breakfast.svg");}
.hotelpool {background-image: url("images/icons/pool.svg");}


.imgandall::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0) 0%
66%
, rgb(0 0 0 / 81%) 100%);
    pointer-events: none;
}

.badge-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  left: 10px;
  gap: 8px;
  z-index: 10;
}

.badge {
    background-color: white;
    border-radius: 20px;
    padding: 5px 12px 5px 30px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    width: fit-content;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    opacity: 1;
}
.badge::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.badge span {
    font-size: 9px !important;
}
/* Add your SVG image URLs below */
.badge.bestdeal::before {
  background-image: url('images/icons/bestdeal.svg');
}

.badge.couple::before {
  background-image: url('images/icons/couple.svg');
}

.badge.dollar::before {
  background-image: url('images/icons/dollar.svg');
}
.hotelpricehy {
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    margin: 10px 0px;
    display: block;
    margin: auto;
    width: 48%;

}

.hotelpricehy::before {
    content: "STARTING FROM";
    display: block;
    font-size: 12px;
    color: #929292;
}
.hotelpriceandbutton {
    display: flex;
    margin: 10px 0px;
}
        /* Filter start*/
.header-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

.filter-toggle-btn {
   background: linear-gradient(135deg, #f4f6ff 0%, #eae8eb 100%); 
  
    color: #616161;

    border: 1px solid #e0d6d6;

    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

        .filter-toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .filter-icon {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

.filter-sort-container {
    background: #eefff5;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 4px 5px 18px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    display: none;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    animation: slideDown 0.3s ease-out;
}

        .filter-sort-container.show {
            display: flex;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto;
}

        .filter-group label {
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }

        .filter-group select, .filter-group input {
            padding: 12px 16px;
            border: 2px solid #e1e8ed;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            appearance: none;
            cursor: pointer;
                background-color: #fff;
        }

        .filter-group select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 12px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 40px;
        }

        .filter-group select:focus, .filter-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: translateY(-1px);
        }

        .filter-group select:hover, .filter-group input:hover {
            border-color: #b8c5d6;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .filter-group select option {
            padding: 12px 16px;
            background: white;
            color: #2c3e50;
            font-weight: 500;
            border: none;
        }

        .filter-group select option:hover, .filter-group select option:checked {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: rgb(10, 121, 0);
        }

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: auto;
}

        .apply-filter-btn, .clear-filter-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .apply-filter-btn {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
        }

        .apply-filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
        }

        .clear-filter-btn {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
        }

        .clear-filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
        }

        .apply-icon, .clear-icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

.results-info {
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    font-weight: 500;
    color: #676868;
    transition: all 0.3s ease;
    scroll-margin-top: 20px;
    font-size: 14px;
}

        .results-info.blink {
            animation: blinkHighlight 0.6s ease-in-out 3;
        }

        @keyframes blinkHighlight {
            0%, 100% {
                background: white;
                box-shadow: 0 1px 5px rgba(0,0,0,0.05);
            }
            50% {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
                transform: scale(1.02);
            }
        }

        .no-results {
            text-align: center;
            padding: 60px 20px;
            color: #7f8c8d;
            font-size: 18px;
            display: none;
        }

        /* Hide filtered hotels */
        .hotel-filtered-hidden {
            display: none !important;
        }

        @media (max-width: 768px) {
            .filter-sort-container {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-actions {
                flex-direction: column;
                width: 100%;
            }

            .apply-filter-btn, .clear-filter-btn {
                width: 100%;
                justify-content: center;
            }

            .header-controls {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
        }

        /* Filter end*/



/* 
.rating-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 3px 6px;
    border-radius: 6px;
    gap: 10px;
    position: absolute;
    margin-top: -53px;
    z-index: 1;
}

.rating-number {
    background-color: #33d202;
    color: white;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
}

    .rating-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.stars {
    font-size: 15px;
    color: #FFD700;
    line-height: 1.2;
}

.reviews {
    font-size: 12px;
    color: #fff;
    margin-top: 0px;
}


*/




.rating-box {
    display: flex;
    align-items: center;
    /* background: rgba(0, 0, 0, 0.5); */
    color: white;
    padding: 3px 6px;
    border-radius: 6px;
    gap: 10px;
    position: absolute;
    margin-top: -53px;
    z-index: 1;
}
.rating-number {
    background-color: #00eb5b;
    color: white;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 18px;
    height: 18px;
    text-align: center;
}

.rating-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stars {
    font-size: 15px;
    color: #FFD700;
    line-height: 1.2;
}

.reviews {
    font-size: 12px;
    color: #fff;
    margin-top: 0px;
}

.hr{
    border-top: 1px solid #dad9d9;
    margin: 10px 0px;
}












.post_image:hover .pinterest-btn {
  opacity: 1;
}


/*Home page */

.homepage_cards {
    display: block;
    margin: auto;
    text-align: center;
}

.homepage_card_image img {
    width: 200px;
    height: 275px;
    border-radius: 10px;
    object-fit: cover;
}
.homepage_cards a {
    color: #282828;
    margin: 6px;
    width: 200px;
    height: 335px;
    display: inline-grid;
    background-color: #ffffff;
    border: 1px solid #cecccc;
    border-radius: 10px;
    padding: 10px;
    transition: 0.3s;
    box-shadow: 0px 11px 17px 8px #d4d4d4;
}
.taghy {
    position: absolute;
    background-color: #00ab42bd;
    padding: 1px  10px;
    font-size: 14px;
    color: #fff;
    /* width: 60px; */
}
.homepage_card_title {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    margin-top: 5px;
}



.insta {
    margin: auto;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 600;
    margin-top: -15px;
}

.credithy {
    color: #b7b7b7;

    font-size: 12px;
    position: relative;
    margin-top: -20px;
}
/* read more below article */
.read-next-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}
.read-next-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 30%;
  min-width: 280px;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.read-next-card:hover {
  transform: scale(1.05);

}

.read-next-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.read-next-card-content {
  padding: 15px;
}
.read-next-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
.read-next-tag {
  background: rgb(100,149,237);
  color: white;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  box-shadow: 2px 4px 11px 0px #6495ed6e;
}

.read-next-card h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #333;
}
.read-next-card p {
  font-size: 14px;
  color: #555;
}


/*homepage links*/
.sn-container {
  margin-top: 50px;
}
.sn-title {
  color: #666;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sn-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}
.sn-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  transition: 0.3s;
}
.sn-topic:hover {
  transform: translateY(-3px);
}
.sn-icon {
  font-size: 16px;
}




/* footer*/
.foot-container {
  background-color: #f8f8fc;
  padding: 40px;
  font-family: Arial, sans-serif;
  
}

.foot-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  display:flex;
}

.foot-logo-section {
  max-width: 350px;
}

.foot-logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #222;
}

.foot-icon {
  font-size: 24px;
  margin-right: 8px;
}

.foot-description {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}
.foot-icon {
  font-size: 24px;
  margin-right: 8px;
}

.foot-description {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}

.foot-social-icons a {
  display: inline-block;
  margin-right: 10px;
}

.foot-social-img {
  width: 24px;
  height: 24px;
}

.foot-links {
  display: flex;
  gap: 50px;
}
.foot-section h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #222;
}

.foot-section ul {
  list-style: none;
  padding: 0;
}

.foot-section ul li {
  margin-bottom: 6px;
}

.foot-section ul li a {
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.foot-section ul li a:hover {
  color: #002b11;
}

.foot-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}



.desktoplogofoot img {
  margin: auto;
  height: 40px;
  display: block;
  padding: 1px;
}


/* Mobile styles */
@media (max-width: 1200px) {
  section {
    width: calc(100% - 20px);
}

aside {
  width: 30%;
}
    article {
        width: 98%;
    }

.hamburger {
  display: flex;
}
.desktop_category {
  display: none; /* Hide categories on small screens */
}

}




@media (max-width: 900px) {
  .flexcont {
    display: block;
  }

.cardxc {

    width: calc(100% - 53%);

}

  .foot-logo-section {
    max-width: 90%;
    margin: auto;
    width: 90%;
}


.foot-logo {
  display: block;
}
.foot-links {
  display: flex;
  gap: 50px;
  width: 90%;
  display: contents;
}
.foot-social-icons {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d0d0d0;
}

  aside {
    width: calc(100% - 20px);
  }
    article {
      width: calc(100% - 20px);
  }
  

}


@media (max-width: 600px) {
  nav {
      position: relative;
      justify-content: end;
  }


.h1 {
  
    font-size: 21px;

    line-height: 26px;
}


.hoteloverlay {

    font-size: 22px;

}


.cardxc {
    width: calc(100% - 20px);
    display: block;
    margin: 25px auto;
}
 
  .article-container {
display: block;
 
}
  .article-box {
    margin: auto;
    width: 90%;
    margin-top: 20px;
  
}



  .hamburger {
      
      position: absolute;
      left: 10px;
  }

  .desktoplogo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

  .post_image {
    width: calc(100% - 20px);
  }

}
@media only screen and (max-width: 1200px) {
  .post_image img {
      width: calc(100% - 20px);
      height: 100%;
  }
}


@media only screen and (max-width: 960px) {
  .post_image img {
      width: 100%;
      height: 100%;
  }
}
/* Drawer styles */
.drawer {
  position: fixed;
  z-index: 99;
  top: 0;
  left: -300px; /* Hide initially */
  width: 250px;
  height: 100%;
  background: #ffffff;
  color: white;
  padding: 20px;
  transition: 0.3s ease-in-out;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}

.drawer ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.drawer li {
  padding: 10px 0;
}

.drawer a {
  text-decoration: none;
  color: #27272a;
  font-size: 18px;
  /*  */
}

.drawer.open {
  left: 0;
}

.close-btn {
  background: none;
  border: none;
  color: #858585;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  right: 5px;
  transition: transform 0.3s ease-in-out;
  margin-top: -45px;
}

.close-btn:hover {
  transform: rotate(360deg);
}