/* ===================================
   RESPONSIVE DESIGN
   VIK-IT
=================================== */



@media(max-width:1200px){


.hero h1{

    font-size:52px;

}



.service-grid{

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

}



.cards{

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

}



.footer-grid{

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

}



}






@media(max-width:900px){


.header{

    position:fixed;

}



.nav-container{

    height:70px;

}



nav{

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:#070b17;

    display:none;

    flex-direction:column;

    text-align:center;

    padding:30px;


}



nav.active{

    display:flex;

}




.mobile-menu{

    display:block;

}





.hero{


padding-top:120px;

min-height:auto;


}



.hero-content{


flex-direction:column;

text-align:center;

}



.hero h1{


font-size:44px;


}



.hero p{


font-size:18px;


}



.hero-buttons{


display:flex;

flex-direction:column;

gap:20px;


}



.btn-secondary{


margin-left:0;


}



.tech-circle{


width:280px;

height:280px;

margin-top:50px;


}



.service-grid{


grid-template-columns:

repeat(2,1fr);


}



.stats{


flex-direction:column;

gap:40px;


}




}




@media(max-width:600px){



.container{


width:92%;


}




section{


padding:70px 0;


}





.logo{


font-size:26px;


}




.hero h1{


font-size:36px;


}



.hero p{


font-size:16px;


}





.cards{


grid-template-columns:

1fr;


}





.service-grid{


grid-template-columns:

1fr;


}





.card,
.service-card{


padding:25px;


}




h2{


font-size:32px;


}





.consulting-box{


padding:35px 20px;


}





.stats strong{


font-size:38px;


}





.footer-grid{


grid-template-columns:

1fr;


text-align:center;


}





.cookie-banner{


left:10px;

right:10px;

bottom:10px;


display:flex;

flex-direction:column;

gap:20px;

text-align:center;


}



.cookie-buttons{


display:flex;

}



.cookie-buttons button{


margin:5px;


}





}




/* kleine Geräte */

@media(max-width:380px){



.hero h1{

font-size:32px;

}


.tech-circle{


width:230px;

height:230px;


}



}