/* ==========================================================
   YCSM ERP
   Responsive.css
   Version : 1.0
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1400px){

.container{

max-width:1320px;

}

.hero{

min-height:750px;

}

.hero h1{

font-size:62px;

}

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1199.98px){

.hero h1{

font-size:48px;

}

.section-title h2{

font-size:34px;

}

.counter-number{

font-size:40px;

}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:991.98px){

section{

padding:70px 0;

}

/* ---------- Navbar ---------- */

.navbar{

padding:12px 0;

}

.navbar-brand img{

height:50px;

}

.navbar-collapse{

padding-top:20px;

}

.navbar-nav{

margin-bottom:20px;

}

.navbar-nav .nav-link{

padding:12px 0;

border-bottom:1px solid #eee;

}

/* ---------- Buttons ---------- */

.navbar .btn{

width:100%;

margin-bottom:10px;

}

/* ---------- Hero ---------- */

.hero{

text-align:center;

min-height:650px;

}

.hero h1{

font-size:42px;

}

.hero p{

margin:auto auto 30px;

}

.hero-btn{

justify-content:center;

}

/* ---------- Section ---------- */

.section-title{

margin-bottom:45px;

}

.feature-box{

margin-bottom:25px;

}

.course-card{

margin-bottom:30px;

}

.franchise-box{

margin-bottom:30px;

}

.notice-card{

margin-bottom:25px;

}

.download-card{

margin-bottom:25px;

}

.testimonial-card{

margin-bottom:25px;

}

.contact-box{

margin-bottom:25px;

}

.footer{

text-align:center;

}

.footer .d-flex{

justify-content:center;

}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:767.98px){

section{

padding:60px 0;

}

h1{

font-size:38px;

}

h2{

font-size:30px;

}

h3{

font-size:24px;

}

.hero{

padding-top:90px;

padding-bottom:70px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:16px;

}

.hero-btn{

flex-direction:column;

}

.hero-btn .btn{

width:100%;

}

.counter-box{

padding:20px;

}

.counter-number{

font-size:34px;

}

.counter-title{

font-size:16px;

}

.feature-box{

padding:25px;

}

.course-body{

padding:20px;

}

.franchise-box{

padding:25px;

}

.verify-box{

padding:30px 20px;

}

.login-card{

padding:35px 25px;

}

.contact-box{

padding:25px;

}

.footer{

padding-top:50px;

}

.footer h5{

margin-top:20px;

}

#backToTop{

width:45px;

height:45px;

right:15px;

bottom:15px;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

    .top-header{
        display:block!important;
        padding:6px 0;
        font-size:11px;
    }

    .top-title{
        font-size:15px;
    }

}

.hero{

min-height:auto;

padding:120px 0 70px;

}

.hero h1{

font-size:30px;

line-height:1.4;

}

.hero p{

font-size:15px;

}

.section-title span{

font-size:13px;

}

.section-title h2{

font-size:28px;

}

.section-title p{

font-size:15px;

}

.btn{

padding:12px 20px;

font-size:14px;

}

.navbar-brand img{

height:45px;

}

.feature-icon{

width:60px;

height:60px;

font-size:24px;

}

.icon-box{

width:60px;

height:60px;

font-size:24px;

}

.course-title{

font-size:20px;

}

.notice-title{

font-size:20px;

}

.contact-icon{

width:55px;

height:55px;

font-size:22px;

}

.table{

font-size:13px;

}

.table-responsive{

border:none;

}

.login-logo img{

max-height:65px;

}

.footer{

font-size:14px;

}

.footer p{

margin-bottom:10px;

}

.footer ul li{

margin-bottom:8px;

}

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media (max-width:400px){

.hero h1{

font-size:26px;

}

.section-title h2{

font-size:24px;

}

.btn{

font-size:13px;

padding:10px 18px;

}

.navbar-brand img{

height:40px;

}

}


/* ==========================================================
   LANDSCAPE MOBILE
========================================================== */

@media (max-height:500px) and (orientation:landscape){

.hero{

min-height:auto;

padding:120px 0 80px;

}

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

.top-header,
.navbar,
.footer,
#backToTop{

display:none!important;

}

section{

padding:0;

}

}


/* ==========================================================
   END
========================================================== */