*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/*header*/
header{
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
header .header-top{
    height: 12vh;
}
header .header-top .header-top-left{
    width: 50%;
    height: 100%;
    float: left;
}
header .header-top .header-top-left a{
    padding: 1% 3%;
    background-color:#27debf;
    color: black;
    text-decoration: none;
    font-weight: bolder;
    font-size: 25px;
    margin-top: 3.5%;
    margin-left: 4%;
    display: inline-block;
    text-align: center;
    border-radius: 5%;
}
header .header-top .header-top-right{
    width: 50%;
    height: 100%;
    float: left;
}
header .header-top .header-top-right nav ul li{
    float: left;
    list-style: none;
    margin-top: 4.5%;
    margin-left: 6.5%;
}
header .header-top .header-top-right nav ul li a{
    color: black;
    text-decoration: none;
    font-size: 20px;
}
#image-one-header{
    z-index: -99;
    position: absolute;
    bottom:-6%;
    right: -9%;
    width: 70%;
}
#image-two-header{
    margin-right:10%;
    margin-top:7%;
    width:25%;
    float: right;
}
h1{
    display: inline-block;
    margin-top:15%;
    margin-left:13%;
    font-size: 58px;
}
h2{
    font-size:88px;
    margin-left: 13%;
    font-weight: bold;
}
#text{
    margin-left: 13%;
    font-size: 18px;
}
#link-one{
    padding:0.6% 3%;
    background-color: #27debf;
    text-decoration: none;
    color: black;
    margin-left:13%;
    margin-top: 2%;
    display:inline-block;
    border-radius:50px;
    transition: background-color 1s;
}
#link-one:hover{
    background-color: #1e9984;
    color: white;
}
#link-two{
    color: black;
    text-decoration: none;
    margin-left:1.5%;
}
#ellipseOne{
    position: absolute;
    bottom:27%;
    left:58%;
}
#ellipseTwo{
    position: absolute;
    bottom:17%;
    left:30%;
}
#ellipseThree{
    position: absolute;
    bottom:59%;
    left:30%;
}
#ellipseFour{
    width: 6%;
    position: absolute;
    bottom:20%;
    left:7%;
}
#ellipseFive{
    position: absolute;
    bottom:4%;
    right:0.5%;
}
/*header*/
/*main*/
main{
    min-height: 100vh;
}
main .main-top{
    height:100vh;
}
main .main-top .main-top-box{
    width: 72%;
    height: 70%;
    margin:auto;
}
main .main-top .main-top-box .main-top-box-left{
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}
main .main-top .main-top-box .main-top-box-right{
    width: 50%;
    height: 100%;
    float: left;
}
#dot-one{
    float: right;
}
#photo-main{
    float: right;
    position: absolute;
    top: 1.1%;
    right:0%;
    width:89%;
}
#dot-image{
    width:30%;
    position: absolute;
    top:-10%;
    left: 0;
}
main .main-top .main-top-box .main-top-box-right #title-one{
    margin-top: 13%;
    color: #27debf;
}
main .main-top .main-top-box .main-top-box-right .title-two{
    width: 60%;
    margin-top:7%;
    font-weight: bold;
}
main .main-top .main-top-box .main-top-box-right .title-three{
    width: 70%;
    margin-top: 4%;
}
main .main-top .main-top-box .main-top-box-right .title-four{
    width: 70%;
    margin-top: 4%;
}
#link-three{
    padding: 2% 5%;
    background-color: #27debf;
    margin: 9% 13%;
    display: inline-block;
    text-decoration: none;
    color: white;
    transition: background-color 1s;
    border-radius: 4px;
}
#link-three:hover{
    background-color: #1e9984;
    color: white;
}
.main-top-box-bottom{
    width: 100%;
    height: 43%;
    margin: auto;
    padding: 2.5%;
    display: flex;
    justify-content:space-between;
    align-content:center;
}
.photo-main{
    width:23%;
}
.main-middle-one{
    height:17vh;
    text-align: center;
    padding-bottom: 5%;
}
.main-middle-one #span-one{
    color: #27debf;
    font-size: 22px;
    line-height: 5vh;
}
.main-middle-one #header-one{
    font-size: 24px;
}
.main-middle-two{
    min-height: 50vh;
}
.main-middle-two .main-middle-two-box{
    width: 85%;
    height: 149vh;
    /*background-color: #d00505;*/
    margin: auto;
    position: relative;
}
.box-one{
    width: 28vw;
    height:47vh;
    background-color: white;
    box-shadow:1px 0px 4px 3px gray;
    float: left;
    border-radius: 3px;
}
.icon-one{
    width: 20%;
    margin:5%;
}
.main-middle-two .main-middle-two-box .box-one h3{
    margin:0% 5%;
}
.main-middle-two .main-middle-two-box .box-one p{
    margin-left:5%;
    margin-top: 15%;
}
.main-middle-two .main-middle-two-box .box-one a{
    padding: 2% 5%;
    background-color: #27debf;
    margin: 17% 5%;
    display: inline-block;
    text-decoration: none;
    color: white;
    transition: background-color 1s;
    border-radius: 4px;
}
.main-middle-two .main-middle-two-box .box-one a:hover{
    background-color: #1e9984;
    color: white;
}
.box-two{
    width: 50vw;
    height: 30vh;
    background-color:white;
    float: right;
    transform: translateY(8vh);
    box-shadow:1px 0px 4px 3px gray;
    border-radius: 3px;
    position: relative;
}
.box-two .one{
    font-weight: bolder;
    font-size: 30px;
    margin: 5%;
}
.box-two .line-one{
    width: 44vw;
    height: 4px;
    background-color: #c5ddd9;
    display: inline-block;
    margin: 0% 5%;
    z-index: -9999;
}
.box-two .line-two{
    width: 41vw;
    height: 4px;
    background-color:#27debf;
    margin-left: 5%;
    margin-top: -10px;
    display: inline-block;
    position:absolute;
    top:50.5%;
    left: 0;
}
.box-two .two{
    font-weight: bolder;
    font-size: 20px;
    margin: 2% 5%;
}
.box-two .three{
    color: #5a5959;
    font-size: 17px;
    margin: 2% 5%;
}
.box-three{
    width: 50vw;
    height: 30vh;
    background-color:white;
    float:left;
    margin-top:6%;
    box-shadow:1px 0px 4px 3px gray;
    border-radius: 3px;
    clear:left;
    position: relative;
}
.box-three .one{
    font-weight: bolder;
    font-size: 30px;
    margin: 5%;
}
.box-three .line-one{
    width: 44vw;
    height: 4px;
    background-color: #c5ddd9;
    display: inline-block;
    margin: 0% 5%;
    z-index: -9999;
}
.box-three .line-two{
    width: 41vw;
    height: 4px;
    background-color:#27debf;
    margin-left: 5%;
    margin-top: -10px;
    display: inline-block;
    position:absolute;
    top:50.5%;
    left: 0;
}
.box-three .two{
    font-weight: bolder;
    font-size: 20px;
    margin: 2% 5%;
}
.box-three .three{
    color: #5a5959;
    font-size: 17px;
    margin: 2% 5%;
}
.box-four{
    width: 28vw;
    height:47vh;
    background-color:#27debf;
    box-shadow:1px 0px 4px 3px gray;
    float: right;
    border-radius: 3px;
}
.main-middle-two .main-middle-two-box .box-four h3{
    margin:0% 5%;
    color: white;
}
.main-middle-two .main-middle-two-box .box-four .text{
    margin-left:5%;
    margin-top:15%;
    color: white;
}
.main-middle-two .main-middle-two-box .box-four a{
    padding: 2% 5%;
    background-color: white;
    margin: 15% 5%;
    display: inline-block;
    text-decoration: none;
    color:black;
    transition: background-color 1s;
    border-radius: 4px;
}
.main-middle-two .main-middle-two-box .box-four a:hover{
    background-color: #1e9984;
    color: white;
}
.box-five{
    width: 28vw;
    height:47vh;
    background-color:white;
    box-shadow:1px 0px 4px 3px gray;
    float: left;
    border-radius: 3px;
    margin-top: 10%;
}
.main-middle-two .main-middle-two-box .box-five h3{
    margin:0% 5%;
}
.main-middle-two .main-middle-two-box .box-five .text{
    margin-left:5%;
    margin-top:6%;
}
.main-middle-two .main-middle-two-box .box-five a{
    padding: 2% 5%;
    background-color: #27debf;
    margin-left: 5%;
    margin-top: 23%;
    display: inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
.main-middle-two .main-middle-two-box .box-five a:hover{
    background-color: #1e9984;
    color: white;
}
.box-six{
    width: 50vw;
    height: 30vh;
    background-color:white;
    float: right;
    margin-top:10%;
    box-shadow:1px 0px 4px 3px gray;
    border-radius: 3px;
    position: relative;
}
.box-six .one{
    font-weight: bolder;
    font-size: 30px;
    margin: 5%;
}
.box-six .line-one{
    width: 44vw;
    height: 4px;
    background-color: #c5ddd9;
    display: inline-block;
    margin: 0% 5%;
    z-index: -9999;
}
.box-six .line-two{
    width: 41vw;
    height: 4px;
    background-color:#27debf;
    margin-left: 5%;
    margin-top: -10px;
    display: inline-block;
    position:absolute;
    top:50.5%;
    left: 0;
}
.box-six .two{
    font-weight: bolder;
    font-size: 20px;
    margin: 2% 5%;
}
.box-six .three{
    color: #5a5959;
    font-size: 17px;
    margin: 2% 5%;
}
#image-back-site{
    width: 16%;
    position: absolute;
    bottom:0%;
    left:87%;
    z-index: -9999;
}
.main-middle-three{
    height: 22vh;
    text-align: center;
}
.main-middle-three a{
    padding: 1% 3%;
    background-color: #27debf;
    margin-top:4%;
    display: inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
.main-middle-three a:hover{
    background-color: #1e9984;
    color: white;
}
.main-middle-four{
    min-height:85vh;
    text-align: center;
    font-size: 22px;
}
.main-middle-four #text-two{
    color: #27debf;
}
.main-middle-four h3{
    font-size: 30px;
    margin-bottom: 4%;
}
.main-middle-four-box{
    width:85%;
    height:45vh;
    margin:auto;
    padding:1%;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
.main-middle-four-box img{
    width:23%;
}
.main-middle-four a{
    padding: 1% 3%;
    background-color: #27debf;
    margin-top:4%;
    display: inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
.main-middle-four a:hover{
    background-color: #1e9984;
    color: white;
}
.main-middle-five{
    min-height:60vh;
    text-align: center;
    position: relative;
}
.main-middle-five #text-three{
    font-size: 22px;
    color: #27debf;
    padding-top: 2%;
}
.main-middle-five #text-four{
    font-size: 30px;
}
.main-middle-five #path{
    float: left;
    position: absolute;
    top: 0;
    left:13%;
}
.main-middle-five #path2{
    float: right;
    position: absolute;
    top:3%;
    right:31%;
}
.main-middle-five #text-five{
    width:47%;
    margin: auto;
    margin-top: 10%;
}
.main-middle-five #path3{
    float: right;
    position: absolute;
    top:56%;
    right:26%;
}
.main-middle-five #path4{
    float: right;
    position: absolute;
    top:71%;
    left:27%;
}
.main-middle-five #text-six{
    margin-top:2%;
}
.main-middle-five #path5{
    position: absolute;
    top:74%;
    left:54%;
}
.main-middle-five #path6{
    position: absolute;
    top:83%;
    left:47%;
}
.main-middle-five #path7{
    position: absolute;
    top:87%;
    left:45%;
}
.main-middle-five #path8{
    position: absolute;
    top:87%;
    left:51%;
    z-index:-999;
}
.main-middle-six{
    min-height:140vh;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.main-middle-six #back-image{
    width: 75%;
    float: right;
    position: absolute;
    top:-5vh;
    right:-9vw;
    z-index:-9999;
}
#text-seven{
    color: #27debf;
    font-size: 22px;
    margin-top: 12%;
}
#text-eight{
    font-size:25px;
    color:black;
}
.main-middle-six .main-middle-six-box{
    width: 85%;
    height: 60vh;
    margin:auto;
    transform: translateY(5vh);
    display: flex;
    justify-content: space-between;
    align-content:center;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two{
    width: 31.3333%;
    height: 100%;
    background-color:white;
    box-shadow: 3px 3px 25px 2px gray;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two .main-middle-six-box-two-top{
    width:100%;
    height:50%;
    background-color: #1234b0;
}
.image-header-box{
    width:100%;
    height: 100%;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two .main-middle-six-box-two-bottom{
    width:100%;
    height: 50%;
    text-align: left;
    padding-left:9%;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two .main-middle-six-box-two-bottom .text-nine{
    color: #27debf;
    font-size: 20px;
}
.text-eleven{
 margin-top:3%;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two .main-middle-six-box-two-bottom .link{
    text-decoration: none;
    color: #27debf;
    margin-top: 4%;
    margin-right: 3%;
    display:inline-block;
    font-size: 19px;
}
.main-middle-six .main-middle-six-box .main-middle-six-box-two .main-middle-six-box-two-bottom .link-two{
    color: #27debf;
    text-decoration: none;
    margin-top: 25%;
    display: inline-block;
    font-size:19px;
}
.arrow{
    width:2.5%;
}
#link-site{
    padding: 1% 3%;
    background-color: #27debf;
    margin-top:7%;
    display: inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
#link-site:hover{
    background-color: #1e9984;
    color: white;
}
.main-middle-seven{
    min-height: 75vh;
    text-align: center;
    position: relative;
}
.main-middle-seven #text-ten{
    font-size: 22px;
    color: #27debf;
}
.main-middle-seven #text-eleven{
    font-size: 24px;
    padding-bottom: 2%;
}
input{
    width:35vw;
    height: 7vh;
    padding:1%;
    margin-top: 1%;
    margin-right: 1%;
    border:3px solid gray;
    border-radius:10px;
}
input:hover{
    outline: 0;
}
#box{
    width: 71vw;
    height: 22vh;
}
.main-middle-seven a{
    padding: 1% 3%;
    background-color: #27debf;
    margin-top:3%;
    display:inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
.main-middle-seven a:hover{
    background-color: #1e9984;
    color: white;
}
.main-middle-seven #dots{
    height: 50%;
    position: absolute;
    bottom:2vh;
    left:-5vw;
}
/*main*/
/*footer*/
footer{
    height: 35vh;
    border-bottom:2px solid #27debf;
    position: relative;
}
footer .box{
    width: 10vw;
    height: 7vh;
    background-color:#27debf;
    margin-top:3%;
    display:inline-block;
    text-decoration: none;
    transition: background-color 1s;
    border-radius: 4px;
    color: white;
}
footer .box:hover{
    background-color: #1e9984;
    color: white;
}
#circle{
    width:3vw;
    height:5vh;
    float: right;
    position: absolute;
    top: 0;
    right:2%;
    transition: background-color 1s;
    background-color: #27debf;
    border-radius: 50%;
}
#circle:hover{
    background-color: #1e9984;
    color: white;
}
#arrow{
    width:50%;
    margin-left: 23%;
    margin-top:15%;
}
.box-end-one{
    width: 87%;
    height: 50%;
    margin:auto;
}
.box-end-one .box-end-one-left{
    width:47%;
    height: 100%;
    float: left;
}
.box-end-one .box-end-one-right{
    width: 53%;
    height: 100%;
    float: left;
    padding-top:11vh;
}
.box-end-one p{
    float: right;
}
.box-end-two{
    width: 87%;
    height: 50%;
    margin:auto;
}
.box-end-two .box-end-two-left{
    width:42%;
    height:100%;
    float: left;
}
.box-end-two .box-end-two-right{
    width:58%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
.box-one-footer{
    width: 33.3333%;
    height: 100%;
}
.text-end{
    color: #27debf;
    font-size: 20px;
    margin-right:15vw;
}
.two-text{
    color: black;
}
#ellipse-circle{
    position: absolute;
    bottom:-3vh;
    left:35vw;
}
#last-text{
    text-align: center;
    margin-top:1%;
    margin-bottom:1%;
    color: gray;
}








/*footer*/