/*====================================================
S-CUBE SOLUTION PRIVATE LIMITED

RESPONSIVE.CSS PART 1

Desktop
Laptop
Tablet Landscape

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



/*==============================
LARGE DESKTOP
1400px+
===============================*/


@media (min-width:1400px){


.container{

    max-width:1320px;

}



.hero-content h1{

    font-size:80px;

}



.hero-image img{

    width:520px;

}



.section-title h2{

    font-size:55px;

}



}








/*==============================
LAPTOP DEVICES
1200px - 1399px
===============================*/


@media (max-width:1399px){



.container{

    width:90%;

}



.hero-content{

    width:65%;

}



.hero-content h1{

    font-size:65px;

}



.hero-image img{

    width:430px;

}





.nav-links{

    gap:28px;

}





.services-grid{

    grid-template-columns:

    repeat(3,1fr);

}





.industry-grid{

    grid-template-columns:

    repeat(3,1fr);

}





.footer-grid{

    grid-template-columns:

    repeat(4,1fr);

}



}









/*==============================
TABLET LANDSCAPE
992px - 1199px
===============================*/


@media(max-width:1199px){



.container{

    width:92%;

}




/* HEADER */


.navbar{

    height:85px;

}



.logo span{

    font-size:20px;

}



.nav-links{

    gap:18px;

}



@media (max-width: 768px) {

    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #111;
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 20px;
    }

    .nav-links.active {
        display: flex;
    }
}








.nav-links a{

    font-size:14px;

}







/* HERO */


.hero{

    min-height:90vh;

}



.hero-content{

    width:100%;

}



.hero-content h1{

    font-size:55px;

}



.hero-content p{

    font-size:16px;

}



.hero-image img{

    width:350px;

}






/* GRID SYSTEM */


.services-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.industry-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.technology-grid{

    grid-template-columns:

    repeat(3,1fr);

}





.values-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.choose-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.process-grid{

    grid-template-columns:

    repeat(2,1fr);

}






/* ABOUT */


.about-grid{

    gap:40px;

}



.about-content h2{

    font-size:38px;

}





/* CONTACT */


.contact-info-grid{

    grid-template-columns:

    repeat(2,1fr);

}





.footer-grid{

    grid-template-columns:

    repeat(2,1fr);

}



}








/*==============================
TABLET LANDSCAPE SMALL FIX
1024px
===============================*/


@media(max-width:1024px){



.hero-buttons{

    gap:15px;

}



.btn-primary,
.btn-secondary{

    padding:14px 28px;

}



.page-hero-content h1{

    font-size:55px;

}



.cta-box h2{

    font-size:40px;

}



}








/*==============================
END OF RESPONSIVE.CSS PART 1


NEXT PART 2:

- Mobile Navbar
- Hamburger Menu
- Mobile Hero
- Mobile Sections
- Phone Layout

===============================*/
/*====================================================
S-CUBE SOLUTION PRIVATE LIMITED

RESPONSIVE.CSS

PART 2

MOBILE RESPONSIVE DESIGN

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





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

768px - 991px

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


@media(max-width:768px){



.container{

    width:92%;

}





section{

    padding:70px 0;

}





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


header{

    height:80px;

}





.navbar{

    height:80px;

}





.logo img{

    width:45px;

    height:45px;

}





.logo span{

    font-size:18px;

}





.nav-links{


    position:fixed;


    top:80px;


    left:-100%;


    width:100%;


    height:calc(100vh - 80px);


    background:#050816;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:35px;


    transition:.5s;


    z-index:999;



}





.nav-links.active{


    left:0;


}







.nav-links li a{


    font-size:20px;


}








/* HAMBURGER */


.menu-btn{


    display:block;


}





.menu-btn span{


    width:32px;


    height:3px;


    background:white;


    display:block;


    margin:7px 0;


    transition:.4s;


}





.menu-btn.active span:nth-child(1){


    transform:


    rotate(45deg)

    translate(7px,7px);


}





.menu-btn.active span:nth-child(2){


    opacity:0;


}





.menu-btn.active span:nth-child(3){


    transform:


    rotate(-45deg)

    translate(7px,-7px);


}









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


.hero{


    text-align:center;


    min-height:100vh;


}





.hero-content{


    width:100%;


}



.hero-content span{


    font-size:14px;


}



.hero-content h1{


    font-size:42px;


    line-height:1.2;


}





.hero-content p{


    font-size:15px;


}





.hero-buttons{


    justify-content:center;


    flex-direction:column;


    align-items:center;


}





.btn-primary,
.btn-secondary{


    width:220px;


}








.hero-image{


    display:none;


}








/* PAGE HERO */


.page-hero{


    min-height:55vh;


}





.page-hero-content h1{


    font-size:42px;


}





.page-hero-content p{


    font-size:15px;


}









/*==================================
GRID SYSTEM
===================================*/


.services-grid,
.industry-grid,
.industry-overview-grid,
.technology-grid,
.process-grid,
.values-grid,
.choose-grid,
.team-grid,
.mission-grid,
.faq-grid,
.contact-info-grid{


    grid-template-columns:

    1fr;


}









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


.about-grid{


    grid-template-columns:

    1fr;


    text-align:center;


}





.about-content h2{


    font-size:32px;


}





.about-content p{


    font-size:15px;


}





.image-box{


    width:260px;


    height:260px;


}





.image-box i{


    font-size:65px;


}









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


.service-card,
.industry-service-card,
.resource-card,
.value-card,
.choose-card,
.team-card{


    padding:25px;


}





.service-card i,
.industry-service-card i{


    font-size:35px;


}









/*==================================
CONTACT
===================================*/


.contact-grid{


    grid-template-columns:

    1fr;


}





.contact-form-box{


    padding:25px;


}





.input-group input,
.input-group textarea{


    padding:14px;


}





.map-box iframe{


    height:300px;


}








/*==================================
CTA SECTION
===================================*/


.cta-box{


    padding:45px 20px;


}





.cta-box h2{


    font-size:30px;


}





.cta-box p{


    font-size:15px;


}








/*==================================
NEWSLETTER
===================================*/


.newsletter-form{


    flex-direction:column;


}





.newsletter-form input{


    width:100%;


}








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


.footer-grid{


    grid-template-columns:

    1fr;


    text-align:center;


}





.social-links{


    justify-content:center;


}





.footer-column ul{


    padding:0;


}








}










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

480px - 575px

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


@media(max-width:575px){





.container{


    width:94%;


}





.logo span{


    display:none;


}





.hero-content h1{


    font-size:36px;


}





.page-hero-content h1{


    font-size:34px;


}





.section-title h2{


    font-size:30px;


}





.section-title p{


    font-size:14px;


}






.btn-primary,
.btn-secondary{


    width:200px;


    padding:13px 20px;


}





.cta-box h2{


    font-size:26px;


}





.newsletter-box h2{


    font-size:28px;


}





.footer-column h3{


    font-size:20px;


}







#topBtn{


    width:45px;


    height:45px;


    right:15px;


    bottom:15px;


}






}










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

Below 400px

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


@media(max-width:400px){





.hero-content h1{


    font-size:32px;


}





.page-hero-content h1{


    font-size:30px;


}





.hero-content p{


    font-size:14px;


}





.section-title h2{


    font-size:26px;


}





.logo img{


    width:40px;


    height:40px;


}





.service-card,
.industry-service-card{


    padding:20px;


}





}







/*====================================================
END OF RESPONSIVE.CSS PART 2


NEXT PART 3:

- Advanced responsive animations
- Landscape mobile mode
- Large phones
- Touch device fixes
- Image/video optimization

====================================================*/
/*====================================================
S-CUBE SOLUTION PRIVATE LIMITED

RESPONSIVE.CSS

PART 3

ADVANCED RESPONSIVE OPTIMIZATION

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






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

481px - 900px

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


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



header{

    position:absolute;

}




.hero{

    min-height:700px;

}




.hero-content{

    padding-top:80px;

}




.hero-content h1{

    font-size:38px;

}




.hero-content p{

    max-width:600px;

    margin:auto;

}





.hero-buttons{

    flex-direction:row;

    justify-content:center;

}





.page-hero{

    min-height:500px;

}





}





/*==================================
VIDEO BACKGROUND OPTIMIZATION
===================================*/


@media(max-width:768px){



.hero video{


    object-fit:cover;


    width:auto;


    min-width:100%;


    height:100%;


}



.hero::before{


    background:


    linear-gradient(

    rgba(5,8,22,.85),

    rgba(5,8,22,.95)

    );


}



}








/*==================================
ROBOT / HERO IMAGE FIX
===================================*/


@media(max-width:1200px){



.hero-image img{


    max-width:100%;


    height:auto;


}




}




@media(max-width:768px){



.hero-image{


    display:none;


}



}








/*==================================
ABOUT IMAGE RESPONSIVE
===================================*/


@media(max-width:992px){



.about-image{


    margin-top:30px;


}



.image-box{


    width:300px;


    height:300px;


}



}





@media(max-width:480px){



.image-box{


    width:220px;


    height:220px;


}



.image-box i{


    font-size:55px;


}



}








/*==================================
TOUCH DEVICE OPTIMIZATION
===================================*/


@media (hover:none){



.service-card:hover,
.industry-service-card:hover,
.team-card:hover,
.value-card:hover,
.choose-card:hover{


    transform:none;


    box-shadow:none;


}



.btn-primary:hover,
.btn-secondary:hover{


    transform:none;


}



}









/*==================================
DISABLE HEAVY ANIMATIONS
LOW POWER DEVICES
===================================*/


@media(max-width:768px){



.hero-particles span{


    animation-duration:12s;


}



.logo img{


    animation-duration:5s;


}



}








/*==================================
HIGH DPI SCREENS
===================================*/


@media(min-resolution:2dppx){



.hero video{


    image-rendering:auto;


}




img{


    image-rendering:auto;


}



}









/*==================================
TABLET PORTRAIT SPECIAL

600px - 767px

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


@media(min-width:600px) and (max-width:767px){



.hero-content h1{


    font-size:48px;


}





.services-grid,
.industry-grid,
.team-grid{


    grid-template-columns:

    repeat(2,1fr);


}





.footer-grid{


    grid-template-columns:

    repeat(2,1fr);


}




}





/*==================================
SMOOTH TEXT WRAPPING
===================================*/


h1,
h2,
h3,
p{


    overflow-wrap:break-word;


}









/*==================================
NO HORIZONTAL SCROLL FIX
===================================*/


html,
body{


    max-width:100%;


    overflow-x:hidden;


}








/*==================================
STICKY HEADER MOBILE FIX
===================================*/


@media(max-width:768px){



header{


    position:fixed;


    top:0;


}



body{


    padding-top:0;


}




}









/*====================================================
END OF RESPONSIVE.CSS PART 3


NEXT PART 4 FINAL:

- Final device breakpoints
- Fold phones support
- Print styles
- Browser compatibility fixes
- Complete responsive.css finish

====================================================*/
/*====================================================
S-CUBE SOLUTION PRIVATE LIMITED

RESPONSIVE.CSS

PART 4 FINAL

FINAL DEVICE FIXES
COMPATIBILITY
ACCESSIBILITY

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





/*==================================
VERY LARGE SCREENS

1800px+

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


@media(min-width:1800px){



.container{


    max-width:1500px;


}



.hero-content h1{


    font-size:95px;


}



.hero-content p{


    font-size:22px;


}



.hero-image img{


    width:600px;


}



.section-title h2{


    font-size:65px;


}



}





/*==================================
SMALL LAPTOP FIX

1366px

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


@media(max-width:1366px){



.hero-content h1{


    font-size:62px;


}



.hero-image img{


    width:400px;


}



}





/*==================================
FOLDABLE PHONES

280px - 360px

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


@media(max-width:360px){



.container{


    width:95%;


}



.navbar{


    padding:0 5px;


}



.logo img{


    width:38px;


    height:38px;


}





.hero-content h1{


    font-size:28px;


}





.hero-content p{


    font-size:13px;


}





.hero-buttons a{


    width:180px;


    font-size:14px;


}





.section-title h2{


    font-size:24px;


}





.section-title span{


    font-size:12px;


}





.service-card,
.industry-service-card,
.value-card,
.choose-card{


    padding:18px;


}





.contact-form-box{


    padding:18px;


}





.newsletter-box h2{


    font-size:24px;


}



}









/*==================================
VERY SMALL DEVICES

Below 320px

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


@media(max-width:320px){



body{


    font-size:14px;


}




.logo span{


    display:none;


}




.menu-btn span{


    width:25px;


}





.hero-content h1{


    font-size:25px;


}





.page-hero-content h1{


    font-size:26px;


}





.btn-primary,
.btn-secondary{


    width:160px;


    padding:12px;


    font-size:13px;


}





.image-box{


    width:180px;


    height:180px;


}





.image-box i{


    font-size:45px;


}



}









/*==================================
BROWSER COMPATIBILITY
===================================*/


img,
video{


    max-width:100%;


}



video{


    object-position:center;


}





*{


    -webkit-tap-highlight-color:transparent;


}





button,
a{


    -webkit-user-select:none;


    user-select:none;


}









/*==================================
REDUCED MOTION ACCESSIBILITY
===================================*/


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



*,
*::before,
*::after{


    animation:none!important;


    transition:none!important;


    scroll-behavior:auto!important;


}



}









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

FOR DOCUMENT PRINTING

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


@media print{



header,
footer,
.menu-btn,
#topBtn,
.hero video,
.hero-particles{


    display:none!important;


}





body{


    background:white;


    color:black;


}





section{


    padding:20px 0;


}





a{


    color:black;


}





}





/*==================================
DARK MODE SUPPORT

SYSTEM SETTINGS

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


@media(prefers-color-scheme:dark){



body{


    background:#050816;


}



}









/*==================================
FINAL RESPONSIVE UTILITY CLASSES
===================================*/


.hide-mobile{


    display:block;


}



.show-mobile{


    display:none;


}





@media(max-width:768px){



.hide-mobile{


    display:none;


}



.show-mobile{


    display:block;


}



}





/*==================================
RESPONSIVE CSS COMPLETE

PART 1:
Desktop + Laptop

PART 2:
Mobile Layout

PART 3:
Advanced Optimization

PART 4:
Final Fixes

S-CUBE SOLUTION PRIVATE LIMITED

===================================*/
@media (max-width:768px){

.features-section{
    padding:60px 20px;
}

.features-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.feature-card{
    width:100%;
    max-width:380px;
    margin:0 auto;
    padding:25px 20px;
    min-height:auto;
    border-radius:20px;
}

.feature-card h3{
    font-size:26px;
    line-height:1.3;
    margin:15px 0;
}

.feature-card p{
    font-size:15px;
    line-height:1.7;
}

.icon{
    width:60px;
    height:60px;
    font-size:28px;
}

}



@media (max-width:480px){

.feature-card{
    max-width:100%;
    padding:20px 16px;
}

.feature-card h3{
    font-size:22px;
}

.feature-card p{
    font-size:14px;
}

.icon{
    width:55px;
    height:55px;
    font-size:24px;
}

}