:root {
    --royal-blue: #001f4d;
    --deep-navy: #001a40;
    --navy-gradient-start: #001a40;
    --navy-gradient-end: #002a66;

    --gold: #bfa21f;
    --gold-light: #f0d86b;
    --gold-soft: #d4c272;
    --gold-border: rgba(191, 162, 31, 0.3);

    --silver: #c0c0c0;
    --silver-light: #e8e8e8;

    --text-light: #e0e0e0;
    --text-silver: silver;

    --bg-light: #f5f7fa;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    --shadow-gold: rgba(191, 162, 31, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.3);

    --header-height: 90px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cinzel', serif;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    min-height: 100vh;
    padding-top: 0px;
    overflow-x: hidden;
}


.slider-wrapper { width: 100%;height: 100vh; display: flex; align-items: center; justify-content: center; background: #000; }
.slider-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; z-index: 1; animation: dissolveForward 8s ease-out forwards; }

@keyframes dissolveForward {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); color: white; padding: 16px; border: none; cursor: pointer; border-radius: 50%; transition: background 0.3s; }
.prev { left: 20px; }
.next { right: 20px; }
.prev:hover, .next:hover { background: rgba(255, 255, 255, 0.5); }





.monument-container { display: flex; justify-content: space-between; align-items: center; gap: 1.5vw; margin-top: 0; padding: 0 2rem; min-height: 26vw; font-family: 'Bodoni Moda', serif; perspective: 2000px; }
.monument-card { position: relative; width: 31vw; height: 24vw; display: flex; justify-content: center; align-items: center; transition: all 0.5s ease; transform-style: preserve-3d; isolation: isolate; background: transparent;  border-radius: 15px; overflow: hidden; }
.monument-card::before { content: ''; position: absolute; width: 180%; height: 180%;
    background: conic-gradient(
        from 0deg,
        #002a66,
        #00d4ff,
        #0051cc,
        #002a66
    );
    animation: rotate-border 4s linear infinite; z-index: 1; transition: opacity 0.4s ease; filter: saturate(1.5) contrast(1.1); }
.monument-card::after { content: ''; position: absolute; inset: 5px; background: #eae5e5; border-radius: 12px; z-index: 2; transition: opacity 0.4s ease; box-shadow: inset 0 0 2px 1px #eae5e5, 0 0 0 2px #eae5e5; }
.monument-card > * { position: relative; z-index: 3; }
.monument-card:hover::before, .monument-card:hover::after { opacity: 0; }

@keyframes rotate-border {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.frame-wrap { position: absolute; inset: 5px; z-index: 3; overflow: hidden; border-radius: 10px; transition: all 0.5s ease; }
.base-image { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; border-radius: 3px; }
.monument-card:hover .frame-wrap { transform: rotateX(25deg) translateY(-5%); box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.7); }
.monument-card:hover .base-image { opacity: 0.4; filter: blur(1px); transform: scale(1.05); }
.overlay-content { position: absolute; width: 85%; z-index: 10; color: white; text-align: center; opacity: 0; pointer-events: none; transform: translate3d(0, 20%, 0); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.monument-card:hover .overlay-content { opacity: 1; transform: translate3d(0, -10%, 90px); }
.title-main { font-size: 1.8vw; color: #002a66; margin-bottom: 0.8vw; text-transform: uppercase; letter-spacing: 1px; }
.description { font-size: 1vw; line-height: 1.5; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9); }

@media (max-width: 1024px) {
    .monument-container { flex-wrap: wrap; justify-content: center; gap: 5vw; height: auto; padding-bottom: 5rem; }
    .monument-card { width: 40vw; height: 35vw; }
    .title-main { font-size: 2.5vw; }
    .description { font-size: 1.8vw; }
}

@media (max-width: 768px) {
    .monument-container { flex-direction: column; gap: 80px; margin-top: 10vw; }
    .monument-card { width: 85vw; height: 65vw; }
    .title-main { font-size: 6vw; margin-bottom: 2vw; }
    .description { font-size: 3.5vw; line-height: 1.3; }
    .frame-wrap { border-width: 1.5px; }
    .monument-card:hover .overlay-content { transform: translate3d(0, -10%, 60px); }
}





.fade-section { position: relative; width: 100%; max-height: 350px; overflow: hidden; background-color: #eae5e5; margin-bottom: 0vw; font-family: cinzel; border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.background-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 0.5s ease; z-index: 1; }
.title { position: relative; z-index: 3; font-size: clamp(25px, 3vw, 40px); color: #111; text-align: center; margin-top: 1vw; margin-bottom: 1vw; opacity: 0; transition: opacity 1s ease; }
.title.show { opacity: 1 !important; }
.content { display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 3; width: 100%; opacity: 0; transition: opacity 1s ease; gap: 3vw; padding-bottom: 3vw; }
.left-image { width: 100%; max-width: 300px; max-height: 400px; margin-left: 5vw; margin-right: 3vw; flex-shrink: 0; }
.left-image img { width: 100%; height: 100%; object-fit: cover; }
.right-content { flex-grow: 1; display: flex; flex-direction: column; align-items:first baseline; padding-right: 5vw; }
.right-content p { font-size: clamp(16px, 1.8rem, 25px); color: #111; margin-top: 2vw; margin-bottom: 3vw; font-family: Bodoni Moda; text-align: left; width: 100%; }
.button-container-1 { position: relative; width: fit-content; height: auto; overflow: hidden; border: 2px solid #002a66; font-family: cinzel; transition: 0.5s; border-radius: 10px; background-color: #fff; z-index: 1; }
.mas { position: absolute; color: #252525; text-align: center; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1vw; font-weight: bold; text-transform: uppercase; z-index: 0; padding: 1.2vw 3vw; }
.button-container-1 button {
    width: 101%;
    height: 100%;
    font-family: cinzel;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding: 1.2vw 3vw;
    border: none;
    background: #002a66;
    color: #fff;
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-animation: ani2 0.7s steps(22) forwards;
    animation: ani2 0.7s steps(22) forwards;
}
.button-container-1 button:hover { -webkit-animation: ani 0.7s steps(22) forwards; animation: ani 0.7s steps(22) forwards; }
.button-container-1 button:hover {  -webkit-animation: ani 0.7s steps(22) forwards;  animation: ani 0.7s steps(22) forwards;  }

@keyframes ani {
    from { -webkit-mask-position: 0 0; mask-position: 0 0; }
    to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes ani2 {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
  
.show { opacity: 1 !important; }
.hide { opacity: 0 !important; }

@media (min-width: 1400px) {
    .fade-section { min-height: 400px; }
    .left-image { max-width: 340px; height: 280px; }
}
@media (max-width: 1024px) {
    .content { gap: 4vw; }
    .left-image { max-width: 260px; height: 240px; margin-left: 3vw; }
    .right-content { padding-right: 3vw; }
}
@media (max-width: 768px) {
    .fade-section { padding: 16px; }
    .content { flex-direction: column; align-items: center; text-align: center; }
    .left-image { width: 80%; max-width: 280px; height: 220px; margin: 0 0 20px 0; }
    .right-content { align-items: center; padding-right: 0; }
    .right-content p { text-align: center; margin-top: 10px; }
}
@media (max-width: 480px) {
    .fade-section { border-radius: 8px; min-height: auto; }
    .title { margin-top: 10px; margin-bottom: 12px; }
    .left-image { width: 100%; height: 200px; }
    .button-container-1 { width: 100%; }
    .button-container-1 button, .mas { width: 100%; padding: 14px 0; }
}





.promise-container {
    position: relative;
    top: 0vw;
    width: 100%;
    height: 10px;
    text-align: left;
    border-radius: 1vw;
    background-color: #fff;
    border: #c1a164 solid 0.2vw;
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: cinzel;
  }
  .static-text {
    margin: 0.2vw; padding: 1vw 2vw; border-radius: 1vw; border: #c1a164 solid 0.2vw; color: #fff; position: relative; z-index: 2; white-space: nowrap; left: -0.2vw;
    background: conic-gradient(
        from 0deg,
        #bfa21f,
        #d4c272,
        #f0d86b,
        #bfa21f
    );
  }
.moving-text { font-size: 1.5rem; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; color: #111; white-space: nowrap; animation: moveText 20s linear infinite; z-index: 1; }
@keyframes moveText {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}
  
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
    .promise-container { height: 12px; margin-top: 10px;}
    .static-text { font-size: 2.5vw; }
    .moving-text { font-size: 3.5vw; }
}  
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 16/9) {
    .promise-container { height: 60px; margin-top: 3px; }
    .static-text { font-size: 2vw; padding: 1.5vw 2.5vw; }
    .moving-text { font-size: 2.5vw; }
}  
@media (min-aspect-ratio: 16/9) {
    .promise-container { height: 55px; margin-top: 1px; }
    .static-text { font-size: 1.5vw; padding: 1vw 2vw; }
    .moving-text { font-size: 1.5rem; }
}
@media (orientation: portrait) {
    .promise-container { height: 50px; margin-top: 3px; }
    .static-text { font-size: 3vw; padding: 10px 15px; }
    .moving-text { font-size: 3.5vw; }
}
@media (max-aspect-ratio: 3/5) {
    .promise-container { height: 30px; margin-top: 1px; }
    .static-text { font-size: 1rem; font-weight: 2; padding: 3px 4px; }
    .moving-text { font-size: 1rem; }
}