/* ===================================================
   HANA FLOWERS MARKET
   Responsive.css
=================================================== */


/* ===========================
   Large Desktop
=========================== */

@media (max-width:1400px){

.container{

    max-width:1140px;

}

.hero h1{

    font-size:52px;

}

}


/* ===========================
   Laptop
=========================== */

@media (max-width:1200px){

.hero{

    padding-top:150px;

}

.hero h1{

    font-size:48px;

}

.hero img{

    max-width:90%;

}

.section-title h2{

    font-size:38px;

}

.product-card img{

    height:280px;

}

.category-card img{

    height:220px;

}

}


/* ===========================
   Tablet Landscape
=========================== */

@media (max-width:992px){

section{

    padding:80px 0;

}

.navbar{

    padding:15px 0;

}

.navbar-collapse{

    background:#ffffff;

    margin-top:15px;

    border-radius:15px;

    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar .btn{

    width:100%;

    margin-top:15px;

}

.hero{

    text-align:center;

    padding-top:140px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:17px;

}

.hero img{

    margin-top:40px;

    max-width:420px;

    margin-left:auto;

    margin-right:auto;

}

.hero .row .col-4{

    margin-top:20px;

}

.section-title h2{

    font-size:34px;

}

.feature-box,

.product-card,

.step-box,

.testimonial-card{

    margin-bottom:25px;

}

.footer{

    text-align:center;

}

.footer .col-lg-4{

    margin-bottom:40px;

}

}


/* ===========================
   Tablet Portrait
=========================== */

@media (max-width:768px){

section{

    padding:70px 0;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:36px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.hero .btn{

    width:100%;

    margin-bottom:15px;

}

.hero .btn:last-child{

    margin-left:0 !important;

}

.hero h3{

    font-size:30px;

}

.section-title h2{

    font-size:30px;

}

.feature-box{

    padding:30px;

}

.feature-icon{

    width:70px;

    height:70px;

    font-size:30px;

}

.product-card img{

    height:250px;

}

.product-card .card-body{

    padding:25px;

}

.product-card h5{

    font-size:20px;

}

.product-card h4{

    font-size:24px;

}

.category-card img{

    height:220px;

}

.step-number{

    width:60px;

    height:60px;

    font-size:24px;

}

.cta-section{

    padding:70px 20px;

}

.cta-section h2{

    font-size:34px;

}

.cta-section p{

    font-size:16px;

}

.footer{

    padding-top:60px;

}

}


/* ===========================
   Smartphone
=========================== */

@media (max-width:576px){

.container{

    padding-left:20px;

    padding-right:20px;

}

.navbar-brand{

    font-size:22px;

}

.hero{

    padding-top:120px;

    padding-bottom:70px;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

.hero img{

    max-width:100%;

}

.hero h3{

    font-size:26px;

}

.hero .badge{

    font-size:13px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:15px;

}

.feature-box{

    padding:25px;

}

.feature-box h5{

    font-size:18px;

}

.feature-box p{

    font-size:14px;

}

.category-card img{

    height:200px;

}

.product-card img{

    height:220px;

}

.product-card h5{

    font-size:18px;

}

.product-card h4{

    font-size:22px;

}

.step-box{

    padding:30px 20px;

}

.testimonial-card{

    padding:25px;

}

.testimonial-card p{

    font-size:15px;

}

.accordion-button{

    padding:18px;

    font-size:15px;

}

.accordion-body{

    padding:20px;

    font-size:14px;

}

.cta-section h2{

    font-size:28px;

}

.cta-section .btn{

    width:100%;

}

.footer h4{

    font-size:24px;

}

.footer h5{

    font-size:18px;

}

.footer p,

.footer li{

    font-size:14px;

}

.back-to-top{

    width:50px;

    height:50px;

    right:20px;

    bottom:20px;

}

}


/* ===========================
   Small Smartphone
=========================== */

@media (max-width:400px){

.hero h1{

    font-size:26px;

}

.hero p{

    font-size:14px;

}

.section-title h2{

    font-size:24px;

}

.cta-section h2{

    font-size:24px;

}

.btn{

    font-size:14px;

    padding:12px 24px;

}

.feature-box,

.product-card,

.step-box,

.testimonial-card{

    border-radius:15px;

}

}