/* Small mobile devices (320px - 375px) */
@media only screen and (max-width: 335px) {

    .title-size-lg {
        font-size: 36px;
    }

}

/* Standard mobile devices (376px - 480px) */
@media only screen and (min-width: 376px) and (max-width: 480px) {
    /* Your CSS rules for standard mobile phones go here */

    
    
}


/* Mobile devices (320px - 480px) */
@media only screen and (max-width: 480px) {
    /* Your CSS rules for mobile phones go here */

    .lightdark-switch .switch-btn {
        width: 30px;
        height: 30px;
    }

    #btnSwitch {
        border-radius: 10px;
    }

    .lightdark-switch {
        position: relative;
        left: -10px;
        z-index: 100;
      }

    .trk-btn {
        font-size: 14px;
    }

    .hero-text-width{
        width: 90% !important;
    }

    .title-size-lg {
        font-size: 34px;
    }

    .title-size-md {
        font-size: 28px;
        font-weight: 400;
    }

    .line-height-lg
    {
        line-height: 46px;
    }

    .regular-text-size{
        font-size: 14px !important;
        line-height: 24px;
    }

    .regular-text-size-lg{
        font-size: 16px !important;
        line-height: 30px;
    }

    .feature-card {
        padding: 1rem;
    }

    .distance-md {
        min-height: 20px !important;
    }

    .py-6 {
        padding-top: 4rem  !important;
        padding-bottom: 4rem  !important;
    }

    .testimonial__footer
    {
        margin-top: 20px;
    }

    .accordion-button{
        padding: 15px !important;
    }

    .accordion-button span{
        font-size: 14px !important;
    }

    .accordion .row .col-12{
        margin-top: 8px;
    }

    .forex-image-sm{
        max-width: 390px;
        position: relative;
        right: 40px;
        top: -30px;
    }

    .promo-section {
        border-radius: 30px;
        padding: 30px 10px;
        position: relative;
        top: -80px;
    }

    .crypto-image-sm{
        max-width: 390px;
        position: relative;
        right: 35px;
    }

    .feature__thumb , .feature__image
    {
        padding-top: 0px !important;
    }
    .about__wrapper {
        margin-top: 0px !important;
    }

    .crypto-sec{
        margin-top: -120px !important;
    }


    .phone-mockup {
        position: relative;
        top: 0px;
    }

    .security-card {
        padding: 0rem 1.5rem;
    }

    .distance-max{
        min-height: 0px !important;
    }

    .footer__linklist-item a{
        font-size: 14px;
    }

    .form-subscribe button {
        margin-top: -10px;
        width: 100%;
    }

    .error-page{
        padding-bottom: 70px;
        padding-top: 20px;
    }

    .error-page .error-img{
        text-align: center !important;
    }

    .error-page .error-img img{
        width: 100%;
    }

    .error-page h3{
        margin-top: 40px;
        text-align: start;
    }

    .error-page p{
        width: 100% !important;
        text-align: start;
    }
    .error-page .max-box{
        padding-left: 10px;
    }

    .error-page .trk-btn.trk-btn--primary.trk-btn--arrow{
        border-radius: 10px !important;
        padding: 12px;
    }
    
}
  
/* iPads, Tablets (481px - 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {

    .line-height-lg{
        line-height: 60px;
    }
    .feature-card {
        padding: 1rem;
    }
    
    .promo-section{
        padding: 30px 40px;
    }
    .header-btn{
        display: none !important;
    }


    .error-page{
        padding-bottom: 70px;
        padding-top: 20px;
    }

    .error-page .error-img{
        text-align: center !important;
    }

    .error-page .error-img img{
        width: 100%;
    }

    .error-page h3{
        margin-top: 40px;
        text-align: start;
    }

    .error-page p{
        width: 100% !important;
        text-align: start;
    }
    .error-page .max-box{
        padding-left: 10px;
    }

    .error-page .trk-btn.trk-btn--primary.trk-btn--arrow{
        border-radius: 10px !important;
        padding: 12px;
    }


}


/* Small screens, laptops (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Your CSS rules for small screens and laptops go here */

    .menu > li > a {
        font-size: 0.74rem;
    }

    .menu {
        column-gap: 0px;
      }

    .trk-btn {
        font-size: 12px;
    }

    .lightdark-switch .switch-btn {
        width: 45px;
        height: 45px;
        border-radius: 10px;
    }

    .title-size-lg {
        font-size: 36px;
    }

    .line-height-lg{
        line-height: 50px;
    }

    .title-size-md {
        font-size: 28px;
        font-weight: 400;
    }

    .hero-img{
        width: 94%;
        margin-right: calc(-15%);
    }

    .padding-top {
        padding-block-start: 120px;
    }

    .regular-text-size{
        font-size: 14px !important;
        line-height: 24px;
    }

    .hero-section .w-70{
        width: 90% !important;

    }

    .feature-card{
        padding: 1rem;
    }

    .promo-section{
        padding: 30px 40px;
    }


    .error-page{
        padding-bottom: 70px;
        padding-top: 20px;
    }

    .error-page .error-img{
        text-align: center !important;
    }

    .error-page .error-img img{
        width: 100%;
    }

    .error-page h3{
        margin-top: 40px;
        text-align: start;
    }

    .error-page p{
        width: 100% !important;
        text-align: start;
    }
    .error-page .max-box{
        padding-left: 10px;
    }

    .error-page .trk-btn.trk-btn--primary.trk-btn--arrow{
        border-radius: 10px !important;
        padding: 12px;
    }
    



}

@media only screen and (min-width: 992px) and (max-width: 1023px) {

    .trk-btn {
        font-size: 13px;
    }

    .title-size-lg {
        font-size: 36px;
    }

    .title-size-md {
        font-size: 24px;
        font-weight: 400;
    }

}

/* Desktops, large screens (1025px - 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Your CSS rules for desktops and large screens go here */

    .menu > li > a {
        font-size: 0.8rem;
    }

    .menu {
        column-gap: 0px;
      }

    .trk-btn {
        font-size: 13px;
    }

    .title-size-lg {
        font-size: 40px;
    }

    .title-size-md {
        font-size: 30px;
        font-weight: 400;
    }

    .hero-img{
        width: 95%;
        margin-right: calc(-15%);
    }

    .padding-top {
        padding-block-start: 120px;
    }

    .regular-text-size{
        font-size: 14px !important;
        line-height: 24px;
    }

    .feature-card{
        padding: 1rem;
    }

    .phone-mockup {
        position: relative;
        top: -300px;
    }


}

/* Extra large screens, TV (1201px and up) */
@media only screen and (min-width: 1201px) {
    /* Your CSS rules for extra large screens and TVs go here */

    .pos-40-left
    {
        position: relative;
        left: 40px;
    }
    .menu > li > a {
        font-size: 0.9rem;
    }

    .menu {
        column-gap: 5px;
      }

    .trk-btn {
        font-size: 14px;
    }

    .title-size-lg {
        font-size: 40px;
    }

    .title-size-md {
        font-size: 36px;
        font-weight: 400;
    }

    .line-height-lg{
        line-height: 50px;
    }

    .title-size-sm {
        font-size: 34px;
    }

    .hero-img{
        width: 95%;
        margin-right: calc(-10%);
    }

    .padding-top {
        padding-block-start: 120px;
    }

    .regular-text-size{
        font-size: 14px !important; 
        line-height: 24px;
    }

    .regular-text-size-lg{
        font-size: 16px !important;
        line-height: 30px;
    }
    
    .feature-card{
        padding: 1rem;
    }

    .footer__linklist-item a{
        font-size: 14px;
    }

    .showcase-section {
        max-height: 350px;
    }

    .phone-mockup {
        position: relative;
        top: -260px;
    }

    
    .form-control{
        font-size: 12px !important;
    }

    .form-label{
        font-size: 14px !important;
    }

    .tags.tags--style2 li a{
        font-size: 12px;
    }

    .blog-details__content div p{
        font-size: 16px;
        line-height: 30px;
        font-family: 'Lato';
    }
    .nav-font-size{
        font-size: 14px;
    }

    .error-page {
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .line-height-60{
        line-height: 60px;
    }
    
}


@media only screen and (min-width: 1440px) {
    /* Your CSS rules for extra large screens and TVs go here */

    .menu > li > a {
        font-size: 1rem;
    }

    .menu {
        column-gap: 15px;
    }

    .trk-btn {
        font-size: 16px;
    }

    .title-size-lg {
        font-size: 48px;
    }

    .line-height-lg{
        line-height: 70px;
    }

    .title-size-md {
        font-size: 40px;
        font-weight: 400;
    }

    .title-size-sm {
        font-size: 36px;
    }

    .padding-top {
        padding-block-start: 140px;
    }

    .hero-img{
        width: 95%;
        margin-right: calc(-5%);
    }

    .regular-text-size{
        font-size: 16px !important;
        line-height: 30px;
    }

    .feature-card{
        padding: 1rem;
    }

    .showcase-section {
        max-height: 450px;
    }

    
    .form-control{
        font-size: 14px !important;
    }
    .form-label{
        font-size: 14px !important;
    }

    .tags.tags--style2 li a{
        font-size: 14px;
    }

    .blog-details__content div p{
        font-size: 17px;
        line-height: 34px;
        font-family: 'Lato';
    }
    .nav-font-size{
        font-size: 15px !important;
    }

    .error-page {
        padding-top: 120px;
        padding-bottom: 20px;
    }


}

@media only screen and (min-width: 1920px) {
    /* Your CSS rules for extra large screens and TVs go here */

    .menu > li > a {
        font-size: 1rem;
    }

    .menu {
        column-gap: 15px;
    }

    .trk-btn {
        font-size: 16px;
    }

    .title-size-lg {
        font-size: 60px;
    }

    .title-size-md {
        font-size: 50px;
        font-weight: 400;
    }

    .hero-img{
        width: 100%;
        margin-right: calc(0%);
    }

    .padding-top {
        padding-block-start: 200px;
    }

    .showcase-section {
        max-height: 500px;
    }

    
    .form-control{
        font-size: 16px !important;
    }

    .form-label{
        font-size: 16px !important;
    }

    .tags.tags--style2 li a{
        font-size: 16px;
    }

    .blog-details__content div p{
        font-size: 18px;
        line-height: 36px;
        font-family: 'Lato';
    }
    .nav-font-size{
        font-size: 16px !important;
    }

    .error-page {
        padding-top: 160px;
        padding-bottom: 40px;
    }


}


@media only screen and (min-width: 2500px) {
    /* Your CSS rules for extra large screens and TVs go here */

    .menu > li > a {
        font-size: 1.3rem;
    }

    .menu {
        column-gap: 20px;
    }

    .trk-btn {
        font-size: 18px;
    }

    .nav-font-size{
        font-size: 18px;
    }

    .regular-text-size{
        font-size: 18px !important;
        line-height: 30px;
    }


}