/*====================================================

AXIS SOLUTIONS LLC
responsive.css

Responsive Layout
Desktop • Laptop • Tablet • Mobile

======================================================*/


/*====================================================

LARGE DESKTOP
1400px

======================================================*/

@media screen and (max-width:1400px){

.container{

    width:92%;

}

.hero-grid{

    gap:60px;

}

.hero-image img{

    max-width:500px;

}

}


/*====================================================

DESKTOP
1200px

======================================================*/

@media screen and (max-width:1200px){

h1{

    font-size:3.3rem;

}

h2{

    font-size:2.5rem;

}

.hero-grid{

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.about-grid{

    gap:50px;

}

.contact-grid{

    grid-template-columns:1fr 400px;

}

.services-grid{

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

}

.projects-grid{

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

}

.features-grid{

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

}

.process-grid{

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

}

.technology-grid{

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

}

.stats-grid{

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

}

.footer-grid{

    grid-template-columns:2fr 1fr 1fr;

}

}


/*====================================================

LAPTOP
1024px

======================================================*/

@media screen and (max-width:1024px){

section{

    padding:90px 0;

}

.hero{

    padding-top:150px;

}

.hero-content h1{

    font-size:3rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-wrap:wrap;

}

.hero-features{

    gap:15px;

}

.contact-grid{

    grid-template-columns:1fr;

    gap:45px;

}

.contact-card{

    width:100%;

}

.footer-grid{

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

}

}


/*====================================================

TABLET
992px

======================================================*/

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

.navbar{

    height:80px;

}

.logo img{

    height:50px;

}

.menu{

    display:none;

}

.mobile-menu{

    display:block;

}

.header-right{

    gap:10px;

}

.btn-header{

    display:none;

}

.hero{

    min-height:auto;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

}

.hero-image img{

    max-width:420px;

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    order:1;

}

.about-content{

    order:2;

}

.services-grid{

    grid-template-columns:1fr 1fr;

}

.projects-grid{

    grid-template-columns:1fr 1fr;

}

.features-grid{

    grid-template-columns:1fr 1fr;

}

.process-grid{

    grid-template-columns:1fr 1fr;

}

.technology-grid{

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

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.stats-grid{

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

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

.section-header{

    margin-bottom:55px;

}

.feature-card,

.service-card,

.project-card,

.contact-card{

    padding:30px;

}

}


/*====================================================

SMALL TABLET
850px

======================================================*/

@media screen and (max-width:850px){

.container{

    width:94%;

}

.hero-content h1{

    font-size:2.7rem;

}

h2{

    font-size:2.2rem;

}

.footer-grid{

    gap:35px;

}

.hero-image img{

    max-width:380px;

}

.service-card{

    min-height:auto;

}

.project-card img{

    height:220px;

}

}


/*====================================================

END PART 1

Next:
768px
576px
480px
360px

======================================================*/

/*====================================================

TABLET PORTRAIT
768px

======================================================*/

@media screen and (max-width:768px){

section{

    padding:75px 0;

}

.container{

    width:94%;

}

h1{

    font-size:2.4rem;

    line-height:1.2;

}

h2{

    font-size:2rem;

}

h3{

    font-size:1.3rem;

}

.hero{

    padding-top:120px;

    text-align:center;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.btn,

.btn-outline{

    width:100%;

    margin:0;

}

.hero-features{

    flex-direction:column;

    align-items:center;

}

.services-grid,

.projects-grid,

.features-grid,

.process-grid,

.technology-grid,

.stats-grid,

.footer-grid,

.contact-grid{

    grid-template-columns:1fr;

}

.about-grid{

    grid-template-columns:1fr;

}

.hero-image img{

    max-width:340px;

}

.project-card img{

    height:220px;

}

.contact-card{

    padding:30px;

}

.footer{

    text-align:center;

}

.footer-logo{

    margin:auto auto 25px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.social-links{

    justify-content:center;

}

}


/*====================================================

LARGE PHONES
576px

======================================================*/

@media screen and (max-width:576px){

.hero{

    padding-top:110px;

}

.logo img{

    height:44px;

}

.navbar{

    height:70px;

}

.language-btn{

    width:38px;

    height:38px;

    font-size:.85rem;

}

.mobile-menu{

    font-size:1.8rem;

}

.section-header{

    margin-bottom:45px;

}

.section-header span{

    font-size:.85rem;

}

.hero-tag{

    font-size:.8rem;

    padding:8px 16px;

}

.hero-content h1{

    font-size:2.2rem;

}

.hero-content p{

    font-size:.95rem;

}

.service-card,

.feature-card,

.project-card,

.step,

.contact-card,

.technology-item{

    padding:25px;

}

.contact-item{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.contact-item i{

    margin-bottom:10px;

}

.footer{

    padding:70px 0 25px;

}

}


/*====================================================

PHONES
480px

======================================================*/

@media screen and (max-width:480px){

body{

    font-size:15px;

}

.container{

    width:95%;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.8rem;

}

.hero-image img{

    max-width:280px;

}

.project-card img{

    height:180px;

}

.service-icon{

    width:65px;

    height:65px;

}

.service-icon i{

    font-size:1.8rem;

}

.step-number{

    width:60px;

    height:60px;

    font-size:1.2rem;

}

.stat-box h2{

    font-size:2.5rem;

}

.footer-grid{

    gap:25px;

}

.footer h3{

    margin-bottom:18px;

}

.footer p{

    font-size:.95rem;

}

}


/*====================================================

SMALL DEVICES
360px

======================================================*/

@media screen and (max-width:360px){

h1{

    font-size:1.75rem;

}

h2{

    font-size:1.55rem;

}

.hero{

    padding-top:100px;

}

.hero-image img{

    max-width:240px;

}

.btn,

.btn-outline,

.btn-header{

    font-size:.9rem;

    padding:14px 18px;

}

.hero-tag{

    font-size:.75rem;

}

.contact-card{

    padding:20px;

}

.service-card,

.feature-card,

.step,

.project-card{

    padding:20px;

}

.service-icon{

    width:55px;

    height:55px;

}

.service-icon i{

    font-size:1.5rem;

}

.footer{

    padding:60px 0 20px;

}

.footer p{

    font-size:.9rem;

}

}


/*====================================================

PRINT

======================================================*/

@media print{

.header,

.footer,

.mobile-menu,

.btn,

.btn-outline{

display:none;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

}


/*====================================================

LANDSCAPE MOBILE

======================================================*/

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

.hero{

min-height:auto;

padding-top:100px;

padding-bottom:50px;

}

.hero-grid{

grid-template-columns:1fr 1fr;

}

.hero-image img{

max-width:260px;

}

}


/*====================================================

HIGH RESOLUTION

======================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

img{

image-rendering:auto;

}

}


/*====================================================

ACCESSIBILITY

======================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*====================================================

END OF FILE

Axis Solutions LLC
Responsive Stylesheet
Version 1.0

======================================================*/