/*
==========================================================
MYAYA TECHNOLOGIES

Responsive Engine

Version 3.0

Part 1 / 10
==========================================================
*/

/*==========================================================
LARGE DESKTOP
==========================================================*/

@media (max-width:1600px){

.container{

max-width:1400px;

}

}

/*==========================================================
DESKTOP
==========================================================*/

@media (max-width:1400px){

.container{

max-width:1200px;

padding:0 40px;

}

.hero-grid{

gap:60px;

}

}

/*==========================================================
LAPTOP
==========================================================*/

@media (max-width:1200px){

.nav-links{

gap:22px;

}

.hero-title{

font-size:4.8rem;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto;

}

.hero-actions{

justify-content:center;

}

.hero-metrics{

max-width:700px;

margin:auto;

}

.hero-visual{

margin-top:80px;

}

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:992px){

.nav-links{

display:none;

}

.nav-right .btn{

display:none;

}

.hamburger{

display:flex;

justify-content:center;

align-items:center;

}

.navbar{

height:76px;

padding:0 20px;

}

.brand-logo{

width:48px;

}

.brand-text h2{

font-size:1rem;

}

.hero{

padding-top:150px;

}

.hero-title{

font-size:4rem;

}

.hero-description{

font-size:1rem;

}

.hero-metrics{

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

}

.projects-grid,

.services-grid,

.industries-grid,

.testimonials-grid{

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

}

.metrics-grid{

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

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:40px;

}

}

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

@media (max-width:768px){

.container{

padding:0 22px;

}

.navbar{

border-radius:22px;

height:72px;

}

.brand{

gap:10px;

}

.brand-logo{

width:42px;

}

.brand-text h2{

font-size:.95rem;

}

.brand-text span{

font-size:.60rem;

letter-spacing:2px;

}

.hero{

padding-top:130px;

}

.hero-grid{

display:flex;

flex-direction:column;

}

.hero-content{

order:1;

text-align:center;

}

.hero-visual{

order:2;

margin-top:50px;

min-height:520px;

}

.hero-title{

font-size:3.2rem;

line-height:1.1;

}

.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-actions{

flex-direction:column;

align-items:center;

}

.hero-actions .btn{

width:100%;

max-width:320px;

}

.hero-metrics{

grid-template-columns:1fr;

gap:16px;

margin-top:40px;

}

.metric-card{

padding:22px;

}

.projects-grid,

.services-grid,

.industries-grid,

.timeline-grid,

.testimonials-grid,

.tech-stack-grid{

grid-template-columns:1fr;

}

.metrics-grid{

grid-template-columns:1fr;

}

.newsletter-box,

.cta-card{

padding:40px 28px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

min-width:100%;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

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

@media (max-width:480px){

.hero-title{

font-size:2.6rem;

}

.section-title{

font-size:2rem;

}

.hero-description{

font-size:.95rem;

}

.hero-core{

width:190px;

height:190px;

}

.hero-core img{

width:100px;

}

.orbit-one{

width:250px;

height:250px;

}

.orbit-two{

width:330px;

height:330px;

}

.orbit-three{

width:420px;

height:420px;

}

.floating-panel{

width:180px;

padding:18px;

}

.panel-ai{

top:20px;

left:0;

}

.panel-cloud{

right:0;

top:160px;

}

.panel-security{

bottom:20px;

left:20px;

}

.back-to-top{

width:52px;

height:52px;

right:20px;

bottom:20px;

}

}

/*==========================================================
MOBILE NAVIGATION
PART 2
==========================================================*/

@media (max-width:768px){

/*----------------------------------
Navigation
----------------------------------*/

#header{

padding:18px 0;

}

.navbar{

height:72px;

padding:0 18px;

border-radius:22px;

}

/*----------------------------------
Brand
----------------------------------*/

.brand{

gap:12px;

}

.brand-logo{

width:42px;

}

.brand-text{

display:flex;

flex-direction:column;

justify-content:center;

}

.brand-text h2{

font-size:1rem;

line-height:1;

}

.brand-text span{

font-size:.62rem;

letter-spacing:2px;

margin-top:4px;

}

/*----------------------------------
Desktop Menu
----------------------------------*/

.nav-links{

display:none !important;

}

.nav-right .btn{

display:none !important;

}

/*----------------------------------
Hamburger
----------------------------------*/

.hamburger{

display:flex;

justify-content:center;

align-items:center;

width:52px;

height:52px;

border-radius:16px;

}

.hamburger span{

width:22px;

}

/*----------------------------------
Overlay
----------------------------------*/

.mobile-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.82);

backdrop-filter:blur(14px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9998;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}

/*----------------------------------
Mobile Menu
----------------------------------*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:320px;

max-width:90%;

height:100vh;

padding:40px 30px;

display:flex;

flex-direction:column;

background:#070b11;

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

backdrop-filter:blur(30px);

transition:.45s;

z-index:9999;

}

.mobile-menu.active{

right:0;

}

/*----------------------------------
Menu Header
----------------------------------*/

.mobile-brand{

display:flex;

align-items:center;

gap:14px;

margin-bottom:40px;

}

.mobile-brand img{

width:50px;

}

.mobile-brand h2{

color:#fff;

font-size:1.1rem;

}

.mobile-brand span{

display:block;

margin-top:4px;

color:var(--primary);

font-size:.7rem;

letter-spacing:2px;

}

/*----------------------------------
Links
----------------------------------*/

.mobile-links{

display:flex;

flex-direction:column;

gap:18px;

margin-top:10px;

}

.mobile-links a{

display:flex;

align-items:center;

padding:18px 22px;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.05);

font-size:1.05rem;

font-weight:600;

color:#fff;

transition:.35s;

}

.mobile-links a:hover{

background:rgba(0,232,255,.08);

border-color:rgba(0,232,255,.20);

color:var(--primary);

transform:translateX(8px);

}

/*----------------------------------
CTA
----------------------------------*/

.mobile-cta{

margin-top:auto;

}

.mobile-cta .btn{

width:100%;

justify-content:center;

}

/*----------------------------------
Close Button
----------------------------------*/

.mobile-close{

position:absolute;

top:24px;

right:24px;

width:46px;

height:46px;

border:none;

border-radius:14px;

background:rgba(255,255,255,.05);

color:#fff;

font-size:1.4rem;

cursor:pointer;

transition:.3s;

}

.mobile-close:hover{

background:rgba(255,255,255,.10);

transform:rotate(90deg);

}

}

/*==========================================================
HERO MOBILE
PART 3
==========================================================*/

@media (max-width:768px){

/*----------------------------------
Hero Section
----------------------------------*/

.hero{

min-height:auto;

padding:120px 0 80px;

overflow:hidden;

}

.hero-grid{

display:flex;

flex-direction:column;

gap:60px;

}

/*----------------------------------
Content
----------------------------------*/

.hero-content{

order:1;

text-align:center;

z-index:5;

}

.hero-badge{

margin:0 auto 28px;

padding:10px 18px;

font-size:.85rem;

}

.hero-title{

font-size:clamp(2.5rem,12vw,3.8rem);

line-height:1.05;

letter-spacing:-1px;

margin-bottom:24px;

}

.hero-title span{

display:block;

}

.hero-description{

max-width:100%;

margin:0 auto 35px;

font-size:1rem;

line-height:1.8;

padding:0 8px;

}

/*----------------------------------
Buttons
----------------------------------*/

.hero-actions{

flex-direction:column;

align-items:center;

gap:16px;

margin-bottom:40px;

}

.hero-actions .btn{

width:100%;

max-width:320px;

height:58px;

}

/*----------------------------------
Statistics
----------------------------------*/

.hero-metrics{

display:grid;

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

gap:14px;

margin-top:30px;

}

.metric-card{

padding:18px;

border-radius:18px;

}

.metric-card h2{

font-size:1.8rem;

}

.metric-card p{

font-size:.85rem;

}

/*----------------------------------
Hero Visual
----------------------------------*/

.hero-visual{

order:2;

min-height:500px;

display:flex;

justify-content:center;

align-items:center;

margin-top:10px;

}

/*----------------------------------
Glow
----------------------------------*/

.hero-glow{

width:340px;

height:340px;

filter:blur(35px);

}

/*----------------------------------
Center Core
----------------------------------*/

.hero-core{

width:180px;

height:180px;

}

.hero-core img{

width:100px;

}

/*----------------------------------
Orbit Rings
----------------------------------*/

.orbit-one{

width:250px;

height:250px;

}

.orbit-two{

width:330px;

height:330px;

}

.orbit-three{

width:420px;

height:420px;

}

/*----------------------------------
Floating Panels
----------------------------------*/

.floating-panel{

width:170px;

padding:16px;

border-radius:18px;

}

.panel-ai{

top:0;

left:0;

}

.panel-cloud{

top:150px;

right:0;

}

.panel-security{

bottom:10px;

left:20px;

}

.floating-panel h3{

font-size:1.2rem;

}

.floating-panel p{

font-size:.8rem;

line-height:1.5;

}

/*----------------------------------
Scroll Indicator
----------------------------------*/

.scroll-indicator{

display:none;

}

}

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

@media (max-width:480px){

.hero{

padding-top:110px;

}

.hero-title{

font-size:2.4rem;

}

.hero-description{

font-size:.95rem;

}

.hero-metrics{

grid-template-columns:1fr;

gap:14px;

}

.metric-card{

padding:20px;

}

.hero-core{

width:160px;

height:160px;

}

.hero-core img{

width:85px;

}

.orbit-one{

width:220px;

height:220px;

}

.orbit-two{

width:290px;

height:290px;

}

.orbit-three{

width:360px;

height:360px;

}

.floating-panel{

width:150px;

padding:14px;

}

.panel-cloud{

top:120px;

}

}

/*==========================================================
CONTENT SECTIONS
PART 4
==========================================================*/

@media (max-width:768px){

/*----------------------------------
Global Sections
----------------------------------*/

.section{

padding:80px 0;

}

.section-heading{

margin-bottom:50px;

text-align:center;

}

.section-title{

font-size:2.2rem;

line-height:1.2;

margin-bottom:18px;

}

.section-description{

font-size:1rem;

line-height:1.8;

}

/*----------------------------------
About
----------------------------------*/

.about-grid{

display:grid;

grid-template-columns:1fr;

gap:45px;

}

.about-content{

text-align:center;

}

.about-card{

padding:30px;

}

.about-highlights{

gap:18px;

}

/*----------------------------------
Services
----------------------------------*/

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

.service-card{

padding:30px;

}

.service-icon{

width:70px;

height:70px;

}

.service-icon img{

width:36px;

height:36px;

}

/*----------------------------------
Projects
----------------------------------*/

.projects-grid{

grid-template-columns:1fr;

gap:26px;

}

.project-image{

height:200px;

}

.project-content{

padding:26px;

}

/*----------------------------------
Timeline
----------------------------------*/

.timeline-grid{

grid-template-columns:1fr;

gap:24px;

}

.timeline-card{

padding:30px;

}

/*----------------------------------
Industries
----------------------------------*/

.industries-grid{

grid-template-columns:1fr;

gap:22px;

}

.industry-card{

padding:28px;

}

/*----------------------------------
Testimonials
----------------------------------*/

.testimonials-grid{

grid-template-columns:1fr;

gap:24px;

}

.testimonial-card{

padding:28px;

}

/*----------------------------------
Technology
----------------------------------*/

.tech-stack-grid{

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

gap:18px;

}

.tech-item{

min-height:75px;

font-size:.95rem;

}

/*----------------------------------
Metrics
----------------------------------*/

.metrics-grid{

grid-template-columns:1fr;

gap:18px;

}

.metric-box{

padding:28px;

}

.metric-box h2{

font-size:2.5rem;

}

/*----------------------------------
Newsletter
----------------------------------*/

.newsletter-box{

padding:35px 24px;

border-radius:28px;

}

.newsletter-box h2{

font-size:2.2rem;

}

.newsletter-form{

flex-direction:column;

gap:16px;

}

.newsletter-form input{

width:100%;

min-width:100%;

}

.newsletter-form .btn{

width:100%;

}

/*----------------------------------
Contact CTA
----------------------------------*/

.cta-card{

padding:50px 28px;

border-radius:30px;

}

.cta-card h2{

font-size:2.3rem;

}

.cta-card p{

font-size:1rem;

}

.cta-card .hero-actions{

flex-direction:column;

align-items:center;

}

.cta-card .btn{

width:100%;

max-width:320px;

}

}

/*==========================================================
SMALL PHONES
==========================================================*/

@media (max-width:480px){

.section{

padding:70px 0;

}

.section-title{

font-size:1.9rem;

}

.tech-stack-grid{

grid-template-columns:1fr;

}

.about-card,

.service-card,

.project-card,

.timeline-card,

.industry-card,

.testimonial-card{

padding:24px;

}

.project-image{

height:170px;

}

.metric-box h2{

font-size:2rem;

}

.newsletter-box h2,

.cta-card h2{

font-size:2rem;

}

}

/*==========================================================
FOOTER RESPONSIVE
PART 5
==========================================================*/

/*----------------------------------
Tablet
----------------------------------*/

@media (max-width:992px){

.footer{

padding:90px 0 30px;

}

.footer-grid{

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

gap:45px;

}

.footer-brand{

justify-content:flex-start;

}

.footer-description{

max-width:100%;

}

.footer-column{

text-align:left;

}

.footer-bottom{

flex-direction:column;

justify-content:center;

align-items:center;

gap:20px;

text-align:center;

}

.footer-links{

justify-content:center;

}

}

/*----------------------------------
Mobile
----------------------------------*/

@media (max-width:768px){

.footer{

padding:70px 0 25px;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.footer-brand{

justify-content:center;

text-align:center;

}

.footer-description{

text-align:center;

margin:auto;

}

.footer-column{

text-align:center;

}

.footer-column ul{

padding:0;

}

.footer-column li{

margin-bottom:14px;

}

.footer-links{

flex-direction:column;

gap:14px;

}

.footer-bottom p{

font-size:.9rem;

line-height:1.8;

}

}

/*==========================================================
BACK TO TOP
==========================================================*/

@media (max-width:768px){

.back-to-top{

width:52px;

height:52px;

right:18px;

bottom:18px;

font-size:1.2rem;

}

}

@media (max-width:480px){

.back-to-top{

width:48px;

height:48px;

right:14px;

bottom:14px;

}

}

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

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

.hero{

padding-top:100px;

min-height:auto;

}

.hero-grid{

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.hero-title{

font-size:2.8rem;

}

.hero-visual{

min-height:420px;

}

}

/*==========================================================
LARGE DESKTOP
==========================================================*/

@media (min-width:1600px){

.container{

max-width:1500px;

}

.hero{

min-height:100vh;

}

.hero-grid{

gap:120px;

}

.hero-title{

font-size:7rem;

}

.hero-description{

font-size:1.2rem;

max-width:720px;

}

.services-grid{

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

}

.projects-grid{

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

}

}

/*==========================================================
ULTRA WIDE
==========================================================*/

@media (min-width:1920px){

.container{

max-width:1700px;

}

.hero{

padding-top:200px;

}

.section{

padding:180px 0;

}

}

/*==========================================================
TOUCH DEVICES
==========================================================*/

@media (hover:none){

.service-card:hover,

.project-card:hover,

.industry-card:hover,

.timeline-card:hover,

.testimonial-card:hover,

.metric-card:hover,

.metric-box:hover{

transform:none;

}

.btn:hover{

transform:none;

}

}


/*==========================================================
HERO V5 RESPONSIVE
PART 4
==========================================================*/

@media (max-width:900px){

.hero{

padding-top:120px;

padding-bottom:70px;

min-height:auto;

}

.hero-grid{

display:flex;

flex-direction:column;

gap:70px;

align-items:center;

}

.hero-left{

order:1;

width:100%;

text-align:center;

}

.hero-right{

order:2;

width:100%;

min-height:500px;

display:flex;

justify-content:center;

align-items:center;

}

.hero-badge{

margin:0 auto 24px;

}

.hero-title{

font-size:clamp(2.7rem,9vw,4rem);

line-height:1.08;

max-width:650px;

margin:0 auto 28px;

}

.hero-description{

max-width:620px;

margin:0 auto 40px;

font-size:1rem;

line-height:1.9;

}

.hero-actions{

justify-content:center;

flex-wrap:wrap;

gap:16px;

margin-bottom:45px;

}

.hero-actions .btn{

min-width:220px;

}

.hero-stats{

max-width:650px;

margin:0 auto;

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

gap:16px;

}

.hero-sphere{

width:420px;

height:420px;

}

.sphere-logo{

width:180px;

height:180px;

}

.sphere-logo img{

width:95px;

}

.ring-1{

width:240px;

height:240px;

}

.ring-2{

width:330px;

height:330px;

}

.ring-3{

width:420px;

height:420px;

}

.hero-card{

width:170px;

padding:16px;

}

.hero-card-1{

top:10px;

left:0;

}

.hero-card-2{

top:150px;

right:0;

}

.hero-card-3{

bottom:20px;

left:20px;

}

}

@media (max-width:600px){

.hero{

padding-top:110px;

}

.hero-title{

font-size:2.5rem;

}

.hero-description{

font-size:.95rem;

}

.hero-actions{

flex-direction:column;

}

.hero-actions .btn{

width:100%;

max-width:320px;

}

.hero-stats{

grid-template-columns:1fr;

}

.hero-sphere{

width:320px;

height:320px;

}

.sphere-logo{

width:150px;

height:150px;

}

.sphere-logo img{

width:80px;

}

.ring-1{

width:190px;

height:190px;

}

.ring-2{

width:260px;

height:260px;

}

.ring-3{

width:320px;

height:320px;

}

.hero-card{

width:145px;

font-size:.85rem;

}

.hero-card-1{

top:0;

left:-5px;

}

.hero-card-2{

top:120px;

right:-5px;

}

.hero-card-3{

bottom:0;

left:10px;

}

}


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

@media (max-width:768px){

.services{

padding:90px 0;

}

.services-grid{

grid-template-columns:1fr;

gap:24px;

}

.service-card{

padding:28px;

}

.service-number{

font-size:2.2rem;

top:18px;

right:18px;

}

.service-icon{

width:70px;

height:70px;

}

.service-card h3{

font-size:1.4rem;

}

}

@media (max-width:480px){

.service-card{

padding:24px;

}

.service-features{

gap:10px;

}

}


/*==========================================================
FINAL RESPONSIVE POLISH
==========================================================*/

@media (max-width:992px){

section{

padding:100px 0;

}

}

@media (max-width:768px){

section{

padding:80px 0;

}

.section-title{

font-size:2.3rem;

}

.section-description{

font-size:1rem;

}

.container{

width:94%;

}

}

@media (max-width:480px){

section{

padding:65px 0;

}

.section-title{

font-size:2rem;

}

.hero-title{

font-size:2.4rem;

}

.container{

width:95%;

}

}