/*==================================================
 APPLUMY RESPONSIVE
 Desktop First
==================================================*/

/*=========================================
Large Desktop
=========================================*/

@media (max-width:1400px){

.container{
padding:20px 0;
width:min(1200px,100%);

}

.hero-wrapper{

gap:60px;

}

.hero-content h1{

font-size:52px;

}

.section-heading h2{

font-size:36px;

}

}

/*=========================================
Laptop
=========================================*/

@media (max-width:1200px){

.container{

width:92%;

}

/* Header */

.header-wrapper{

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

column-gap:30px;

}

.left-menu ul,

.right-menu ul{

gap:24px;

}

/* Hero */

.hero{

padding:40px 0 30px;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:70px;

}

.hero-content{

text-align:center;

max-width:900px;

margin:auto;

}

.hero-content p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-visual{

justify-content:center;

}

/* Browser */

.browser-window{

max-width:700px;

}

.floating-card{

display:none;

}

/* About */

.about-wrapper{

grid-template-columns:1fr;

gap:70px;

}

.about-image{

max-width:650px;

margin:auto;

}

.about-content{

text-align:center;

max-width:900px;

margin:auto;

}

.about-list{

justify-content:center;

}

/* Services */

.services-grid{

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

}

/* Why */

.why-grid{

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

}

/* Technology */

.technology-grid{

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

}

/* Process */

.process-grid{

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

}

/* Projects */

.projects-grid{

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

}

/* Testimonials */

.testimonial-grid{

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

}

/* FAQ */

.faq-wrapper{

grid-template-columns:1fr;

}

.faq-cta{

position:relative;

top:0;

}

/* Footer */

.footer-grid{

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

gap:40px;

}

}
/*==================================================
 TABLET RESPONSIVE
==================================================*/

@media (max-width:991px){

/*==========================
 GLOBAL
==========================*/

section{

padding:90px 0;

}

.container{

width:92%;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading h2{

font-size:40px;

line-height:1.2;

}

.section-heading p{

font-size:17px;

max-width:700px;

margin:20px auto 0;

}

/*==========================
 HEADER
==========================*/

.topbar{

display:none;

}

.site-header{

top:0;

}

.header-wrapper{

height:80px;

grid-template-columns:auto 1fr auto;

}

.left-menu,

.right-menu{

display:none;

}

.mobile-toggle{

display:flex;
flex-direction: column;

}

.header-logo{

justify-self:center;

}

.header-logo img{

max-height:42px;

}

/*==========================
 HERO
==========================*/

.hero{

padding:140px 0 80px;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:52px;

line-height:1.1;

}

.hero-content p{

font-size:18px;

max-width:700px;

margin:25px auto 35px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

gap:40px;

}

.browser-window{

max-width:650px;

margin:auto;

}

/*==========================
 TRUSTED
==========================*/

.trusted-logos{

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

gap:20px;

}

/*==========================
 SERVICES
==========================*/

.services-grid{

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

gap:24px;

}

.service-card{

padding:30px;

}

/*==========================
 ABOUT
==========================*/

.about-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.about-content{

text-align:center;

}

.about-content h2{

font-size:40px;

}

.about-list{

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

gap:20px;

}

.about-image{

max-width:600px;

margin:auto;

}

.experience-card,

.projects-card{

width:180px;

padding:18px;

}

/*==========================
 WHY
==========================*/

.why-grid{

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

gap:24px;

}

/*==========================
 TECHNOLOGY
==========================*/

.technology-grid{

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

gap:24px;

}

/*==========================
 PROCESS
==========================*/

.process-grid{

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

gap:24px;

}

/*==========================
 PROJECTS
==========================*/

.projects-grid{

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

gap:24px;

}

/*==========================
 TESTIMONIALS
==========================*/

.testimonial-grid{

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

gap:24px;

}

/*==========================
 FAQ
==========================*/

.faq-wrapper{

grid-template-columns:1fr;

gap:30px;

}

.faq-cta{

position:relative;

top:0;

}

/*==========================
 FOOTER
==========================*/

.footer-cta-box{

grid-template-columns:1fr;

text-align:center;

gap:35px;

}

.footer-grid{

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

gap:40px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

gap:20px;

}

.footer-links{

justify-content:center;

flex-wrap:wrap;

}

}
/*==================================================
 MOBILE RESPONSIVE
==================================================*/

@media (max-width:767px){

/*==========================
 GLOBAL
==========================*/

body{

overflow-x:hidden;

}

section{

padding:70px 0;

}

.container{

width:92%;

padding:0;

}

.section-heading{

margin-bottom:45px;

text-align:center;

}

.section-heading span{

font-size:11px;

letter-spacing:1.5px;

padding:8px 18px;

}

.section-heading h2{

font-size:30px;

line-height:1.25;

margin:18px 0;

}

.section-heading p{

font-size:15px;

line-height:1.8;

}

/*==========================
 HEADER
==========================*/

.site-header{

height:72px;

}

.header-wrapper{

height:72px;

grid-template-columns:auto 1fr auto;

}

.header-logo img{

max-height:34px;

}

.header-logo a{

font-size:30px;

}

.search-toggle{

display:none;

}

.header-btn{

display:none;

}

.mobile-toggle{

display:flex;

align-items:center;

justify-content:center;

}

/*==========================
 HERO
==========================*/

.hero{

padding:120px 0 70px;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:45px;

}

.hero-content{

text-align:center;

}

.hero-badge{

font-size:11px;

padding:8px 18px;

}

.hero-content h1{

font-size:38px;

line-height:1.12;

margin:20px 0;

}

.hero-content p{

font-size:15px;

line-height:1.9;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:14px;

}

.hero-buttons a{

width:100%;

justify-content:center;

height:54px;

}

.hero-stats{

display:grid;

grid-template-columns:1fr;

gap:25px;

text-align:center;
grid-auto-flow: column;
}

.stat-item{

padding-bottom:20px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.stat-item:last-child{

border:none;

padding-bottom:0;

}

/*==========================
 HERO IMAGE
==========================*/

.hero-image{

width:100%;

}

.browser-window,

.dashboard{

width:100%;

max-width:100%;

}

.dashboard-grid{

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

gap:14px;

}

.dashboard-card{

padding:18px;

}

.dashboard-card h4{

font-size:13px;

}

.dashboard-card strong{

font-size:22px;

}

.floating-card,

.performance-card,

.speed-card,

.seo-card{

display:none;

}

/*==========================
 COMMON GRID
==========================*/

.services-grid,

.why-grid,

.technology-grid,

.process-grid,

.projects-grid,

.testimonial-grid{

grid-template-columns:1fr;

gap:20px;

}

/*==========================
 CARD
==========================*/

.service-card,

.why-card,

.technology-card,

.process-card,

.project-card,

.testimonial-card{

padding:24px;

border-radius:18px;

}

.service-card h3,

.why-card h3,

.technology-card h3,

.process-card h3,

.project-content h3{

font-size:22px;

}

.service-card p,

.why-card p,

.technology-card span,

.process-card p,

.project-content p,

.testimonial-card p{

font-size:15px;

line-height:1.8;

}

/*==========================
 ABOUT
==========================*/

.about-wrapper{

grid-template-columns:1fr;

gap:45px;

}

.about-content{

text-align:center;

}

.about-content h2{

font-size:30px;

}

.about-list{

grid-template-columns:1fr;

gap:16px;

}

.about-image{

max-width:100%;

}

.experience-card,

.projects-card{

position:relative;

left:0;

right:0;

bottom:0;

top:0;

width:100%;

margin-top:20px;

}

/*==========================
 PROJECTS
==========================*/

.project-content{

padding:22px;

}

.project-meta{

gap:10px;

}

.project-meta span{

font-size:12px;

padding:8px 12px;

}

/*==========================
 TESTIMONIAL
==========================*/

.testimonial-author{

gap:14px;

}

.testimonial-author img{

width:56px;

height:56px;

}

.testimonial-author h4{

font-size:16px;

}

/*==========================
 FAQ
==========================*/

.faq-wrapper{

grid-template-columns:1fr;

gap:24px;

}

.faq-question{

padding:20px;

font-size:16px;

}

.faq-answer{

padding:0 20px 20px;

}

.faq-cta{

padding:26px;

border-radius:20px;

}

.faq-cta h3{

font-size:28px;

line-height:1.3;

}

.faq-cta a{

width:100%;

justify-content:center;

}

/*==========================
 FOOTER CTA
==========================*/

.footer-cta{

padding:10px 0 40px;

}

.footer-cta-box{

padding:28px;

border-radius:22px;

}

.footer-cta-content{

text-align:center;

}

.footer-cta-content h2{

font-size:30px;

line-height:1.25;

}

.footer-cta-content p{

font-size:15px;

}

.footer-cta-btn a{

width:100%;

}

/*==========================
 FOOTER
==========================*/

.footer-grid{

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.footer-col ul{

display:flex;

flex-direction:column;

align-items:center;

}

.footer-bottom{

flex-direction:column;

gap:18px;

text-align:center;

}

.footer-links{

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

/*==========================
 SCROLL TOP
==========================*/

.scroll-top{

width:48px;

height:48px;

right:18px;

bottom:18px;

font-size:18px;

}

}
/*==================================================
 SMALL MOBILE
==================================================*/

@media (max-width:480px){

/*==========================
 GLOBAL
==========================*/

html{

font-size:15px;

}

.container{

width:94%;

}

section{

padding:10px 0;

}

.section-heading{

margin-bottom:36px;

}

.section-heading span{

font-size:10px;

padding:7px 16px;

}

.section-heading h2{

font-size:26px;

line-height:1.25;

}

.section-heading p{

font-size:14px;

line-height:1.8;

}

/*==========================
 HEADER
==========================*/

.site-header{

height:66px;

}

.header-wrapper{

height:66px;

}

.header-logo img{

max-height:30px;

}

.header-logo a{

font-size:26px;

}


/*==========================
 HERO
==========================*/

.hero{

padding:100px 0 55px;

}

.hero-badge{

font-size:10px;

}

.hero-content h1{

font-size:30px;

line-height:1.15;

}

.hero-content p{

font-size:14px;

}

.hero-buttons a{

height:50px;

font-size:14px;

}

.hero-stats{

gap:20px;

}

.stat-item h3{

font-size:32px;

}

.stat-item span{

font-size:13px;

}

/*==========================
 DASHBOARD
==========================*/

.dashboard{

padding:18px;

border-radius:18px;

}

.dashboard-grid{

grid-template-columns:1fr;

gap:12px;

}

.dashboard-card{

padding:16px;

}

.dashboard-card strong{

font-size:20px;

}

/*==========================
 ALL CARDS
==========================*/

.service-card,

.why-card,

.technology-card,

.process-card,

.project-card,

.testimonial-card,

.faq-item{

border-radius:16px;

}

.service-card h3,

.why-card h3,

.technology-card h3,

.process-card h3,

.project-content h3{

font-size:20px;

}

.service-card p,

.why-card p,

.process-card p,

.project-content p,

.testimonial-card p,

.faq-answer p{

font-size:14px;

}

/*==========================
 ABOUT
==========================*/

.about-content h2{

font-size:28px;

}

.about-list{

gap:14px;

}

.about-item{

padding:18px;

}

/*==========================
 PROJECTS
==========================*/

.project-category{

font-size:10px;

padding:7px 14px;

}

.project-meta{

flex-direction:column;

align-items:flex-start;

}

.project-meta span{

width:100%;

justify-content:center;

text-align:center;

}

/*==========================
 TESTIMONIAL
==========================*/

.testimonial-rating{

font-size:16px;

letter-spacing:2px;

}

.testimonial-author img{

width:50px;

height:50px;

}

.testimonial-author h4{

font-size:15px;

}

.testimonial-author span{

font-size:12px;

}

/*==========================
 FAQ
==========================*/

.faq-question{

padding:18px;

font-size:14px;

}

.faq-question span{

width:34px;

height:34px;

font-size:13px;

}

.faq-cta{

padding:22px;

}

.faq-cta h3{

font-size:24px;

}

.faq-cta p{

font-size:14px;

}

.faq-cta a{

height:50px;

font-size:14px;

}

/*==========================
 FOOTER
==========================*/

.footer-cta-box{

padding:24px;

}

.footer-cta-content h2{

font-size:26px;

}

.footer-grid{

gap:28px;

}

.footer-social{

gap:10px;

}

.footer-social a{

width:42px;

height:42px;

}

.footer-bottom{

padding-top:24px;

margin-top:35px;

}

.footer-links{

gap:12px;

}

.footer-links a{

font-size:13px;

}

.scroll-top{

width:44px;

height:44px;

right:14px;

bottom:14px;

}

}

/*==================================================
 EXTRA SMALL DEVICES
==================================================*/

@media (max-width:360px){

.hero-content h1{

font-size:26px;

}

.section-heading h2{

font-size:22px;

}

.about-content h2{

font-size:24px;

}

.project-content h3,

.service-card h3,

.why-card h3,

.technology-card h3,

.process-card h3{

font-size:18px;

}

.hero-buttons a{

font-size:13px;

height:48px;

}

.dashboard-card{

padding:14px;

}

}

/*==================================================
 LANDSCAPE MOBILE
==================================================*/

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

.hero{

padding:120px 0 70px;

}

.hero-wrapper{

gap:35px;

}

}

/*==================================================
 IMAGE FIX
==================================================*/

img{

max-width:100%;

height:auto;

display:block;

}

/*==================================================
 OVERFLOW FIX
==================================================*/

body{

overflow-x:hidden;

}

section,

.container,

.hero-wrapper,

.about-wrapper,

.services-grid,

.why-grid,

.technology-grid,

.process-grid,

.projects-grid,

.testimonial-grid,

.footer-grid{

overflow:hidden;

}

/*==================================================
 END RESPONSIVE
==================================================*/