/* ================================================
                Media Queries
==================================================*/

/*Large Devices*/
@media (min-width: 1200px){
    h1, h2, h4, h5, h6, p, a {
        font-family: montserrat, sans-serif !important;
    }
    p {
        font-weight: 300;
        font-size: 1.3rem;
        line-height: 1.5rem;
        margin: 0px 0px 1.72rem 0px;
        color: black;
    }
    h1{
        font-weight: 700 !important;
        font-size: 2.1rem;
        line-height: 1.3;
    }
    h2{
        opacity: 1;
        font-weight: 800;
        font-style: normal;
        letter-spacing: 0.01rem;
        font-size: 2.42rem;
        line-height: 2.86rem;
        margin: 1.14rem 0px 1.14rem 0px;
        color: black;
    }
    h3{
        font-weight: 400;
        font-size: 2rem;
        letter-spacing: 0.02rem;
        line-height: 2.1rem;
        margin: 1.72rem 0px 1.5rem 0px;
        color: black;
    }
    h4{
        font-weight: 800;
        font-size: 2rem;
        letter-spacing: 0.01rem;
        line-height: 2rem;
        margin: 1.72rem 0px 1rem 0px;
    }
    h5{
        font-size: 1rem;
        opacity: 1;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.01rem;
        color: black;
    }
    h6{
        font-weight: 500;
        font-size: 1.485rem;
        line-height: 2rem;
        margin: 0px 0px 1rem 0px;
    }
    .hero-img {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
        height: 38rem;
    }
    .text-lg{
        margin-top: 3rem;
        padding-top: 3rem;
    }
    .demos{
        background: linear-gradient(to right, #4C98D2 0%, #4C98D2 50%, #7367F0 50%, #7367F0 100%);
        color: white;
    }
    .feature-img2{
        display: none;
    }
    #landingHero{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .large-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1.7rem !important;
        font-weight: bolder !important;
        height: 54px;
        line-height: 54px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
    }
    .large-outline-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1.7rem !important;
        font-weight: bolder !important;
        height: 54px;
        line-height: 54px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
        border-color: #4C98D2 !important;
    }
    .top-padding{
        padding-top: 3rem;
    }
    .active > a{
        border-bottom: 2px solid #4C98D2;
    }
    .active-white > a{
        border-bottom: 2px solid #fff;
    }
    .nav-link.active{
        color: #fff !important;
    }
    .header-container{
        margin: 0 !important;
        padding: 0 !important;
        /* max-width: 1200px !important; */
    }
    #hero-animation .animated-img{
        animation: up-down 2s ease-in-out infinite alternate-reverse both;
    }
    @keyframes up-down {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(50px); /* adjust the value as needed */
        }
    }
    .d-img1{
        display: none  !important;
    }
    #section-7{
        background-color: #4C98D2;box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    }
    #bg-robot-img{
        background-image: url(../img/robot.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 225px;
    }
    
}

/*Medium Devices*/
@media (min-width: 992px) and (max-width: 1199px){
    p{
        font-weight: 300;
        font-size: 1.1rem;
        line-height: 1.4rem;
        margin: 0px 0px 1.72rem 0px;
        color: black;
    }
    h2{
        font-weight: 800;
        letter-spacing: 0.01rem;
        font-size: 2.42rem;
        line-height: 2.86rem;
        margin: 1.14rem 0px 1.14rem 0px;
        color: black;
    }
    h3{
        font-weight: 400;
        font-size: 2rem;
        letter-spacing: 0.02rem;
        line-height: 2.1rem;
        margin: 1.72rem 0px 1.5rem 0px;
        color: black;
    }
    h4{
        font-weight: 800;
        font-size: 2rem;
        letter-spacing: 0.01rem;
        line-height: 2rem;
        margin: 1.72rem 0px 1rem 0px;
    }
    h5{
        font-size: 1rem;
        opacity: 1;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.01rem;
        color: black;
    }
    h6{
        font-weight: 500;
        font-size: 1.485rem;
        line-height: 2rem;
        margin: 0px 0px 1rem 0px;
    }
    .hero-img {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
        height: 40rem;
    }
    .text-lg{
        margin-top: 3rem;
        padding-top: 3rem;
    }
    .demos{
        background: linear-gradient(to right, #4C98D2 0%, #4C98D2 50%, #7367F0 50%, #7367F0 100%);
        color: white;
    }
    .feature-img2{
        display: none;
    }
    #landingHero{
        padding-top: 8rem;
        padding-bottom: 6rem;
    }
    .large-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1.7rem !important;
        font-weight: bolder !important;
        height: 54px;
        line-height: 54px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
    }
    .large-outline-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1.7rem !important;
        font-weight: bolder !important;
        height: 54px;
        line-height: 54px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
        border-color: #4C98D2 !important;
    }
    .top-padding{
        padding-top: 3rem;
    }
    .active > a{
        border-bottom: 2px solid #4C98D2;
    }
    .active-white > a{
        border-bottom: 2px solid #fff;
    }
    .nav-link.active{
        color: #fff !important;
    }
    .header-container{
        margin: 0 !important;
        padding: 0 !important;
    }
    #hero-animation .animated-img{
        animation: up-down 2s ease-in-out infinite alternate-reverse both;
    }
    @keyframes up-down {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(50px); /* adjust the value as needed */
        }
    }
    .d-img1{
        display: none !important;
    }
    #section-7{
        background-color: #4C98D2;box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    }
    #bg-robot-img{
        background-image: url(../img/robot.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 225px;
    }
}

/*Small Devices*/
@media (min-width: 768px) and (max-width: 991px){ 
    .hero-img {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
        height: 590px;
    }
    .text-lg{
        margin: 0 !important;
        padding: 0 !important;
    }
    .center{
        text-align: center;
    }
    .demos_container_left {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-right: 5rem;
        padding-left: 5rem;
        background-color: #4C98D2;
        color: white;
    }
    .demos_container_right {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-right: 5rem;
        padding-left: 5rem;
        background-color: #7367F0;
        color: white;
    }
    .feature-img1{
        display: none;
    }
    .text-1 {
        margin-top: 3rem;
    }
    #landingHero{
        padding-top: 4rem;
    }
    .t-center{
        text-align: center;
    }
    .large-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1rem !important;
        font-weight: bold !important;
        height: 44px;
        line-height: 44px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
    }
    .large-outline-btn {
        font-family: "montserrat", sans-serif;
        font-size: 1rem !important;
        font-weight: bold !important;
        height: 44px;
        line-height: 44px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
        border-color: #4C98D2 !important;
    }
    .active > a{
        color: #4C98D2 !important;
    }
    .active-white{
        color: black !important;
    }
    .nav-link.active{
        color: black !important;
    }
    .d-img1{
        display: none !important;
    }
    #section-7{
        background-color: #4C98D2;box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
        background-image: url(../img/robot.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 200px;
    }
    .top-padding{
        padding-top: 6rem;
    }
}

/*Extra Small Devices*/
@media (max-width: 767px){
    .hero-img {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
        height: 740px;
    }
    .text-lg{
        margin: 0 !important;
        padding: 0 !important;
    }
    .center{
        text-align: center;
    }
    .demos_container_left {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-right: 5rem;
        padding-left: 5rem;
        background-color: #4C98D2;
        color: white;
    }
    .demos_container_right {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-right: 5rem;
        padding-left: 5rem;
        background-color: #7367F0;
        color: white;
    }
    .feature-img1{
        display: none;
    }
    .text-1 {
        /* margin-top: 13rem; */
        margin-top: 3rem;
    }
    #landingHero{
        padding-top: 4rem;
    }
    .t-center{
        text-align: center;
    }
    .hero-text-bx{
        margin: 0;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .large-btn {
        font-family: "montserrat", sans-serif;
        font-size: .8rem !important;
        font-weight: bold !important;
        height: 40px;
        line-height: 40px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
    }
    .large-outline-btn {
        font-family: "montserrat", sans-serif;
        font-size: .8rem !important;
        font-weight: bold !important;
        height: 40px;
        line-height: 40px !important;
        text-transform: uppercase;
        cursor: pointer;
        color: #4C98D2 !important;
        border-color: #4C98D2 !important;
    }
    .active > a{
        color: #4C98D2 !important;
    }
    .active-white > a {
        color: black !important;
    }
    .nav-link.active{
        color: black !important;
    }
    .d-img{
        display: none !important;
    }
    #section-7{
        background-color: #4C98D2;box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    }
}