/*==================================================
  XXL
==================================================*/

@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

/*==================================================
  XL
==================================================*/

@media (max-width: 1200px) {
    :root {
        --section-padding: 100px;
    }

    .container {
        max-width: 960px;
    }

    .section-title {
        font-size: 48px;
    }

    .navbar-premium {
        width: calc(100% - 30px);
    }
}

/*==================================================
  LG
==================================================*/

@media (max-width: 992px) {
    :root {
        --section-padding: 90px;
    }

    .container {
        max-width: 720px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-script {
        font-size: 34px;
    }

    .card-premium {
        padding: 30px;
    }

    .navbar-premium {
        border-radius: 20px;

        top: 15px;
    }
}

/*==================================================
  MD
==================================================*/

@media (max-width: 768px) {
    :root {
        --section-padding: 80px;
    }

    body {
        font-size: 14px;
    }

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-header {
        margin-bottom: 50px;
    }

    .section-title {
        font-size: 36px;
    }

    .section-script {
        font-size: 30px;
    }

    .btn-premium,
    .btn-outline-premium {
        width: 100%;
    }

    .card-premium {
        padding: 25px;
    }

    .count-box {
        padding: 20px;
    }

    .count-box h2 {
        font-size: 36px;
    }
}
/*==================================================
  SM
==================================================*/

@media (max-width: 576px) {
    .section-title {
        font-size: 30px;
    }

    .section-script {
        font-size: 26px;
    }

    .section-overline {
        font-size: 12px;

        letter-spacing: 3px;
    }

    .navbar-brand {
        font-size: 24px;
    }

    .music-player {
        width: 58px;

        height: 58px;

        right: 15px;

        bottom: 15px;
    }

    .social {
        justify-content: center;
    }
}

/*==================================================
COVER
==================================================*/

@media (max-width: 768px) {
    .cover-title {
        font-size: 48px;
    }

    .cover-invitation h4 {
        font-size: 26px;
    }
}

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

@media (max-width: 992px) {
    .hero-title {
        font-size: 58px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 44px;
    }

    .hero-date {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 12px;

        letter-spacing: 3px;
    }
}

/*==================================================
COUPLE
==================================================*/

@media (max-width: 768px) {
    .couple-photo {
        width: 200px;

        height: 200px;
    }

    .couple-card {
        padding: 30px;
    }

    .love-icon {
        margin: 30px auto;
    }
}

/*==================================================
QUOTE
==================================================*/

@media (max-width: 768px) {
    .quote-box {
        padding: 35px 25px;
    }

    .quote-text {
        font-size: 18px;
    }
}

/*==================================================
EVENT
==================================================*/

@media (max-width: 768px) {
    .event-card {
        padding: 35px 25px;
    }

    .event-card h3 {
        font-size: 32px;
    }
}

/*==================================================
MAPS
==================================================*/

@media(max-width:768px){

    .map-header{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .map-frame iframe{

        height:350px;

    }

}

@media(max-width:768px){

    .countdown-card{

        padding:30px 15px;

    }

    .count-item h2{

        font-size:48px;

    }

}

/*==================================================
LOVE STORY
==================================================*/

@media(max-width:991px){

    .timeline::before{

        left:25px;

    }

    .timeline-item{

        width:100%;

        left:0 !important;

        padding-left:70px;

        padding-right:0;

        margin-bottom:35px;

    }

    .timeline-item::before{

        left:14px !important;

    }

}

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

@media(max-width:991px){

    .gallery-grid{

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

    }

    .gallery-large{

        grid-column:span 2;

    }

}

@media(max-width:575px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-large{

        grid-column:span 1;

    }

}