/* © 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-background{

    width: 100%;

    height: 100vh;

}



.hero-background-image img{

    background-repeat: no-repeat;

    height: 100vh;

    position: absolute;

    right: 0;

    z-index: 1;

}



.hero-background-image{

    position: relative;

}



.hero{

    width: 100%;

    min-height: 90vh;

    display: grid;

    grid-template-columns: 1fr;

    grid-gap: 1.5rem;

    align-items: center;

    position: relative;

    z-index: 2;

}



.hero-text h1{

    font-size: var(--big-font);

    color: orange;

}



.hero-text h2{

    color: #fff;

    font-size: var(--h2-font);

    margin: 1rem 0 2rem;

}



.hero-btn1{

    color: #fff;

    display: inline-block;

    padding: 10px 20px;

    background-color: orange;

    border-radius: 12px;

    transition: .4s;

}



.hero-btn2{

    margin: 0 0 0 1.5rem;

    color: #fff;

    display: inline-block;

    padding: 10px 20px;

    background-color: transparent;

    border: 1px solid #fff;

    border-radius: 12px;

    transition: .4s;

}



.hero-btn1:hover,

.hero-btn2:hover{

    transform: scale(1.2) translateY(10px);

    transition: .4s;

}

/* HERO RESPONSIVE DESIGN */











/* ABOUT US */

.about-us{

    display: grid;

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

    grid-gap: 1.5rem;

    align-items: center;

}



.about-us-image img{

    max-width: 100%;

    width: 480px;

    height: auto;

    border-radius: 45px 3.5px;

}



.about-us-text span{

    color: orange;

    font-weight: 600;

}



.about-us-text h2{

    color: #fff;

    font-size: var(--h2-font);

}



.about-us-text p{

    color: #fff;

    margin: 0.8rem 0 1.8rem;

    line-height: 1.7;

}



.about-us-btn{

    margin: 1rem 0 2rem;

    color: #fff;

    display: inline-block;

    padding: 10px 20px;

    background-color: orange;

    border-radius: 0.5rem;

    transition: .4s;

    cursor: pointer;

}



.about-us-btn:hover{

    transform: scale(1.2) translateY(10px);

    transition: .4s;

}

/* ABOUT US RESPONSIVE DESIGN */













/* SERVICES */

.sub-title{

    text-align: center;

}



.sub-title span{

    color: orange;

    font-weight: 600;

}



.sub-title h2{

    color: #fff;

    font-size: var(--h2-font);

}



.sub-title:hover{

    color: #fff;

}



.services-list{

    display: grid;

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

    grid-gap: 40px;

    margin-top: 50px;

}



.services-list div{

    background-color: #262626;

    padding: 40px;

    font-weight: 300;

    border-radius: 10px;

    color: #fff;

    transition: background 0.5s, transform 0.5s;

}



.services-list div i{

    font-size: 50px;

    margin-bottom: 30px;

}



.services-list div h2{

    font-size: 30px;

    font-weight: 500;

    margin-bottom: 15px;

}



.services-list div a{

    text-decoration: underline;

    color: #fff;

    font-size: 15px;

    margin-top: 20px;

    display: inline-block;

}



.services-list div a:hover{

    color: black;

}



.services-list div:hover{

    background: orange;

    transform: translateY(-10px);

    cursor: pointer;

}

/* SERVICES RESPONSIVE DESIGN */

@media(max-width: 1280px){

    .services-list{

        display: grid;

        grid-template-columns: 1fr;

        grid-gap: 20px;

        margin-top: 50px;

    }

    #services-list-box1{

        grid-row-start: 1;

        grid-row-end: 2;

    }

    #services-list-box2{

        grid-row-start: 3;

        grid-row-end: 4;

    }

    #services-list-box3{

        grid-row-start: 5;

        grid-row-end: 6;

    }

}











/* SALE-CONTENT */

.heading{

    text-align: center;

}



.heading span{

    color: orange;

    font-weight: 600;

}



.heading h2{

    color: #fff;

    font-size: var(--h2-font);

}



.sale-content-container{

    display: grid;

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

    grid-gap: 1.5rem;

    margin-top: 50px;

}



.s-box{

    text-align: center;

    padding: 20px 30px;

}



.s-box img{

    width: 90px;

}



.s-box h3{

    margin: 4px 0 10px;

    color: orange;

    font-size: 1.2rem;

}



.s-box p{

    line-height: 1.7;

    color: #fff;

}

/* SALE-CONTENT RESPONSIVE DESIGN */

@media(max-width: 1280px){

    .sale-content-container{

        display: grid;

        grid-template-columns: 1fr;

        grid-gap: 2.5rem;

        margin-top: 50px;

    }

    .s-box{

        padding: 10px 0;

    }

    .s-box p{

        text-align: left;

    }

}









/* CTA */

.cta{

    background-color: #fff;

    padding: 60px 0;

    text-align: center;

    width: 66%;

    margin: 100px auto;

    border-radius: 12px;

}



.cta h2{

    font-size: 2rem;

    color: black;

    margin-bottom: 30px;

}



.cta-btn{

    margin: 1rem 0 2rem;

    color: #fff;

    display: inline-block;

    padding: 10px 20px;

    background-color: orange;

    border-radius: 0.5rem;

    transition: .4s;

}



.cta-btn:hover{

    transform: scale(1.2) translateY(10px);

    transition: .4s;

}



.cta-responsive{

    display: none;

}



/* MAIN RESPONSIVE DESIGN */

@media (max-width: 1600px) {

    :root{

        --big-font:3rem;

        --h2-font:2rem;

    }

}



@media (max-width: 768px) {

    .hero{

        grid-template-columns: 1fr;

        text-align: center;

    }

    .about-us{

        grid-template-columns: 1fr;

        text-align: left;

    }

    .about-us-image{

        order: 2;

    }

    .cta{

        display: none;

    }



    .cta-responsive{

        display: grid;

        grid-template-columns: 1fr;

    }

    .cta-responsive-box{

        background-color: #fff;

        padding: 60px 0;

        text-align: center;

        width: 100%;

        border-radius: 12px;

    }

    

    .cta-responsive-box h2{

        font-size: 2rem;

        color: black;

        margin-bottom: 30px;

    }

    

    .cta-responsive-btn{

        margin: 1rem 0 2rem;

        color: #fff;

        display: inline-block;

        padding: 10px 20px;

        background-color: orange;

        border-radius: 0.5rem;

        transition: .4s;

    }

    

    .cta-responsive-btn:hover{

        transform: scale(1.2) translateY(10px);

        transition: .4s;

    }

}