/* © 2023 WEBSITE OPERATIONS ALL RIGHTS RESERVED */



/* MAIN */

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: 'poppins', sans-serif;

    scroll-behavior: smooth;

    list-style: none;

    text-decoration: none;

}



body{

    background-color: black;

}



:root{



    /* colors */

    --black-color: black;

    --white-color: white;

    --orange-color: orange;



    /* font size */

    --big-font:2.4rem;

    --h2-font:2.25rem;

    --p-font:0.9rem;



    /* font weight */





    /* padding distance */





    /* margin distance */











    /* @media queries & padding size distant



    @media queries width;

    XXl  -desktop-  =  1600px

    xl   -desktop-  =  1300px

    l    -desktop-  =  992px

    M    -ipad-     =  768px

    S    -mobiel-   =  600px

    xs   -mobiel-   =  360px



    width padding;

    XXl  -desktop- 1600px  =   10%

    xl   -desktop- 1300px  =    8%

    l    -desktop- 992px   =    7%

    M    -ipad-    768px   =  6.5%

    S    -mobiel-  600px   =    6%

    xs   -mobiel-  360px   =    5%



    height padding;

    XXl  -desktop- 1600px  =   70px

    xl   -desktop- 1300px  =   50px

    l    -desktop- 992px   =     px

    M    -ipad-    768px   =   60px

    S    -mobiel-  600px   =     px

    xs   -mobiel-  360px   =     px

    

    */



    --padding-width-desktop-xxl: 10%;

    --padding-width-laptop-xl: 8%;

    --padding-width-laptop-l: 7%;

    --padding-width-ipad-m: 6.5%;

    --padding-width-mobiel-s: 6%;

    --padding-width-mobiel-xs: 4%;



    --padding-height-desktop-xxl: 70px;

    --padding-height-laptop-xl: 50px;

    --padding-height-laptop-l: 60px;

    --padding-height-ipad-m: 6.5%;

    --padding-height-mobiel-s: 6%;

    --padding-height-mobiel-xs: 4%;





    /* grid */

    --grid-gap-desktop: 1.5rem;



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

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

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

}



::-webkit-scrollbar {

    width: 10px;

    background-color: black;

}



::-webkit-scrollbar-thumb {

    background-color: orange;

}



::-webkit-scrollbar-thumb:hover {

    background-color: #ff8800;

}



::-webkit-scrollbar-button {

    display: none;

}



section{

    padding: 70px 17%;

}







/* HERO */

.hero{

     display: flex;

     justify-content: center;

     align-items: center;

     text-align: center;

}



.hero a{

     color: #fff;

     padding-top: 50px;

}











/*RESPONSIVE DESIGN */

@media (max-width: 1560px) {

    :root{

        --big-font:3rem;

        --h2-font:2rem;

    }

}



@media (max-width: 1143px) {

    section{

        padding: 50px 8%;

    }

}



@media (max-width: 720px) {

    .about-us-hero{

        grid-template-columns: auto;

        grid-gap: 1.5rem;

        min-height: 100vh;

        align-items: center;

    }

    .services-list div{

        padding: 40px;

    }

    .our-team-container{

        grid-template-columns: 1fr;

    }

    section{

        padding: 60px 6.5%;

    }

}