/*basically what this is, is just to declare variables. or constants*/
:root {
    /*  --clr-back-ground: #C9DCD9;*/
    --clr-back-ground: aliceblue; /*#F0F8FF*/
    --clr-text: #6D6E6F;
}

/*this just to set border box and box sizing*/
/**,*/
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--clr-back-ground); /*using variable*/
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*visitor hit counter*/
#visits {
    background-color: #01011e;
    display: flex;
    /*flex-direction: column;*/
    /*height: 50px;*/
    width: auto;
    color: #6D6E6F;
    border-radius: .4vw;
    font-weight: 700;
    font-size: .8vw;
    /*margin-top: 10px;*/
       justify-content: center;
}

.p-index {
    font-size: 2vw;
    margin-top: 20px;
    margin-bottom: 5px;
}

ul {
    font-size: 1.4vw;
    margin-bottom: 20px;
}

.clock-container {
    font-size: .9vw;
    display: flex;
    flex-direction: column;
}

.menu {
    font-size: .9vw;
    display: flex;
    justify-content: flex-end;
}

.top-container {
    background-color: #01011e;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 8px solid #858583;
    color: whitesmoke;
    font-size: .9vw;
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/

    display: flex; /*this will create two axises. by default it is horizontal (set by row). items are side-by-side*/
    /*flex-direction: row;*/ /*this will make the items are side-by-side. as same as the default*/
    /*justify-content: flex-start;*/ /*this will make the items start from the left*/
    /*justify-content: flex-end;*/ /*this will make the items start from the right*/
    justify-content: center; /*this will make the items at the center (middle)*/
    /*justify-content: space-between;*/ /*this will make spaces evenly between the items. and the left and right items go to far ends*/
    /*justify-content: space-around;*/ /*this will make spaces evenly between the itemsa and rounded the edges around the items*/
    justify-content: space-evenly; /*this will make spaces evenly between the items*/
    /*align-items: flex-start;*/ /*this will put the items hit the top of the box. in the case of row*/
    /*align-items: flex-end;*/ /*this will put the items hit the bottom of the box. in the case of row*/
    align-items: center; /*this will put the items in the middle the box. in the case of row*/
    gap: 1em; /*this put space in between items*/
    /*flex-wrap: wrap;*/ /*this will make the items jump to next line when not enough room for more items*/
}

.second-container {
    /*background-color: #222c2a;*/ /*will be removed after done testing */
    width: 100%;
    height: 85px;
    margin-top: 88px;
    left: 0;
    color: var(--clr-text);
    font-weight: bold;
    display: flex; /*this will create two axises. by default it is horizontal (set by row). items are side-by-side*/
    /*flex-direction: row;*/ /*this will make the items stack on to of each other*/
    align-items: center;
    /*justify-content: flex-end;*/
    /*gap: 30em;*/ /*this put space in between items*/
    /*justify-content: space-between;*/
    /*justify-content: center;*/
    justify-content: space-evenly;
}

.third-container {
    /* height: 100px;
    width: 100%;
    border: 3px*/
}

.fourth-container {
    /*background-color: #B7DEF7;*/
    color: var(--clr-text);
    /* margin-top: auto;*/
    display: flex;
    justify-content: center;
}
/*two class with same style*/
.third-about-container,
.third-product-container {
    /*background-color: aquamarine;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    width: 60%;
    margin: auto;
    padding: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* margin-bottom: 10px;
    margin-top: 10px;*/

    font-size: 1.4vw;
    color: var(--clr-text);
}

/*contact form*/
/*============================================================*/
.third-contact-container {
    /* background-color: aliceblue;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    width: 60%;
    margin: auto;
    padding: 30px;
    display: flex;
    justify-content: space-evenly;
    /* margin-bottom: 10px;
    margin-top: 10px;*/

    font-size: 1.4vw;
    color: var(--clr-text);
}

.col-1 {
    /*background-color: chartreuse;*/ /* will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /* will be remove after testing*/

    display: flex;
    flex-direction: column;
    padding: 10px;
}

.col-1-header {
    /*background-color: antiquewhite;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: space-evenly;
    /*margin-bottom:20px;*/
}

.us {
    /*background-color: burlywood;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    display: flex;
    /*flex-direction: row;*/
    /*align-items: flex-start;*/
    align-items: center;
}

.draw-line { /*line*/

    display: flex;
    /*align-items: center;*/
    width: 96px;
    height: 7px;
    border-bottom: 1px solid black;
    /*position: absolute;*/
    background-color: #6D6E6F;
}

.col-1-content {
    /*background-color: beige;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    display: flex;
    flex-direction: column;
}

.col-2 {
    /*background-color: chartreuse;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/

    font-size: 1.3vw;
    color: var(--clr-text);
    /*padding: 10px;*/
}

.col-2-header {
    /*background-color: antiquewhite;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /* will be remove after testing*/
    /*margin-bottom: 20px;*/
}

.col-2-content {
    /*background-color: beige;*/ /*will be remove after testing*/
    /*border: 3px solid #73AD21;*/ /*will be remove after testing*/
    font-size: 1.4vw;
}

.thanks-container {
    /*background-color: beige;*/ /*will be remove after testing*/
    display: flex;
    flex-direction: column;
    font-size: 2vw;
}
/*line*/
/*.line {
    width: 112px;
    height: 7px;
    border-bottom: 1px solid black;
    position: absolute;
    background-color: #6D6E6F;
}*/
/*end contact form*/
/*===================================================================*/

.footer {
    margin-top: 40px;
    display: flex;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
pictures englage section ==========================================================
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=================================================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container-pix {
    position: relative;
    /*   min-height: 100vh;
   background: #ddd;*/
}

    .container-pix .image-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        justify-content: center;
        padding: 1px;
    }

        .container-pix .image-container .image {
            /* height: 250px;
   width: 250px;*/
            height: 11vw;
            width: 11vw;
            border: .3vw solid #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,.1);
            overflow: hidden;
            cursor: pointer;
        }

            .container-pix .image-container .image img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: .2s linear;
            }

            .container-pix .image-container .image:hover img {
                transform: scale(1.1);
            }

    .container-pix .popup-image {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.9);
        height: 100%;
        width: 100%;
        z-index: 100;
        display: none;
    }

        .container-pix .popup-image span {
            position: absolute;
            top: 55px;
            right: 10px;
            font-size: 40px;
            font-weight: bolder;
            color: #fff;
            cursor: pointer;
            z-index: 100;
        }

        .container-pix .popup-image img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #fff;
            border-radius: 5px;
            width: 750px;
            object-fit: cover;
        }

@media(max-width:768px) {
    .container-pix .popup-image img {
        width: 15%;
    }
}

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

/*
@media(max-width: 1500px) {
    body{
        background-color: chartreuse;
    }

}

*/