/*////////////////////////////////////////////////////// Responsive CSS Structure //////////////////////////////////////////////////////*/
@media (min-width: 1200px) and (max-width: 1920px){
    .container {max-width: 1618px;}
}

@media (min-width: 1800px) and (max-width:1899px){
    .banner-section{padding: 0 64px 64px;}
}

@media (min-width: 1700px) and (max-width:1799px){
    .banner-section{padding: 0 64px 64px;}
}

@media (min-width:1600px) and (max-width:1699px){
    
}

@media (min-width: 1500px) and (max-width:1599px){
    
}

@media (min-width: 1400px) and (max-width: 1499px){
    .main-banner .banner-content { padding: 138px 0; }
    .banner-section{padding: 0 34px 44px;}
}

@media (min-width: 1300px) and (max-width: 1399px){
    .main-banner{padding: 60px;}
    .main-banner .banner-content { padding: 138px 0; }
    .banner-section{padding: 0 34px 44px;}

    /*modal start*/
    .section-title{font-size: 50px; line-height: 52px;}
    .common-bottom-detail .row { margin: 0 -55px; }
    .common-bottom-detail .row>* { padding: 0 55px; }
    /*modal end*/
}

@media (min-width: 1200px) and (max-width: 1299px){
    .main-banner{padding: 60px;height: 100%;}
    .main-banner .banner-content { padding: 138px 0; }
    .banner-section{padding: 0 34px 44px;}

    /*modal start*/
    .section-title{font-size: 50px; line-height: 52px;}
    .common-bottom-detail .row { margin: 0 -40px; }
    .common-bottom-detail .row>* { padding: 0 40px; }
    .common-bottom-detail { padding: 40px 0; }
    /*modal end*/
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-banner{padding: 60px;height: 100%;}
    .banner-section:before{height: 100%;}
    .main-banner .banner-content { padding: 128px 0; }
    .banner-section .banner-content .banner-detail { padding: 20px 0 30px 0; }
    .banner-app-btn{margin-top: 40px;}
    .navbar-brand img { width: 90px; height: 90px;}
    .banner-title{ font-size: 60px; line-height: 80px; }
    .banner-detail{font-size: 22px; line-height: 25px;}

    .common-detail {font-size: 16px; line-height: 28px; }

    /*modal start*/
    .section-title{font-size: 50px; line-height: 52px;}
    .common-bottom-detail .row { margin: 0 -20px; }
    .common-bottom-detail .row>* { padding: 0 20px; }
    .common-bottom-detail { padding: 40px 0; }
    .banner-section{padding: 0 34px 44px;}
    /*modal end*/
}

@media (min-width: 768px) and (max-width: 991px){
    .main-banner{padding: 60px;height: 100%;}
    .banner-section:before{height: 100%;}
    .main-banner .banner-content { padding: 128px 0; }
    .banner-section .banner-content .banner-detail { padding: 30px 0 40px 0; }
    .banner-app-btn{margin-top: 40px;}
    .navbar-brand img { width: 80px; height: 80px; }
    .banner-section{ padding: 0 10px;}
    .banner-app-btn .app-detail p{font-size: 16px; line-height: 18px;}
    .banner-app-btn .app-detail span{    font-size: 22px; line-height: 24px;}
    .banner-app-btn .btn img{ width: 34px; height: 34px;}
    .banner-title{font-size: 56px; line-height: 60px;}
    .banner-detail{font-size: 22px; line-height: 22px;}

    .common-detail {font-size: 16px; line-height: 28px; }

    /*modal start*/
    .section-title{font-size: 50px; line-height: 52px;}
    .common-bottom-detail .row { margin: 0 -10px; }
    .common-bottom-detail .row>* { padding: 0 10px; }
    .common-bottom-detail { padding: 40px 0; }
    .banner-section { padding: 0 14px 34px; }
    /*modal end*/
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
    .main-banner { padding: 40px;height: 100%; }
    .main-banner .banner-content { padding: 118px 0; }
    .banner-section .banner-content .banner-detail { padding: 30px 0 40px 0; }
    .banner-app-btn{margin-top: 40px;}
    .navbar-brand img { width: 70px; height: 70px; }
    .banner-section{ padding: 0 10px;}  
    .banner-section .navbar-brand { margin-top: -30px;}
    .banner-app-btn .app-detail p{font-size: 15px; line-height: 18px;}
    .banner-app-btn .btn { padding: 12px 10px; }
    .banner-title{font-size: 48px; line-height: 52px;}
    .banner-section .banner-content .banner-detail { padding: 20px 0 30px 0; }
    .banner-detail{ font-size: 18px; line-height: 20px;}
    .banner-app-btn .app-detail span{ font-size: 20px; line-height: 22px;}
    .banner-app-btn .btn img{width: 30px;height: 30px;}
    .banner-app-btn .btn img{margin: 0 4px 0 0;}
    .banner-app-btn .btn:first-child { margin-right: 25px; }
    .btn{font-size: 16px; line-height: 18px;}
    .common-inner .common-detail span{justify-content: center;}
    .common-inner .common-detail p { text-align: center; }

    .common-detail {font-size: 16px; line-height: 28px; }

    /*modal start*/
    .section-title { font-size: 42px; line-height: 46px; }
    .common-bottom-detail .row { margin: 0 -10px; }
    .common-bottom-detail .row>* { padding: 0 10px; }
    .common-bottom-detail { padding: 10px 0; }
    .banner-section { padding: 0 14px 34px; }
    /*modal end*/
}

/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/
@media (min-width: 576px) and (max-width: 767px){
    
}

@media (min-width: 240px) and (max-width: 575px){
    .banner-app-btn{flex-direction: column;margin-top: 30px;}
    .banner-app-btn .btn:first-child{margin: 0;}
    .banner-app-btn .app-detail p { font-size: 13px; line-height: 16px; }
    .banner-app-btn .btn:nth-child(even) {margin-top: 10px;padding: 8px 10px;}
    .banner-title { font-size: 30px; line-height: 34px; }
    .banner-detail { font-size: 14px; line-height: 18px; }
    .banner-app-btn .app-detail span { font-size: 16px; line-height: 20px; }
    .main-banner { padding: 20px; padding-top: 40px; }

    .section-title { font-size: 32px; line-height: 34px; }
    .common-detail { font-size: 14px; line-height: 26px; }
    .navbar-brand img { width: 70px; height: 70px; object-fit: cover; margin: 0 auto; display: block; }

    .banner-app-btn .btn {width: 166px;}
    .btn-pink{padding: 18px 43px 16px 22px;}
    .btn-pink::after{ width: 22px; height: 22px;}
    .close-btn{top: 30px;}
}