:root {
    --main: white;
    --text: black;

    --accent1: #B22D68;
    --accent2: #25a7a6;
    --accent3: #0A754B;
    --accent4: #c08d3e;

    --textaccent: #39B562;
}

body {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.section {
    min-height: 100vh;
}

.nav-link {
    color: var(--textaccent);
    font-weight: bold;
}

.nav-link.active {
    color: var(--textaccent) !important;
    font-weight: bold;
    text-decoration: underline;
}

.fancybg {

    background-image: url("../image/mantap/MANTAP-ResidensiRimbun-07.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.fancytop {
    background-image: url("../image/mantap/mantapfancytop.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment:scroll;
    height: 70vh;
}
.fancybot {
    background-image: url("../image/mantap/mantapfancybot.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment:scroll;
    height: 20vh;
}

.fancytopb {
    background-image: url("../image/mantap/mantapbluefancytop.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment:scroll;
    height: 20vh;
}
.fancybotb {
    background-image: url("../image/mantap/mantapbluefancybot.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment:scroll;
    height: 30vh;
}

.test{
    border: 1px solid black;
}

.brownbg{
    background-color: var(--accent4);
    color: white !important;
}

.bluebg{
    background-color: var(--accent2);
    color: white !important;
}

.greenbg{
        background-color: var(--accent3);
    color: white !important;
}

.whitebg{
    background-color: white;
    color: black;
}

.standardimg{
    width: 100%;
    height: auto;
}

.logocard{
    border-radius: 10px;
    background-color: white;
    color: black;
}

.logocard2{
    border-radius: 10px;
    background-color: white;
    color: black;
}

.cardstyle{
    
    border-radius: 5%;
}

.ainbutton{
    color: white;
    text-decoration: none;
}


.specialxltext{
    font-size: calc(1.375rem + 3vw);
    font-weight: 900;
    line-height: 80%;
}

.buttonstyle1{
    background-color: transparent;
    border: 1px solid white;
    border-radius: 50rem;
    color: white;
    font-weight: bold;
    transition: 0.5s;

}

.buttonstyle1:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

.specialbutton {
    border: 1px solid var(--textaccent);
    background-color: white;
    border-radius: 50rem;
}
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30vh; /* adjust to match your image height */
}

.marquee__track {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  gap: 5px;              /* use gap, avoid margins */
  width: max-content;

  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  animation: marquee-move 50s linear infinite;
}

.marquee__track--2 {
  animation-delay: -25s;  /* half of 30s for perfect overlap */
}

.marquee__track img {
  height: 30vh;          /* adjust */
  width: auto;
  flex: 0 0 auto;
  display: block;
  border-radius: 5%;
}

@keyframes marquee-move {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}