@media(min-width:1400px) {}

@media(min-width:992px) and (max-width:1199px) {

    .home-content {
        height: 800px;
    }

    .navbar-default .navbar-nav>li {
        margin-left: 0
    }

    .navbar-default .navbar-nav>li a {
        font-size: 14px
    }

    .services .service {
        padding: 5px;
        height: 175px
    }

    .service-tabs li a {
        p adding: 20px
    }

    .process-image {
        margin-top: -30px
    }

    .service-tabs li {
        width: 22%
    }

    .portfolio-icons a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 14px
    }

    .brand-image {
        margin: 0 15px
    }

    .portfolio-info {
        margin-top: -50px
    }

    .timline-panel {
        max-width: 10 0%
    }

    .services-section .item {
        padding: 30px
    }

    .portfoli-menu a {
        padding: 20px 30px
    }

    .portfolio-section .owl-nav {
        right: 100px
    }

    #product-carousel .carousel-indicators li,
    #product-carousel .carousel-indicators li.active {
        width: 83px;
        height: 76px
    }

    .ca rousel-controls .carousel-arrow {
        bottom: -45px
    }

    .call-to-action .brand-info {
        padding: 0 35px
    }

    .call-to-action .brand-info,
    .call-to-action .brand-button {
        text-align: center;
        float: none
    }

    .features {
        margin-bottom: 30px;
        height: 150px
    }

    .call-to-action {
        padding-top: 35px;
        padding-bottom: 35px
    }

    

    .call-to-action .btn.btn-primary {
        float: none
    }

    .info-box,
    .info-text h5 {
        font-size: 12px
    }

    .info-box i {
        margin-right: 10px;
        font-size: 30px
    }
}

@media(min-width:768px) and (max-width:991px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 14px
    }

    .navbar-default li {
        margin-left: 0
    }

    .home-content h1 {
        font-size: 25px
    }

    .home-content h2 {
        font-size: 45px
    }

    

    .ser vices {
        margin-top: 100px
    }

    .services .service {
        margin-bottom: 25px;
        min-height: 150px
    }

    .image-box {
        margin-top: 0
    }

    .service-tabs li {
        width: initial;
        margin-bottom: 35px
    }

    .service-structure li {
        margin-left: 0
    }

    .contact-info {
        padding: 0 10px
    }

    .contact-info.o pening-hour {
        padding-bottom: 20px
    }

    .arrow-top i {
        margin-left: 0
    }

    .skills-section {
        max-height: initial
    }

    .posted-date li+li {
        margin-left: 15%
    }

    .timline-panel {
        max-width: 100%
    }

    .posted-date:after {
        right: 5px
    }

    .portfoli-menu {
        margin-bottom: 30px
    }

    .portfoli- menu li {
        margin-top: 25px
    }

    .portfolio-section .owl-nav {
        right: 50px
    }

    #product-carousel .carousel-indicators li,
    #product-carousel .carousel-indicators li.active {
        width: 90px;
        height: 85px
    }

    .carousel-controls .carousel-arrow {
        bottom: -100px
    }

    .call- to-action .brand-info {
        padding: 0 35px
    }

    .call-to-action .brand-info,
    .call-to-action .brand-button {
        text-align: center;
        float: none
    }

    .contact-section h3 {
        font-size: 18px
    }

    .call-to-action {
        padding-top: 35px;
        padding-bottom: 35px
    }

    .call-to-action h3 {
        m argin-bottom: 30px
    }

    .call-to-action .btn.btn-primary {
        float: none
    }

    #project-menu li {
        font-size: 16px;
        padding: 15px
    }

    #projects .project-content {
        width: 49%
    }

    .recent-projects.section-padding {
        padding-bottom: 50px
    }
}

@media(max-width:767px) {
    h1 {
        font-si ze: 24px
    }

    h2 {
        font-size: 20px
    }

    h3 {
        font-size: 16px
    }

    h4 {
        font-size: 15px
    }

    h5 {
        font-size: 13px
    }

    .section-title {
        margin-bottom: 50px
    }

    .section-title h1 {
        font-size: 15px
    }

    .section-padding {
        padding-top: 35px;
        padding-bottom: 50px
    }

    .service-section.section-paddin g {
        padding-bottom: 50px
    }

    .info-box {
        margin-bottom: 0;
        float: left;
        font-size: 12px
    }

    .top-social.pull-right {
        float: left !important
    }

    .info-box i {
        font-size: 28px
    }

    .info-text h5 {
        font-size: 12px
    }

    .navbar-header {
        margin-top: 0
    }

    .navbar-brand>img {
        margin-top: - 10px
    }

    .navbar-default .navbar-nav>li>a {
        line-height: 20px;
        font-size: 13px
    }

    .navbar-default li:first-child {
        margin-left: 15px
    }

    .navbar-collapse {
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .main-menu .navbar-nav {
        margin-top: 0
    }

    .home-co ntent {
        padding-top: 40px;
        height: auto;
        padding-bottom: 50px
    }

    .home-content h1 {
        font-size: 18px
    }

    .home-content h2 {
        font-size: 36px
    }

    .btn.btn-primary {
        padding: 12px 30px;
        font-size: 12px
    }

    .btn.btn-primary i {
        width: 45px;
        line-height: 45px
    }

    .services {
        margin -top: 50px
    }

    .services .service {
        margin-bottom: 20px
    }

    .crane-lifting,
    .house-plans {
        margin-top: 0
    }

    .box-title h3 {
        font-size: 16px
    }

    .image-box {
        min-width: 80px
    }

    .image-box:before {
        top: -20px
    }

    .service.home-plumbing {
        padding-top: 15px;
        min-height: 165px
    }

    .se rvice-title {
        padding: 15px
    }

    .service-title h4 {
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 2px;
        word-spacing: 2px
    }

    .features {
        margin-bottom: 35px
    }

    .features-tabs .nav-tabs>li {
        overflow: hidden;
        width: 100%
    }

    .features-tabs .nav-tabs>li a {
        font-si ze: 15px;
        padding-left: 110px;
        padding-right: 25px;
        width: 100%
    }

    .features-image {
        padding: 15px;
        min-width: initial;
        z-index: 10
    }

    .features-section .feature-image {
        padding-left: 15px;
        padding: 15px;
        text-align: center
    }

    .features-section .feature-image im g {
        display: inline-block
    }

    .project-content .project-title h3 {
        font-size: 18px
    }

    .work-process {
        height: initial
    }

    .process-accordion .panel {
        padding-left: 25px
    }

    .process-number {
        left: -30px
    }

    .process-number img {
        width: 75%
    }

    .service-tabs li {
        width: 48%;
        ma rgin-bottom: 30px
    }

    .service-tabs li a {
        padding: 20px
    }

    .service-image {
        margin-bottom: 25px
    }

    .service-structure i {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 18px
    }

    .service-structure li {
        margin-left: 0
    }

    .team-member {
        margin-bottom: 30px
    }

    .team -members {
        padding: 0 35px
    }

    .team-section.section-padding {
        padding-bottom: 10px;
        padding-top: 0
    }

    .testimonial-section {
        padding-bottom: 30px
    }

    .testimonial {
        line-height: 22px
    }

    .testimonial-info {
        padding: 0
    }

    .testimonial-slider .owl-dots {
        bottom: -85px
    }

    .b log-content .time h2 {
        line-height: 16px;
        font-size: 14px
    }

    .blog-content .time span {
        font-size: 14px
    }

    .blog-content.blog-one .time {
        left: 30px
    }

    .blog-content .time {
        padding: 8px;
        max-width: 60px
    }

    .post-content li {
        margin-left: 0
    }

    .pagination {
        margin-top: 0
    }

    .brand-item {
        padding: 45px 15px
    }

    .brand-image {
        margin: 0 10px
    }

    .blog-section.section-padding {
        padding-bottom: 20px
    }

    .call-to-action .btn.btn-primary {
        margin-top: 0;
        float: none
    }

    .call-to-action {
        text-align: center !important;
        padding-top: 15px;
        padd ing-bottom: 30px
    }

    .call-to-action h3 {
        margin-bottom: 25px;
        font-size: 24px
    }

    .brand-button.pull-right {
        float: left !important
    }

    .footer-social li+li {
        margin-left: 5px
    }

    .footer-social i {
        font-size: 20px
    }

    .arrow-top i {
        position: absolute;
        right: 10px;
        bottom: -20px
    }

    .footer-social {
        width: 100%
    }

    .contact-section {
        padding: 20px 0
    }

    .skills-section {
        max-height: initial
    }

    .skills-info {
        padding: 25px 30px
    }

    .posted-date li+li {
        margin-left: 8%
    }

    .posted-date .year {
        padding: 2px 20px;
        font-size: 15px
    }

    .timline-panel {
        m argin-bottom: 15px;
        max-width: 100%
    }

    .timline-section {
        padding-bottom: 0
    }

    .services-section .item {
        margin-bottom: 1px
    }

    .services-section .item.item-middle {
        margin-top: 0
    }

    .services-section .item.item-right {
        margin-bottom: 0
    }

    .portfoli-menu {
        margin-b ottom: 30px
    }

    .portfoli-menu li {
        float: none;
        width: 100%;
        margin-top: 15px
    }

    .portfolio-section .owl-nav {
        right: 25px
    }

    .portfolio-section .owl-prev,
    .portfolio-section .owl-next {
        position: absolute;
        width: 30px;
        height: 30px;
        font-size: 24px;
        line-height: 28px
    }

    .portfolio-section .owl-prev {
        right: 31px
    }

    .call-to-action .brand-info {
        padding: 0 15px
    }

    .call-to-action .brand-info,
    .call-to-action .brand-button {
        text-align: center;
        float: none
    }

    .blog-details {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .blog- details .entry-title {
        margin-top: 25px;
        margin-bottom: 15px
    }

    .blog-details .entry-meta li,
    .blog-details .entry-meta li a {
        font-size: 12px
    }

    .blog-details .post-tags {
        margin-bottom: 20px
    }

    .blog-details .share-social {
        border-bottom: 0
    }

    .blog-details .share-social i {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        margin-right: 5px
    }

    .social.pull-right {
        float: left !important
    }

    .prev-next {
        margin-top: 20px
    }

    .blog-details .share-social .post-tags i {
        font-size: 18px
    }

    .breadcrumb-section {
        padding-top: 45px;
        padding-bottom: 20px
    }

    .about-us-section .section-title {
        margin-bottom: 30px
    }

    .about-us-image {
        margin-top: 45px
    }

    #project-menu {
        margin-bottom: 30px;
        border: none
    }

    #project-menu li {
        border-left: 0;
        padding: 10px 20px;
        font-size: 16px
    }

    #p rojects .project-content {
        width: 98%;
        margin-bottom: 5px;
        min-height: initial
    }

    .recent-projects.section-padding {
        padding-bottom: 50px
    }

    .pagination>li>a,
    .pagination>li>span {
        padding: 10px 15px;
        font-size: 14px
    }

    .breadcrumb-content h1 {
        text-align: cen ter;
        float: none;
        margin-bottom: 0
    }

    .breadcrumb {
        float: none;
        text-align: center
    }

    .post-content blockquote {
        margin: 10px 0;
        font-size: 14px
    }

    .post-author,
    .post-comment {
        margin-top: 35px;
        margin-bottom: 25px
    }

    #gmap {
        height: 300px
    }
}

@media(max-width:479px) {

    .top-social.pull-right,
    .info-box.pull-right,
    .info-box .icon-right {
        float: left !important
    }

    .info-box .icon-right {
        margin-right: 15px;
        margin-left: 0
    }

    .info-box {
        margin-bottom: 0;
        font-size: 12px
    }

    .info-box i {
        font-size: 28px
    }

    .info-text h5 {
        font-size: 12px
    }

    .image-box {
        min-width: 60px
    }

    .service-tabs li {
        width: 100%
    }

    .home-content {
        height: auto;
        padding-bottom: 30px
    }

    .portfolio-icons a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 14px
    }

    .team-member {
        width: 100%
    }

    .posted-date li+li {
        margin-le ft: 5%
    }

    .posted-date .year {
        padding: 2px 20px;
        font-size: 15px
    }

    .carousel-controls .carousel-arrow {
        bottom: -75px
    }

    .details-info .btn.btn-primary {
        padding-left: 0;
        font-size: 12px
    }

    .prev-next a {
        font-size: 13px
    }

    .blog-details .entry-meta li {
        border-le ft: 0;
        border-right: 0;
        margin-bottom: 7px
    }

    .blog-details .entry-meta li:last-child {
        margin-bottom: 0
    }

    .post-author {
        text-align: center
    }

    .author-image {
        float: none;
        margin-right: 0;
        display: inline-block;
        margin-bottom: 5px
    }

    .media-body .btn.btn-primary {
        float: left
    }

    .process-icon,
    .left-content .process-icon,
    .work-process .process-info {
        float: none;
        margin-left: 0;
        text-align: center;
         !important
    }

    .services .service {
        padding: 15px 10px
    }

    .post-content li a {
        font-size: 10px
    }

    .process-icon img {
        display: inline-block
    }

    .breadcrumb-content h1 {
        text-align: center;
        float: none;
        margin-bottom: 0
    }

    .breadcrumb {
        float: none;
        text-align: center
    }

    .about-section-content {
        text-align: center
    }
}

@media(max-width: 1200px){

    #home-slider .item h2{
        font-size:25px;
    }

    .contact-widget{
        margin-top:20px;
    }

    .footer-company{
        text-align:center;
    }
    .footer-company div{
        justify-content:center;
    }

}

@media(max-width: 991px){
    .home-content {
        padding-top: 70px;
        height: auto;
        padding-bottom: 50px
    }

}

@media(min-width: 991px){

    .justify-content-lg-end{
        justify-content: end;
    }

    .pb-lg-3{
        padding-bottom: 1rem !important;
    }


    .px-lg-0{
        padding: 0px 0px !important;
    }

    .px-lg-1{
        padding: 0px 25px !important;
    }

    .mt-lg-3{
        margin-top: 20px !important;
    }

    .pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .pb-lg-1 {
        padding-bottom: 1rem !important;
    }

    .pb-lg-2 {
        padding-bottom: 2rem !important;
    }

    .pb-lg-3 {
        padding-bottom: 3rem !important;
    }
}

@media(min-width: 768px){

    .px-md-0{
        padding: 0px 0px !important;
    }

    .px-md-1{
        padding: 0px 25px !important;
    }

    .pb-md-0 {
        padding-bottom: 0 !important;
    }

    .pb-md-1 {
        padding-bottom: 1rem !important;
    }

    .pb-md-2 {
        padding-bottom: 2rem !important;
    }

    .pb-md-3 {
        padding-bottom: 3rem !important;
    }

}


@media(min-width: 468px){

    .px-sm-0{
        padding: 0px 0px !important;
    }

    .px-sm-1{
        padding: 0px 25px !important;
    }

    .pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .pb-sm-1 {
        padding-bottom: 1rem !important;
    }

    .pb-sm-2 {
        padding-bottom: 2rem !important;
    }

    .pb-sm-3 {
        padding-bottom: 3rem !important;
    }

}

@media(min-width:1200px) {

    .call-to-action h3 {
        width:80%;
    }

    .banner-section{
        padding-top: 150px;
        padding-bottom: 150px;

    }
}

/* ── Width utilities responsive (mobile-first: sm → md → lg) ── */
@media(min-width: 468px){
    .w-sm-5   { width:  5%  !important; }
    .w-sm-10  { width: 10%  !important; }
    .w-sm-15  { width: 15%  !important; }
    .w-sm-20  { width: 20%  !important; }
    .w-sm-25  { width: 25%  !important; }
    .w-sm-30  { width: 30%  !important; }
    .w-sm-35  { width: 35%  !important; }
    .w-sm-40  { width: 40%  !important; }
    .w-sm-45  { width: 45%  !important; }
    .w-sm-50  { width: 50%  !important; }
    .w-sm-55  { width: 55%  !important; }
    .w-sm-60  { width: 60%  !important; }
    .w-sm-65  { width: 65%  !important; }
    .w-sm-70  { width: 70%  !important; }
    .w-sm-75  { width: 75%  !important; }
    .w-sm-80  { width: 80%  !important; }
    .w-sm-85  { width: 85%  !important; }
    .w-sm-90  { width: 90%  !important; }
    .w-sm-95  { width: 95%  !important; }
    .w-sm-100 { width: 100% !important; }
    .w-sm-auto{ width: auto !important; }
}

@media(min-width: 768px){
    .w-md-5   { width:  5%  !important; }
    .w-md-10  { width: 10%  !important; }
    .w-md-15  { width: 15%  !important; }
    .w-md-20  { width: 20%  !important; }
    .w-md-25  { width: 25%  !important; }
    .w-md-30  { width: 30%  !important; }
    .w-md-35  { width: 35%  !important; }
    .w-md-40  { width: 40%  !important; }
    .w-md-45  { width: 45%  !important; }
    .w-md-50  { width: 50%  !important; }
    .w-md-55  { width: 55%  !important; }
    .w-md-60  { width: 60%  !important; }
    .w-md-65  { width: 65%  !important; }
    .w-md-70  { width: 70%  !important; }
    .w-md-75  { width: 75%  !important; }
    .w-md-80  { width: 80%  !important; }
    .w-md-85  { width: 85%  !important; }
    .w-md-90  { width: 90%  !important; }
    .w-md-95  { width: 95%  !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-auto{ width: auto !important; }
}

@media(min-width: 991px){
    .w-lg-5   { width:  5%  !important; }
    .w-lg-10  { width: 10%  !important; }
    .w-lg-15  { width: 15%  !important; }
    .w-lg-20  { width: 20%  !important; }
    .w-lg-25  { width: 25%  !important; }
    .w-lg-30  { width: 30%  !important; }
    .w-lg-35  { width: 35%  !important; }
    .w-lg-40  { width: 40%  !important; }
    .w-lg-45  { width: 45%  !important; }
    .w-lg-50  { width: 50%  !important; }
    .w-lg-55  { width: 55%  !important; }
    .w-lg-60  { width: 60%  !important; }
    .w-lg-65  { width: 65%  !important; }
    .w-lg-70  { width: 70%  !important; }
    .w-lg-75  { width: 75%  !important; }
    .w-lg-80  { width: 80%  !important; }
    .w-lg-85  { width: 85%  !important; }
    .w-lg-90  { width: 90%  !important; }
    .w-lg-95  { width: 95%  !important; }
    .w-lg-100 { width: 100% !important; }
    .w-lg-auto{ width: auto !important; }
}

@media(min-width: 1200px){
    .w-xl-5   { width:  5%  !important; }
    .w-xl-10  { width: 10%  !important; }
    .w-xl-15  { width: 15%  !important; }
    .w-xl-20  { width: 20%  !important; }
    .w-xl-25  { width: 25%  !important; }
    .w-xl-30  { width: 30%  !important; }
    .w-xl-35  { width: 35%  !important; }
    .w-xl-40  { width: 40%  !important; }
    .w-xl-45  { width: 45%  !important; }
    .w-xl-50  { width: 50%  !important; }
    .w-xl-55  { width: 55%  !important; }
    .w-xl-60  { width: 60%  !important; }
    .w-xl-65  { width: 65%  !important; }
    .w-xl-70  { width: 70%  !important; }
    .w-xl-75  { width: 75%  !important; }
    .w-xl-80  { width: 80%  !important; }
    .w-xl-85  { width: 85%  !important; }
    .w-xl-90  { width: 90%  !important; }
    .w-xl-95  { width: 95%  !important; }
    .w-xl-100 { width: 100% !important; }
    .w-xl-auto{ width: auto !important; }
}

@media(min-width: 1400px){
    .w-xxl-5   { width:  5%  !important; }
    .w-xxl-10  { width: 10%  !important; }
    .w-xxl-15  { width: 15%  !important; }
    .w-xxl-20  { width: 20%  !important; }
    .w-xxl-25  { width: 25%  !important; }
    .w-xxl-30  { width: 30%  !important; }
    .w-xxl-35  { width: 35%  !important; }
    .w-xxl-40  { width: 40%  !important; }
    .w-xxl-45  { width: 45%  !important; }
    .w-xxl-50  { width: 50%  !important; }
    .w-xxl-55  { width: 55%  !important; }
    .w-xxl-60  { width: 60%  !important; }
    .w-xxl-65  { width: 65%  !important; }
    .w-xxl-70  { width: 70%  !important; }
    .w-xxl-75  { width: 75%  !important; }
    .w-xxl-80  { width: 80%  !important; }
    .w-xxl-85  { width: 85%  !important; }
    .w-xxl-90  { width: 90%  !important; }
    .w-xxl-95  { width: 95%  !important; }
    .w-xxl-100 { width: 100% !important; }
    .w-xxl-auto{ width: auto !important; }
}

/* ── Responsive background-color utilities ── */
@media(min-width: 468px){
    .bg-sm-white         { background-color: #fff                         !important; }
    .bg-sm-none          { background-color: transparent                  !important; }
    .bg-sm-shadow-sm     { box-shadow: 0 3px 6px  rgba(0,0,0,0.25)       !important; }
    .bg-sm-shadow-md     { box-shadow: 0 3px 15px rgba(0,0,0,0.25)       !important; }
    .bg-sm-shadow-none   { box-shadow: none                               !important; }
    .rounded-start-sm-5  { border-radius: 0.5rem 0 0 0.5rem              !important; }
    .rounded-start-sm-0  { border-top-left-radius: 0; border-bottom-left-radius: 0 !important; }
}

@media(min-width: 768px){
    .bg-md-white         { background-color: #fff                         !important; }
    .bg-md-none          { background-color: transparent                  !important; }
    .bg-md-shadow-sm     { box-shadow: 0 3px 6px  rgba(0,0,0,0.25)       !important; }
    .bg-md-shadow-md     { box-shadow: 0 3px 15px rgba(0,0,0,0.25)       !important; }
    .bg-md-shadow-none   { box-shadow: none                               !important; }
    .rounded-start-md-5  { border-radius: 0.5rem 0 0 0.5rem              !important; }
    .rounded-start-md-0  { border-top-left-radius: 0; border-bottom-left-radius: 0 !important; }
}

@media(min-width: 991px){
    .bg-lg-white         { background-color: #fff                         !important; }
    .bg-lg-none          { background-color: transparent                  !important; }
    .bg-lg-shadow-sm     { box-shadow: 0 3px 6px  rgba(0,0,0,0.25)       !important; }
    .bg-lg-shadow-md     { box-shadow: 0 3px 15px rgba(0,0,0,0.25)       !important; }
    .bg-lg-shadow-none   { box-shadow: none                               !important; }
    .rounded-start-lg-5  { border-radius: 0.5rem 0 0 0.5rem              !important; }
    .rounded-start-lg-0  { border-top-left-radius: 0; border-bottom-left-radius: 0 !important; }
}

@media(min-width: 1200px){
    .bg-xl-white         { background-color: #fff                         !important; }
    .bg-xl-none          { background-color: transparent                  !important; }
    .bg-xl-shadow-sm     { box-shadow: 0 3px 6px  rgba(0,0,0,0.25)       !important; }
    .bg-xl-shadow-md     { box-shadow: 0 3px 15px rgba(0,0,0,0.25)       !important; }
    .bg-xl-shadow-none   { box-shadow: none                               !important; }
    .rounded-start-xl-5  { border-radius: 0.5rem 0 0 0.5rem              !important; }
    .rounded-start-xl-0  { border-top-left-radius: 0; border-bottom-left-radius: 0 !important; }
}

@media(min-width: 1400px){
    .bg-xxl-white        { background-color: #fff                         !important; }
    .bg-xxl-none         { background-color: transparent                  !important; }
    .bg-xxl-shadow-sm    { box-shadow: 0 3px 6px  rgba(0,0,0,0.25)       !important; }
    .bg-xxl-shadow-md    { box-shadow: 0 3px 15px rgba(0,0,0,0.25)       !important; }
    .bg-xxl-shadow-none  { box-shadow: none                               !important; }
    .rounded-start-xxl-5 { border-radius: 0.5rem 0 0 0.5rem              !important; }
    .rounded-start-xxl-0 { border-top-left-radius: 0; border-bottom-left-radius: 0 !important; }
}

/* ── Responsive min-height / max-height / min-width / max-width ── */
@media(min-width: 468px){
    .min-h-sm-50  { min-height:  50px !important; } .max-h-sm-50  { max-height:  50px !important; }
    .min-h-sm-100 { min-height: 100px !important; } .max-h-sm-100 { max-height: 100px !important; }
    .min-h-sm-150 { min-height: 150px !important; } .max-h-sm-150 { max-height: 150px !important; }
    .min-h-sm-200 { min-height: 200px !important; } .max-h-sm-200 { max-height: 200px !important; }
    .min-h-sm-250 { min-height: 250px !important; } .max-h-sm-250 { max-height: 250px !important; }
    .min-h-sm-300 { min-height: 300px !important; } .max-h-sm-300 { max-height: 300px !important; }
    .min-h-sm-350 { min-height: 350px !important; } .max-h-sm-350 { max-height: 350px !important; }
    .min-h-sm-400 { min-height: 400px !important; } .max-h-sm-400 { max-height: 400px !important; }
    .min-h-sm-450 { min-height: 450px !important; } .max-h-sm-450 { max-height: 450px !important; }
    .min-h-sm-500 { min-height: 500px !important; } .max-h-sm-500 { max-height: 500px !important; }
    .min-h-sm-550 { min-height: 550px !important; } .max-h-sm-550 { max-height: 550px !important; }
    .min-h-sm-600 { min-height: 600px !important; } .max-h-sm-600 { max-height: 600px !important; }
    .min-w-sm-50  { min-width:  50px !important; }  .max-w-sm-50  { max-width:  50px !important; }
    .min-w-sm-100 { min-width: 100px !important; }  .max-w-sm-100 { max-width: 100px !important; }
    .min-w-sm-150 { min-width: 150px !important; }  .max-w-sm-150 { max-width: 150px !important; }
    .min-w-sm-200 { min-width: 200px !important; }  .max-w-sm-200 { max-width: 200px !important; }
    .min-w-sm-250 { min-width: 250px !important; }  .max-w-sm-250 { max-width: 250px !important; }
    .min-w-sm-300 { min-width: 300px !important; }  .max-w-sm-300 { max-width: 300px !important; }
    .min-w-sm-350 { min-width: 350px !important; }  .max-w-sm-350 { max-width: 350px !important; }
    .min-w-sm-400 { min-width: 400px !important; }  .max-w-sm-400 { max-width: 400px !important; }
    .min-w-sm-450 { min-width: 450px !important; }  .max-w-sm-450 { max-width: 450px !important; }
    .min-w-sm-500 { min-width: 500px !important; }  .max-w-sm-500 { max-width: 500px !important; }
    .max-w-sm-600 { max-width: 600px !important; }
    .max-w-sm-700 { max-width: 700px !important; }
    .max-w-sm-800 { max-width: 800px !important; }
    .max-w-sm-900 { max-width: 900px !important; }
    .max-w-sm-1000{ max-width: 1000px !important; }
    .max-w-sm-1200{ max-width: 1200px !important; }
}

@media(min-width: 768px){
    .min-h-md-50  { min-height:  50px !important; } .max-h-md-50  { max-height:  50px !important; }
    .min-h-md-100 { min-height: 100px !important; } .max-h-md-100 { max-height: 100px !important; }
    .min-h-md-150 { min-height: 150px !important; } .max-h-md-150 { max-height: 150px !important; }
    .min-h-md-200 { min-height: 200px !important; } .max-h-md-200 { max-height: 200px !important; }
    .min-h-md-250 { min-height: 250px !important; } .max-h-md-250 { max-height: 250px !important; }
    .min-h-md-300 { min-height: 300px !important; } .max-h-md-300 { max-height: 300px !important; }
    .min-h-md-350 { min-height: 350px !important; } .max-h-md-350 { max-height: 350px !important; }
    .min-h-md-400 { min-height: 400px !important; } .max-h-md-400 { max-height: 400px !important; }
    .min-h-md-450 { min-height: 450px !important; } .max-h-md-450 { max-height: 450px !important; }
    .min-h-md-500 { min-height: 500px !important; } .max-h-md-500 { max-height: 500px !important; }
    .min-h-md-550 { min-height: 550px !important; } .max-h-md-550 { max-height: 550px !important; }
    .min-h-md-600 { min-height: 600px !important; } .max-h-md-600 { max-height: 600px !important; }
    .min-w-md-50  { min-width:  50px !important; }  .max-w-md-50  { max-width:  50px !important; }
    .min-w-md-100 { min-width: 100px !important; }  .max-w-md-100 { max-width: 100px !important; }
    .min-w-md-150 { min-width: 150px !important; }  .max-w-md-150 { max-width: 150px !important; }
    .min-w-md-200 { min-width: 200px !important; }  .max-w-md-200 { max-width: 200px !important; }
    .min-w-md-250 { min-width: 250px !important; }  .max-w-md-250 { max-width: 250px !important; }
    .min-w-md-300 { min-width: 300px !important; }  .max-w-md-300 { max-width: 300px !important; }
    .min-w-md-350 { min-width: 350px !important; }  .max-w-md-350 { max-width: 350px !important; }
    .min-w-md-400 { min-width: 400px !important; }  .max-w-md-400 { max-width: 400px !important; }
    .min-w-md-450 { min-width: 450px !important; }  .max-w-md-450 { max-width: 450px !important; }
    .min-w-md-500 { min-width: 500px !important; }  .max-w-md-500 { max-width: 500px !important; }
    .max-w-md-600 { max-width: 600px !important; }
    .max-w-md-700 { max-width: 700px !important; }
    .max-w-md-800 { max-width: 800px !important; }
    .max-w-md-900 { max-width: 900px !important; }
    .max-w-md-1000{ max-width: 1000px !important; }
    .max-w-md-1200{ max-width: 1200px !important; }
}

@media(min-width: 991px){
    .min-h-lg-50  { min-height:  50px !important; } .max-h-lg-50  { max-height:  50px !important; }
    .min-h-lg-100 { min-height: 100px !important; } .max-h-lg-100 { max-height: 100px !important; }
    .min-h-lg-150 { min-height: 150px !important; } .max-h-lg-150 { max-height: 150px !important; }
    .min-h-lg-200 { min-height: 200px !important; } .max-h-lg-200 { max-height: 200px !important; }
    .min-h-lg-250 { min-height: 250px !important; } .max-h-lg-250 { max-height: 250px !important; }
    .min-h-lg-300 { min-height: 300px !important; } .max-h-lg-300 { max-height: 300px !important; }
    .min-h-lg-350 { min-height: 350px !important; } .max-h-lg-350 { max-height: 350px !important; }
    .min-h-lg-400 { min-height: 400px !important; } .max-h-lg-400 { max-height: 400px !important; }
    .min-h-lg-450 { min-height: 450px !important; } .max-h-lg-450 { max-height: 450px !important; }
    .min-h-lg-500 { min-height: 500px !important; } .max-h-lg-500 { max-height: 500px !important; }
    .min-h-lg-550 { min-height: 550px !important; } .max-h-lg-550 { max-height: 550px !important; }
    .min-h-lg-600 { min-height: 600px !important; } .max-h-lg-600 { max-height: 600px !important; }
    .min-w-lg-50  { min-width:  50px !important; }  .max-w-lg-50  { max-width:  50px !important; }
    .min-w-lg-100 { min-width: 100px !important; }  .max-w-lg-100 { max-width: 100px !important; }
    .min-w-lg-150 { min-width: 150px !important; }  .max-w-lg-150 { max-width: 150px !important; }
    .min-w-lg-200 { min-width: 200px !important; }  .max-w-lg-200 { max-width: 200px !important; }
    .min-w-lg-250 { min-width: 250px !important; }  .max-w-lg-250 { max-width: 250px !important; }
    .min-w-lg-300 { min-width: 300px !important; }  .max-w-lg-300 { max-width: 300px !important; }
    .min-w-lg-350 { min-width: 350px !important; }  .max-w-lg-350 { max-width: 350px !important; }
    .min-w-lg-400 { min-width: 400px !important; }  .max-w-lg-400 { max-width: 400px !important; }
    .min-w-lg-450 { min-width: 450px !important; }  .max-w-lg-450 { max-width: 450px !important; }
    .min-w-lg-500 { min-width: 500px !important; }  .max-w-lg-500 { max-width: 500px !important; }
    .max-w-lg-600 { max-width: 600px !important; }
    .max-w-lg-700 { max-width: 700px !important; }
    .max-w-lg-800 { max-width: 800px !important; }
    .max-w-lg-900 { max-width: 900px !important; }
    .max-w-lg-1000{ max-width: 1000px !important; }
    .max-w-lg-1200{ max-width: 1200px !important; }
}

@media(min-width: 1200px){
    .min-h-xl-50  { min-height:  50px !important; } .max-h-xl-50  { max-height:  50px !important; }
    .min-h-xl-100 { min-height: 100px !important; } .max-h-xl-100 { max-height: 100px !important; }
    .min-h-xl-150 { min-height: 150px !important; } .max-h-xl-150 { max-height: 150px !important; }
    .min-h-xl-200 { min-height: 200px !important; } .max-h-xl-200 { max-height: 200px !important; }
    .min-h-xl-250 { min-height: 250px !important; } .max-h-xl-250 { max-height: 250px !important; }
    .min-h-xl-300 { min-height: 300px !important; } .max-h-xl-300 { max-height: 300px !important; }
    .min-h-xl-350 { min-height: 350px !important; } .max-h-xl-350 { max-height: 350px !important; }
    .min-h-xl-400 { min-height: 400px !important; } .max-h-xl-400 { max-height: 400px !important; }
    .min-h-xl-450 { min-height: 450px !important; } .max-h-xl-450 { max-height: 450px !important; }
    .min-h-xl-500 { min-height: 500px !important; } .max-h-xl-500 { max-height: 500px !important; }
    .min-h-xl-550 { min-height: 550px !important; } .max-h-xl-550 { max-height: 550px !important; }
    .min-h-xl-600 { min-height: 600px !important; } .max-h-xl-600 { max-height: 600px !important; }
    .min-w-xl-50  { min-width:  50px !important; }  .max-w-xl-50  { max-width:  50px !important; }
    .min-w-xl-100 { min-width: 100px !important; }  .max-w-xl-100 { max-width: 100px !important; }
    .min-w-xl-150 { min-width: 150px !important; }  .max-w-xl-150 { max-width: 150px !important; }
    .min-w-xl-200 { min-width: 200px !important; }  .max-w-xl-200 { max-width: 200px !important; }
    .min-w-xl-250 { min-width: 250px !important; }  .max-w-xl-250 { max-width: 250px !important; }
    .min-w-xl-300 { min-width: 300px !important; }  .max-w-xl-300 { max-width: 300px !important; }
    .min-w-xl-350 { min-width: 350px !important; }  .max-w-xl-350 { max-width: 350px !important; }
    .min-w-xl-400 { min-width: 400px !important; }  .max-w-xl-400 { max-width: 400px !important; }
    .min-w-xl-450 { min-width: 450px !important; }  .max-w-xl-450 { max-width: 450px !important; }
    .min-w-xl-500 { min-width: 500px !important; }  .max-w-xl-500 { max-width: 500px !important; }
    .max-w-xl-600 { max-width: 600px !important; }
    .max-w-xl-700 { max-width: 700px !important; }
    .max-w-xl-800 { max-width: 800px !important; }
    .max-w-xl-900 { max-width: 900px !important; }
    .max-w-xl-1000{ max-width: 1000px !important; }
    .max-w-xl-1200{ max-width: 1200px !important; }
}

@media(min-width: 1400px){
    .min-h-xxl-50  { min-height:  50px !important; } .max-h-xxl-50  { max-height:  50px !important; }
    .min-h-xxl-100 { min-height: 100px !important; } .max-h-xxl-100 { max-height: 100px !important; }
    .min-h-xxl-150 { min-height: 150px !important; } .max-h-xxl-150 { max-height: 150px !important; }
    .min-h-xxl-200 { min-height: 200px !important; } .max-h-xxl-200 { max-height: 200px !important; }
    .min-h-xxl-250 { min-height: 250px !important; } .max-h-xxl-250 { max-height: 250px !important; }
    .min-h-xxl-300 { min-height: 300px !important; } .max-h-xxl-300 { max-height: 300px !important; }
    .min-h-xxl-350 { min-height: 350px !important; } .max-h-xxl-350 { max-height: 350px !important; }
    .min-h-xxl-400 { min-height: 400px !important; } .max-h-xxl-400 { max-height: 400px !important; }
    .min-h-xxl-450 { min-height: 450px !important; } .max-h-xxl-450 { max-height: 450px !important; }
    .min-h-xxl-500 { min-height: 500px !important; } .max-h-xxl-500 { max-height: 500px !important; }
    .min-h-xxl-550 { min-height: 550px !important; } .max-h-xxl-550 { max-height: 550px !important; }
    .min-h-xxl-600 { min-height: 600px !important; } .max-h-xxl-600 { max-height: 600px !important; }
    .min-w-xxl-50  { min-width:  50px !important; }  .max-w-xxl-50  { max-width:  50px !important; }
    .min-w-xxl-100 { min-width: 100px !important; }  .max-w-xxl-100 { max-width: 100px !important; }
    .min-w-xxl-150 { min-width: 150px !important; }  .max-w-xxl-150 { max-width: 150px !important; }
    .min-w-xxl-200 { min-width: 200px !important; }  .max-w-xxl-200 { max-width: 200px !important; }
    .min-w-xxl-250 { min-width: 250px !important; }  .max-w-xxl-250 { max-width: 250px !important; }
    .min-w-xxl-300 { min-width: 300px !important; }  .max-w-xxl-300 { max-width: 300px !important; }
    .min-w-xxl-350 { min-width: 350px !important; }  .max-w-xxl-350 { max-width: 350px !important; }
    .min-w-xxl-400 { min-width: 400px !important; }  .max-w-xxl-400 { max-width: 400px !important; }
    .min-w-xxl-450 { min-width: 450px !important; }  .max-w-xxl-450 { max-width: 450px !important; }
    .min-w-xxl-500 { min-width: 500px !important; }  .max-w-xxl-500 { max-width: 500px !important; }
    .max-w-xxl-600 { max-width: 600px !important; }
    .max-w-xxl-700 { max-width: 700px !important; }
    .max-w-xxl-800 { max-width: 800px !important; }
    .max-w-xxl-900 { max-width: 900px !important; }
    .max-w-xxl-1000{ max-width: 1000px !important; }
    .max-w-xxl-1200{ max-width: 1200px !important; }
}

/* ── Responsive fixed width utilities (px) ── */
@media(min-width: 468px){
    .w-px-sm-50 { width:  50px !important; }
    .w-px-sm-100{ width: 100px !important; }
    .w-px-sm-150{ width: 150px !important; }
    .w-px-sm-200{ width: 200px !important; }
    .w-px-sm-250{ width: 250px !important; }
    .w-px-sm-300{ width: 300px !important; }
    .w-px-sm-350{ width: 350px !important; }
    .w-px-sm-400{ width: 400px !important; }
    .w-px-sm-450{ width: 450px !important; }
    .w-px-sm-500{ width: 500px !important; }
}

@media(min-width: 768px){
    .w-px-md-50 { width:  50px !important; }
    .w-px-md-100{ width: 100px !important; }
    .w-px-md-150{ width: 150px !important; }
    .w-px-md-200{ width: 200px !important; }
    .w-px-md-250{ width: 250px !important; }
    .w-px-md-300{ width: 300px !important; }
    .w-px-md-350{ width: 350px !important; }
    .w-px-md-400{ width: 400px !important; }
    .w-px-md-450{ width: 450px !important; }
    .w-px-md-500{ width: 500px !important; }
}

@media(min-width: 991px){
    .w-px-lg-50 { width:  50px !important; }
    .w-px-lg-100{ width: 100px !important; }
    .w-px-lg-150{ width: 150px !important; }
    .w-px-lg-200{ width: 200px !important; }
    .w-px-lg-250{ width: 250px !important; }
    .w-px-lg-300{ width: 300px !important; }
    .w-px-lg-350{ width: 350px !important; }
    .w-px-lg-400{ width: 400px !important; }
    .w-px-lg-450{ width: 450px !important; }
    .w-px-lg-500{ width: 500px !important; }
}

@media(min-width: 1200px){
    .w-px-xl-50 { width:  50px !important; }
    .w-px-xl-100{ width: 100px !important; }
    .w-px-xl-150{ width: 150px !important; }
    .w-px-xl-200{ width: 200px !important; }
    .w-px-xl-250{ width: 250px !important; }
    .w-px-xl-300{ width: 300px !important; }
    .w-px-xl-350{ width: 350px !important; }
    .w-px-xl-400{ width: 400px !important; }
    .w-px-xl-450{ width: 450px !important; }
    .w-px-xl-500{ width: 500px !important; }
}

@media(min-width: 1400px){
    .w-px-xxl-50 { width:  50px !important; }
    .w-px-xxl-100{ width: 100px !important; }
    .w-px-xxl-150{ width: 150px !important; }
    .w-px-xxl-200{ width: 200px !important; }
    .w-px-xxl-250{ width: 250px !important; }
    .w-px-xxl-300{ width: 300px !important; }
    .w-px-xxl-350{ width: 350px !important; }
    .w-px-xxl-400{ width: 400px !important; }
    .w-px-xxl-450{ width: 450px !important; }
    .w-px-xxl-500{ width: 500px !important; }
}