/* =========================================================
LARAVEL READY NOTE
This file contains shared/global styles only. Keep page-specific
styles in their respective page CSS files. In Laravel this file
should be loaded once from layouts/app.blade.php.
========================================================= */

/* =========================================================
GOL RESORTS & HOTELS
Main Stylesheet
========================================================= */

/* =========================================================

1. ROOT VARIABLES
   ========================================================= */

:root {

--gold: #b5965a;
--gold-dark: #92763f;

--dark: #111111;
--dark-soft: #1b1b1b;

/* --cream: #f8f7f3; */
--cream: #f8f7f3;

--cream-dark: #f2f0eb;

--white: #ffffff;
--black: #000000;

--text: #333333;
--text-light: #777777;

--border: rgba(0, 0, 0, 0.12);

--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", Arial, sans-serif;

--container: 1440px;

--transition: all 0.4s ease;

}

/* =========================================================
2. RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {

margin: 0;

padding: 0;

font-family: var(--sans);

font-size: 15px;

font-weight: 400;

color: var(--text);

background: var(--white);

line-height: 1.7;

overflow-x: hidden;

}

img {

max-width: 100%;

display: block;

}

a {

color: inherit;

text-decoration: none;

transition: var(--transition);

}

button,
input,
select {

font-family: inherit;

}

button {

border: 0;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

/* =========================================================
3. COMMON CONTAINER
========================================================= */

.container-wide {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: 50px;

padding-right: 50px;

}

/* =========================================================
4. HEADER
========================================================= */

.gol-header {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 88px;

z-index: 9999;

color: var(--white);

transition: var(--transition);

border-bottom: 1px solid rgba(255,255,255,0.15);

}

.gol-header.scrolled {

background: rgba(255,255,255,0.98);

color: var(--dark);

box-shadow: 0 5px 25px rgba(0,0,0,0.08);

border-bottom: 1px solid var(--border);

}

.header-inner {

height: 88px;

display: flex;

align-items: center;

justify-content: space-between;

}

.gol-logo {

display: flex;

align-items: center;

position: relative;

z-index: 10;

}

.gol-logo img {

width: 82px;

height: auto;

object-fit: contain;

}

/* Navigation */

.gol-nav {

display: flex;

align-items: center;

gap: 30px;

}

.gol-nav > a {

font-size: 12px;

font-weight: 500;

text-transform: uppercase;

letter-spacing: 1px;

position: relative;

white-space: nowrap;

}

.gol-nav > a:not(.nav-book)::after {

content: "";

position: absolute;

left: 0;

bottom: -8px;

width: 0;

height: 1px;

background: currentColor;

transition: var(--transition);

}

.gol-nav > a:not(.nav-book):hover::after {

width: 100%;

}

.nav-book {

border: 1px solid currentColor;

padding: 11px 20px;

}

.nav-book:hover {

background: var(--dark);

color: var(--white);

border-color: var(--dark);

}

.gol-header:not(.scrolled) .nav-book:hover {

background: var(--white);

color: var(--dark);

}

/* Mobile menu */

.menu-toggle {

display: none;

background: transparent;

color: currentColor;

font-size: 30px;

cursor: pointer;

}

@keyframes scrollArrow {

}

/* =========================================================
19. FOOTER
========================================================= */

.gol-footer {

background: var(--dark);

color: rgba(255,255,255,0.7);

padding: 80px 0 0;

}

.footer-logo {

display: inline-block;

margin-bottom: 25px;

}

.footer-logo img {

width: 85px;

filter: brightness(0) invert(1);

}

.gol-footer p {

max-width: 350px;

font-size: 13px;

line-height: 1.8;

}

.gol-footer h5 {

color: var(--white);

font-size: 11px;

text-transform: uppercase;

letter-spacing: 2px;

margin-bottom: 25px;

}

.footer-links li {

margin-bottom: 10px;

}

.footer-links a {

font-size: 13px;

color: rgba(255,255,255,0.6);

}

.footer-links a:hover {

color: var(--white);

}

.social-links {

display: flex;

gap: 15px;

}

.social-links a {

width: 36px;

height: 36px;

border: 1px solid rgba(255,255,255,0.25);

display: flex;

align-items: center;

justify-content: center;

font-size: 14px;

}

.social-links a:hover {

background: var(--white);

color: var(--dark);

}

.footer-bottom {

margin-top: 60px;

padding: 25px 0;

border-top: 1px solid rgba(255,255,255,0.12);

font-size: 11px;

color: rgba(255,255,255,0.45);

}

@keyframes heroFadeUp {

}

/* =========================================================
21. TABLET
========================================================= */

@media (max-width: 1199px) {

.container-wide {

    padding-left: 30px;

    padding-right: 30px;

}

.gol-nav {

    gap: 18px;

}

.gol-nav > a {

    font-size: 10px;

}

}

/* =========================================================
22. MOBILE NAVIGATION
========================================================= */

@media (max-width: 991px) {

.gol-header {

    height: 75px;

}

.header-inner {

    height: 75px;

}

.menu-toggle {

    display: block;

}

.gol-nav {

    position: fixed;

    top: 75px;

    right: -100%;

    width: 100%;

    height: calc(100vh - 75px);

    background: var(--dark);

    color: var(--white);

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 50px 30px;

    gap: 25px;

    transition: right 0.4s ease;

    overflow-y: auto;

}

.gol-nav.active {

    right: 0;

}

.gol-nav > a {

    font-size: 13px;

}

.nav-book {

    margin-top: 15px;

}

.hero {

    min-height: 650px;

}

.hero-content {

    left: 30px;

    right: 30px;

    max-width: 650px;

}

.booking-area {

    margin-top: 0;

    padding: 30px 0;

    background: var(--cream);

}

.booking-box {

    box-shadow: none;

}

.booking-field {

    border-right: 0;

    border-bottom: 1px solid var(--border);

}

.booking-button {

    min-height: 70px;

}

.intro-section {

    padding: 100px 0;

}

.gol-section {

    padding: 90px 0;

}

.destination-card {

    height: 550px;

}

.experience-image,
.dining-image {

    height: 500px;

}

.experience-content,
.dark-content {

    padding: 60px 30px;

}

}

/* =========================================================
23. MOBILE
========================================================= */

@media (max-width: 767px) {

.container-wide {

    padding-left: 20px;

    padding-right: 20px;

}

.gol-logo img {

    width: 70px;

}

.footer-bottom {

    text-align: center;

}

.footer-bottom .text-md-end {

    text-align: center !important;

    margin-top: 10px;

}

}

/* =========================================================
24. SMALL MOBILE
========================================================= */

/* =========================================================
25. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {

outline: 2px solid var(--gold);

outline-offset: 3px;

}

/* =========================================================
26. SELECTION
========================================================= */

::selection {

background: var(--gold);

color: var(--white);

}

/* =========================================================
27. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

width: 7px;

}

::-webkit-scrollbar-track {

background: #eeeeee;

}

::-webkit-scrollbar-thumb {

background: #999999;

}

::-webkit-scrollbar-thumb:hover {

background: #666666;

}

/* =========================================================
END
========================================================= */

/* Final common header navigation */
.gol-nav{display:flex;align-items:center;gap:26px}
.gol-nav>a{display:inline-flex;align-items:center;color:inherit;text-decoration:none;white-space:nowrap}
@media(max-width:1100px){
    .gol-nav{gap:16px}
    .gol-nav>a{font-size:11px}
}
@media(max-width:900px){
    .gol-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:100%;
        background:#fff;
        padding:20px;
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
        box-shadow:0 12px 30px rgba(0,0,0,.12);
        z-index:999;
    }
    .gol-header.menu-open .gol-nav{display:flex}
    .gol-nav>a{color:#111!important;width:100%}
    .gol-nav .nav-book{width:auto}
}

/* =========================================================
   GOL COMMON HEADER + FOOTER — LIGHT LUXURY PALETTE
   Same near-white colour for both
   ========================================================= */
.gol-header{
    /* background:#f8f7f3 !important; */
    background:#fff !important;
    border-bottom:1px solid #e5e0d7 !important;
    box-shadow:0 3px 18px rgba(35,42,37,.06);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.gol-header .gol-nav>a{
    color:#26312c !important;
    text-shadow:none !important;
}
.gol-header .gol-nav>a:hover{
    color:#a9894e !important;
}
.gol-header .gol-nav .nav-book{
    color:#26312c !important;
    border-color:#a9894e !important;
    background:transparent !important;
}
.gol-header .gol-nav .nav-book:hover{
    color:#fff !important;
    background:#b5965a !important;
    border-color:#b5965a !important;
}
.gol-header .menu-toggle{
    color:#26312c !important;
}
.gol-header.scrolled{
    /* background:#f8f7f3 !important; */
    background:#fff !important;

    border-bottom-color:#e5e0d7 !important;
    box-shadow:0 3px 18px rgba(35,42,37,.08);
}

/* Footer uses the SAME base colour as the header */
.gol-footer,
footer{
    /* background:#f8f7f3 !important; */
    background:#fff !important;

    color:#26312c !important;
    border-top:1px solid #e5e0d7;
}
.gol-footer a,
footer a{
    color:#59615b !important;
}
.gol-footer a:hover,
footer a:hover{
    color:#a9894e !important;
}
.gol-footer h5,
footer h5{
    color:#26312c !important;
}
.gol-footer p,
footer p{
    color:#69716b !important;
}
.gol-footer .footer-bottom,
footer .footer-bottom{
    border-top-color:#e1ddd4 !important;
}
.gol-footer .social-link,
footer .social-link{
    border-color:#d8d2c7 !important;
    color:#59615b !important;
}
.gol-footer .social-link:hover,
footer .social-link:hover{
    border-color:#a9894e !important;
    color:#a9894e !important;
}
@media(max-width:900px){
    .gol-header .gol-nav{
        background:#f8f7f3 !important;
        box-shadow:0 12px 30px rgba(35,42,37,.10);
    }
    .gol-header .gol-nav>a{
        color:#26312c !important;
    }
}

/* GOL common logo — stable local asset on every page */
.gol-logo img,
.footer-logo img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    object-fit:contain;
}
.gol-logo img { max-height:42px; }
.footer-logo img { max-height:42px; }

/* =====================================================
   INDEX — REFINED / COMPACT SECTION SPACING
   ===================================================== */
body.index-page .intro-section{padding:58px 0!important}
body.index-page .gol-section{padding-top:62px!important;padding-bottom:62px!important}
body.index-page .section-heading{margin-bottom:30px!important}
body.index-page .section-header{margin-bottom:30px!important}
body.index-page .gol-title{margin-top:8px!important}
body.index-page .booking-area{padding-bottom:42px!important}
body.index-page .booking-area + .gol-section{padding-top:58px!important}

/* =====================================================
   GOL HOME — LUXURY RHYTHM
   ===================================================== */

/* Keep the hero and booking search visually dominant */
body.index-page .hero{margin-bottom:0}
body.index-page .booking-area{
    padding-top:0!important;
    padding-bottom:48px!important;
}

/* Destination / hotel / room sections */
body.index-page .gol-section{
    padding-top:58px!important;
    padding-bottom:58px!important;
}
body.index-page .section-heading,
body.index-page .section-header{
    margin-bottom:28px!important;
}

/* Elegant, compact section titles */
body.index-page .gol-title{
    letter-spacing:-.02em;
}

/* Cards sit closer to their headings for a premium editorial layout */
body.index-page .destination-grid,
body.index-page .hotel-grid,
body.index-page .rooms-grid{
    margin-top:0!important;
}

/* Remove accidental empty vertical blocks after deleted sections */
body.index-page .intro-section:empty,
body.index-page section:empty{
    display:none!important;
}

/* Mobile rhythm */
@media(max-width:768px){
    body.index-page .gol-section{
        padding-top:42px!important;
        padding-bottom:42px!important;
    }
    body.index-page .booking-area{
        padding-bottom:32px!important;
    }
}




/* =========================================================
   GOL RESORTS & HOTELS — WHITE / SOFT IVORY SECTION PALETTE
   ========================================================= */
.intro-section,
.section-white {
    background: #ffffff !important;
}

.gol-section:nth-of-type(odd),
.section-ivory,
.gol-section-cream {
    background: #f8f7f3 !important;
}

.gol-section:nth-of-type(even) {
    background: #ffffff !important;
}

.newsletter {
    background: #f8f7f3 !important;
}

/* Keep visual separation subtle and luxurious */
.intro-section,
.gol-section,
.newsletter {
    border-bottom: 1px solid rgba(80, 70, 55, 0.06);
}

/* =========================================================
   GOL FOOTER — REFINED WHITE LUXURY
   Keep the existing white footer background.
   ========================================================= */
.gol-footer,
footer.gol-footer {
    background: #ffffff !important;
    color: #26312c !important;
    padding: 72px 0 0 !important;
    border-top: 1px solid #e5e0d7 !important;
}

.gol-footer .container-wide {
    position: relative;
}

.gol-footer .row:first-child {
    align-items: flex-start;
}

.gol-footer .footer-logo {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 24px !important;
    padding: 0 !important;
}

/* Important: the original footer rule inverted the logo.
   The real GOL logo is already colored, so do not invert it. */
.gol-footer .footer-logo img,
footer.gol-footer .footer-logo img {
    display: block !important;
    width: 150px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
}

.gol-footer p,
footer.gol-footer p {
    max-width: 310px !important;
    margin-bottom: 0 !important;
    color: #69716b !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

.gol-footer h5,
footer.gol-footer h5 {
    position: relative;
    color: #26312c !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    margin: 7px 0 22px !important;
}

.gol-footer h5::after,
footer.gol-footer h5::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 10px;
    background: #b5965a;
}

.gol-footer .footer-links li,
footer.gol-footer .footer-links li {
    margin-bottom: 11px !important;
}

.gol-footer .footer-links a,
footer.gol-footer .footer-links a {
    display: inline-block;
    color: #69716b !important;
    font-size: 13px !important;
    line-height: 1.5;
    transition: color .3s ease, transform .3s ease !important;
}

.gol-footer .footer-links a:hover,
footer.gol-footer .footer-links a:hover {
    color: #a9894e !important;
    transform: translateX(3px);
}

.gol-footer .social-links,
footer.gol-footer .social-links {
    display: flex;
    gap: 9px;
    margin-top: 25px !important;
}

.gol-footer .social-links a,
footer.gol-footer .social-links a {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd8cf !important;
    border-radius: 50%;
    color: #59615b !important;
    font-size: 13px !important;
    transition: all .3s ease !important;
}

.gol-footer .social-links a:hover,
footer.gol-footer .social-links a:hover {
    background: #b5965a !important;
    border-color: #b5965a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.gol-footer .footer-bottom,
footer.gol-footer .footer-bottom {
    margin-top: 55px !important;
    padding: 22px 0 !important;
    border-top: 1px solid #e5e0d7 !important;
    color: #8a8f8a !important;
    font-size: 11px !important;
    letter-spacing: .15px;
}

.gol-footer .footer-bottom .text-md-end,
footer.gol-footer .footer-bottom .text-md-end {
    color: #8a8f8a !important;
}

/* Header/logo: preserve the original full-colour logo on the white header. */
.gol-header .gol-logo img {
    filter: none !important;
    opacity: 1 !important;
    width: auto !important;
    max-height: 48px !important;
}

@media (max-width: 991px) {
    .gol-footer,
    footer.gol-footer {
        padding-top: 55px !important;
    }

    .gol-footer .footer-logo img,
    footer.gol-footer .footer-logo img {
        width: 135px !important;
    }
}

@media (max-width: 767px) {
    .gol-footer,
    footer.gol-footer {
        padding-top: 48px !important;
    }

    .gol-footer .footer-logo img,
    footer.gol-footer .footer-logo img {
        width: 125px !important;
    }

    .gol-footer h5,
    footer.gol-footer h5 {
        margin-top: 18px !important;
    }

    .gol-footer .footer-bottom,
    footer.gol-footer .footer-bottom {
        margin-top: 35px !important;
    }
}


/* =========================================================
   GLOBAL GOL CHROME — SHARED HEADER / FOOTER
   Keep the same luxury header and footer on every page.
   ========================================================= */

.gol-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(181,150,90,.16) !important;
}

.gol-header .gol-logo img {
    filter: none !important;
    opacity: 1 !important;
}

.gol-footer,
footer.gol-footer {
    position: relative;
    overflow: hidden;
    background-color: #fffdf9 !important;
    color: #292a26 !important;
    border-top: 1px solid rgba(177,138,74,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.gol-footer::after,
footer.gol-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(45deg, rgba(177,138,74,.045) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(177,138,74,.045) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.gol-footer > *,
footer.gol-footer > * {
    position: relative;
    z-index: 1;
}

.gol-footer .footer-logo img,
footer.gol-footer .footer-logo img {
    filter: none !important;
    opacity: 1 !important;
}

.gol-footer p,
footer.gol-footer p {
    color: #6b6b64 !important;
}

.gol-footer h5,
footer.gol-footer h5 {
    color: #30312d !important;
}

.gol-footer .footer-links a,
footer.gol-footer .footer-links a {
    color: #666760 !important;
}

.gol-footer .footer-links a:hover,
footer.gol-footer .footer-links a:hover {
    color: #a27b3e !important;
}

.gol-footer .social-links a,
footer.gol-footer .social-links a {
    background: rgba(255,255,255,.82) !important;
    border-color: rgba(177,138,74,.30) !important;
    color: #716b60 !important;
}

.gol-footer .social-links a:hover,
footer.gol-footer .social-links a:hover {
    background: #b18a4a !important;
    border-color: #b18a4a !important;
    color: #fff !important;
}

.gol-footer .footer-bottom,
footer.gol-footer .footer-bottom {
    border-top-color: rgba(177,138,74,.20) !important;
    color: #85857e !important;
}


/* =========================================================
   SHARED HEADER / FOOTER COLOR
   Footer intentionally matches the light white-diamond header.
   ========================================================= */
.site-footer,
.gol-footer,
footer.footer,
footer {
    background-color: #fffdf9 !important;
    background-image:
        linear-gradient(45deg, rgba(177,138,74,.045) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(177,138,74,.045) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-position: 0 0, 15px 15px !important;
    color: #292a26 !important;
    border-top: 1px solid rgba(177,138,74,.20) !important;
}