@media only screen and (max-width:1169px) {
   .mainHd {font-size: 40px; line-height: 50px;}
   .hdText {font-size: 18px;}
   .transformBox .img img {border-radius: 20px;}
   .infoCon .box h2 {font-size: 20px;}
   .libraryBox .list {width: 380px; border-radius: 12px;}
   .video-container video {border-radius: 12px;}
   .videoBox {width: calc(100% - 380px); padding-left: 20px;}
   .mainHd span {display: inline-block;}
   .infoCon .box {padding: 20px 0;}

   .contactForm {padding:0 30px 0 0;}
    .form {margin: -10px;}
    .form li {padding: 10px;}
    .formInput {height: 44px; padding: 0 12px; font-size: 15px;}
    textarea.formInput {padding: 10px 12px; height: 160px;}
    .sendBtn {height: 48px; font-size: 16px; min-width: 206px;}
}

@media only screen and (max-width:999px) {
    .libraryBox {flex-direction: column-reverse;}
    .libraryBox .list {width: 100%; padding: 8px;}
    .libraryBox .list ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
    .libraryBox .list ul li {padding: 5px; gap: 10px; font-size: 12px; line-height: 16px; width: 32%; border-radius: 4px;}
    .libraryBox .list ul li img {width: 42px; height: 42px; min-width: 42px;}
    .videoBox {width: 100%; padding: 0 0 20px 0;}
}

@media only screen and (max-width:767px) {
    .header .container {height: 80px; transition: ease-in-out .5s;}
    a.showMobMenu {display: block; width: 50px; height: 40px; background: #0399DF; border-radius: 3px; padding-top: 10px; position: absolute; right: 5px; top: 50%; margin-top: -20px;}
    a.showMobMenu em {width: 28px; display: block; height: 2px; background: #fff; margin: 0 auto 6px auto; transition: ease-in-out .4s;}
    a.showMobMenu.active {padding-top: 20px;}
    a.showMobMenu.active em:nth-child(3) {display: none;}
    a.showMobMenu.active em:nth-child(1) {transform: rotate(45deg);}
    a.showMobMenu.active em:nth-child(2) {transform: rotate(-45deg); margin: -7px auto 0 auto;}
    .menuLink {display: block !important; position: fixed; left: -280px; bottom: 0; width: 280px; background: #fff; height: calc(100% - 80px); overflow: auto; transition:ease-in-out .3s; z-index: 101;}
    .menuLink.active {left: 0;}
    .menuLink > li {margin: 0; border-bottom: 1px solid #ddd; display: block; padding: 0; height: auto;}
    .menuLink > li > a {color: #000; display: block; padding: 15px 20px; border-radius: 0;}
    a.contactBtn {margin-right: 50px; border-radius: 4px; height: 40px; padding: 0 15px;}    

    .pt60 {padding-top: 40px;}
    .pb60 {padding-bottom: 40px;}
    .mainHd {font-size: 30px; line-height: 38px;}
    .infoCon.left {text-align: center;}
    .infoCon {width: 100%; text-align: center;}
    .mobileImg {width: 100%;}
    .appLinks {gap: 10px;}
    .appLinks img {height: 45px;}
    .transformBox .img {width: 100%;}
    .transformBox .det {width: 100%; padding-top: 20px; text-align: center;}
    a.blueBtn {height: 40px; font-size: 16px; min-width: 160px;}
    .featuredBox .box {width: 100%; padding: 15px 0;}
    .libraryBox .list ul li {width: 49%;}
    .appSlider {max-width: 300px; margin: auto;}
    .appSlider .item {padding: 20px 0;}
    .footerLinks li {padding: 2px 15px; font-size: 13px;}
    .footerTop {padding: 20px 0;}
    .contactCon {flex-direction: column-reverse;}
    .contactForm {width: 100%; padding:20px 0 0 0;}
    .contactImg {width:100%;}
}