@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap'); /* font-family: 'Poppins', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,200;1,7..72,400&display=swap'); /* font-family: 'Literata', serif; */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap'); /* font-family: 'Dancing Script', cursive; */

/*----------------------------------ROOT----------------------------------*/
:root {
    --color-primary: #EEC78C;
    --color-secondary: #FFF8EB;
    --color-accent: #FFB606;
    --color-light: #F7F7F7;
    --color-dark: #2A2A2A;
    --color-white: #FFFFFF;
    --color-black: #000000;
}
/*----------------------------------ROOT----------------------------------*/

/*----------------------------------RESET STYLE----------------------------------*/

*,
*::before,
*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
*:focus { outline: none !important; }

/* SMOOTH SCROLLING */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}
/* HTML */
html {
  -webkit-text-size-adjust: none; /* for iOS Safari */
  text-size-adjust: none; /* for other mobile browsers */
  font-size: 15px;
  -webkit-text-size-adjust: none; /* for iOS Safari */
  text-size-adjust: none; /* for other mobile browsers */
}


/*----------------------------------RESET STYLE----------------------------------*/

/*----------------------------------UNIVERSAL STYLE----------------------------------*/

/* BODY */
body { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0; background-color: var(--color-light); color: var(--color-dark); }

/* Cursor */
label,
button,
select,
summary,
[type=radio],
[type=submit],
[type=checkbox] { cursor: pointer; }

/* BUTTON */
button { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background-color: var(--color-primary); color: var(--color-dark); border: none; border-radius: 4px; transition: background-color 400ms, color 400ms; padding: .8rem 1rem; border: 1px solid var(--color-primary); }
button:hover { background-color: var(--color-dark); color: var(--color-light); border: 1px solid var(--color-dark); transition: background-color 400ms, color 400ms; }

/* ANCHOR */
a { text-decoration: none; color: var(--color-dark); }

/* UNORDERED LIST */
ul { list-style-type: none; padding: 0; }

/* HORIZONTAL LINE */
hr { height: 2px; width: 100%; background-color: var(--color-primary); border: none; border-radius: 4px; padding: 1px; }

/*----------------------------------UNIVERSAL STYLE----------------------------------*/

/*----------------------------------UNIVERSAL CLASS STYLE----------------------------------*/

/* GOOGLE ICONS */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}

/* FONT */
.font-primary { font-family: 'Poppins', sans-serif; } .font-secondary { font-family: 'Literata', serif; } .font-accent { font-family: 'Dancing Script', cursive; }
.font-w200 { font-weight: 200; } .font-w400 { font-weight: 400; } .font-w600 { font-weight: 600; } .font-w700 { font-weight: 700; }

/* COLOR */
.color-primary { color: var(--color-primary); } .color-secondary { color: var(--color-secondary); } .color-accent { color: var(--color-accent); } .color-light { color: var(--color-light); } .color-dark { color: var(--color-dark); } .color-white { color: var(--color-white); } .color-black { color: var(--color-black); }

/* BACKGROUND COLOR */
.bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-accent { background-color: var(--color-accent); } .bg-light { background-color: var(--color-light); } .bg-dark { background-color: var(--color-dark); } .bg-white { background-color: var(--color-white); } .bg-black { background-color: var(--color-black); }

/* CONTAINER */
.container { width: 100%; max-width: 1600px; margin: 0 auto; }

/* SECTION TITLE */
.section-title { display: flex; align-items: center; text-transform: uppercase; letter-spacing: .3rem; font-weight: 600; }
.section-title .leading-line { height: 1px; width: 2rem; margin-right: 10px; background-color: var(--color-dark); }

/* LOGO */
.logo-lg { height: 3rem; width: auto; }

/* MARGIN */
.m-3 { margin: 3rem; }
.mx-3 { margin-left: 3rem; margin-right: 3rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }

/* PADDING */
@media only screen and (min-width: 1000px) {
    .pt-lg-3 { padding-top: 3rem; }
    .pt-lg-5 { padding-top: 5rem; }
}

/* BUTTON */
.light-button { background: transparent; border: 1px solid var(--color-primary); }

/*----------------------------------UNIVERSAL CLASS STYLE----------------------------------*/

/*----------------------------------HAMBURGER MENU----------------------------------*/

.hamburger-menu label{ display: flex; flex-direction: column; width: 60px; cursor: pointer; }
.hamburger-menu label span{ background: var(--color-dark); border-radius: 10px; height: 2px; margin: 6px 0; transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.hamburger-menu span:nth-of-type(1){ width:50%; }
.hamburger-menu span:nth-of-type(2){ width:100%; }
.hamburger-menu span:nth-of-type(3){ width:75%; }
.hamburger-menu input[type="checkbox"]{ display: none; }
.hamburger-menu input[type="checkbox"]:checked ~ span:nth-of-type(1){ transform-origin:bottom; transform:rotatez(45deg) translate(4px,-1px) }
.hamburger-menu input[type="checkbox"]:checked ~ span:nth-of-type(2){ transform-origin:top; transform:rotatez(-45deg) }
.hamburger-menu input[type="checkbox"]:checked ~ span:nth-of-type(3){ transform-origin:bottom; width:50%; transform: translate(25px,-4px) rotatez(45deg); }

/*----------------------------------HAMBURGER MENU----------------------------------*/

/*----------------------------------HEADER----------------------------------*/

.hide-header { top: -80px; transition: top 400ms; }
.light-header { background-color: var(--color-light); }

header { position: fixed; top: 0; background-color: #FFFFFF55; width: 100%; height: 80px; transition: top 400ms, background-color 800ms; z-index: 10; }
header .header-container { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; height: 100%; width: 100%; padding: .75rem; max-width: 1600px; margin: 0 auto }
header .brand { display: flex; align-items: center; justify-content: center; padding: .5rem; }
header .brand a { height: 100%; width: auto; }
header .brand img { height: 100%; max-height: 50px; width: auto; }
header .click-to-action { display: flex; flex-direction: row; gap: 10px ; align-items: center; justify-content: end; width: 202.3px; }
/*header .click-to-action button { padding: .6rem 1rem; text-transform: capitalize; }*/
header .active-nav-item { border-bottom: 1px solid var(--color-dark); transform: translate(0, 1px);  font-weight: 600; }
header .active-nav-item:hover { translate: 0 2px; }
header nav a { translate: 0 0; transition: translate 400ms; }
header nav a:hover { translate: 0 -4px; transition: translate 400ms; }

header #slide-menu { display: block; position: absolute; right: 0; height: calc(100vh - 80px); transition: right 400ms; background-color: var(--color-light); box-shadow: -30px 18px 28px -14px rgba(0,0,0,0.13); overflow-y: auto; }
header #slide-menu h1 { font-family: 'Literata', serif; font-weight: 200; margin: .8rem 0; font-size: 1.5rem; }
header #slide-menu nav { display: flex; flex-direction: column; gap: 1rem; align-items: start; }
header #slide-menu .menu-container { display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 10px; height: 100%; width: 100%; padding: 1rem 3rem; }
header #slide-menu .contact a { display: flex; flex-direction: row; align-items: center; gap: 1rem; font-size: 1rem; }
header #slide-menu .contact span { color: var(--color-primary); }

@media only screen and (max-width: 999px) {
    header .navigation { display: none; }
    header .navigation button { padding: .6rem 1rem; }
    header .click-to-action button { display: none; }
    header #slide-menu { width: 100%; }
    header #slide-menu .navigation { text-transform: uppercase; }
    header .hide-menu { right: -100% !important; transition: right 600ms; box-shadow: none !important; }
}

@media only screen and (min-width: 1000px) {
    header .navigation nav { display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 0 1.8rem; height: 100%; font-size: 1.2rem; }
    header #slide-menu .navigation a { display: none; }
    header #slide-menu { width: 450px; }
    header .hide-menu { right: -450px !important; transition: right 600ms; box-shadow: none !important; }
}

/*----------------------------------HEADER----------------------------------*/


/*----------------------------------SPLIT HERO----------------------------------*/

.hero-split { display: flex; height: 100vh; position: relative; overflow: hidden; }

.hero-split .hero-panel { flex: 1; position: relative; overflow: hidden; transition: flex 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero-split .hero-panel:hover { flex: 1.45; }

.hero-split .hero-panel .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero-split .hero-panel:hover .hero-bg { transform: scale(1.05); }

.hero-split .hero-panel .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.15) 100%); }

.hero-split .hero-panel .hero-panel-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem; color: var(--color-white); transform: translateY(8px); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero-split .hero-panel:hover .hero-panel-content { transform: translateY(0); }

.hero-split .hero-panel-tag { display: inline-block; text-transform: uppercase; letter-spacing: .25rem; font-size: .7rem; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); padding: .3rem .9rem; border-radius: 2px; margin-bottom: 1rem; }
.hero-split .hero-panel h1 { color: var(--color-white); margin: .4rem 0 .8rem; }
.hero-split .hero-panel p { color: rgba(255,255,255,0.8); margin: 0 0 2rem; }
.hero-split .hero-panel .hero-cta { padding: .75rem 1.5rem; }
.hero-split .hero-panel .hero-cta-light { background: transparent; border-color: rgba(255,255,255,0.6); color: var(--color-white); }
.hero-split .hero-panel .hero-cta-light:hover { background: var(--color-white); color: var(--color-dark); border-color: var(--color-white); }

.hero-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--color-primary) 25%, var(--color-primary) 75%, transparent 100%); opacity: 0.55; transition: left 600ms cubic-bezier(0.4, 0, 0.2, 1); }

@media only screen and (max-width: 999px) {
    .hero-split { flex-direction: column; }
    .hero-split .hero-panel:hover { flex: 1.3; }
    .hero-split .hero-panel .hero-panel-content { transform: translateY(0); padding: 1.5rem; }
    .hero-split .hero-panel h1 { font-size: 2rem; margin-bottom: .5rem; }
    .hero-split .hero-panel p { font-size: .9rem; margin-bottom: 1.2rem; }
    .hero-divider { top: 50%; bottom: auto; left: 0; right: 0; width: 100%; height: 1px; transform: translateY(-50%); background: linear-gradient(to right, transparent 0%, var(--color-primary) 25%, var(--color-primary) 75%, transparent 100%); }
}

@media only screen and (min-width: 1000px) {
    .hero-split .hero-panel h1 { font-size: 3rem; }
    .hero-split .hero-panel p { font-size: 1.1rem; }
}

/*----------------------------------SPLIT HERO----------------------------------*/

/*----------------------------------WELCOME SECTION----------------------------------*/

.welcome-section { display: flex; }
.welcome-section .message { background-color: var(--color-white); border-radius: 4px; z-index: 5; }
.welcome-section .message p { margin-bottom: 0; }
.welcome-section .display-image { background: transparent url("https://dorsenhomestay.com/res/media/uploads/front_entrance_1_1.jpg") no-repeat center center / cover; z-index: 4; }

@media only screen and (max-width: 999px) {
    .welcome-section { flex-direction: column; padding: 5rem 1rem; align-items: center; justify-content: center; }
    .welcome-section .message { width: 85vw; padding: 1.5rem; }
    .welcome-section .message h1 { font-size: 2.5rem; margin: 1rem 0; color: var(--color-accent); }
    .welcome-section .display-image { margin-top: .8rem; height: 250px; width: 100%; }
}

@media only screen and (min-width: 1000px) {
    .welcome-section { flex-direction: row; padding: 5rem; align-items: center; justify-content: center; }
    .welcome-section .message { max-width: 600px; padding: 3rem; }
    .welcome-section .message h1 { font-size: 3rem; margin: 1rem 0; color: var(--color-accent); }
    .welcome-section .display-image { margin-left: -50px; height: 600px; width: 800px; }
}

/*----------------------------------WELCOME SECTION----------------------------------*/

/*----------------------------------EXPLORE ROOM----------------------------------*/

.explore-rooms { display: block; padding: 5rem .75rem; }
.explore-rooms h2 { margin: 1rem 0; font-weight: 400; }
.explore-rooms .room-container { display: flex; flex-direction: row; align-items: start; flex-wrap: nowrap; overflow-x: auto; justify-content: start; gap: 1.5rem; padding: 1rem 0; margin-bottom: 1.5rem; }
.explore-rooms .room-container .room { min-height: 350px; height: 100%; width: 100%; transition: filter 200ms, transform 200ms; }
.explore-rooms .room-container .room .room-image { width: 100%; height: 300px; border-radius: 4px; }
.explore-rooms .room-container .room:hover, .explore-rooms .room-container .room:focus { filter: brightness(65%); transform: scale(0.9); transition: filter 200ms, transform 200ms; }
.explore-rooms .room-container .room .room-title { font-family: 'Literata', serif; font-size: 1.5rem; font-weight: 400; }
.explore-rooms .room-container .room .amenities .item { display: flex; flex-direction: row; align-items: center; gap: .8rem; margin-bottom: .5rem;  }
.explore-rooms .room-container .room .amenities .item .price { font-family: 'Dancing Script', cursive; font-size: 1.5rem; font-weight: 700; color: var(--color-accent);  }

@media only screen and (max-width: 999px) {
    .explore-rooms h2 { font-size: 2rem; }
    .explore-rooms .room-container .room .room-image { width: 70vw; max-width: 350px; height: 250px; }
}

@media only screen and (min-width: 1000px) {
    .explore-rooms h2 { font-size: 2.5rem; }
    .explore-rooms .room-container .room .room-image { min-width: 300px; }
}

/*----------------------------------EXPLORE ROOM----------------------------------*/

/*----------------------------------SERVICES SECTION----------------------------------*/

.services-section { display: flex; gap: 5rem; align-items: stretch; justify-content: space-between; }
.services-section h2 { margin: 1rem 0; font-weight: 400; }
.services-section .service-content h2 { text-align: center; }
.services-section .service-content .services-and-facilities { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; }
.services-section .service-content .services-and-facilities .item { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; background-color: var(--color-white); padding: 1rem; border-radius: 20px; text-transform: capitalize; }
.services-section .service-content .services-and-facilities .item span { font-size: 3rem; }
.services-section .facility-details .topic { display: flex; flex-direction: row; gap: .8rem; }

@media only screen and (max-width: 999px) {
    .services-container { padding: 5rem 1rem; }
    .services-section { flex-direction: column; align-items: center; justify-content: center; gap: .8rem;  }
    .services-section h2 { font-size: 2rem; }
    .services-section .facility-details { padding: 0 1rem; }
    .services-section .service-image { height: 300px; width: 300px; border-radius: 50%; }
    .services-section .service-content .services-and-facilities .item { width: 145px; }
}

@media only screen and (min-width: 1000px) {
    .services-container { padding: 5rem; }
    .services-section { flex-direction: row; }
    .services-section h2 { font-size: 2.5rem; }
    .services-section .facility-details { width: 50%; }
    .services-section .service-image { height: 408px; width: 408px; border-radius: 50%; }
    .services-section .service-content .services-and-facilities .item { justify-content: center; width: 180px; }
}

/*----------------------------------SERVICES SECTION----------------------------------*/

/*----------------------------------PAGE TITLE SECTION----------------------------------*/

.page-title-section { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 350px; }
.page-title-section .title { font-size: 3rem; margin: 1rem 0; color: var(--color-accent); }
.page-title-section .subtitle { font-size: 1rem; letter-spacing: .3rem; margin: .5rem 0; text-transform: uppercase; }

@media only screen and (max-width: 999px) {
    .page-title-section { padding: 5rem 1rem; }
}

@media only screen and (min-width: 1000px) {
    .page-title-section { padding: 5rem; }
}

/*----------------------------------PAGE TITLE SECTION----------------------------------*/

/*----------------------------------BOOK YOUR STAY----------------------------------*/

.hide-book-your-stay { top: -100vh !important; transition: top 400ms ease-in-out; overflow: hidden; }
#book-your-stay { display: flex; flex-direction: column; position: fixed; align-items: center; top: 0; overflow-y: scroll; height: 100vh; width: 100vw; z-index: 12; transition: top 400ms ease-in-out; background-color: var(--color-secondary); padding: 1rem; }
#book-your-stay #close-book-your-stay { position: absolute; top: 5px; right: 5px; align-self: end; padding: 0 1rem; cursor: pointer; }
#book-your-stay #close-book-your-stay span { font-size: 3rem; }
#book-your-stay .head { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#book-your-stay .title { font-size: 2.5rem; margin: 2px; }
#book-your-stay .subtitle { font-size: 1rem; text-transform: uppercase; }
#book-your-stay .body { width: 100%; max-width: 800px; border-radius: 4px; background-color: var(--color-white); margin-top: 1rem; padding: 2rem; text-align: center; }

.booking-form { text-align: left; }
.booking-form input[type=text], input[type=email], input[type=date], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: none; font-family: 'Poppins', sans-serif; }

@media only screen and (max-width: 999px) {
    #book-your-stay { padding-bottom: 5rem; }
}

@media only screen and (min-width: 1000px) {
    #book-your-stay .head { padding: 2rem 0; }
    .booking-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; }
    .booking-form .input { width: 45%; }
    .booking-form .text-area { width: 90%; }
    /*.booking-form label { display: block; width: 50%;  }*/
    /*.booking-form input[type=text], input[type=email], input[type=date], select, textarea { width: 50%; }*/
}

/*----------------------------------BOOK YOUR STAY----------------------------------*/

/*----------------------------------STICKY BUTTON----------------------------------*/

.sticky-click-to-action { display: flex; position: fixed; bottom: 0; z-index: 8; width: 100vw; bottom: .5rem; padding: .15rem; gap: .35rem; pointer-events: none; }
.sticky-click-to-action a, .sticky-click-to-action button { pointer-events: all; }
.sticky-click-to-action button { border-radius: 50px; text-transform: uppercase; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; padding: .45rem 1rem; font-weight: 600; font-size: .8rem; }
.sticky-click-to-action button:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.sticky-click-to-action .sticky-tours-btn { background: var(--color-dark); border: 1px solid var(--color-dark); color: var(--color-light); }
.sticky-click-to-action .sticky-tours-btn:hover { background-color: var(--color-primary); color: var(--color-dark); border-color: var(--color-primary); }

@media only screen and (max-width: 999px) {
    .sticky-click-to-action { justify-content: center; }
}

@media only screen and (min-width: 1000px) {
    .sticky-click-to-action { justify-content: flex-end; }
    .sticky-click-to-action button { border-radius: 50px 0 0 50px; }
    .sticky-click-to-action a:first-child button { border-radius: 50px; }
}

/*----------------------------------STICKY BUTTON----------------------------------*/

/*----------------------------------PAGE TITLE----------------------------------*/

.page-title-section { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; height: 450px; width: 100%; text-align: center; }
.page-title-section .icon { font-size: 5rem; color: var(--color-accent); }

@media only screen and (max-width: 999px) {
    .page-title-section { height: 350px; }
    .page-title-section h2 { font-size: 2rem; }
}

@media only screen and (min-width: 1000px) {
    .page-title-section h2 { font-size: 2.5rem; }
}

/*----------------------------------PAGE TITLE----------------------------------*/

/*----------------------------------POLICY SECTION----------------------------------*/

.policy-section { display: flex; justify-content: space-between; gap: .8rem; }
.policy-section h2 { margin: 1rem 0; font-weight: 400; }
.policy-section h3 { display: flex; align-items: center; justify-content: start; gap: .8rem; }
.policy-section .policies .policy .content { display: flex; align-items: center; justify-content: space-between; width: 240px; }

@media only screen and (max-width: 999px) {
    .policy-section { flex-direction: column; align-items: center; padding: 5rem 1rem; }
    .policy-section h2 { font-size: 2rem; }
    .google-map-lg { display: none; }
}

@media only screen and (min-width: 1000px) {
    .policy-section { flex-direction: row; padding: 5rem; }
    .policy-section .policies { width: 45%; }
    .policy-section .locate-me { width: 45%; }
    .policy-section h2 { font-size: 2.5rem; }
    .google-map-sm { display: none; }
}

/*----------------------------------POLICY SECTION----------------------------------*/

/*----------------------------------OUR ROOMS----------------------------------*/
        
.room-container { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 1rem }
.room-container img { border-radius: 4px; }
.room-container .images { display: flex; flex-direction: row; gap: .8rem; align-items: center; justify-content: center; width: 100%; }
.room-container .images img { cursor: pointer; transition: filter 400ms; }
.room-container .images img:focus, .room-container .images img:hover { filter: brightness(60%); transition: filter 400ms; }
.room-container .room-description .room-title { font-family: 'Literata', serif; font-size: 1.5rem; font-weight: 400; }
.room-container .room-description .amenities .item { display: flex; flex-direction: row; align-items: center; gap: .8rem; margin-bottom: .5rem;  }
.room-container .room-description .amenities .item .price { font-family: 'Dancing Script', cursive; font-size: 1.5rem; font-weight: 700; color: var(--color-accent); }

@media only screen and (max-width: 999px) {
    .room-container { flex-direction: column; padding: 5rem 1rem; }
    .room-container .room-gallery { width: 100%; }
    .room-container .room-description { width: 100%; }
    .room-container .room-description .room-title { font-size: 2rem; }
}

@media only screen and (min-width: 1000px) {
    .room-container { flex-direction: row; padding: 5rem; }
    .room-container-row-reverse { flex-direction: row-reverse; }
    .room-container .room-gallery { width: 45%; }
    .room-container .room-description { width: 45%; }
    .room-container .room-description .room-title { font-size: 2.5rem; }
}

/*----------------------------------OUR ROOMS----------------------------------*/

/*----------------------------------EXPLORE TOURS----------------------------------*/

.explore-tours { display: block; padding: 5rem .75rem; }
.explore-tours h2 { margin: 1rem 0; font-weight: 400; }
.explore-tours .tours-tagline { margin: 0 0 2.5rem 0; max-width: 650px; }
.explore-tours .tours-destinations-title { margin: 2rem 0 0; }

.tours-partner-card { display: flex; align-items: stretch; background-color: var(--color-secondary); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.tours-partner-card .tours-partner-image { flex-shrink: 0; }
.tours-partner-card .tours-partner-info { display: flex; flex-direction: column; gap: 1.2rem; justify-content: center; }
.tours-partner-card .tours-partner-info h3 { font-weight: 400; margin: .5rem 0; }
.tours-partner-card .tour-services { display: flex; flex-direction: column; gap: .6rem; }
.tours-partner-card .tour-services .item { display: flex; align-items: center; gap: .8rem; }
.tours-partner-card .tour-contact { display: flex; flex-direction: column; gap: .5rem; }
.tours-partner-card .tour-contact a { display: flex; align-items: center; gap: .8rem; color: var(--color-dark); transition: color 400ms; }
.tours-partner-card .tour-contact a:hover { color: var(--color-accent); transition: color 400ms; }

.tour-container { display: flex; flex-direction: row; align-items: start; flex-wrap: nowrap; overflow-x: auto; justify-content: start; gap: 1.5rem; padding: 1rem 0; margin-bottom: 1.5rem; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto; }
.tour-container::-webkit-scrollbar { display: none; }
.tour-container .tour-card { cursor: pointer; flex-shrink: 0; transition: filter 200ms, transform 200ms; }
.tour-container .tour-card .tour-image { border-radius: 4px; }
.tour-container .tour-card:hover, .tour-container .tour-card:focus { filter: brightness(65%); transform: scale(0.9); transition: filter 200ms, transform 200ms; }
.tour-container .tour-card .tour-title { font-family: 'Literata', serif; font-size: 1.2rem; font-weight: 400; margin: .5rem 0; }

.tour-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.88); z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; transition: opacity 300ms; }
.hide-tour-lightbox { opacity: 0; pointer-events: none; transition: opacity 300ms; }
#close-tour-lightbox { position: absolute; top: 10px; right: 10px; cursor: pointer; color: var(--color-light); padding: .5rem; }
#close-tour-lightbox span { font-size: 3rem; }
#close-tour-lightbox:hover span { color: var(--color-accent); }
.tour-lightbox-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 90vw; max-height: 90vh; }
.tour-lightbox-content img { max-width: 100%; max-height: 75vh; border-radius: 4px; object-fit: contain; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
#tour-lightbox-title { color: var(--color-white); font-size: 1.5rem; font-weight: 400; margin: 0; }

@media only screen and (max-width: 999px) {
    .explore-tours h2 { font-size: 2rem; }
    .tours-partner-card { flex-direction: column; }
    .tours-partner-card .tours-partner-image { height: 220px; width: 100%; }
    .tours-partner-card .tours-partner-info { padding: 1.5rem; }
    .tours-partner-card .tours-partner-info h3 { font-size: 1.8rem; }
    .tour-container .tour-card .tour-image { width: 70vw; max-width: 300px; height: 220px; }
}

@media only screen and (min-width: 1000px) {
    .explore-tours h2 { font-size: 2.5rem; }
    .tours-partner-card { gap: 0; }
    .tours-partner-card .tours-partner-image { height: 380px; width: 520px; }
    .tours-partner-card .tours-partner-info { padding: 3rem; }
    .tours-partner-card .tours-partner-info h3 { font-size: 2.2rem; }
    .tour-container .tour-card .tour-image { width: 280px; height: 250px; }
}

/*----------------------------------EXPLORE TOURS----------------------------------*/

/*----------------------------------FOOTER----------------------------------*/

footer { background-color: var(--color-dark); color: var(--color-light); }
footer .copyright { margin: 0; padding: 1rem; text-align: center; width: 100%; }
.footer-section .brand img { height: 50px; width: auto; }
.footer-section { display: flex; gap: 2rem; }
.footer-section .contact nav { display: flex; flex-direction: column; gap: 1rem; }
.footer-section .contact a { color: var(--color-light); display: flex; flex-direction: row; align-items: center; gap: 1rem; font-size: 1rem; transition: color 400ms; }
.footer-section .contact a:hover { color: var(--color-accent); transition: color 400ms;  }

@media only screen and (max-width: 999px) {
    footer { padding-bottom: 60px; }
    .footer-section { flex-direction: column; padding: 5rem 1rem; align-items: center; justify-content: center; }
    .footer-section .contact { width: 100%; }
    .footer-section .brand { width: 100%; max-width: 400px; text-align: center; }
}

@media only screen and (min-width: 1000px) {
    .footer-section { flex-direction: row; padding: 5rem; align-items: center; justify-content: space-between; }
}

/*----------------------------------FOOTER----------------------------------*/