* {
    margin: 0;
    padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {				
	min-height: 100vh;
	display: grid;
	place-items: center;
	color: #d5dddb;
	background-color: #687973;
	background-image: url("bg/french-stucco.png");
	background-attachment: fixed; 
	font-size: 1.2em;
   font-family: "Lora", serif;
}
p{
margin: 0;
padding: .2em 0;
}
a {
text-decoration: none;
color: #576c34; 
transition: .5s; transition-delay: 0s;
}
a:hover { text-decoration: none; text-shadow:0px 0px 5px rgba(235,181,61,0.86); transition: 0.5s; transition-delay: 0s;}
a.light{color:#eedec3;}
a.light:hover { color:#f8e8ce; text-shadow: 0 0 10px 1px #fff;}

.small { font-size: .7em;}
.smaller { font-size: smaller;}
.smallcaps {font-variant: small-caps;}
.medium { font-size: 1.2em;}
.medlarge { font-size: 1.4em;}
.large { font-size: 1.7em;}
.larger { font-size: 1.5em;}
.xlarge { font-size: 2em;}

.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}
.cap { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.formidable { font-weight: 600; }
.central {display: flex; justify-content: center;}

h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
line-height: 100%;
text-align: center;
margin: 0;
}
h1 {
font-size: max(6vw, 2.8em);
text-transform: uppercase;
font-weight: 600;
letter-spacing: -2px;
line-height: 80%;
color: #f1ebe5;
text-shadow: 0 5px 20px rgba(255,255,255,.4);
}
h1 span{
text-transform: lowercase;
font-family: "Water Brush", cursive;
font-weight: 400;
}
h1.atyanta {
	margin: auto;
	letter-spacing: 0.0015em;
	font-size: max(6vw, 2.8em);
text-shadow: 0 8px 9px #c4b59d, 0 3px 1px #554937, 0 5px 9px #ededa7, 0px -2px 1px #fff;
	text-shadow: 0 1px #8da1ff, -1px 0 #c0cbff, -1px 2px #8da1ff, -2px 1px #c0cbff,
		-2px 3px #8da1ff, -3px 2px #c0cbff, -3px 4px #8da1ff, -4px 3px #c0cbff,
		-4px 5px #8da1ff, -5px 4px #c0cbff, -5px 6px #8da1ff, -6px 5px #c0cbff,
		-6px 7px #8da1ff, -7px 6px #c0cbff, -7px 8px #8da1ff, -8px 7px #c0cbff;
	text-align: center;
}
h1.imaging {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}
@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

h2, h3 {
font-family: "Water Brush", cursive;
font-weight: 400;
}

h2{
font-size: max(4vw, 2.2em);
text-shadow: 0 0 1px rgba(255,255,255,.3);
}
h3 {color: #e5d7bf; font-size: max(3vw, 2em)}

h3 span {
font-family: "Lora", serif; font-weight: 600;
}
h4 {font-size: 1.3em; color: #7dc3c3; font-family: "Lora", serif; font-weight: 600; text-shadow: 0 1px 2px #4a7e7e, 0px -1px 1px #fff;}
h5 {
text-transform: uppercase;
font-weight: 600;
letter-spacing: -2px;
line-height: 80%;
text-shadow: 0 5px 20px rgba(255,255,255,.4);
}
h6 {
text-transform: uppercase;
font-size: max(4vw, 2.2em);
font-weight: 600;
line-height: 80%;
text-shadow: 0 5px 20px rgba(255,255,255,.4);
}

#atyanta::before, #phase1::before, #phase2::before, #phase3::before, #phase4::before {
content: '\A';
display: block;
height: 1.2em;
}

.colorful{
  /* old browser interpolation */
  background: linear-gradient(
    to right, 
    rgb(74.62, 178.75, 160.69), 
    rgba(80.65, 135.54, 188.59, 0.6)
  );
  
  /* modern interpolation */
  background: linear-gradient(
    to right in oklch, 
    oklch(0.7 0.1 180), 
    oklch(0.61 0.1 249 / 60%)
  );
  
  /* old browser support */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* modern browser version */
  background-clip: text;
  color: transparent;
}
.m5 {margin: 5em 0;}
.m2w {margin: 0 2em;}
.m5w {margin: 0 5em;}
.p1 {padding: 1em;}
.p2 {padding: 2em 0;}
.p5 {padding: 5em 0;}

blockquote p {
   font-style: italic;
   margin-bottom: 0;
   font-size: 1.2em;
}
blockquote p::before,
blockquote p::after {
   content: "“";
   font-family: Georgia, serif;
   font-size: 5rem;
   margin: -1.5rem 0 0 -2.7rem;
   position: absolute;
   opacity: 0.4;
}
blockquote p::after {
   content: "”";
   margin: -1rem -1rem 0 0;
}
blockquote cite {
   font-size: .9rem;
   color: #918c88;
   display: block;
   text-align: center;
}
q{
   font-size: 1.1em;
   color: #817f7a;
   margin: 1em;
}

.artist {
margin: 1.5em 3em;
}

.mystic{
padding: 3% 4%;
background: rgba(0,0,0,.2);
}
.mystictext{
padding-top: max(1.5rem, 3vw);
padding-bottom: max(1.5rem, 3vw);
padding-left: max(2rem, 4vw);
padding-right: max(2rem, 4vw);
background-color: #e0d7c9;
background-image: url("bg/dark-leather.png");
border-radius: 2px;
border: 5px #695f4e solid;
color: #1e2120;
font-size: max(1.8vw, 1.1em); 
margin: 10px 0;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.mysticgallery{
width: 100%;
background-color: #303438;
background-image: url("bg/light-sketch.png");
padding: 1em 0;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.mysticgallery ul{
width: 98%;
margin: auto;
}

.introducing {
display: block;
width: 100%;
min-height: 150px;
margin: 0 auto;
text-align: center;
background-color:#37403d;
background: url(https://maginario.com/img/sabina-nore.png) no-repeat top center;
mix-blend-mode: overlay;
}

.thimc {
font-weight: 600;
}

.timeline {
padding-top: max(1rem, 2vw);
padding-bottom: max(1rem, 2vw);
padding-left: max(1.5rem, 3vw);
padding-right: max(1.5rem, 3vw);
background-color: rgba(0,0,0,.5);
background-image: url("bg/concrete-wall.png");
border-radius: 2px;
border: 5px #302f2d solid;
color: #8f8c84;
font-size: max(1vw, .8em); 
margin: 10px 0;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.atyanta h1 {
padding: 135px 0 0 0;
}
.atyanta p {
font-size: 1.8em;
font-weight: 500;
}
.montserrat {
font-family: "Montserrat", sans-serif;
}
.flip {
transform: scale(-1, 1);
}


@media only screen and (max-width: 600px) {

}











 /* ==================== ADVANCED NAVIGATION BAR ==================== */     
 .navbar-container {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            width: calc(100% - 60px);
            max-width: 1000px;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .navbar {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 12px 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        .navbar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent);
            transition: left 0.8s ease;
        }

        .navbar:hover::before {
            left: 100%;
        }

        .navbar:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        /* ==================== LOGO SECTION ==================== */
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: white;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;
            font-size: 1.4rem;
            z-index: 2;
            position: relative;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .logo-icon::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            animation: logo-pulse 2s ease-in-out infinite;
        }

        @keyframes logo-pulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.2); opacity: 1; }
        }

        .brand-text {
            background: linear-gradient(135deg, #ffffff, #f0f0f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }        /* ==================== NAVIGATION LINKS ==================== */
        .navbar-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            list-style: none;
            z-index: 2;
            position: relative;
        }

        /* Desktop navigation styles */
        @media (min-width: 993px) {
            .navbar-nav {
                display: flex !important;
                position: static !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
                background: none !important;
                border: none !important;
                padding: 0 !important;
                box-shadow: none !important;
                flex-direction: row !important;
            }
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 0.9rem;
            border-radius: 25px;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            border-radius: 25px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .nav-link:hover::before {
            opacity: 1;
        }

        .nav-link:hover {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .nav-link.active {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            color: white;
            box-shadow: 
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.1);
        }        .nav-icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
            transition: transform 0.3s ease;
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.1);
        }

        /* ==================== MOBILE MENU TOGGLE ==================== */        
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 1001;
            position: relative;
            flex-shrink: 0;
        }

        .mobile-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .hamburger {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 24px;
            height: 18px;
            justify-content: center;
        }

        .hamburger span {
            width: 24px;
            height: 2px;
            background: white;
            border-radius: 2px;
            transition: all 0.3s ease;
            display: block;
        }

        .mobile-toggle.active .hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .mobile-toggle.active .hamburger span:nth-child(2) {
            opacity: 0;
            transform: translateX(-20px);
        }

        .mobile-toggle.active .hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }        /* ==================== CTA BUTTON ==================== */
        .cta-button {
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            font-family: "Montserrat", sans-serif;
            font-weight: 600;
            font-size: 0.9rem;
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
            white-space: nowrap;
            margin-left: 5px;
        }

        .cta-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.4);
        }/* ==================== MOBILE RESPONSIVE ==================== */
        @media (max-width: 992px) {
            .navbar-container {
                top: 20px;
                width: calc(100% - 30px);
            }

            .navbar {
                padding: 12px 20px;
                position: relative;
            }

            .mobile-toggle {
                display: flex !important;
                align-items: center;
                justify-content: center;
            }

            /* Hide desktop navigation on mobile */
            .navbar-nav {
                display: none;
            }

            .brand-text {
                font-size: 1.2rem;
            }
        }

        /* Mobile Menu Overlay */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1500;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Mobile Menu Container */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #b9a37a 0%, #914343 50%, #62a1a1 100%);
            z-index: 1600;
            transform: translateY(-100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow-y: auto;
        }

        .mobile-menu.active {
            transform: translateY(0);
        }

        /* Mobile Menu Header */
        .mobile-menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 30px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-menu-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: white;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;
            font-size: 1.4rem;
        }

        .mobile-menu-close {
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
        }

        .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        /* Mobile Menu Navigation */
        .mobile-menu-nav {
            padding: 40px 30px;
            list-style: none;
        }

        .mobile-menu-item {
            margin-bottom: 8px;
        }

        .mobile-menu-link {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 24px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 1.1rem;
            border-radius: 20px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 12px;
        }

        .mobile-menu-link:hover,
        .mobile-menu-link.active {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: translateX(8px);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .mobile-menu-icon {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .mobile-cta {
            margin: 30px 30px 40px;
        }

        .mobile-cta-button {
            display: block;
            max-width: 100%;
            background: linear-gradient(135deg, #62a1a1, #498383);
            color: white;
            text-decoration: none;
            padding: 20px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 1.1rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
        }

        .mobile-cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
        }

        @media (max-width: 768px) {
            .navbar-container {
                width: calc(100% - 30px);
            }
        }

        @media (max-width: 480px) {
            .navbar-container {
                width: calc(100% - 20px);
                top: 15px;
            }

            .navbar {
                padding: 10px 15px;
            }

            .navbar-brand {
                gap: 8px;
            }

            .logo-icon {
                width: 35px;
                height: 35px;
            }

            .brand-text {
                font-size: 1.1rem;
            }
        }       

        /* ==================== FOOTER ==================== */
        .footer {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            margin: 30px auto 40px;
            padding: 25px 40px;
            max-width: 990px;
            width: calc(100% - 200px);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent);
            transition: left 0.8s ease;
        }

        .footer:hover::before {
            left: 100%;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            color: white;
            position: relative;
            z-index: 2;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: white;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .footer-logo {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .footer-logo::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            animation: logo-pulse 2s ease-in-out infinite;
        }

        .footer-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        .footer-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            padding: 8px 0;
        }

        .footer-link:hover {
            color: white;
            transform: translateY(-1px);
        }

        .footer-copy {
            text-align: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .footer {
                width: calc(100% - 80px);
                padding: 20px 25px;
            }

            .footer-content {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }

            .footer-links {
                gap: 20px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-social {
                justify-content: center;
            }
        }        @media (max-width: 480px) {
            .footer {
                width: calc(100% - 40px);
                padding: 15px 20px;
            }

            .footer-links {
                gap: 15px;
            }
        }

        .navicon {
        line-height: 24px;
        font-size: 1.4em;
        }