/*
|--------------------------------------------------------------------------
| Mark Learn & Develop
| Responsive Stylesheet
|--------------------------------------------------------------------------
*/


/*==============================================================
    Large Devices
    1400px
==============================================================*/

@media (max-width:1400px){

.container{

    max-width:1140px;

}

.hero-section h1{

    font-size:58px;

}

.display-3{

    font-size:56px;

}

}


/*==============================================================
    Laptops
    1200px
==============================================================*/

@media (max-width:1199px){

section{

    padding:90px 0;

}

.hero-section h1{

    font-size:52px;

}

.display-5{

    font-size:42px;

}

.about-experience{

    right:10px;

}

.service-card{

    min-height:360px;

}

.process-card{

    min-height:340px;

}

.pricing-card{

    padding:35px!important;

}

}


/*==============================================================
    Tablets
==============================================================*/

@media (max-width:991px){

body{

    padding-top:82px;

}

section{

    padding:80px 0;

}

.container{

    max-width:100%;

}

.hero-section{

    text-align:center;

}

.hero-section .lead{

    margin:auto;

}

.hero-feature{

    justify-content:center;

}

.hero-image{

    margin-top:60px;

    max-width:500px;

}

.navbar-collapse{

    background:#fff;

    padding:25px;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    margin-top:18px;

}

.navbar .btn{

    width:100%;

    margin-top:20px;

}

.display-3{

    font-size:46px;

}

.display-5{

    font-size:38px;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:40px;

}

.about-experience{

    position:relative;

    right:auto;

    bottom:auto;

    display:inline-block;

    margin-top:25px;

}

.footer{

    text-align:center;

}

.social-icons{

    justify-content:center;

}

}/* ==========================================================
   HERO MOBILE FINAL
==========================================================*/

@media (max-width:991px){

.hero-section{

padding-top:40px!important;
padding-bottom:50px!important;

}

.hero-section .col-lg-6{

text-align:center;

}

.hero-section h1{

font-size:2rem!important;
line-height:1.18!important;
margin-bottom:18px!important;

}

.hero-section .lead{

font-size:.92rem!important;
line-height:1.75!important;
margin-bottom:28px!important;

}

.hero-section .hero-image{

max-width:330px;
width:100%;
margin:40px auto 0;

}

}


@media(max-width:576px){

/* Heading */

.hero-section h1{

font-size:1.75rem!important;
line-height:1.25!important;

}

/* Paragraph */

.hero-section .lead{

font-size:.92rem!important;
line-height:1.8!important;

}

/* FEATURES */

.hero-section .row.gy-3{

--bs-gutter-x:10px;
--bs-gutter-y:10px;

}

.hero-section .col-6{

padding-left:5px;
padding-right:5px;

}

.hero-feature{

height:58px;

padding:8px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

font-size:.78rem;

font-weight:600;

line-height:1.25;

border-radius:14px;

overflow:hidden;

white-space:normal;

word-break:break-word;

}

.hero-feature i{

font-size:14px;

margin-right:5px;

}

/* BUTTONS */

.hero-section .d-flex{

display:flex!important;

flex-direction:column;

gap:12px!important;

}

.hero-section .btn{

width:100%;

padding:13px 15px;

font-size:.92rem;

}

/* COUNTERS */

.hero-section .counter,

.hero-section h3{

font-size:1.8rem!important;

}

.hero-section small{

font-size:.8rem;

}

/* IMAGE */

.hero-image{

max-width:280px!important;

margin-top:35px!important;

}

}/* ==========================================================
   FINAL MOBILE HERO OVERRIDE
   PASTE AT VERY END OF responsive.css
==========================================================*/

@media (max-width:991px){

html,
body{
    overflow-x:hidden!important;
}

.container{
    padding-left:16px!important;
    padding-right:16px!important;
}

.hero-section{

    min-height:auto!important;

    padding:25px 0 50px!important;

    margin-top:0!important;

    display:block!important;

}

.hero-section .row{

    margin:0!important;

    align-items:center!important;

}

.hero-section .col-lg-6{

    width:100%!important;

    max-width:100%!important;

    flex:0 0 100%!important;

    text-align:center!important;

}

/* -----------------------------
   HEADING
----------------------------- */

.hero-section h1{

    font-size:2rem!important;

    line-height:1.22!important;

    letter-spacing:-.5px!important;

    margin-bottom:18px!important;

}

.hero-section .lead{

    font-size:.95rem!important;

    line-height:1.7!important;

    margin:0 auto 25px!important;

    max-width:100%!important;

}

/* -----------------------------
   FEATURES 2 x 2
----------------------------- */

.hero-section .row.gy-3{

    display:flex!important;

    flex-wrap:wrap!important;

    row-gap:10px!important;

}

.hero-section .row.gy-3>div{

    width:50%!important;

    max-width:50%!important;

    flex:0 0 50%!important;

    padding:5px!important;

}

.hero-feature{

    height:58px!important;

    padding:8px!important;

    font-size:13px!important;

    line-height:1.2!important;

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    text-align:center!important;

    overflow:hidden!important;

    white-space:normal!important;

}

.hero-feature i{

    font-size:13px!important;

    margin-right:5px!important;

}

/* -----------------------------
   BUTTONS
----------------------------- */

.hero-section .d-flex{

    display:flex!important;

    flex-direction:column!important;

    gap:10px!important;

}

.hero-section .btn{

    width:100%!important;

    min-width:100%!important;

    padding:14px 15px!important;

    font-size:.95rem!important;

}

/* -----------------------------
   STATS
----------------------------- */

.hero-section .counter,
.hero-section h3{

    font-size:28px!important;

}

.hero-section small{

    font-size:12px!important;

}

/* -----------------------------
   IMAGE
----------------------------- */

.hero-image{

    width:100%!important;

    max-width:280px!important;

    margin:35px auto 0!important;

    display:block!important;

}

}