@media(max-width:1200px){

    .carousel-caption-modern h1{

        font-size:56px;
    }

}

@media(max-width:992px){

    .carousel-caption-modern h1{

        font-size:46px;
    }

    .content-2 img{

        height:320px;
    }

    .section-title-modern h1,
    .about-content-modern h2{

        font-size:44px;
    }

    .about-content-modern{

        padding-left:0;

        margin-top:45px;
    }

}

@media(max-width:768px){

    .img-pc{

        display:none;
    }

    .img-mobile{

        display:block;
    }

    .carousel-caption-modern{

        left:24px;
        right:24px;

        bottom:55px;
    }

    .carousel-caption-modern h1{

        font-size:34px;

        line-height:1.08;
    }

    .carousel-caption-modern p{

        font-size:15px;

        line-height:1.7;
    }

    .section-title-modern h1,
    .about-content-modern h2{

        font-size:34px;
    }

    .content-2{

        margin-bottom:30px;
    }

    .content-2 img{

        height:260px;
    }

    .business-card-overlay h2{

        font-size:28px;
    }

    .navbar-brand img{

        max-height:58px;
    }

    .hero-control{

        display:none;
    }

    .about-content-modern{

        text-align:center;
    }

    .about-content-modern button{

        width:100%;
    }

}

/* =========================================================
   IMAGE MODAL
========================================================= */

.image-modal{

    display:none;

    position:fixed;

    z-index:99999;

    inset:0;

    background:
    rgba(8,17,31,.92);

    backdrop-filter:blur(10px);

    justify-content:center;

    align-items:center;

    padding:40px;
}

.image-modal-content{

    max-width:90%;

    max-height:90vh;

    border-radius:24px;

    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

    animation:
    zoomIn .35s ease;
}

.image-modal-close{

    position:absolute;

    top:25px;
    right:35px;

    color:white;

    font-size:42px;

    font-weight:300;

    cursor:pointer;

    transition:.3s;
}

.image-modal-close:hover{

    color:#f7ca55;

    transform:scale(1.08);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes zoomIn{

    from{

        transform:scale(.85);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }
}