.container{
 overflow:hidden;
width:80%;
margin: auto;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
html{
scroll-behavior: smooth;
}
/* start header */

.header .logo{
float: left;
width: 30%;
}
.header .logo img{
padding-top: 20px;
}
.header .links{
float: left;
width: 70%;
}
.header .links  ul{
list-style: none;
padding: 0;
margin: 0;
padding-top: 30px;
    text-align: right;

}
.header .links li{
display: inline-block;
}
.header .links li button{
    border: none;
    background-color: blueviolet;
    height: 33px;
    position: relative;
    width: 119px;
    margin-left: 19px;
    border-radius: 2px;
    color: white;
}
.header .links li a{
text-decoration: none;
color: gray;
color: gray;
    padding-left: 33px;
        font-size: 18px;
}
/* end header */
.layout{
background-repeat: no-repeat;
background-image: url(../images/deff.jfif);
background-size: cover;
}
.layout h1{
color: white;
    padding-top: 50px;
    padding-left: 30px;
}
.layout p{
font-size: 17px;
    color: white;
    padding-left: 30px;
    padding-top: 50px;
    line-height: 1.6;
}
.layout button{
border: none;
    width: 135px;
    height: 40px;
    margin-left: 30px;
    margin-bottom: 84px;
    background-color: blueviolet;
    color: white;
}

/* start vivamus */
.vivamus{
text-align: center;
margin-top: 40px;
}
.vivamus h2{
font-family: inherit;
font-size: 35px;
font-weight: normal;
font-weight: 400;
}
.vivamus p{
line-height: 1.6;
font-size: 18px;
color: #555;
}
/* end vivamus */
/* start partitions */

.container .section{
    float: left;
    margin-right: 40px;
}
.section p:first-of-type{
text-align: center;
}
.section p:last-of-type{
    line-height: 1.6;
    font-size: 16px;
}
.section p span i{
font-size: 70px;
}
.section p span{
    font-size: 30px;
}
/* end partations */
/* start background */
.bk img{
    width: 100%;
}
.bk .circle span i{
    padding-top: 60px;
    color: gray;
    background-color: transparent;
}
.bk .circle {
    text-align: center;
}
/* end background */
/* start loreet */
.blue{
margin-top: 40px;
background-color: #0c0633;
text-align: center;
margin-bottom: 70px;
}
.blue h2{
font-size: 35px;
font-weight: normal;
font-weight: 400;
padding-top: 60px;
color: white;
}
.blue p{
    line-height: 1.6;
    color: white;

}
.blue button{
border: none;
color: white;
width: 135px;
    height: 40px;
    margin-left: 30px;
    margin-bottom: 84px;
    background-color: blueviolet;
    margin-top: 10px;
}
/* end lorert */
 /* start two */
.image{
     float: left;
     width: 50%;
     left: 0;
 }
 .image img{
     width: 600px;
     margin-right: 30px;
     
 }
  .text{
     float: left;
     width: 50%;
     
 }
  
  .text .right h3 {
     display: inline-block;
    font-weight: 400;
    font-size: 39px;
 }
  .text .right i {
     font-size:30px ;
     color: blueviolet;
 }
  .text .right div:last-of-type{

    font-size: 18px;
    line-height: 1.3;
    color: gray;
    width: 100%;
 }
  .text .right div:first-of-type{
     height: 84px;
 }


 /* end two */
 /* start hint */
 
 .hint img{
width: 100px;

 }
 .hint span{
margin-left: 100px;
font-size: 50px;
font-weight: bold;
color: rgb(190, 184, 184);
display: inline-block;
padding-top: 70px;
 }
  
 /* end hint */
 /* start contact */
 .contact{
     margin-top: 70px;
 }
 .contact .about ,.contact .like,.contact .sub{
float: left;
margin-left: 105px;
 }
 .about h4 {
font-size: 28px;
    font-weight: normal;
 }
 .about p{
line-height: 1.6;
    color: #555;
    font-size: 18px;
 }
 .like h4{
font-size: 28px;
    font-weight: normal;
 }
 .like p i{ 
     font-size: 20px;
      padding: 7px; 
      margin: 1px;
      border-radius: 50%; 
      border: 1px solid rgb(184, 180, 180);
}
 .like p:last-of-type{
line-height: 1.6;
    color: #555;
    font-size: 15px;
 }
 .sub h4{
font-size: 28px;
    font-weight: normal;
 }
 .sub input{

 width: 233px;
    height: 34px;
}
 .sub button{
border: none;
    padding: 12px;
    margin-left: -4px;
    color: white;
    background-color: blueviolet;
 }
 /* end contact */