*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face{
    font-family:"sans-serif";
    src: url(../fonts/xirod.ttf)format('ttf');
    src: url(../fonts/xirod.woff)format('woff');
    src: url(../fonts/xirod.woff2)format('woff2');
}
body{
    font-family: sans-serif;
    /* background-color: rgb(248, 0, 0); */

}
/* ....................................................................................... */
/* header */
header{
    height: 101vh;
    /* background-color: aqua; */
}
.header-top{
height: 14vh;
background-color: black;
}

/* box-logo */
.header-top-left{
    width: 18%;
    height: 100%;
    float: left;
    background-color: rgb(255, 0, 0);
    padding-top: 1%;
    padding-left: 1%;
}
/* box-logo */

.header-top-right{
    width:82%;
    height: 100%;
    /* background-color:rgb(184, 234, 3); */
    float: right;
}
.header-top-right-up{
height:35%;
}
/* header  top-right-up*/
.header-top-right-up .box-right{
width:15%;
height: 100%;
float:right;
}
.header-top-right-up .box-right .box-right-icon{
width:25%;
height: 100%;
float: left;
display: flex;
align-items: center;
justify-content: center;
border-left:1.5px solid gray;
}
.header-top-right-up .box-right .box-right-icon img{
    width:21%;
}
.header-top-right-up .box-right .box-right-icon img:hover{
    cursor: pointer;
}
.header-top-right-down{
    height: 65%;
    background-color: rgb(255, 255, 255);
}
#facebook-header-logo{
width: 13%;
}
/* header  top-right-up*/
.header-top-right-up .box-left{
    width: 85%;
    height: 100%;
    /* background-color:blue; */
    float: left;
}
.box-left-contact{
    width:30%;
    height: 100%;
    background-color: burlywood;
}
.box-left-contact-one{
    width: 50%;
    height: 100%;
    background-color:black;
    float: left;
    border-right:1.5px solid gray;
    text-align: left;
    position: relative;
}
.box-left-contact-one:hover{
    cursor: pointer;
}
.box-left-contact-one img{
    width: 9%;
    position: absolute;
    bottom:15px;
    left: 6px;
}
#call{
    width: 7%;
    position: absolute;
    bottom:15px;
    left:10px;
    font-size:10px;

}
.number-header{
font-size:10px;
color: white;
position: absolute;
bottom:14px;
left:27px;
}
.header-top-right-down-boxes{
    width: 140px;
    height: 100%;
    background-color:red;
    float: right;
    transition:background-color 0.8s;
}
.header-top-right-down-box-one{
    width:70px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
    float: right;
    border-left: 1.5px solid gray;
}
.two{
    width: 70px;
    height: 100%;
    float: left;
    border-left: 2px solid gray;
    background-color: white;
}
.header-top-right-down-box-one:hover{
    cursor: pointer;
    background-color:rgb(202, 135, 33);
}
.header-top-right-down-boxes-two{
    width: 35%;
    height: 100%;
    float: right;
}
nav ul{
display: flex;
justify-content:space-around;
align-items: center;
margin-top:5%;
}
nav ul li{
    float: left;
    margin-right:9%;
    margin-left:1%;
    list-style: none;
    font-size:small;
    margin-top: 4px;
}
#home{
    color: red;
}
nav ul li:hover{
    cursor: pointer;
}
.header-down{
    height:87vh;
    background-color: rgb(14, 167, 26);
}
.header-down img{
    width: 100%;
    height: 100%;
}
#red-line{
    width: 10%;
    height: 40%;
    position: absolute;
    top:36%;
    left:18%;
}
#text-line-one{
    position: absolute;
    top:40%;
    left:19.5%;
    color: white;
    font-size: 27px;
}
#text-line-two{
    position: absolute;
    top:43%;
    left:19.5%;
    color: white;
    font-size:94px;
    display: inline-block;
}
#text-line-three{
    position: absolute;
    top:54.5%;
    left:19.8%;
    color: white;
    font-size:33px;
    display: inline-block;
}
#slider-button{
    position: absolute;
    bottom:230px;
    left:312px;
    color: white;
    font-size:18px;
    display: inline-block;
    background-color: black;
    border: 1px solid white;
    padding: 15px 2%;
    transition: background-color 1s;
    border-radius:1px;
}
#slider-button:hover{
    cursor: pointer;
    background-color: white;
    color: black;
}
#red-line-two{
    width:2%;
    height: 4%;
    position: absolute;
    bottom:220px;
    left:305px;
}
.button-slider-left{
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    padding:10px;
    position: absolute;
    top:52%;
    left:1%;
}
.button-slider-left:hover{
    cursor: pointer;
    background-color: rgb(194, 189, 189);
}
#back-slider{
    width: 100%;
}
#next-slider{
    width: 100%;
}
.button-slider-right{
    width: 50px;
    height: 50px;
    background-color: gray;
    border-radius: 50%;
    padding:10px;
    position: absolute;
    top:50%;
    right:1%;
}
.button-slider-right:hover{
    cursor: pointer;
    background-color: rgb(194, 189, 189);
}
.box-dots{
    width:13%;
    height:3%;
    /* background-color: rgb(255, 255, 255); */
    position: absolute;
    bottom:5px;
    left:44%;
    display: flex;
    justify-content:space-between;
    align-items:center;
}

.dot{
width:40px;
height:8px;
background-color: gray;
float: left;
}
.dot:hover{
    cursor: pointer;
    background-color: rgb(194, 189, 189);
}
/* header end */
/* ................................................................................... */
/* main start */
main{
    min-height: 700vh;
    margin: auto;
}
.main-one{
    width:100%;
    height:120vh;
}
.main-one-top{
    width:100%;
    height: 30vh;
    background-color: rgb(169, 50, 155);
    margin: auto;
}
 /* .............................main-one-top-box............................................ */
.main-one-top-box{
    width:33.3333%;
    height: 100%;
    background-color: #222222;
    float: left;
}
#photo-main-one{
    width:14%;
    float:right;
    transform:translateY(28px);
    margin-right: 20%;
}
#text-main-one{
    color: white;
    transform: translateX(310px);
    margin-top: 20%;
    font-size:18px;
    font-weight: bolder;
}
#text-main-one-one{
    width: 40%;
    color:rgb(197, 196, 196);
    float: right;
    margin-right:5%;
    margin-top:1%;
    text-align: center;
}
#photo-main-back{
    width: 20%;
    float: right;
    transform: translateX(226px);
    opacity: 0.2;
    margin-top: 2%;
}
/* ............................................ main-one-top-box-two....................................... */
.main-one-top-box-two{
    width: 33.33333%;
    height: 100%;
    float: left;
    background-color: #eeeeee;
}
#photo-main-two{
    width: 13%;
    margin-left: 45%;
    transform:translateY(28px);
    text-align: center;
}
#text-main-two{
    color: red;
    transform: translateX(215px);
    margin-top:6%;
    font-size:19px;
    font-weight: bolder;
}
#text-main-two-two{
    width: 40%;
    color:rgb(183, 182, 182);
    float: right;
    margin-right:28%;
    margin-top:1%;
    text-align: center;
}
#photo-main-back-two{
    width: 17%;
    float: right;
    transform: translateX(340px);
    opacity:0.2;
    margin-top: 5%;
}
/* ............................................ main-one-top-box-three....................................... */
.main-one-top-box-three{
    width:33.3333%;
    height: 100%;
    background-color: #cc2b2b;
    float:right;
}
#photo-main-three{
    width:9%;
    margin-left:22%;
    transform:translateY(28px);
    text-align: center;
}
#text-main-three{
    color:white;
    margin-top:6%;
    font-size: 18px;
    font-weight: bolder;
    margin-left:17%;
}
#text-main-three-three{
    width: 43%;
    color:rgb(183, 182, 182);
    float: left;
    margin-left:6%;
    margin-top:1%;
    text-align: center; 
}
#photo-main-back-three{
    width: 13%;
    float: left;
    transform: translateX(-48px);
    opacity:0.2;
    margin-top:6%;
}
/* ...............................................main-one-bottom................................ */
.main-one-bottom{
    height: 90vh;
}
.main-one-box-left-box{
width:65%;
height: 100%;
float: right;
}
#main-one-box-text{
margin-top:20%;
/* background-color: red; */
font-size:small;
font-weight: bolder;
color:gray;
}
#main-one-two{
color: rgb(0, 0, 0);
display: inline-block;
font-size: 45px;
font-weight: bolder;
}
#main-one-line{
width:24%;
height: 1%;
background-color: red;
}
#main-one-text{
line-height:27px;
margin-top: 3%;
font-size:medium;
}
#sit-up{
    margin-top:11%;
    display:block;
}
#outline{
    margin-top:8%;
    display:block;
}
#title-one{
    margin-left:22%;
    transform: translateY(-38px);
    display: inline-block;
    font-weight: bolder;
}
#title-one-one{
    margin-left:22%;
    transform: translateY(-30px);
    display: inline-block;
    color: gray;
}
#title-two{
    margin-left:22%;
    transform: translateY(-55px);
    display: inline-block;
    font-weight: bolder;
}
#title-two-two{
    margin-left:22%;
    transform: translateY(-41px);
    display: inline-block;
    color: gray;
}
/* .........................................main-one-bottom-box-left.............................. */
.main-one-bottom-box-left{
    width: 50%;
    height: 100%;
    float: left;
}
/* .........................................main-one-bottom-box-right.............................. */
.main-one-bottom-box-right{
    width: 50%;
    height: 100%;
    float: right;
    position: relative;
}
#photo-site{
    width:75%;
    margin-top:10%;
    z-index: 100;
}
#back-photo{
    width:94%;
    position: absolute;
    bottom:7%;
    left:6%;
    z-index:-1;
}
/* .........................................main-one-bottom-box-right.............................. */
/* ............................................main-two............................................ */
.main-two{
    height:90vh;
    background-color:#111111;
    text-align: center;
}
#main-two-photo{
    width:28%;
    margin-top:2%;
}
#main-two-title{
    color: white;
    font-weight: bolder;
    font-size:45px;
    display: block;
    margin-top: -4.5%;
    /* transform: translateY(-70px); */
}
#main-three-title{
    width:46%;
    color:white;
    margin: auto;
    margin-top:1%;
    /* background-color:#744646; */
}
.main-two-boxes{
    width: 65%;
    height: 45%;
    margin: auto;
    margin-top: 1%;
    /* background-color: rgb(255, 255, 255); */
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.main-two-box{
    width:24%;
    height:100%;
    background-color:#2a2a2a;
}
.title-main-two-box{
    color: white;
    margin-top:13%;
    margin-bottom:5%;
    font-weight: bolder;
}
.paraghraph-main-two-box{
    color: white;
    margin-top: 5%;
}
.finally-photo{
margin-top: 5%;
}
.finally-paraghraph{
margin-top:9%;
}
.main-two-dots{
    width:7%;
    height:5%;
    margin: auto;
    margin-top:1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-two-dot{
width: 32.333%;
height:25%;
background-color:#2a2a2a;
margin-right:5%;
}
.main-two-dot:hover{
    cursor: pointer;
    background-color: red;
}

/* ............................................main-two............................................ */
/* ...............................................middle-main-two-three............................ */
.middle-main-two-and-three{
    width: 82%;
    height: 29vh;
    background-color: bisque;
    margin:5% 18%;
}
.middle-main-two-and-three-box-left{
    width:25%;
    height: 100%;
    background-color: rgb(102, 139, 66);
    float: left;
}
#photo-two-and-three{
width: 100%;
height: 100%;
}
.middle-main-two-and-three-box-right{
    width:75%;
    height: 100%;
    background-color: #e41c26;
    float: right;
    position: relative;
}
#title-box-two-and-three{
color: white;
text-align: left;
padding:3% 5%;
font-size: 45px;
font-weight: bolder;
}
#line-box-two-and-three{
width:15%;
height: 2%;
background-color: white;
display: inline-block;
position: absolute;
top:33%;
left:5%;
}
#paraghraph-box-two-and-three{
    width: 65%;
    margin:0% 5%;
    color: white;
    text-align: left;
    font-size: medium;
}
#button-box-two-and-three{
    float: left;
    margin:2% 5%;
    padding:1% 3%;
    border: 1px solid white;
    color: white;
    background-color:#e41c26;
    border-radius:2px;
    transition: background-color 1s;
}
#button-box-two-and-three:hover{
    cursor: pointer;
    color: #e41c26;
    background-color: white;
}
/* ...............................................middle-main-two-three............................ */
/* ...........................................main-three........................................... */
.main-three{
    width: 100%;
    height:90vh;
}
.main-three-box-left{
width:50%;
height:80%;
float: left;
position: relative;
}
.main-three-box-right{
    width:50%;
    height:80%;
    float:right;
}
#photo-main-box-three-right{
    width:48%;
    margin-left: 16%;
    margin-top:17%;
}
#photo-main-three-box-left{
    width:13%;
    float: right;
    opacity: 0.2;
    position:absolute;
    top:48%;
    right:4%;
}
.main-three-box-left-boxes{
    width: 60%;
    height:75%;
    margin: 15% 36%;
}
#text-main-three-box-left-boxes{
    padding:3% 0%;
    font-weight: bolder;
    font-size:small;
    color: gray;
}
#title-main-three-box-left-boxes{
    width: 72%;
    font-size: 45px;
    font-weight: bolder;
}
#line-main-three-box-left-boxes{
width: 28%;
height: 1%;
background-color: red;
display: inline-block;
margin-bottom: 3%;
}
#text-three-main-three-box-left-boxes{
font-weight: bolder;
margin-top: 2%;
margin-bottom: 2%;
}
#text-four-main-three-box-left-boxes{
width:100%;
margin-top: 2%;
font-size:medium;
}
#arrow-main-three-box-left-boxes{
width: 3%;
margin-top: 2%;
transform: translateX(-3px);
}
#arrow-main-three-box-left-boxes:hover{
    cursor: pointer;
}
/* ...........................................main-three........................................... */
/* ...........................................main-four........................................... */
.main-four{
    height:30vh;
    background-color: #111111;
}
.main-four-boxes{
    width: 64%;
    height:68%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.main-four-boxes-items{
    width: 24%;
    height:83%;
}
.bicep{
    margin-top:8%;
}
.bicep-change-one{
    width: 21%;
    margin-top:7%;
}
.bicep-change-two{
    width: 43%;
    margin-top:7%;
}
.numbers{
    color: white;
    font-weight: bolder;
    font-size: 30px;
    display: inline-block;
    transform: translateY(-30px);
    margin-left: 2%;
}
.text-site{
    color: white;
    font-size:14px;
    display: inline-block;
    transform: translateY(-28px);
    margin-left:33%;
}
.change-text-box-two{
    margin-left: 36%;
}
.change-text-box-three{
    margin-left: 26%;
}
.change-text-box-four{
    margin-left:46%;
}
/* ...........................................main-four......End........................................... */
/* .....................................main-middle-four-and-five.........Start.................................. */
.main-middle-four-and-five{
    width:100%;
    height:58vh;
    margin-top:-5%;
    position: relative;
    }
    #back-image{
        width: 100%;
        height:100%;
    }
    #back-image:hover{
        cursor: pointer;
    }
/* .....................................main-middle-four-and-five.........End......................... */
/* ............................................main-five...................STart........................ */
.main-five{
    width: 100%;
    height:83vh;
    background-color:white;
}
.main-five-top-box{
    height: 20vh;
    text-align: center;
    position: relative;
}
#text-title{
    font-weight: bolder;
    font-size: 45px;
    padding-top:3%;
}
#line-title{
    width:8%;
    height: 2%;
    background-color: red;
    display: inline-block;
    position: absolute;
    top:62%;
    left:45.5%;
}
.paraghraph-text{
    width: 40%;
    margin: auto;
    margin-top: 1%;
}
.main-five-bottom-box{
    height:50vh;
    background-color:white;
}
.main-five-bottom-box-box{
    width:64%;
    height:100%;
    background-color: chocolate;
    margin: auto;
    text-align: center;
}
.main-five-bottom-box-box-left{
    width: 50%;
    height: 100%;
    background-color:white;
    float: left;
    display: flex;
    justify-content: center;
    align-items:center;
    position: relative;
}
.main-five-bottom-box-box-right{
    width: 50%;
    height: 100%;
    background-color:white;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.one-photo{
    width:100%;
}
.box-title-and-paraghraph{
width:17vw;
height:7vh;
background-color: rgb(255, 255, 255);
float: left;
position: absolute;
bottom:10%;
left:22%;
border-radius: 9px;
text-align: center;
box-shadow:1px 1px 0px 0px;
}
.para-one{
    color: red;
    font-size:11px;
    padding-top: 4%;
    padding-bottom:1%;
    font-weight: bolder;
}
.para-two{
    font-size:17px;
    font-weight: bolder;
}
.box-title-and-paraghraph-two{
    width:17vw;
    height:7vh;
    background-color: rgb(255, 255, 255);
    float: left;
    position: absolute;
    bottom:10%;
    right:26%;
    border-radius: 9px;
    text-align: center;
    box-shadow:1px 1px 0px 0px;
}
.main-five-bottom-box-dots-boxs{
    width: 10%;
    height:1%;
    margin: auto;
    margin-bottom: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-five-bottom-box-dot{
    width: 30.33%;
    height: 100%;
    background-color: gray;
    float: left;
    margin-right:2%;
    transition: background-color 1s;
}
.main-five-bottom-box-dot:hover{
    cursor: pointer;
    background-color: red;
}
/* ............................................main-five.................End.......................... */
/* ............................................main-six.................start.......................... */
.main-six{
    height:45vh;
    background-color:black;
    position: relative;
}
.main-six-boxes{
width:64%;
height: 100%;
margin: auto;
/* background-color: #346f8b; */
position: absolute;
bottom: 0;
left:19%;

}
.main-six-box-left{
width: 50%;
height: 100%;
float: left;
/* background-color: chocolate; */
}
.main-six-box-right{
    width: 50%;
    height: 100%;
    float: right;
}
#protein-back-image{
    width:45%;
    position:absolute;
    bottom:0%;
    right:0%;
}
#back-image-two{
    width: 100%;
    height: 100%;
}
#title-main-six{
    color: white;
    font-size: 45px;
    font-weight:bolder;
    margin-top:8%;
    margin-left:5%;
}
#line-main-six{
    width:30%;
    height: 2%;
    background-color: white;
    display: inline-block;
    margin-left:5%;
}
#text-main-six{
    width: 80%;
    color: white;
    margin-left:5%;
    margin-top:1%;
    line-height:20px;
}
#button-main-six{
    float: left;
    margin:8% 5%;
    padding:1% 3%;
    border: 1px solid white;
    color: white;
    background-color:#0e0e0e;
    border-radius:2px;
    transition: background-color 1s;
}
#button-main-six:hover{
    cursor: pointer;
    color: black;
    background-color: white;
}
/* ............................................main-six.................end.......................... */
/* ............................................main-seven..................start..................... */
.main-seven{
    height:70vh;
}
.main-seven-boxes{
    width:64%;
    height: 100%;
    margin: auto;
}
.main-seven-boxes-left{
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}
.main-seven-boxes-right{
    width: 50%;
    height: 100%;
    float: right;
}
#main-seven-back{
    width:100%;
    height:80%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#text-main-seven-boxes-right{
    color: gray;
    font-size: small;
    margin-top:40%;
    font-weight: bolder;
}
#title-main-seven-boxes-right{
    font-size:45px;
    font-weight: bolder;
}
#line-main-seven-boxes-right{
    width:25%;
    height: 1%;
    background-color: red;
    display: inline-block;
    margin-bottom: 2%;
}
.button-main-seven-boxes-right{
    padding: 1% 4%;
    border-radius: 25px;
    background-color: rgb(194, 192, 192);
    font-weight: bolder;
    font-size: small;
    border: none;
    margin-top: 5%;
    margin-right:2%;
}
.button-main-seven-boxes-right:hover{
    cursor: pointer;
}
.button-main-seven-two{
border:1px solid black;
background-color: white;
color:black;
}
#text-price-main-seven-boxes-right{
    font-weight: bolder;
    font-size: 40px;
    margin-top: 4%;
}
.button-for-price{
    padding:2% 6%;
    margin-top:5%;
    margin-right: 4%;
    border-radius: 3px;
    border: none;
    transition: background-color 1s;
    border: 1px solid black;

}
.button-for-price:hover{
    cursor: pointer;
    background-color: white;
    color: black;
}
.button-for-price-one{
    background-color: black;
    color: white;
}
.button-for-price-two{
    border: 1px solid black;
}
/* .button-for-price-two:hover{
    background-color:rgb(0, 0, 0);
    color: rgb(255, 255, 255);
} */
#protein{
    width:6%;
    float: left;
    margin-top: 1%;
}
/* ............................................main-seven..................end..................... */
/* ............................................main-eight..................start..................... */
.main-eight{
    height:100vh;
}
.main-eight-boxes{
    width: 64%;
    height: 100%;
    margin: auto;
}
.main-eight-boxes-top{
    height: 20vh;
    text-align: center;
    position: relative;
}
#main-eight-boxes-top-title{
font-weight: bolder;
font-size: 45px;
padding-top:3%;
}
#main-eight-boxes-top-line{
    width:13.5%;
    height: 2%;
    background-color: red;
    display:block;
    margin: auto;
    position: absolute;
    top:51%;
    left:42.5%;
}
#main-eight-boxes-top-paraghraph{
    width: 70%;
    margin: auto;
    margin-top: 1%;
    font-weight: bolder;
    color: gray;
}
.main-eight-boxes-bottom{
    height: 60vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-eight-boxes-bottom-box{
    width: 32.333%;
    height: 100%;
    float: left;
}
.main-eight-boxes-bottom-box-top{
    height:25vh;
    background-color: #915356;
    position: relative;
}
#main-eight-box-image{
    width: 100%;
    height: 100%;
    border-radius:8px;
}
#date{
    width:15%;
    height: 27%;
    background-color: red;
    display: inline-block;
    position: absolute;
    bottom:5%;
    left:3%;
    text-align: center;
    font-weight: bolder;
    color: white;
    padding-top:2%;
    border-radius:3px;
}
.main-eight-boxes-bottom-box-bottom{
    height: 35vh;
    float: left;
}
.main-eight-bottom-box-bottom-boxes-top{
    height: 20%;
}
.main-eight-bottom-box-bottom-boxes-item{
    width: 33.333%;
    height: 100%;
    float: left;
}
.logo-admin{
    width:10%;
    margin-top: 15%;
    margin-left: 20%;
}
.title-admin{
    font-size:small;
    color: gray;
    display: inline-block;
}
.logo-admin-edit{
    margin-top:18%;
}
.main-eight-bottom-box-bottom-boxes-bottom{
    height: 80%;
    background-color:white;
    position: relative;
}
#title-box{
    font-weight: bolder;
    font-size:18px;
}
#title-box-two{
    color: gray;
    margin-top: 5%;
    font-size:medium;
}
#button-box{
    padding:3% 10%;
    border: 1px solid black;
    margin-top: 5%;
    border-radius: 4px;
    transition: background-color 1s;
}
#button-box:hover{
    cursor: pointer;
    background-color: black;
    color: white;
}
#title-view-more{
    color: red;
    font-size:x-small;
    position: absolute;
    bottom:0%;
    right:42%;
    padding-bottom:2%;
    transition: color 1s;
}
#title-view-more:hover{
    cursor: pointer;
    color:black;
}
/* ............................................main-eight..................end..................... */
/* ............................................main-nine..................start..................... */
.main-nine{
    height: 35vh;
    background-color: rgb(198, 198, 198);
}
.main-nine-box{
    width: 64%;
    height: 35vh;
    background-color: red;
    margin: auto;
    border-radius: 25px;
    transform: translateY(-80px);
}
.main-nine-box-left{
    width: 50%;
    height: 100%;
    float: left;
    padding: 5% 5%;
    z-index: 9999;
    position:relative;
}
.main-nine-box-right{
    width: 50%;
    height: 100%;
    float: right;
}
#main-nine-title{
    color: white;
    font-weight: bolder;
    font-size:45px;
}
#main-nine-title-two{
    color: white;
    font-weight: bolder;
    font-size:22px;
    margin-bottom: 4%;
}
#main-nine-paraghraph{
    color: white;
    font-size:small;
}
input{
    width: 90%;
    height: 20%;
    padding: 4% 2%;
    text-align: left;
    margin-top: 10%;
}
#input-two{
    margin-top: 3%;
}
input::placeholder{
    float: left;
}
#button-main-nine{
    width: 90%;
    height: 20%;
    background-color:black;
    color: white;
    margin-top:3%;
    border-radius: 3px;
    transition: background-color 1s;
}
#button-main-nine:hover{
    cursor: pointer;
    background-color: white;
    color: black;
}
#photo-main-nine{
    width:80%;
    position:absolute;
    z-index: -9999;
}
/* ............................................main-eight..................end..................... */
/* ............................................Footer..................start..................... */
footer{
    height:40vh;
    background-color: #55181b;
}
.footer-box-top{
    width: 100%;
    height: 90%;
    background-color: #111111;
    margin: auto;
}
.footer-box-items{
    width: 64%;
    height: 100%;
    background-color: #915356;
    margin: auto;
}
.footer-box-items-box{
width: 25%;
height: 100%;
background-color: #111111;
float: left;
padding: 2% 0%;
}
.footer-box-items-box-to-box{
width: 100%;
height: 5vh;
background-color: #111111;
margin-top:8%;
}
.footer-box-items-box-to-box-left{
width:15%;
height: 100%;
float: left;
text-align:left;
padding-left: 5%;
}
.footer-box-items-box-to-box-right{
    width:85%;
    height: 100%;
    background-color:#111111;
    float:left;
}
.footer-box-bottom{
    width: 100%;
    height: 10%;
    background-color: black;
    text-align: center; 
}
.footer-box-bottom p{
    color: white;
    font-size:10px;
    padding-top:8px;
}
#logo-footer{
    width:60%;
    padding-top:1%;
    margin-left: 4%;
    background-color: #111111;
}
#location{
    margin-top:15%;
}
#adress{
color: white;
font-size:small;
transform:translateX(-10%);
}
.left-two{
    padding-top:2%;
}
.right-two{
    padding-top: 3%;
}
.box-end{
    width:40%;
    height: 4vh;
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.social{
    width:28%;
}
.social:hover{
cursor: pointer;
}
.box-end-items{
    width: 33.333%;
    height: 100%;
    background-color: red;
    border-radius: 50%;
}
.footer-box-items-list{
    width: 25%;
    height: 100%;
    background-color: #111111;
    float: left;
}
.first{
    color: white;
    font-weight: bolder;
    font-size: x-large;
    padding-top: 22%;
    padding-bottom:3%;
}
.third{
    color: white;
    margin-top:8%;
    font-size: 14px;
}
.third:hover{
    cursor: pointer;
}
/* ............................................footer..................end..................... */