/*======================================================
DENTALTECHNIK SAVIĆ
PREMIUM V3
======================================================*/

:root{

--bg:#f7f7f5;
--surface:#ffffff;

--text:#171717;
--text-light:#666666;

--gold:#C8A438;
--gold-dark:#A8871E;

--border:#e7e7e7;

--shadow:0 30px 80px rgba(0,0,0,.08);

--radius:26px;

--transition:.45s cubic-bezier(.22,.61,.36,1);

--container:1450px;

}



body.dark{

--bg:#101010;
--surface:#181818;

--text:#ffffff;
--text-light:#cfcfcf;

--border:#2d2d2d;

--shadow:0 35px 90px rgba(0,0,0,.35);

}



/*======================================================
RESET
======================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

transition:.35s;

}



img{

display:block;

max-width:100%;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



.container{

width:min(92%,var(--container));

margin:auto;

}



/*======================================================
TYPOGRAPHY
======================================================*/

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:600;

line-height:1.05;

letter-spacing:-.03em;

}

h1{

font-size:clamp(4rem,7vw,7rem);

}

h2{

font-size:clamp(3rem,5vw,5rem);

}

h3{

font-size:2rem;

}

p{

font-size:18px;

line-height:1.9;

color:var(--text-light);

}



/*======================================================
SECTION
======================================================*/

section{

padding:180px 0;

position:relative;

}



.section-header{

max-width:900px;

margin:0 auto 120px;

text-align:center;

}



.section-header span{

display:inline-block;

margin-bottom:18px;

font-size:13px;

font-weight:700;

letter-spacing:4px;

color:var(--gold);

}



.section-header h2{

margin-bottom:28px;

}



.section-header p{

max-width:700px;

margin:auto;

}



/*======================================================
BUTTONS
======================================================*/

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:var(--gold);

border-radius:999px;

color:white;

font-weight:600;

transition:var(--transition);

}

.btn-primary:hover{

background:var(--gold-dark);

transform:translateY(-4px);

}



.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:999px;

border:1px solid rgba(255,255,255,.35);

color:white;

transition:var(--transition);

}

.btn-secondary:hover{

background:white;

color:#111;

}



/*======================================================
LOADER
======================================================*/

#loader{

position:fixed;

inset:0;

background:#111;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:999999;

}



.loader-logo img{

width:220px;

margin-bottom:35px;

}



.loader-line{

width:240px;

height:2px;

background:rgba(255,255,255,.15);

overflow:hidden;

}



.loader-line span{

display:block;

height:100%;

width:0;

background:var(--gold);

animation:loader 2s infinite;

}



@keyframes loader{

0%{

width:0;

}

100%{

width:100%;

}

}



/*======================================================
CURSOR GLOW
======================================================*/

#cursorGlow{

position:fixed;

width:280px;

height:280px;

pointer-events:none;

border-radius:50%;

background:radial-gradient(circle,rgba(200,164,56,.14),transparent 70%);

filter:blur(45px);

transform:translate(-50%,-50%);

z-index:2;

}



/*======================================================
PROGRESS BAR
======================================================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:3px;

width:0;

background:var(--gold);

z-index:999999;

}



/*======================================================
SCROLLBAR
======================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:999px;

}

::-webkit-scrollbar-track{

background:#e8e8e8;

}

/*======================================================
HEADER
======================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:28px 0;

z-index:9999;

transition:.45s;

}

header.scrolled{

padding:16px 0;

background:rgba(247,247,245,.92);

backdrop-filter:blur(20px);

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

}

body.dark header.scrolled{

background:rgba(16,16,16,.92);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:95px;

width:auto;

object-fit:contain;

filter:none;

transition:.35s;


}

header.scrolled .logo img{

filter:none;

height:72px;

}



/*======================================================
NAVIGATION
======================================================*/

nav ul{

display:flex;

gap:45px;

align-items:center;

}

nav a{

font-size:15px;

font-weight:600;

letter-spacing:.04em;

color:white;

position:relative;

transition:.35s;

}

header.scrolled nav a{

color:var(--text);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

nav a:hover::after{

width:100%;

}



/*======================================================
HEADER RIGHT
======================================================*/

.header-right{

display:flex;

align-items:center;

gap:18px;

}

#themeToggle{

width:52px;

height:52px;

border-radius:50%;

border:none;

cursor:pointer;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

color:white;

transition:.35s;

}

header.scrolled #themeToggle{

background:var(--surface);

color:var(--text);

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

}

#themeToggle:hover{

background:var(--gold);

color:white;

}

.btn-nav{

padding:16px 34px;

border-radius:999px;

background:var(--gold);

color:white;

font-weight:600;

transition:.35s;

}

.btn-nav:hover{

background:var(--gold-dark);

transform:translateY(-3px);

}



/*======================================================
BURGER
======================================================*/

#burger{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

}

#burger span{

width:28px;

height:2px;

background:white;

transition:.35s;

}

header.scrolled #burger span{

background:var(--text);

}



/*======================================================
MOBILE MENU
======================================================*/

#mobileMenu{

position:fixed;

top:0;

right:-100%;

width:320px;

height:100vh;

background:var(--surface);

padding:140px 40px;

transition:.45s;

z-index:9998;

}

#mobileMenu.active{

right:0;

}

#mobileMenu ul{

display:flex;

flex-direction:column;

gap:35px;

}

#mobileMenu a{

font-size:20px;

font-weight:600;

}



/*======================================================
HERO
======================================================*/

.hero{

height:100vh;

min-height:900px;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}

.hero-image{

position:absolute;

inset:0;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.85),

rgba(0,0,0,.45),

rgba(0,0,0,.15)

);

}

.hero-content{

position:relative;

z-index:3;

max-width:760px;

}

.hero-tag{

display:inline-block;

padding:12px 22px;

border-radius:999px;

border:1px solid rgba(255,255,255,.25);

color:var(--gold);

letter-spacing:3px;

font-size:12px;

margin-bottom:28px;

backdrop-filter:blur(15px);

}

.hero h1{

color:white;

margin-bottom:28px;

}

.hero h1 span{

display:block;

color:var(--gold);

}

.hero p{

font-size:21px;

color:rgba(255,255,255,.82);

margin-bottom:50px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:22px;

flex-wrap:wrap;

}



/*======================================================
SCROLL INDICATOR
======================================================*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:45px;

transform:translateX(-50%);

width:34px;

height:58px;

border:2px solid rgba(255,255,255,.4);

border-radius:999px;

display:flex;

justify-content:center;

padding-top:10px;

z-index:5;

}

.scroll-indicator span{

width:5px;

height:10px;

background:white;

border-radius:999px;

animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

0%{

opacity:1;

transform:translateY(0);

}

100%{

opacity:0;

transform:translateY(24px);

}

}



/*======================================================
FACTS
======================================================*/

.facts{

margin-top:-90px;

position:relative;

z-index:10;

}

.facts .container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.fact{

background:var(--surface);

padding:55px 25px;

border-radius:26px;

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

text-align:center;

transition:.35s;

}

.fact:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.fact h2{

font-size:4rem;

color:var(--gold);

margin-bottom:12px;

}

.fact p{

font-size:17px;

font-weight:600;

color:var(--text);

}

/*======================================================
SERVICES
======================================================*/

.services{

padding:220px 0;

background:var(--bg);

}

.services .container{

display:flex;

flex-direction:column;

gap:220px;

}



/*======================================================
SERVICE
======================================================*/

.service{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:110px;

align-items:center;

}

.service.reverse{

grid-template-columns:1.2fr 1fr;

}

.service.reverse .service-image{

order:1;

}

.service.reverse .service-text{

order:2;

}



/*======================================================
SERVICE TEXT
======================================================*/

.service-text{

max-width:560px;

}

.service-category{

display:inline-block;

margin-bottom:22px;

font-size:13px;

font-weight:700;

letter-spacing:4px;

color:var(--gold);

}

.service-text h2{

margin-bottom:28px;

font-size:clamp(3rem,5vw,5rem);

line-height:1;

}

.service-text p{

margin-bottom:45px;

font-size:19px;

line-height:1.9;

}

.service-text ul{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:45px;

}

.service-text li{

position:relative;

padding-left:26px;

font-size:17px;

font-weight:500;

color:var(--text);

}

.service-text li::before{

content:"";

position:absolute;

left:0;

top:9px;

width:9px;

height:9px;

border-radius:50%;

background:var(--gold);

}



/*======================================================
SERVICE IMAGE
======================================================*/

.service-image{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    background:#ddd;
    box-shadow:var(--shadow);
    transition:.45s;
}

.service-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:initial;
}

.service:hover .service-image{

transform:translateY(-8px);

}

.service:hover .service-image img{

transform:scale(1.08);

}



/*======================================================
IMAGE OVERLAY
======================================================*/

.service-image::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.08)

);

pointer-events:none;

}



/*======================================================
SERVICE BUTTON
======================================================*/

.service .btn-primary{

display:inline-flex;

align-items:center;

gap:14px;

}

.service .btn-primary::after{

content:"→";

font-size:20px;

transition:.35s;

}

.service .btn-primary:hover::after{

transform:translateX(6px);

}



/*======================================================
SERVICE DIVIDER
======================================================*/

.service:not(:last-child){

padding-bottom:120px;

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

}



/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1200px){

.service,

.service.reverse{

grid-template-columns:1fr;

gap:60px;

}

.service.reverse .service-image,

.service.reverse .service-text{

order:initial;

}

.service-text{

max-width:100%;

}

.service-text ul{

grid-template-columns:1fr;

}

}

/*======================================================
ABOUT
======================================================*/

.about{

background:var(--surface);

padding:220px 0;

}

.about-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

gap:120px;

align-items:center;

}



/*======================================================
ABOUT IMAGES
======================================================*/

.about-images{

display:grid;

grid-template-columns:1fr;

gap:30px;

}

.about-image{

width:100%;

height:520px;

overflow:hidden;

border-radius:32px;

background:#ddd;

box-shadow:var(--shadow);

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.about-image.large img{

object-position:center 18%;

}

.about-image.small img{

object-position:center 12%;

}


.about-image img{

width:100%;

height:100%;

object-fit:cover;

object-position:center 20%;

transition:1.1s;

}

.about-image:hover img{

transform:scale(1.07);

}



/*======================================================
TIMELINE
======================================================*/

.about-content{

position:relative;

padding-left:90px;

}

.timeline{

position:relative;

display:flex;

flex-direction:column;

gap:90px;

}

.timeline-line{

position:absolute;

left:10px;

top:25px;

bottom:25px;

width:2px;

background:linear-gradient(

180deg,

transparent,

var(--gold),

transparent

);

}

.timeline-item{

position:relative;

display:flex;

gap:40px;

}

.timeline-dot{

width:22px;

height:22px;

border-radius:50%;

background:var(--gold);

flex-shrink:0;

margin-top:10px;

box-shadow:0 0 0 10px rgba(200,164,56,.08);

z-index:2;

}

.timeline-content span{

display:inline-block;

margin-bottom:14px;

font-size:12px;

font-weight:700;

letter-spacing:4px;

color:var(--gold);

}

.timeline-content h3{

margin-bottom:18px;

font-size:2.3rem;

}

.timeline-content p{

max-width:520px;

}



/*======================================================
VALUES
======================================================*/

.values{

margin-top:120px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.value{

padding:40px;

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

border-radius:28px;

background:var(--surface);

transition:.35s;

}

.value:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

border-color:var(--gold);

}

.value h3{

margin-bottom:18px;

font-size:2rem;

}

.value p{

font-size:17px;

}



/*======================================================
IMAGE BREAK
======================================================*/

.image-break{

position:relative;

height:75vh;

min-height:650px;

padding:0;

overflow:hidden;

}

.image-break-image{

position:absolute;

inset:0;

}

.image-break-image img{

width:100%;

height:100%;

object-fit:cover;

}

.image-break-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.image-break-content{

position:relative;

z-index:2;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color:white;

}

.image-break-content span{

letter-spacing:4px;

font-size:13px;

font-weight:700;

color:var(--gold);

margin-bottom:25px;

}

.image-break-content h2{

max-width:900px;

font-size:clamp(3.5rem,6vw,6rem);

line-height:1.05;

}



/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1200px){

.about-grid{

grid-template-columns:1fr;

gap:70px;

}

.about-content{

padding-left:0;

}

.timeline-line{

left:10px;

}

.values{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.timeline-item{

gap:25px;

}

.timeline-content h3{

font-size:2rem;

}

.image-break{

min-height:450px;

}

}

/*======================================================
CONTACT
======================================================*/

.contact{

padding:220px 0;

background:var(--surface);

}

.contact-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:80px;

align-items:start;

}



/*======================================================
CONTACT CARDS
======================================================*/

.contact-left{

display:flex;

flex-direction:column;

gap:24px;

}

.contact-card{

display:flex;

gap:20px;

padding:28px;

background:var(--surface);

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

border-radius:24px;

transition:var(--transition);

}

.contact-card:hover{

transform:translateY(-6px);

border-color:var(--gold);

box-shadow:var(--shadow);

}

.contact-card i{

font-size:22px;

color:var(--gold);

width:28px;

margin-top:4px;

}

.contact-card h3{

font-size:1.2rem;

margin-bottom:8px;

}

.contact-card p,

.contact-card a{

font-size:16px;

color:var(--text-light);

transition:.3s;

}

.contact-card a:hover{

color:var(--gold);

}



/*======================================================
FORM
======================================================*/

.contact-right form{

display:flex;

flex-direction:column;

gap:24px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

}

.contact-right input,

.contact-right textarea{

width:100%;

padding:20px 24px;

background:var(--bg);

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

border-radius:20px;

font-family:inherit;

font-size:16px;

color:var(--text);

transition:.3s;

}

.contact-right textarea{

resize:vertical;

min-height:220px;

}

.contact-right input:focus,

.contact-right textarea:focus{

outline:none;

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(200,164,56,.10);

}

.contact-right button{

width:max-content;

}



/*======================================================
MAP
======================================================*/

.map{

margin-top:90px;

border-radius:30px;

overflow:hidden;

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

box-shadow:var(--shadow);

}

.map iframe{

width:100%;

height:520px;

border:none;

}



/*======================================================
FOOTER
======================================================*/

footer{

background:#111;

padding:110px 0 35px;

color:white;

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:80px;

padding-bottom:70px;

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

}

.footer-logo{

width:220px;

height:auto;

filter:none;

object-fit:contain;


}

.footer-brand p{

color:#c7c7c7;

}

.footer-links h4{

font-size:1.5rem;

margin-bottom:24px;

color:white;

}

.footer-links ul{

display:flex;

flex-direction:column;

gap:16px;

}

.footer-links a{

color:#cfcfcf;

transition:.3s;

}

.footer-links a:hover{

color:var(--gold);

padding-left:6px;

}

.footer-bottom{

padding-top:30px;

text-align:center;

}

.footer-bottom p{

font-size:15px;

color:#9d9d9d;

}



/*======================================================
LIGHTBOX
======================================================*/

#lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.95);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999999;

}

#lightbox.active{

opacity:1;

visibility:visible;

}

#lightbox img{

max-width:88%;

max-height:88vh;

border-radius:24px;

box-shadow:0 30px 80px rgba(0,0,0,.5);

}

#closeLightbox,

#prevImage,

#nextImage{

position:absolute;

color:white;

font-size:44px;

cursor:pointer;

user-select:none;

transition:.3s;

}

#closeLightbox{

top:30px;

right:40px;

}

#prevImage{

left:40px;

top:50%;

transform:translateY(-50%);

}

#nextImage{

right:40px;

top:50%;

transform:translateY(-50%);

}

#closeLightbox:hover,

#prevImage:hover,

#nextImage:hover{

color:var(--gold);

}



/*======================================================
SCROLL TOP BUTTON
======================================================*/

#scrollTop{

position:fixed;

right:35px;

bottom:35px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--gold);

color:white;

font-size:18px;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:999;

}

#scrollTop.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#scrollTop:hover{

background:var(--gold-dark);

}



/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1200px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-top{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:0 auto 28px;

}

}

@media(max-width:900px){

.form-row{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

header nav{

display:none;

}

#burger{

display:flex;

}

.facts .container{

grid-template-columns:repeat(2,1fr);

}

.hero{

min-height:760px;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

}

.contact{

padding:140px 0;

}

.services,

.about{

padding:160px 0;

}

}

@media(max-width:600px){

.facts .container{

grid-template-columns:1fr;

}

.hero h1{

font-size:3.2rem;

}

.section-header{

margin-bottom:80px;

}

.section-header h2{

font-size:2.8rem;

}

.map iframe{

height:380px;

}

#scrollTop{

right:20px;

bottom:20px;

}

}

/*======================================================
PREMIUM GALLERY
======================================================*/

#galleryOverlay{

position:fixed;

inset:0;

background:rgba(8,8,8,.96);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999999;

}

#galleryOverlay.active{

opacity:1;

visibility:visible;

}

.galleryContent{

width:min(94%,1450px);

display:flex;

flex-direction:column;

align-items:center;

}

#galleryTitle{

color:white;

margin-bottom:45px;

font-size:3rem;

}

.galleryImageWrapper{

display:flex;

align-items:center;

gap:40px;

width:100%;

justify-content:center;

}

#galleryImage{

width:100%;

max-width:1050px;

height:72vh;

object-fit:contain;

border-radius:24px;

}

#galleryPrev,
#galleryNext{

width:70px;

height:70px;

border:none;

border-radius:50%;

background:var(--gold);

color:white;

font-size:30px;

cursor:pointer;

transition:.3s;

}

#galleryPrev:hover,
#galleryNext:hover{

transform:scale(1.1);

}

#galleryClose{

position:absolute;

top:40px;

right:50px;

width:65px;

height:65px;

border:none;

border-radius:50%;

background:white;

cursor:pointer;

font-size:22px;

}

#galleryCounter{

margin-top:35px;

color:white;

font-size:18px;

letter-spacing:3px;

}

/*======================================================
LEGAL PAGES
======================================================*/

.legal-page{

padding:180px 0 120px;

min-height:100vh;

background:var(--bg);

}

.legal-header{

position:sticky;

top:0;

padding:20px 0;

background:rgba(255,255,255,.92);

backdrop-filter:blur(16px);

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

z-index:999;

}

body.dark .legal-header{

background:rgba(16,16,16,.92);

}

.legal-box{

max-width:900px;

margin:0 auto;

background:var(--surface);

padding:60px;

border-radius:28px;

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

box-shadow:var(--shadow);

}

.legal-box h2{

font-family:'Inter',sans-serif;

font-size:1.45rem;

font-weight:600;

margin-top:42px;

margin-bottom:14px;

color:var(--text);

line-height:1.3;

}

.legal-box h2:first-child{

margin-top:0;

}

.legal-box p{

font-size:17px;

line-height:1.9;

margin-bottom:18px;

color:var(--text-light);

}

.legal-box strong{

color:var(--text);

font-weight:600;

}

.legal-box a{

color:var(--gold);

}

.legal-box a:hover{

text-decoration:underline;

}

@media(max-width:768px){

.legal-page{

padding:140px 0 80px;

}

.legal-box{

padding:35px 25px;

}

.legal-box h2{

font-size:1.25rem;

}

.legal-box p{

font-size:16px;

}

}

.legal-page .section-header{

margin-bottom:70px;

}

.legal-page .section-header h1{

font-size:clamp(3rem,5vw,4.5rem);

line-height:1.05;

}

.legal-page .section-header span{

letter-spacing:4px;

font-size:13px;

}

/* ======================================================
   COOKIE BANNER
   ====================================================== */

#cookieBanner {
    position: fixed;

    left: 25px;
    right: 25px;
    bottom: 25px;

    z-index: 999999999;

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

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

    border-radius: 20px;

    padding: 28px 32px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    display: none;
}

#cookieBanner.show {
    display: block;
}

.cookie-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.cookie-text {
    flex: 1;
}

.cookie-label {

    display: block;

    color: var(--gold);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.cookie-text h3 {

    margin: 0 0 8px;

    color: white;

    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    font-weight: 600;
}

.cookie-text p {

    margin: 0;

    color: #c7c7c7;

    font-size: 14px;

    line-height: 1.6;
}

.cookie-link-text {

    margin-top: 7px !important;
}

.cookie-text a {

    color: white;

    text-decoration: underline;

    text-underline-offset: 3px;
}

.cookie-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.cookie-btn {

    border: none;

    border-radius: 8px;

    padding: 13px 24px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;
}

.cookie-btn-primary {

    background: var(--gold);

    color: white;
}

.cookie-btn-primary:hover {

    transform: translateY(-2px);

    filter: brightness(1.08);
}

.cookie-btn-secondary {

    background: rgba(255,255,255,.08);

    color: white;

    border: 1px solid rgba(255,255,255,.15);
}

.cookie-btn-secondary:hover {

    background: rgba(255,255,255,.15);
}


/* ======================================================
   COOKIE SETTINGS BUTTON
   ====================================================== */

#cookieSettings {

    position: fixed;

    left: 25px;

    bottom: 25px;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    background: var(--gold);

    color: white;

    font-size: 18px;

    cursor: pointer;

    z-index: 999999998;

    display: none;

    box-shadow:
        0 8px 30px rgba(0,0,0,.25);
}

#cookieSettings.show {
    display: block;
}

#cookieSettings:hover {

    transform: scale(1.08);

}


/* ======================================================
   GOOGLE MAPS PLACEHOLDER
   ====================================================== */

.map-placeholder {

    width: 100%;

    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111;

}

.map-placeholder-content {

    max-width: 450px;

    padding: 40px;

    text-align: center;
}

.map-placeholder-content > i {

    color: var(--gold);

    font-size: 38px;

    margin-bottom: 18px;
}

.map-placeholder-content h3 {

    color: white;

    font-family: "Cormorant Garamond", serif;

    font-size: 32px;

    margin-bottom: 12px;
}

.map-placeholder-content p {

    color: #c7c7c7;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 25px;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 800px) {

    #cookieBanner {

        left: 15px;

        right: 15px;

        bottom: 15px;

        padding: 24px;
    }

    .cookie-content {

        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }

    .cookie-text h3 {

        font-size: 25px;
    }

    .cookie-buttons {

        width: 100%;
    }

    .cookie-btn {

        flex: 1;
    }

    .map-placeholder {

        height: 400px;
    }

    .map-placeholder-content {

        padding: 25px;
    }

}