/*=========================================================
  MICROCORE HERO RESPONSIVE
=========================================================*/


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

@media (max-width:1400px){

    .mc-grid{
        grid-template-columns:480px 1fr;
        column-gap:70px;
    }

    .mc-left h1{
        font-size:50px;
    }

    .mc-robot-area{
        max-width:620px;
        height:620px;
    }

    .mc-card{
        width:210px;
    }

}


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

@media (max-width:1200px){

    .mc-grid{

        grid-template-columns:45% 55%;

        column-gap:40px;

        padding-top:130px;

    }

    .mc-left h1{

        font-size:46px;

    }

    .mc-left p{

        font-size:16px;

    }

    .mc-robot-area{

        height:560px;

    }

    .mc-robot{

        width:55%;

    }

    .mc-card{

        width:190px;

        padding:14px;

    }

    .mc-card1{
        left:2%;
    }

    .mc-card2{
        right:0;
    }

    .mc-card3{
        left:0;
    }

    .mc-card4{
        right:0;
    }

}


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

@media (max-width:992px){

    .mc-grid{

        grid-template-columns:1fr;

        text-align:center;

        row-gap:60px;

        padding-top:120px;

        padding-bottom:70px;

    }

    .mc-left{

        max-width:700px;

        margin:auto;

        align-items:center;

    }

    .mc-left h1{

        max-width:100%;

    }

    .mc-left p{

        max-width:100%;

    }

    .mc-line{

        margin:25px auto;

    }

    .mc-buttons{

        justify-content:center;

    }

    .mc-right{

        order:2;

    }

    .mc-robot-area{

        max-width:620px;

        height:auto;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;

    }

    .mc-robot,
    .mc-robot-glow,
    .mc-hud{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

    }

    .mc-robot{

        width:320px;

        max-width:90%;

    }

    .mc-card{

        position:relative;

        width:260px;

        top:auto !important;

        right:auto !important;

        left:auto !important;

        bottom:auto !important;

    }

    .mc-stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .mc-scroll{

        display:none;

    }

}


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

@media (max-width:768px){

    .mc-grid{

        padding-top:100px;

    }

    .mc-left h1{

        font-size:38px;

    }

    .mc-left p{

        font-size:15px;

    }

    .mc-buttons{

        flex-direction:column;

        width:100%;

    }

    .mc-btn{

        width:100%;

    }

    .mc-card{

        width:100%;

        max-width:300px;

    }

}


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

@media (max-width:576px){

    .mc-hero{

        min-height:auto;
        overflow:hidden;

    }

    .mc-grid{

        padding-top:90px;

        padding-bottom:40px;

    }

    .mc-badge{

        font-size:12px;

        padding:10px 18px;

    }

    .mc-left h1{

        font-size:32px;

        line-height:1.2;

    }

    .mc-left p{

        font-size:15px;

    }

    .mc-robot{

        width:260px;

    }

    .mc-card{

        max-width:260px;

    }

    .mc-stats{

        padding:60px 0;

    }

    .mc-stats-grid{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:420px){

    .mc-left h1{

        font-size:28px;

    }

    .mc-badge{

        font-size:11px;

    }

    .mc-card{

        width:100%;

        max-width:220px;

        padding:12px;

    }

    .mc-stat{

        padding:22px 15px;

    }

    .mc-stat h2{

        font-size:34px;

    }

    .mc-stat span{

        font-size:14px;

    }

}