@font-face {
    font-family: "Circular Std", serif;
}

@media (min-width:900px) {
      #hr{width:60%;}


}
@media (min-width: 1040px){
    html{
      font-size: 13px;
    }
    .flex{
      display: flex;
    }
    #hr{
      width: 65%;
    }
}
@media (min-width: 1200px) {
    html{
        font-size: 15px;
    }
}
@media (min-width: 1350px) {
    html{
        font-size: 16px;
    }
}
@media (min-width: 1370px) {
    html{
        font-size: 17px;
    }
}
@media (min-width: 1480px) {
    html {
        font-size: 18px;
    }
}
@media (min-width: 1600px) {
    html {
        font-size: 19px;
    }
}

@media (min-width: 2000px) {
    html {
        font-size: 23px;
    }
}
@media (min-width: 2200px) {
    html {
        font-size: 25px;
    }
}
@media (min-width: 2400px) {
    html {
        font-size: 30px;
    }
}
@media (min-width: 3000px) {
    html {
        font-size: 30px;
    }
}
@media (min-width: 4000px) {
    html {
        font-size: 45px;
    }
}
@media (min-width: 5000px) {
    html {
        font-size: 55px;
    }
}

body {    /* done */
    overflow-x: hidden;
    min-width: 300px;
    font-family: "Circular Std", Sans-Serif, Sans;
    height: 100%;
    margin: auto;
    width: 100%;
}
img{
    width: 100%;
}

button {     /* done */
    font-size: 0.938em;
    font-weight: bold;
    background-color: #53B8A7;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    height:3.438rem;
}
.link:hover{
    opacity:80%;
    transition: 0.3s;
}
a:hover{cursor: pointer;}
button:hover{
    
    color: #ffffff;
    background-color: rgba(83,184,167,0.7);
    transition: 0.3s;
}
button:focus{
    outline:none;
}

::placeholder {   /* done */
    color: #004651;
    font-size: 0.875em;
    font-style: italic;
}

/* classes */
.header1 {  /* done */
    color: #004651;
    text-transform: uppercase;
    font-size: 2.188rem;
    height:2.5rem;
}

.header2 {
    font-size: 2.188rem;
    background-color: #004651;
    color: #ffffff;
    text-transform: uppercase;
    height: 3.438rem;
    font-weight: bold;
    width:max-content;
    padding:0.125rem 0.5rem;
}

.book {   /* done */
    color: #004651;
    font-size: 1.063rem;
    line-height: 1.5625rem;;
}

.steps { /* done */
    color: white;
    font-size: 1.063rem;
    padding-left: 1rem;
    width:80%;
}

.numbers { /* done */
    color: white;
    font-size: 1.875rem;
    background-color: #53b8a7;
    font-weight: bold;
    width:fit-content;
    height: 2.976rem;
    text-align: center;
    padding: 0.125rem 0.3rem;
}

.book2 { /* done */
    font-size: 1.25rem;
    color: #53b8a7;
    line-height: 1.5625rem;
}

.circle { /* done */
    color: #004651;
    font-size: 1.375rem;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #C3E3E9;
    width: 9rem;
    height: 9rem;
    padding-top: 2.75rem;
    padding-left: 0.125rem;
    text-align: center;
    border-radius: 50%;
    margin-right: auto;
}

.caption {  /* done */

    color: #004651;
    font-size: 1.063rem;
    text-align: center;
    width: 20%;
    margin-top: 1.375rem;
    margin-right: 4.375rem;
}

.footer-title { /* done */
    font-size: 0.938rem;
    font-weight: bold;
    color: #53b8a7;
    text-transform: uppercase;
    height: 0.625rem;
}

.footer-text { /* done */
    color: white;
    font-size: 0.938rem;
    width: 110%;
    height: 0.625rem;

}

.form1 { /* done */
    margin-left: 20rem;
    margin-right: 11.75rem;
    padding: 0 0;

}

.input1 {   /* done */
    padding-left: 1.313rem;
    border: none;
    opacity: 77%;
    border-radius: 0.625rem;
}
.div{
    margin-top: 3rem;
    width: 20%;
    margin-right: 0rem;
}
/* ids */

#top {   /* done */
    background-image: url("./Rectangle 3.png");
    background-repeat: no-repeat;
    background-size: contain;
    font-weight: bold;
    text-transform: uppercase;
    height: 48.063rem;
    padding-left: 8.688rem;
    padding-top: 3.063rem;
}

#logo {
    flex:0;
    height: 7.5rem;
    }
#a1 { /* done */
    height: 3.048rem;
    margin-top:1.063rem;
    margin-left: 36.438rem;
    margin-right: 4rem;
}
#button1{
    width: 130%;
}

#a2 { /* done */
    height: 3.048rem;
    margin-top:1.063rem;
}
#button2{
  width: 118%;
}

#text1 { /* done */
    font-size: 2.375rem;
    margin-top: 7.438rem;
}

#button3 { /* done */
    margin-top: 1.5rem;
    width:65%;
}

#image1 { /* done */
    margin-left:7.188rem;
    width: 55%;
    height: 15rem;
}
#middle1{
    padding-left: 8.813rem;
    padding-top: 5.875rem;
   }
#paragraph1 { /* done */
    width: 75%;
    padding-top: 2.125rem;
}

#button4 { /* done */
    margin-top: 2.625rem;
    width: 20%;
    margin-left: 8.813rem;
}

#paragraph2 { /* done */
    display: block;
    padding-right: 13.938rem;
}

#p1 { /* done */
    margin-top: 7.5rem;
    color: #53B8A7;
    font-size: 1.375rem;
    height: 5.313rem;
    line-height: 1.5625rem;
}

#p2 {  /* done */
    margin-top: 1.313rem;
    font-size: 1.063rem;
    text-decoration: underline;
    color: #004651;
    line-height: 1.5625rem;
}

#h2 { /* done */
    margin-top: 2.785rem;
    font-size: 1.375rem;
    text-transform: uppercase;
    color: #53B8A7;
    font-weight: bold;
    line-height: 1.5625rem;
}

#image2 { /* done */
    margin-left: 8.813rem;
    margin-top: 7.625rem;
    height:38.429rem;
}

#blue-box { /* done */
    background-color: rgba(195, 227, 233, 0.5);
    height: 33.5rem;
    margin-top: 10.125rem;
    padding-top: 2.813rem;
    padding-left: 2.688rem;
    padding-right: 9rem;
}

#p3 { /* done...top */
    color: #53b8a7;
    font-size: 1.063rem;
    text-decoration: underline;
    padding-top:1.313rem;
    margin-bottom: 10.125rem;

}

#p4 { /* done */
    margin-top: 6rem;
    margin-left: 9rem;
    font-size: 1.875rem;
    width: 80%;
    color: #53B8A7;
    text-align: center;
}

#dark-box { /* done */
    width: 85.8%;
    height: 33rem;
    background-color: #004651;
    margin-top: 3.563rem;
    margin-left: 6.125rem;
    padding-left: 8.313rem;
    padding-top: 3.313rem;
    padding-right: 5.75rem;
}

#header1 { /* done */
    color: white;
}

#header2 {  /* done */
    color: #004651;
    background-color: white;
}

#step1 { /* done */
    margin-top: 3.188rem;

}

#step2 { /* done */

    margin-top: 3.438rem;

}

#step3 { /* done */

    margin-left: 9rem;
    margin-top: 3.188rem;

}

#step4 { /* done */
    margin-top: 3.438rem;
    margin-left: 3.2rem;
}

#step5 { /* done */
    margin-top: 3.188rem;
    margin-left: 3rem;
}

#step6 { /* done */
    margin-top: 3.438rem;
    margin-left: 3.3rem;
}

#button5 { /* done */
    width: 25%;
    margin-top: 3rem;
}

#title2 { /* done */
    margin-top: 5.75rem;
    margin-left: 8.688rem;
    width:100%;

}

#p5 { /* done */
    color: #53b8a7;
    font-size: 1.25rem;
    margin-top: 4.375rem;
    width: 30%;
}

#blue-box2 { /* done */
    height: auto;
    background-color: rgba(195, 227, 233, 0.5);
    margin-top: 2.938rem;
    padding-left: 8.688rem;
    padding-top: 4.625rem;
    margin-right: 8.438rem;
    padding-bottom: 7rem;
}

#p6 { /* done */
    width: 80%;
    height: 28.25rem;
}

#p7 { /* done */
    height:11.209rem;
    margin-left: 10.688rem;
    margin-top: 17.063rem;
    margin-right: 6.625rem;
}

#image3 { /* done */
    margin-left: 42rem;
    margin-right: 3.313rem;
    margin-top: 3.375rem;
    position: absolute;
    height:31.375rem;
    width:36%;
}

#timeline { /* done */
    padding-left: 8.688rem;
    padding-top: 5.813rem;
    height: 44.125rem;
}

#hr { /* done */
    position: absolute;
    border-color: #C3E3E9;
    margin-top: 4.688rem;
    margin-left: 5.75rem;
}
#circle1{margin-left: 0.388rem;}
#statement { /* done */
    width: border-box;
    height: auto;
    background-color: rgba(195, 227, 233, 0.5);
    color: #53b8a7;
    margin-top: 1rem;
    padding: 1.813rem 4.813rem;
    text-align: center;
    font-size: 1.75rem;
}

#ending { /* done */
    height: 31.688rem;
    background-color: rgba(195, 227, 233, 0.5);
    padding-top: 4.938rem;
    padding-left: 8.688rem;
    margin-top: 2.75rem;
}

#name { /* done */
    width: 120%;
    height: 2.938rem;
}

#email { /* done */
    margin-top: 1rem;
    width: 29%;
    height: 2.938rem;
}

#number { /* done */
    width: 29%;
    height: 2.938rem;
    margin-top: 1rem;
    margin-left: 1.25rem;
}

#message { /* done */
    width: 120%;
    height: 7.884rem;
    margin-top: 1rem;
    padding-bottom: 5.813rem;
    resize:none;
}

#button6 { /* done */
    margin-top: 1.75rem;
    width: 40%;
}
#hidden{
    display: none;
}

#T1{
    color:#004651;
    font-size: 2rem;
    margin-top:8.313rem;
    margin-left: 20rem;
}
#T2{
    color: #53B8A7;
    font-size: 2rem;
    font-weight:bold;
    text-transform: uppercase;
    margin-left: 25rem;
}
#footer { /* done */
    height: max-content;
    background-color: #004651;
    padding-left: 8.688rem;
    padding-top: 2.25rem;
    padding-right: 8.688rem;
    padding-bottom: 1rem;
}

#logo1{width:20%; height:auto;}
#follow{
  margin-top: 3rem;
  width: 20%;
  padding-left: 2rem;

}
#div1{
  margin-left: 17.438rem;
}

#hr1 { /* done..top */
    border-color: white;
    color: white;
    width: 100%;
    margin-top: 3rem;
}

#copyright {
    color: white;
    font-size: 0.688rem;
    text-align: center;
    margin-top: 1.563rem;
    width:100%;
    margin-bottom: auto;
}