```css
/*=========================================================
  SINHOI 2026
  RESPONSIVE.CSS
==========================================================*/


/*=========================================================
≤ 1440px
==========================================================*/

@media (max-width:1440px){

.container{
    max-width:1200px;
}

.hero-grid{
    gap:60px;
}

.display-xl{
    font-size:clamp(3.8rem,7vw,6rem);
}

}


/*=========================================================
≤ 1200px
==========================================================*/

@media (max-width:1200px){

.container{
    padding-inline:28px;
}

.section{
    padding:100px 0;
}

.section-lg{
    padding:140px 0;
}

.grid-4{
    grid-template-columns:repeat(2,1fr);
}

.grid-5{
    grid-template-columns:repeat(3,1fr);
}

.logo-grid{
    grid-template-columns:repeat(4,1fr);
}

.service-grid{
    grid-template-columns:repeat(2,1fr);
}

.stats{
    grid-template-columns:repeat(2,1fr);
}

.process{
    grid-template-columns:repeat(2,1fr);
}

.team-grid{
    grid-template-columns:repeat(2,1fr);
}

.blog-grid{
    grid-template-columns:repeat(2,1fr);
}

.portfolio-grid{
    grid-template-columns:repeat(2,1fr);
}

.pricing-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:2fr 1fr 1fr;
}

.hero{
    min-height:90vh;
}

}


/*=========================================================
≤ 1024px
==========================================================*/

@media (max-width:1024px){

.hero-grid,
.split,
.feature-grid,
.cta-grid{

    grid-template-columns:1fr;

}

.hero{

    min-height:auto;

    padding-top:150px;

    padding-bottom:120px;

}

.hero-content{

    max-width:100%;

}

.hero-image{

    margin-top:40px;

}

.grid-3{

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

}

.grid-4{

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

}

.grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

.panel{

    padding:50px;

}

.cta{

    padding:80px 50px;

}

.main-navigation{

    display:none;

}

.menu-toggle{

    display:flex;

}

.header-actions{

    gap:12px;

}

.header-cta{

    display:none;

}

.elementor-nav-menu{

    display:none;

}

}


/*=========================================================
≤ 768px
==========================================================*/

@media (max-width:768px){

.container{

    padding-inline:20px;

}

.section{

    padding:80px 0;

}

.section-lg{

    padding:100px 0;

}

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.feature-grid,
.stats,
.process,
.team-grid,
.blog-grid,
.logo-grid,
.service-grid,
.portfolio-grid,
.pricing-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.hero{

    text-align:center;

}

.hero-actions{

    justify-content:center;

}

.hero-title{

    max-width:100%;

}

.hero-subtitle{

    max-width:100%;

}

.display-xl{

    font-size:3.2rem;

}

.display-lg{

    font-size:2.8rem;

}

h1{

    font-size:2.8rem;

}

h2{

    font-size:2.2rem;

}

h3{

    font-size:1.7rem;

}

.panel{

    padding:40px;

}

.cta{

    padding:60px 35px;

    text-align:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.btn-group{

    justify-content:center;

}

.elementor-column{

    width:100% !important;

}

.elementor-widget-image{

    text-align:center;

}

.elementor-widget-button{

    text-align:center;

}

.elementor-button{

    width:100%;

}

.scroll-top{

    right:20px;

    bottom:20px;

}

}


/*=========================================================
≤ 576px
==========================================================*/

@media (max-width:576px){

body{

    font-size:16px;

}

.container{

    padding-inline:18px;

}

.section{

    padding:70px 0;

}

.hero{

    padding-top:130px;

}

.hero-actions{

    flex-direction:column;

}

.btn,
.elementor-button{

    width:100%;

}

.card,
.service-card,
.testimonial,
.panel{

    padding:28px;

}

.footer-container{

    padding:70px 0 30px;

}

.footer-title{

    margin-bottom:20px;

}

.footer-social{

    justify-content:flex-start;

}

.header-main{

    height:76px;

}

.site-logo img{

    height:42px;

}

.display-xl{

    font-size:2.8rem;

}

.display-lg{

    font-size:2.4rem;

}

.display-md{

    font-size:2rem;

}

h1{

    font-size:2.3rem;

}

h2{

    font-size:1.9rem;

}

h3{

    font-size:1.5rem;

}

.lead{

    font-size:1.05rem;

}

blockquote{

    padding:28px;

}

blockquote::before{

    font-size:4rem;

}

.stat-number{

    font-size:2.6rem;

}

}


/*=========================================================
≤ 400px
==========================================================*/

@media (max-width:400px){

.container{

    padding-inline:16px;

}

.section{

    padding:60px 0;

}

.display-xl{

    font-size:2.4rem;

}

.display-lg{

    font-size:2rem;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.65rem;

}

h3{

    font-size:1.3rem;

}

.hero-actions{

    gap:14px;

}

.btn,
.elementor-button{

    min-height:50px;

    padding:0 22px;

    font-size:.88rem;

}

.card,
.service-card,
.panel{

    padding:22px;

}

.footer-bottom-menu{

    flex-direction:column;

    gap:14px;

}

.footer-social{

    gap:10px;

}

.scroll-top{

    width:46px;

    height:46px;

}

}


/*=========================================================
LANDSCAPE PHONES
==========================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

    min-height:auto;

    padding:120px 0 80px;

}

}


/*=========================================================
PRINT
==========================================================*/

@media print{

.site-header,
.site-footer,
.scroll-top,
.menu-toggle{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

a{

    text-decoration:none;

}

}
```