@media (max-width: 575.98px) {
    .leftContainer, .rightContainer {
        padding: 0 12px;
    }
}
@media (min-width: 576px) {
    .leftContainer {
        margin-left: calc((100vw - 540px) / 2 + 12px);
        padding-right: 12px;
    }
    .rightContainer {
        margin-right: calc((100vw - 540px) / 2 + 12px);
        padding-left: 12px;
    }
    .rightContainer .innerSection {
        margin-left: calc((100vw - 540px) / 2);
    }
    .leftContainer .innerSection {
        margin-right: calc((100vw - 540px) / 2);
    }
}
@media (min-width: 768px) {
    .leftContainer {
        margin-left: calc((100vw - 720px) / 2 + 12px);
    }
    .rightContainer {
        margin-right: calc((100vw - 720px) / 2 + 12px);
    }
    .rightContainer .innerSection {
        margin-left: calc((100vw - 720px) / 2);
    }
    .leftContainer .innerSection {
        margin-right: calc((100vw - 720px) / 2);
    }
}
@media (min-width: 992px) {
    
    .leftContainer {
        margin-left: calc((100vw - 960px) / 2 + 12px);
    }
    .rightContainer {
        margin-right: calc((100vw - 960px) / 2 + 12px);
    }
    .rightContainer .innerSection {
        margin-left: calc((100vw - 960px) / 2);
    }
    .leftContainer .innerSection {
        margin-right: calc((100vw - 960px) / 2);
    }
}
@media (min-width: 1200px) {
    .leftContainer {
        margin-left: calc((100vw - 1140px) / 2 + 12px);
    }
    .rightContainer {
        margin-right: calc((100vw - 1140px) / 2 + 12px);
    }
    .rightContainer .innerSection {
        margin-left: calc((100vw - 1140px) / 2);
    }
    .leftContainer .innerSection {
        margin-right: calc((100vw - 1140px) / 2);
    }
    /* .custom-col {
        width: calc((50%) - (100vw - 1140px) / 2);
    } */
}
@media (min-width: 1400px) {
    .leftContainer {
        margin-left: calc((100vw - 1320px) / 2 + 12px);
    }
    .rightContainer {
        margin-right: calc((100vw - 1320px) / 2 + 12px);
    }
    .mainHomePage .mainHeader .navbar {
        max-width: 1320px;
    }
}



@media (max-width: 1399.98px) {
    .heroSectContent h1 {
        font-size: 36px;
    }
}
@media (max-width: 1199.98px) {
    .mainHomePage .mainHeader .navbar {
        max-width: 960px;
    }
    .heroSectContentInner {
        padding: 30px;
    }
    .heroSectContent h1 {
        font-size: 32px;
    }
    .heroSection {
        min-height: 500px;
    }
    .btnStyle {
        padding: 10px 20px;
    }
    .btnStyleIcon {
        width: 46px;
        height: 46px;
    }
    
    .section-padding {
        padding: 60px 0;
    }    
    .sectionContent h2 {
        font-size: 30px;
    }
    .headingSection h1 {
        font-size: 42px;
    }
    .videoOuter {
        width: 520px;
    }
    .videoSection h4 {
        font-size: 32px;
        margin-bottom: 8px;
    }
    .videoSection p {
        font-size: 20px;
    }
}
@media (max-width: 991.98px) {
    .btnGroup{
        gap: 12px;
    }
    .navbar-toggler {
        color: var(--dark-color) !important;
    }
    .mainHomePage .mainHeader .navbar {
        max-width: 720px;
    }
    .mainHeader .navbar {
        padding: 8px 0;
    }
    .mainHomePage .mainHeader .navbar-brand {
        width: 80px;
        height: 80px;
    }
    .mainHomePage .mainHeader .navbar-brand img {
        height: 50px;
    }
    .mainHeader .navbar-brand {
        height: 60px;
    }
    .mainHeader.scrolled .navbar-brand {
        height: 50px;
        width: auto;
    }
    .flex-between, .mobileMenuoffcanvas .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .mobileMenuoffcanvas .dropdown-item {
        font-size: 14px;
        font-weight: 400;
        padding: 6px 16px;
    }
    .qrCodeOuter {
        width: 188px;
    }
    .section-padding {
        padding: 50px 0;
    }
    .sectionContent h2 {
        font-size: 26px;
    }
    .headingSection h1 {
        font-size: 36px;
    }
    .instaPortfolioCard .instaPostContent {
        bottom: 0;
    }
    .videoOuter {
        width: 400px;
    }
    .videoSection h4 {
        font-size: 24px;
    }
    .videoSection p {
        font-size: 16px;
    }
    .counterOuter, .counterItem {
        padding: 16px;
    }
    .galleryItem {
        width: calc(100% / 3 - 8px);
    }
}
@media (max-width: 767.98px) {
    .mainHomePage .mainHeader .navbar {
        max-width: 540px;
    }
    .sectionContent h2 {
        font-size: 22px;
    }
    .headingSection h1 {
        font-size: 30px;
        margin-bottom: 16px;
    }
    .videoOuter {
        width: 100%;
    }
    .videoSection h4 {
        font-size: 24px;
    }
    .videoSection p {
        font-size: 16px;
    }
    .videoSection {
        background-color: #f7f7f7;
    }
    .videoSection .leftContainer, .videoSection .rightContainer {
        border-radius: 0;
        overflow: visible;
    }
    .videoItem:has(+.videoItem) {
        margin-bottom: 30px;
    }
    .galleryItem {
        width: calc(100% / 2 - 6px);
    }
}
@media (max-width: 575.98px) {
    .mainHomePage .mainHeader .navbar {
        max-width: calc(100% - 24px);
    }
    .heroSection {
        min-height: 400px;
    }
    .heroSectContentInner {
        padding: 20px;
        border-radius: 20px 0;
    }
    .heroSectContent h1 {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .btnStyle {
        font-size: 14px;
    }
    .btnStyleIcon {
        width: 43px;
        height: 43px;
        padding: 7px;
    }
    .qrCodeOuter {
        width: 240px;
    }
    .headingSection h1 {
        font-size: 24px;
    }
    .instaPortfolioCard {
        max-height: 300px;
    }
}
@media (max-width: 420.98px) {
    .counterOuter {
        flex-direction: column;
    }
    .counterItem {
        width: 100%;
        border-right: 0;
    }
    .counterItem:nth-child(3) {
        border-bottom: 1px solid #ffffff59;
    }
}