@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
600&family=Raleway:wght@500;
600;
700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&family=Monsterrat);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;
600;
700&display=swap);
@import url(https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css);
.liputan {
    max-width:640px;
    margin:60px auto;
    padding:0 16px;
    text-align:center
}
.judul {
    font-size:1.5rem;
    font-weight:700;
    color:#523c95;
    margin-bottom:24px;
    letter-spacing:.5px
}
.link-container {
    display:flex;
    flex-direction:column;
    gap:12px
}
.link-container a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 16px;
    background-color:#fff;
    color:#111827;
    border-radius:8px;
    text-decoration:none;
    font-weight:500;
    transition:background .2s,transform .2s;
    border:1px solid #e5e7eb
}
.link-container a:hover {
    background-color:#e0e7ff;
    transform:translateY(-1px);
    border-color:#c7d2fe
}
.link-container .icon {
    width:20px;
    height:20px;
    color:#523c95
}
@media(max-width:480px) {
    .judul {
        font-size:1.25rem
    }
    .link-container a {
        font-size:.95rem;
        padding:10px 14px
    }
    .link-container .icon {
        width:18px;
        height:18px
    }
}
section.res__gallery,section.res__gallery2 {
    font-family:'Segoe UI', sans-serif;
    ;
    width:100%;
    margin:5px auto;
    display:flex;
    box-sizing:border-box
}
.card,.card::after {
    -webkit-transition:.6s cubic-bezier(.165,.84,.44,1)
}
.cards,.galleri {
    max-width:1200px
}
.brand,.btn-grad {
    text-transform:uppercase
}
.btn-grad:hover,a {
    text-decoration:none
}
.itemdiv3 h5,a:hover {
    color:#523c95
}
body,button,input {
    font-size:var(--normal-font-size)
}
.change-theme,.nav__close,.nav__toggle,button {
    cursor:pointer
}
.about__data,.btn-grad,.footer__rights,.itemdiv3 h5,.section__title,.subscribe__description,.video__description {
    text-align:center
}
:root {
    --header-height:3rem;
    --font-medium:500;
    --first-color:#EB262B;
    --complementary-color:#f99d6e;
    --white-color:#fafaff;
    --dark-color:#2a3b47;
    --text-color:#697477;
    --white-color-glass:rgba(250, 250, 255, 0.4);
    --body-font:'Segoe UI', sans-serif;
    --big-font-size:6.25rem;
    --h2-font-size:1.25rem;
    --normal-font-size:0.938rem;
    --small-font-size:0.813rem;
    --header-height:2rem;
    --hue-color:177;
    --first-color-second:hsl(var(--hue-color), 64%, 22%);
    --first-color-alt:hsl(var(--hue-color), 64%, 15%);
    --title-color:#EB262B;
    --text-color:hsl(var(--hue-color), 64%, 35%);
    --text-color-light:hsl(var(--hue-color), 8%, 60%);
    --input-color:hsl(var(--hue-color), 24%, 97%);
    --body-color:hsl(var(--hue-color), 100%, 99%);
    --white-color:#fff;
    --jilid12:#1d6eaa;
    --scroll-bar-color:hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color:hsl(var(--hue-color), 12%, 75%);
    --body-font:"Indie Flower",sans-serif;
    --body-font:"Monsterrat",sans-serif;
    --title-font:"Monsterrat",sans-serif;
    --biggest-font-size:2.5rem;
    --h1-font-size:1.5rem;
    --h2-font-size:1.25rem;
    --h3-font-size:1rem;
    --normal-font-size:0.938rem;
    --small-font-size:0.813rem;
    --smaller-font-size:0.75rem;
    --font-medium:500;
    --font-semi-bold:600;
    --mb-0-25:0.25rem;
    --mb-0-5:0.5rem;
    --mb-0-75:0.75rem;
    --mb-1:1rem;
    --mb-1-25:1.25rem;
    --mb-1-5:1.5rem;
    --mb-2:2rem;
    --mb-2-5:2.5rem;
    --z-tooltip:10;
    --z-fixed:100;
    --img-transition:0.3s;
    --img-hidden:hidden;
    --img-scale:scale(1.1)
}
section.res__gallery {
    justify-self:center;
    align-items:center;
    flex-direction:column;
    padding:2rem 0
}
section.res__gallery2 {
    justify-self:center;
    align-items:center;
    flex-direction:column;
    padding:4rem 0 2rem
}
section.res__gallery ul {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:inherit;
    margin-bottom:20px
}
section.res__gallery ul li {
    list-style:none;
    background:var(--first-color);
    color:var(--white-color);
    font-size:var(--h2-font-size);
    padding:12px 20px;
    margin:5px;
    letter-spacing:1px;
    cursor:pointer;
    -ms-user-select:None;
    -moz-user-select:None;
    -webkit-user-select:None;
    user-select:None
}
section.res__gallery ul li.active {
    background:var(--complementary-color);
    color:var(--white-color)
}
.product {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    -ms-user-select:None;
    -moz-user-select:None;
    -webkit-user-select:None;
    user-select:None
}
.itemdiv1,.itemdiv2,.itemdiv3 {
    display:block;
    align-items:center;
    padding:0
}
.product .itembox {
    position:relative;
    width:200px;
    height:200px;
    margin:5px;
    display:block
}
.card::after,.product .itembox img {
    position:absolute;
    width:100%;
    left:0
}
.product .itembox.hide {
    display:none
}
.product .itembox img {
    top:0;
    height:100%;
    object-fit:cover
}
a[data-fancybox] img {
    cursor:grab
}
.card2:hover,.card:hover {
    -webkit-transform:scale(1.02,1.02);
    transform:scale(1.02,1.02);
    box-shadow:0 4px 8px rgb(38 38 38 / .6);
    top:-4px
}
.cardWithBG:hover {
    -webkit-transform:scale(1,1);
    transform:scale(1,1);
    box-shadow:0 4px 8px rgb(38 38 38);
    top:-4px
}
.card:hover::after {
    opacity:1
}
.card::after {
    content:"";
    border-radius:12px;
    z-index:-1;
    top:0;
    height:100%;
    box-shadow:0 12px 36px rgb(0 0 0 / .3);
    opacity:0;
    transition:.6s cubic-bezier(.165,.84,.44,1)
}
.itemdiv1,.itemdiv3 {
    height:100%;
    justify-content:center;
    font-size:1.5rem
}
.itemdiv2 {
    height:100%;
    justify-content:center;
    font-size:0rem
}
.card,.card2 {
    padding:1rem;
    box-shadow:0 4px 8px rgb(0 0 0 / .1);
    border-radius:12px;
    color:#fff
}
.itemdiv1 h5,.itemdiv2 h5 {
    color:#523c95;
    text-align:center;
    font-size:16px
}
.itemdiv3 h5 {
    font-size:18px
}
.card {
    height:9rem;
    transition:.6s cubic-bezier(.165,.84,.44,1)
}
.card2 {
    height:13rem;
    -webkit-transition:.6s cubic-bezier(.165,.84,.44,1);
    transition:.6s cubic-bezier(.165,.84,.44,1)
}
.cards {
    margin:0 auto;
    display:grid;
    gap:1rem;
    align-items:center;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))
}
.galleri {
    width:300px;
    height:200px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:5px
}
.btn-grad {
    background-image:linear-gradient(to right,#ff2a2a 0,#d5d7fa 71%,#523c95 100%);
    margin:2px;
    padding:10px 15px;
    transition:.5s;
    background-size:300% auto;
    color:#fff;
    box-shadow:0 3px 10px 0 #eee;
    border-radius:10px;
    display:flexbox;
    font-size:small
}
.btn-grad:hover {
    background-position:right center;
    color:#fff;
    transition:.8s
}
@keyframes scroll {
    0% {
        transform:translateX(0)
    }
    100% {
        transform:translateX(calc(-250px * 7))
    }
}
/* slider start */
  .slider {
    overflow: hidden;
    position: relative;
    height: 120px;
  }

  .slide-track {
    display: flex;
    width: calc(250px * 21 * 2); /* 21 gambar x 2 (looping) */
    animation: scroll 120s linear infinite; /* Perpanjang durasi */
  }

  .slide {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slide img {
    max-height: 100px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
  }

  .slider:hover .slide-track {
    animation-play-state: paused;
  }

  .slide-track {
  will-change: transform;
}

@keyframes scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
/* end slider */
.brand {
    display:flex;
    flex-direction:row;
    font-size:1.5em;
    padding:15px
}
.firstname {
    color:#99d3f5;
    font-weight:800
}
.lastname:hover {
    transform:rotate(10deg)
}
.about__img-one:hover,.about__img-two:hover,.discover__img:hover,.experience__img-one:hover,.experience__img-two:hover,.home__info-img:hover,.place__card:hover .place__img {
    transform:var(--img-scale)
}
.lastname {
    color:#fff;
    font-weight:600;
    padding-left:2px
}
.home__data-subtitle,.nav__link,.nav__logo,h1,h2,h3 {
    font-weight:var(--font-semi-bold)
}
@media screen and (min-width:968px) {
    :root {
        --biggest-font-size:4rem;
        --h1-font-size:2.25rem;
        --h2-font-size:1.75rem;
        --h3-font-size:1.25rem;
        --normal-font-size:1rem;
        --small-font-size:0.875rem;
        --smaller-font-size:0.813rem
    }
}
.con {
    width:500px
}
body.dark-theme {
    --first-color-second:hsl(var(--hue-color), 54%, 12%);
    --title-color:hsl(var(--hue-color), 24%, 95%);
    --text-color:hsl(var(--hue-color), 8%, 75%);
    --input-color:hsl(var(--hue-color), 29%, 16%);
    --body-color:hsl(var(--hue-color), 29%, 12%);
    --scroll-bar-color:hsl(var(--hue-color), 12%, 48%);
    --scroll-thumb-color:hsl(var(--hue-color), 12%, 36%)
}
.nav__dark {
    display:flex;
    align-items:center;
    column-gap:2rem;
    position:absolute;
    left:3rem;
    bottom:4rem
}
#bg,.header {
    position:fixed
}
.nav__link {
    text-transform:uppercase!important;
    text-shadow:0 7px 15px 0 rgb(0 0 0 / .5)!important
}
.nav__link:hover {
    color:#523c95!important;
    color:var(--text-color)
}
.change-theme,.change-theme-name {
    color:var(--text-color)
}
.section__title,body,h1,h2,h3 {
    color:var(--first-color)
}
.change-theme {
    font-size:1rem
}
.change-theme-name,.experience__description {
    font-size:var(--small-font-size)
}
* {
    box-sizing:border-box;
    padding:0;
    margin:0
}
#bg {
    top:-50%;
    left:-50%;
    width:200%;
    height:200%
}
#bg img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%
}
html {
    scroll-behavior:smooth
}
body {
    margin:var(--header-height) 0 0 0;
    font-family:var(--body-font);
    background:#ffffff
}
h1,h2,h3 {
    font-family:var(--title-font)
}
ul {
    list-style:none
}
img,video {
    max-width:100%;
    height:auto
}
button,input {
    border:none;
    font-family:var(--body-font)
}
.button,.header {
    border-radius:5px
}
input {
    outline:0
}
.main {
    overflow-x:hidden
}
.about__img-overlay,.discover__card,.experience__overlay,.home__info-overlay,.place__card {
    overflow:var(--img-hidden)
}
.section {
    padding:6rem 0 2.5rem
}
.section__title {
    font-size:var(--h2-font-size);
    text-transform:uppercase;
    margin-bottom:var(--mb-0-25)
}
.container {
    max-width:968px;
    margin-left:var(--mb-1);
    margin-right:var(--mb-1)
}
.grid {
    display:grid;
    gap:1.5rem
}
.header {
    width:100%;
    top:0;
    left:0;
    z-index:var(--z-fixed);
    background-color:rgb(255, 255, 255);
    box-shadow:0 5px 15px 0 rgba(249, 251, 250, 0.5)
}
.nav {
    height:var(--header-height);
    display:flex;
    justify-content:space-between;
    align-items:center
}
.nav__logo {
    color:var(--white-color)
}
.nav__link,.nav__toggle,.scroll-header .nav__logo,.scroll-header .nav__toggle {
    color:var(--first-color)
}
.nav__toggle {
    font-size:1.2rem
}
.nav__menu,.video__content {
    position:relative
}
@media screen and (max-width:767px) {
    .nav__menu {
        position:fixed;
        background-color:var(--body-color);
        top:0;
        right:-100%;
        width:70%;
        height:100%;
        box-shadow:-1px 0 4px rgb(14 55 63 / .15);
        padding:3rem;
        transition:.4s
    }
}
.nav__list {
    display:flex;
    flex-direction:column;
    row-gap:2rem
}
.nav__link {
    text-transform:uppercase
}
.active-link,.nav__close {
    color:var(--title-color)
}
.nav__close {
    position:absolute;
    top:.75rem;
    right:1rem;
    font-size:1.5rem
}
.show-menu {
    right:0
}
.scroll-header {
    background-color:var(--body-color);
    box-shadow:0 0 4px rgb(112 255 231 / .15)
}
.button,.home__info {
    background-color:var(--first-color)
}
.active-link {
    position:relative
}
.button,.discover__description,.discover__title,.home__data-subtitle,.home__data-title,.home__info,.home__social-link,.place__content,.place__title,.subscribe__description,.subscribe__title {
    color:var(--white-color)
}
.active-link::before {
    content:"";
    position:absolute;
    background-color:var(--title-color);
    width:100%;
    height:2px;
    bottom:-.75rem;
    left:0
}
.home__img {
    position:absolute
}
.home__container {
    position:relative;
    height:calc(100vh - var(--header-height));
    align-content:center;
    row-gap:3rem
}
.about__container,.home__social {
    row-gap:1.5rem
}
.home__data-subtitle {
    display:block;
    margin-bottom:var(--mb-0-75)
}
.home__data-title {
    font-size:var(--biggest-font-size);
    font-weight:var(--font-medium);
    margin-bottom:var(--mb-2-5)
}
.button,.experience__number,.home__info-title {
    font-weight:var(--font-semi-bold)
}
.home__social {
    display:flex;
    flex-direction:column
}
.button--flex,.home__info {
    align-items:center;
    column-gap:.5rem
}
.home__social-link {
    font-size:1.2rem;
    width:max-content
}
.home__info {
    display:flex;
    padding:1.5rem 1rem;
    position:absolute;
    right:0;
    bottom:1rem;
    width:228px
}
.home__info-title {
    display:block;
    font-size:var(--small-font-size);
    margin-bottom:var(--mb-0-75)
}
.home__info-button {
    font-size:var(--smaller-font-size)
}
.home__info-img {
    width:145px;
    transition:var(--img-transition)
}
.button {
    display:inline-block;
    padding:1rem;
    transition:.3s
}
.about__img-one,.about__img-two,.discover__img,.experience__img-one,.experience__img-two,.place__img {
    transition:var(--img-transition)
}
.button:hover {
    background-color:var(--first-color-alt)
}
.button--link,.button--link:hover {
    background:0 0
}
.button--flex {
    display:flex
}
.button--link {
    padding:0
}
.about__description {
    margin-bottom:var(--mb-2)
}
.about__img {
    display:flex;
    column-gap:1rem;
    align-items:center;
    justify-content:center
}
.about__img-one {
    width:130px
}
.about__img-two {
    width:180px
}
.discover__card {
    position:relative;
    width:200px
}
.discover__data {
    position:absolute;
    bottom:1.5rem;
    left:1rem
}
.discover__title {
    font-size:var(--h3-font-size);
    margin-bottom:var(--mb-0-25)
}
.discover__description {
    display:block;
    font-size:var(--smaller-font-size)
}
.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right {
    background-image:#000
}
.experience__container {
    row-gap:2.5rem;
    justify-content:center;
    justify-items:center
}
.experience__content {
    grid-template-columns:repeat(3,1fr);
    column-gap:1rem;
    justify-items:center;
    padding:0 2rem
}
.experience__img,.video__container {
    padding-bottom:1rem
}
.experience__number {
    font-size:var(--h2-font-size);
    margin-bottom:var(--mb-0-5)
}
.experience__img {
    position:relative
}
.experience__overlay:first-child {
    width:263px;
    margin-right:2rem
}
.experience__overlay:nth-child(2) {
    width:120px;
    position:absolute;
    top:2rem;
    right:0
}
.video__description {
    margin-bottom:var(--mb-0-5);
    color:var(--first-color)
}
.video__button {
    position:absolute;
    right:1rem;
    bottom:-1rem;
    padding:1rem 1.5rem
}
.video__button-icon {
    font-size:1.2rem
}
.place__card,.place__img {
    height:230px
}
.place__container {
    grid-template-columns:repeat(2,max-content);
    justify-content:center
}
.place__card {
    position:relative
}
.place__content {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:.75rem .75rem 1rem
}
.place__rating {
    align-self:flex-end;
    display:flex;
    align-items:center
}
.place__rating-icon {
    font-size:.75rem;
    margin-right:var(--mb-0-25)
}
.place__rating-number {
    font-size:var(--small-font-size)
}
.place__price,.place__subtitle {
    display:block
}
.place__title {
    font-size:var(--h3-font-size);
    margin-bottom:var(--mb-0-25)
}
.place__subtitle {
    font-size:var(--smaller-font-size);
    margin-bottom:var(--mb-1-25)
}
.place__button {
    position:absolute;
    right:0;
    bottom:0;
    padding:.75rem 1rem
}
.subscribe__bg {
    background-color:var(--first-color-second);
    padding:2.5rem
}
.subscribe__form,.subscribe__input {
    background-color:var(--input-color)
}
.scrollup,.subscribe__form {
    padding:.5rem;
    display:flex
}
.subscribe__description {
    margin-bottom:var(--mb-2-5)
}
.subscribe__form {
    justify-content:space-between
}
.subscribe__input {
    width:70%;
    padding-right:.5rem;
    color:var(--text-color)
}
.subscribe__input::placeholder {
    color:var(--text-color)
}
.total {
    color:#523c95!important
}
.timer {
    color:#101010
}
.footer__container {
    row-gap:5rem
}
.footer__content {
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    row-gap:2rem
}
.footer__subtitle,.footer__title {
    font-size:var(--h3-font-size)
}
.footer__title {
    margin-bottom:var(--mb-0-5)
}
.footer__description {
    margin-bottom:var(--mb-2);
    color:#8d8c8c
}
.footer__social {
    font-size:1.25rem;
    color:#8d8c8c;
    margin-right:var(--mb-1-25)
}
.footer__subtitle {
    margin-bottom:var(--mb-1)
}
.footer__item {
    margin-bottom:var(--mb-0-75)
}
.footer__link {
    color:#8d8c8c
}
.footer__link:hover {
    color:var(--title-color)
}
.bd:hover,.bt {
    color:#ce0600
}
.footer__rights {
    display:flex;
    flex-direction:column;
    row-gap:1.5rem
}
.bd {
    background-color:#ce0600
}
.bd:hover {
    background-color:#fff
}
.footer__copy,.footer__terms-link {
    font-size:var(--small-font-size);
    color:var(--text-color-light)
}
.footer__terms {
    display:flex;
    column-gap:1.5rem;
    justify-content:center
}
.footer__terms-link:hover {
    color:var(--text-color)
}
.scrollup {
    position:fixed;
    right:1rem;
    bottom:-20%;
    background-color:var(--first-color);
    opacity:.9;
    z-index:var(--z-tooltip);
    transition:.4s
}
.scrollup:hover {
    background-color:var(--first-color-alt);
    opacity:1
}
.scrollup__icon {
    color:var(--white-color);
    font-size:1.2rem
}
.show-scroll {
    bottom:5rem
}
::-webkit-scrollbar {
    width:.6rem;
    background-color:var(--scroll-bar-color)
}
::-webkit-scrollbar-thumb {
    background-color:var(--scroll-thumb-color)
}
::-webkit-scrollbar-thumb:hover {
    background-color:var(--text-color-light)
}


  .box {
      max-width: 960px;
      margin: 40px auto;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      overflow: hidden;
      padding: 24px;
    }

    .box .heading {
      background: linear-gradient(90deg, #c30d23, #523c95);
      padding: 20px;
      color: #ffffff;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .faqs {
      padding: 8px 12px;
    }

    details {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 10px;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      overflow: hidden;
      padding: 16px 20px;
      box-shadow: 0 0 0 transparent;
    }

    details[open] {
      box-shadow: 0 4px 12px rgba(82, 60, 149, 0.1);
    }

    details[open] summary ~ * {
      animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    details:hover {
      background: #f1f1ff;
    }

    summary {
      font-weight: 600;
      cursor: pointer;
      position: relative;
      padding-right: 32px;
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23523c95" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M5 12h14" stroke="%23523c95" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center center;
      background-size: 18px;
      transition: transform 0.3s;
    }

    details[open] summary::after {
      transform: translateY(-50%) rotate(45deg);
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23523c95" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14" stroke="%23523c95" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat center center;
      background-size: 18px;
    }

    .text, .lis {
      margin-top: 12px;
      font-size: 16px;
      color: #333;
      line-height: 1.6;
    }

    .lis {
      margin-left: 24px;
      list-style: disc;
    }

    @media (max-width: 768px) {
      .box {
        margin: 20px;
        padding: 16px;
      }

      .faqs {
        padding: 8px;
      }

      .box .heading {
        font-size: 18px;
        padding: 16px;
      }

      .text, .lis {
        font-size: 14px;
      }

      summary::after {
        width: 16px;
        height: 16px;
        background-size: 16px;
      }
    }

@media screen and (max-width:460px) {
    .experience__overlay:first-child,.home__info {
        width:190px
    }
    .place__container {
        grid-template-columns:max-content;
        justify-content:center
    }
    .experience__content,.experience__img,.video__container {
        padding:0
    }
    .experience__overlay:nth-child(2) {
        width:80px
    }
    .home__info {
        padding:1rem
    }
    .cards {
        max-width:300px
    }
    .cards img {
        width:180px
    }
    .card {
        padding-top:1rem;
        height:5rem
    }
    .itemdiv2 h5 {
        font-size:10px
    }
    .card2 {
        height:7rem
    }
}
@media screen and (min-width:568px) {
    .video__container {
        display:grid;
        grid-template-columns:0.6fr;
        justify-content:center
    }
    .place__container {
        grid-template-columns:repeat(3,max-content)
    }
    .subscribe__form {
        width:470px;
        margin:0 auto
    }
}
@media screen and (min-width:768px) {
    .home__data,.home__social {
        align-self:flex-end
    }
    body {
        margin:0
    }
    .nav {
        height:calc(var(--header-height) + 1.5rem)
    }
    .nav__link {
        color:var(--title-color);
        text-shadow:0 1px 1px #000;
        text-transform:initial
    }
    .change-theme,.nav__link:hover {
        color:var(--white-color)
    }
    .nav__dark {
        position:initial
    }
    .nav__menu {
        display:flex;
        column-gap:1rem
    }
    .nav__list {
        flex-direction:row;
        column-gap:4rem
    }
    .change-theme-name,.nav__close,.nav__toggle {
        display:none
    }
    .active-link::before {
        background-color:var(--white-color)
    }
    .scroll-header .nav__link {
        color:var(--first-color)
    }
    .scroll-header .active-link {
        color:var(--title-color)
    }
    .scroll-header .active-link::before {
        background-color:var(--title-color)
    }
    .scroll-header .change-theme {
        color:var(--text-color)
    }
    .section {
        padding:6rem 0 2rem
    }
    .home__container {
        height:100vh;
        grid-template-rows:1.8fr 0.5fr
    }
    .home__social {
        flex-direction:row;
        margin-bottom:3rem;
        column-gap:2.5rem
    }
    .home__info {
        bottom:3rem
    }
    .about__container {
        grid-template-columns:1fr;
        align-items:center
    }
    .about__data,.about__title {
        text-align:initial
    }
    .about__title {
        margin-bottom:var(--mb-1-5)
    }
    .about__description {
        margin-bottom:var(--mb-2)
    }
    .discover__container {
        width:610px;
        margin-left:auto;
        margin-right:auto
    }
    .discover__container,.place__container {
        padding-top:2rem
    }
    .experience__overlay:first-child {
        width:363px;
        margin-right:4rem
    }
    .experience__overlay:nth-child(2) {
        width:160px
    }
    .subscribe__bg {
        background:0 0;
        padding:0
    }
    .subscribe__container {
        background-color:var(--first-color-second);
        padding:3.5rem 0
    }
    .subscribe__input {
        padding:0 .5rem
    }
    .footer__rights {
        flex-direction:row;
        justify-content:space-between
    }
}
@media screen and (min-width:1024px) {
    .container {
        margin-left:auto;
        margin-right:auto
    }
    .home__container {
        grid-template-rows:2fr 0.5fr
    }
    .home__info {
        width:328px;
        grid-template-columns:1fr 2fr;
        column-gap:2rem
    }
    .home__info-title {
        font-size:var(--normal-font-size)
    }
    .home__info-img {
        width:240px
    }
    .about__img-one {
        width:230px
    }
    .about__img-two {
        width:290px
    }
    .discover__card {
        width:300px
    }
    .discover__container {
        width:700px
    }
    .discover__data {
        left:1.5rem;
        bottom:2rem
    }
    .discover__title {
        font-size:var(--h2-font-size)
    }
    .experience__content {
        margin:var(--mb-1) 0;
        column-gap:3.5rem
    }
    .experience__overlay:first-child {
        width:463px;
        margin-right:7rem
    }
    .experience__overlay:nth-child(2) {
        width:220px;
        top:3rem
    }
    .video__container {
        grid-template-columns:0.7fr
    }
    .video__description {
        padding:0
    }
    .place__container {
        gap:3rem 2rem
    }
    .place__card,.place__img {
        height:263px
    }
    .footer__content {
        justify-items:center
    }
}
@media screen and (min-width:1200px) {
    .container {
        max-width:1024px
    }
}
@media (min-height:721px) {
    body {
        margin:0
    }
    .home__container,.home__img {
        height:960px;
        width:100%
    }
    .nav__logo {
        width:200px
    }
    .header {
        border-radius:5px;
        box-shadow:0 7px 15px 0 rgba(186,190,203,.597)
    }
}
@media (max-width:768px) {
    .home__container,.home__img {
        height:200px;
        width:100%
    }
    .nav__logo {
        width:120px
    }
    .header {
        z-index:99999;
        border-radius:5px;
        box-shadow:0 7px 15px 0 rgb(49 228 252 / .5)
    }
    .timer {
        font-size:10px
    }
    .sponsor__img {
        width:60px
    }
    .con {
        width:250px
    }
    .section__title {
        font-size:25px;
        padding-top:20px;
        font-weight: 800
    }
    .section {
        padding:2rem .5rem
    }
}
@media (max-width:308px) {
    .btn-grad {
        padding:0 15px
    }
    .card {
        height:7rem
    }
    .card2 {
        height:10rem
    }
}
.sponsor__container {
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    justify-items:center;
    row-gap:3.5rem
}
.sponsor__content:hover .sponsor__img {
    filter:invert(.5)
}
.sponsor__img {
    width:90px;
    filter:invert(.7);
    transition:var(--img-transition)
}