@media (min-width: 1580px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1470px;
    }
    .mainHeading{
        padding-right: 70px !important;
    }
    
}
@media (min-width: 1399px) {
    .mainHeading{
        padding-right: 0px;
    }
    .featureTitle {
        padding-right: 380px;
    }
    .featureImgCol {
        padding-left: 120px;
    }
    .faturesTileCol {
        gap: 60px;
        padding: 50px 20px 50px 30px;
    }
    .exampleTileCol{
        gap: 20px;
        padding: 35px 30px 30px 30px;
    }
}

@media (max-width: 1580px) {
    .exampleContentRow {
        gap: 50px;
    }
}


@media (max-width: 1399px) {
    .mainHeading{
        padding-right: 0px !important;
    }
    .mainHeading {
        font-size: 76px;
        line-height: 100px;
    }
    .heroImgCol {
        padding-right: 20px;
    }
    .welcomeSection {
        min-height: 660px;
    }
    .featureTitle {
        padding-right: 190px;
    }
    .faturesTileCol {
        gap: 20px;
        padding: 50px 20px 50px 20px;
    }
    .faturesWrapper {
        gap: 20px;
    }
    .featureImgCol {
        padding-left: 30px;
    }
    .exampleContentRow {
        gap: 15px;
    }
    .exampleTileCol {
        gap: 12px;
        padding: 35px 15px 30px 20px;
    }
}

@media (max-width: 1199px) {
    .mainHeading {
        font-size: 66px;
        line-height: 85px;
    }
    .welcomeSection {
        min-height: 650px;
        height: 650px;
    }
    .featureTitle {
        padding-right: 80px;
    }
    .faturesWrapper {
        gap: 5px;
    }
    .faturesTileCol {
        gap: 10px;
        padding: 50px 10px 50px 10px;
    }
    .featureContentCol {
        width: 70%;
    }
    .featureImgCol {
        padding-left: 0;
    }
    .footerSocial {
        gap: 2px;
    }
    .footerContentCol1 {
        gap: 15px;
    }
    .footerContentCol2 {
        gap: 10px;
    }
    .yuAddress {
        gap: 8px;
        width: 183px;
    }
    .exampleTileCol {
        padding: 35px 15px 30px 20px;
    }
}
@media (max-width: 1024px) {
    .btn {
        height: 50px;
        line-height: 50px;
    }
    .header-content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    header.sticky .header-content {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .banner-row > div:first-child{
        order: 2;
    }
    .banner-row > div:last-child{
        order: 1;
    }
    .heroContentCol {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 30px;
    }
    .mainHeading {
        font-size: 50px;
        line-height: 70px;
        margin-bottom: 15px;
    }
    .banner-container {
        padding-top: 20px;
        height: auto;
    }
    .welcomeSection {
        min-height: 750px;
        height: 750px;
    }
    .heroImgCol{
        width: 100%;
        justify-content: center;
        padding-right: 230px;
    }
    .heroImgCol img{
        max-width: 500px;
    }
    .featureImgCol{
        display: none;
    }
    .featureContentCol{
        width: 100%;
    }
    .featureTitle {
        padding-right: 0px;
        justify-content: center;
        text-align: center;
    }
    .faturesWrapper {
        gap: 20px;
    }
    .faturesTileCol {
        width: calc(50% - 10px);
    }
    .feature-row {
        padding: 70px 0 70px 0;
    }
    .faturesTileCol {
        gap: 20px;
        padding: 50px 20px 50px 20px;
    }
    .footerContentWrapper{
        flex-wrap: wrap;
    }
    .footerContentCol1{
        width: 100%;
        justify-content: center;
        margin-bottom: 20px;
    }
    .yuAddress {
        gap: 10px;
        width: 223px;
    }
    .footerContentCol2{
        width: 100%;
        justify-content: center;
        margin-bottom: 20px;
    }
    .footerContentCol3{
        width: 100%;
        justify-content: center;
    }
    .example-row{
        padding: 70px 0 70px 0;
    }
    
}
@media (max-width: 991px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .collapse:not(.show) {
        display: flex !important;
    }
    .navbar-nav{
        flex-direction: row;
    }
    header nav.navbar ul li {
        margin-right: 20px;
    }
    header nav.navbar ul {
        display: flex;
        margin-right: 0px;
    }
    .mainHeading{
        text-align: center;
        font-size: 45px;
    }
    .featureTitle {
        font-size: 40px;
        line-height: 55px;
    }
    .faturesTileCol {
        gap: 10px;
        padding: 50px 15px 50px 15px;
    }
    .faturesWrapper {
        gap: 10px;
    }
    .exampleContentRow{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .exampleTileCol {
        gap: 20px;
        padding: 35px 20px 30px 20px;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .exampleTitle {
        font-size: 40px;
        line-height: 55px;
    }
    
}
@media (max-width: 767px) {
    .navbar-toggler-icon {
        width: 1em;
    }
    .header-content .navbar-toggler {
        padding-left: 0;
        padding-right: 0;
    }
    
    .header-logo {
        flex: 1;
    }
    
    
    .navbar-toggler {
        display: inline-block;
    }
    header nav.navbar {
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    header.sticky nav.navbar {
        top: 100px;
    }
    header nav.navbar .navbar-collapse {
        background-color: var(--black1);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        border-top: 1px solid #d5d5d5;
        border-bottom: 1px solid #d5d5d5;
    }
    header nav.navbar ul {
        margin-right: 0;
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    header nav.navbar ul li a.nav-link {
        padding-right: 0.7rem !important;
        padding-left: 0.7rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        width: 100%;
        color: var(--primary);
        border-radius: 0;
        text-align: center;
        font-size: 14px;
    }
    header nav.navbar ul li.active a.nav-link {
        color: var(--white) !important;
        background-color: var(--primary);
        font-family: var(--regular);
    }
    header nav.navbar ul li a.nav-link:hover {
        color: var(--white) !important;
        background-color: var(--primary);
    }
    header nav.navbar ul li {
        border-bottom: 1px solid #d5d5d5;
    }
    
    header nav.navbar ul li a.active::after {
        display: none;
    }
    .headerBtn{
        display: none;
        margin-right: 15px;
    }
    .header-content-col{
        padding-left: 25px;
        padding-right: 25px;
    }
    .header-content {
        padding-top: 22px;
        padding-bottom: 22px;
    }
    header.sticky .header-content {
        padding-top: 22px;
        padding-bottom: 22px;
    }
    header nav.navbar ul li a::after {
        display: none;
    }

    header nav.navbar ul li {
        margin-left: 0;
        margin-right: 0px;
    }
    .collapse:not(.show) {
        display: none !important;
    }
    .navbar-nav{
        flex-direction: column;
    }
    .mainHeading span {
        width: 100%;
        display: block;
    }
    .mainHeading {
        line-height: 60px;
    }
    .heroImgCol {
        padding-right: 185px;
        position: relative;
        top: -70px;
    }
    .heroImgCol img {
        max-width: 400px;
    }
    .welcomeSection {
        min-height: 710px;
        height: 710px;
    }
    .heroContentCol .btn{
        top: 400px;
        position: relative;
        z-index: 200;
    }
    .welcomeSection {
        min-height: 735px;
        height: 735px;
    }
    .featureTitle {
        font-size: 30px;
        line-height: 40px;
    }
    .faturesTileCol {
        gap: 15px;
        padding: 30px 15px 30px 15px;
        width: 100%;
    }
    .faturesWrapper {
        gap: 10px;
    }
    header nav.navbar{
        width: 205px;
        left: auto;
    }
    header nav.navbar ul li{
        border: none;;
    }
    header nav.navbar .navbar-collapse{
        border: none;
    }
    header nav.navbar ul li a.nav-link {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
    
    .header-logo img {
        max-width: 56px !important;
    }
    header.sticky .header-logo img {
        max-width: 56px;
    }
    .exampleTitle {
        font-size: 30px;
        line-height: 40px;
    }
}


@media (max-width: 575px) {
    .mainHeading {
        line-height: 50px;
        font-size: 40px;
    }
    .headerBtn {
        margin-right: 5px;
    }
    .welcomeSection {
        min-height: 715px;
        height: 715px;
    }
    .exampleContentCol > img {
        max-width: 170px;
    }
    .exampleTileCol .featureTileContent {
        gap: 10px;
    }
}


@media (max-width: 450px) {
    .featureTitle {
        font-size: 25px;
        line-height: 39px;
    }
    .featureTileTitle {
        font-size: 25px;
        line-height: 25px;
    }
    .featureTileIcon {
        min-width: 100px;
        max-width: 100px;
        height: 100px;
    }
    .featureTileIcon img {
        width: 70px;
        height: 70px;
    }
    .feature-row {
        padding: 50px 0 50px 0;
    }
    .headerBtn .btn{
        padding: 0 15px;
        min-width: fit-content;
    }
    .footerContentCol1{
        flex-wrap: wrap;
    }
    .yuAddress{
        width: 200px;
    }
    .footerContentCol2{
        flex-wrap: wrap;
    }
    .footerContentCol2 span{
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .example-row{
        padding: 50px 0 50px 0;
    }
    .exampleTitle {
        font-size: 25px;
        line-height: 40px;
    }
}