﻿
/* Extra extra large devices (Large desktops: 1400px and up) */
@media (min-width: 1400px) {
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full {
     margin-top: 85px;
    }
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full > h1 {
            font-size: 60px;
    }
    .different-image .overlay {
        top: -14px;
        left: 16px;
    }
    .different-image img {
        width: 90%;
        margin-left: 32px;
    }
}

/* Extra large devices (Desktops: 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full > h1 {
        line-height: 1.1;
        font-size: 44px;
    }
}





/* Large devices (Laptops: 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full > h1 {
        line-height: 1.1;
        font-size: 44px;
    }

    .header .mobile-nav-toggle {
        color: #ffffff;
    }

    .navbar > ul > li > a {
        color: #454545;
    }

    .header.fixedd .mobile-nav-toggle {
        color: #454545;
    }

    .flip-card-front, .flip-card-back {
        padding: 14px;
    }

    .different-image {
        height: auto;
    }

    .blog-card {
        height: 598px;
    }

    .blog-image {
        height: auto;
    }
}


/* Medium devices (Tablets: 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full > h1 {
     font-size: 48px;
    }
    .header .mobile-nav-toggle {
        color: #ffffff;
    }
    .header.fixedd .mobile-nav-toggle {
        color: #454545;
    }

    .flip-card-front, .flip-card-back {
        padding: 14px;
    }

    .different-image {
        height: auto;
    }

    .blog-card {
        height: 598px;
    }

    .blog-image {
        height: auto;
    }
  
}


/* Small devices (Mobile landscape: 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  
}

/* Extra small devices (Mobile: less than 576px) */
@media (max-width: 575.98px) {
    .creative-carousel > .creative-carousel-inner > .creative-carousel-inner-left > .creative-carousel-left-full > h1 {
        line-height: 1.2;
        font-size: 26px;
    }
    .navbar > ul > li > a {
        color: #454545;
    }
    .header .mobile-nav-toggle.bi-x {
        color: #454545 !important;
    }
    .header .mobile-nav-toggle {
        color: #ffffff !important
    }

    .header.fixedd .mobile-nav-toggle {
        color: #454545 !important;
    }

    .flip-card-front, .flip-card-back {
        padding: 14px;
    }
    .header .logo img {
        max-height: 65px;
    }
    ul.hero-features li {
        font-size: 16px;
    }
    .btn-default {
        padding: 8px 35px;
        font-size: 16px;
        border-radius: 7px !important;
        min-width: auto;
        width: 100%;
        margin-right: 0px !important;
    }
    .section-heading h2 {
        font-size: 30px;
    }
    .section-heading p {
        font-size: 16px;
    }
    .flip-card p {
        font-size: 16px;
    }
    .flip-card {
        height: 340px;
    }
    .read-more {
        font-size: 16px;
        min-width: auto;
        padding: 8px 34px;
    }
    .different-content > h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }
    p {
        font-size: 16px;
    }
    .different-text h3 {
        font-size: 20px;
    }
    .different-text p {
        font-size: 16px;
        line-height: 1.4;
    }
    .image-box.one {
        display: none;
    }
    .about-section-h1 .inner-column .image-box {
        max-width: 100%;
        height: 100%;
    }
    .blog-title a {
        font-size: 20px;
    }
    .blog-meta, .blog-meta strong, .blog-meta span {
        font-size: 14px;
    }
    .stats-title {
        font-size: 20px;
    }
    .stats-number span {
        font-size: 35px;
    }
    .flip-card h3 {
        font-size: 20px;
    }
    .header.fixedd img.logo-nav.d-none {
        max-height: 65px;
    }
    .header {
        top: 0;
    }
    .different-item {
        gap: 12px;
        margin-top: 15px;
    }
}





