/* Responsive nhỏ cho mobile nếu cần */

@media (max-width: 1024px) {
    .container, .container-md, .container-sm {
       padding: 0;
    }
    .section-2 .container{padding: 0}
    .section-2 .row{gap: 20px}
    .section-3{
        padding: 0 20px !important
    }
    .font-35{

            font-size:27px;line-height: 33px;

        }

    .section-2 .col-left {

        padding-right: 40px;

    }

    .section-2 .col-left-1

    {

        right: 0px;

    }

    .section-1 h1

    {

        font-size: 65px;

        line-height: 70px;

    }

    .d-grid-3

    {

            grid-template-columns: repeat(1, 1fr);

    }

        .container, .container-md, .container-sm {

        max-width: 100%;

    }

    header .col-right{

        width: auto !important;

    }

    .div-icon-menu

    {

        border: thin solid #fff;

    padding: 7px 5px 5px;

    display: flex;

    align-items: center;

    border-radius: 5px;

    }

    header .div-icon-menu

    {

        order: 1;

    }

    header .navbar-collapse

    {

        position: absolute;

        top: 100%;

        background: #fff;

        width: 100%;

        left: 0;z-index: 3;

    }

    header .nav-item

    {

        width: 100%;

    }

    header .navbar-light .navbar-nav .nav-link

    {

        color: #000 !important;

    }

    /* Style cho nút Toggler tùy chỉnh */

.navbar-toggler {

    width: 20px;

    height: 20px;

    position: relative;

    transition: .5s ease-in-out;

    cursor: pointer;

    padding: 0;

    border: none;

    outline: none !important; /* Bỏ viền xanh khi click */

}



.navbar-toggler .icon-bar {

    display: block;

    position: absolute;

    height: 2px;

    width: 100%;

    background: #fff; /* Màu của icon 3 gạch - bạn có thể đổi màu tùy ý */

    border-radius: 1px;

    opacity: 1;

    left: 0;

    transform: rotate(0deg);

    transition: .25s ease-in-out;

}



/* Vị trí ban đầu của 3 thanh */

.navbar-toggler .top-bar { top: 0px; }

.navbar-toggler .middle-bar { top: 8px; }

.navbar-toggler .bottom-bar { top: 16px; }



/* Hiệu ứng biến thành dấu X khi menu ĐANG MỞ (Nút không có class .collapsed) */

.navbar-toggler:not(.collapsed) .top-bar {

    top: 8px;

    transform: rotate(135deg);

}



.navbar-toggler:not(.collapsed) .middle-bar {

    opacity: 0;

    left: -20px;

}



.navbar-toggler:not(.collapsed) .bottom-bar {

    top: 8px;

    transform: rotate(-135deg);

}

    .section-4 .col-top-2

    {

        width: 70%;

    }

    .section-1 .container-1 {

        padding: 0 20px;

    }

    .footer-4

    {

        margin-bottom: 2rem !important;

    }

    .footer-5

    {

        flex-direction: column;

        gap: 10px;

    }

    .service-item

    {

        padding: 10px;

    }

    .service {

        height: 325px !important;

    }

}

@media (max-width: 768px) {
    header .shadow-sm
    {
        flex-wrap: nowrap;
    }
    .footer-c .row
    {
        flex-wrap: wrap; gap: 20px;
    }
.container, .container-md, .container-sm {
       padding: 0;
    }
    .section-2 .row{

        flex-wrap: wrap;

    }

    .footer-3

    {

        padding: 0;

    }

    .footer-5 .icon-list

    {

        font-size: 15px;

    }

    .section-2 .col-right-2,

    .section-3 .col-top-2,

    .section-4 .col-top-2,

    .section-5 .col-top-2,

    .footer-1,

    .footer-2

    {

        font-size: 30px;

    }

    .testimonials

    {

        width: auto !important;

    }

    .section-4 .col-top-2

    {

        width: auto;

    }

        .section-1 h1 {

        font-size: 35px;

        line-height: 40px;

    }

    .section-1 .btn

    {

        font-size: 18px;

    }

    .section-1 .section-1-list

    {

        flex-direction: column;

        gap: 10px;

    }

    .service-item {

        padding: 70px 10px 10px;

    }

    .service

    {

        height: auto !important;

    }

    .d-grid-4 {



    grid-template-columns: repeat(2, 1fr);

    }

    .btn-free-quote {

        padding: 8px 15px;

        font-size: 12px;

    }

    .header-actions

    {

        display: none !important;

    }

    .section-3 .col-top-2

    {

        width: 100% !important;

    }

    .footer-3 {

        flex-direction: column;

    }

    .section-5 .col-top-2

    {

        width: 100% !important;

    }

    .testimonials-item-content

    {

        width: auto;

    }

}