@media only screen and (min-width: 1200px) and (max-width:1440px){
    #sec-2-left-img {
        height: 41vw;
    }
    #sec-3-steps-r p{
        position: absolute;
        font-size: 13px;
    }   
    #step-3{
        top: calc((100% - 90px)/2);
    }
    #step-2,#step-1{
        top: calc((100% - 75px)/2);
    }
    #sec-3-steps-1 #sec-3-steps-r p, #sec-3-steps-2 #sec-3-steps-r p, #sec-3-steps-3 #sec-3-steps-r p {
        color: white;
        margin-top: 0px;
    }
    #sec-4-main p{
        font-size: 14px;
        margin-top: -10px;
    }   
    #sec-4-right p{
        font-size: 14.9px;
    }
    #robot-1{
        top:13vh;
    }
    #contact-menu div h2 {
        font-size: 105%;
    }
}
@media only screen and (min-width: 992px) and (max-width:1199px){
    #about-h1{
        font-size: 22px;
    }
    #sec-3-right-h2 {
        font-size: 38px;
    }
    #step-1, #step-2, #step-3{
        font-size: 11.8px;
        position: absolute;
    }    
    #step-3,#step-1{
        top: calc((100% - 98px)/2);
    }
    #step-2{
        top: calc((100% - 84px)/2);
    }
    #sec-4-main-p{
        font-size: 11.5px;
    }    
    #sec-4-main h1{
        font-size: 38px;
    }    
    #sec-4-right p{
        line-height: 2.5vh;
        font-size: 12.5px;
    }
    #robot-1 {
        top: 16vh;
        right: 1vw;
    }
    #quest-p-1,#quest-p-2,#quest-p-3,#quest-p-4{
        font-size: 13.5px;
        left: calc((100% - 444px)/2);
        top: calc((100% - 16px)/2);
    }
    #icon-main{
        width:27%;
    }
    #contact-menu div h2 {
        font-size: 95%;
    }
    footer{
        font-size: 18px;
    }
    #answer-1,#answer-2,#answer-3,#answer-4{
        font-size: 13.5px;
    }
}
@media only screen and (min-width: 768px) and (max-width:991px){
    .nav{
        display: none;
    }
    #nav-r{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: space-evenly;
    }
    #resp{
        display: block;
    }
    #nav-r div{
        height:50px;
    }
    #span{
        font-size: 12px;
    }    
    #span-1{
        font-size: 10.5px;
    }
    #sec-2-right-h2 {
        font-size: 13px;
    }
    #sec-2-right-p {
        font-size: 12px;
    }
    #sec-3-right-h2 {
        font-size: 30px;
    }
    #sec-3-steps-1 #sec-3-steps-l h1,#sec-3-steps-3 #sec-3-steps-l h1  {
        font-size: 20px;
        top: calc((100% - 20px)/2);
        left: calc((100% - 86px)/2);
    }   
    #sec-3-steps-2 #sec-3-steps-l h1{
        font-size: 20px;
        top: calc((100% - 48px)/2);
        left: calc((100% - 84px)/2);
    }
    #step-1, #step-2, #step-3{
        font-size: 9px;
        left: 2vw;
        position: absolute;
    }    
    #sec-3-steps-1,#sec-3-steps-2,#sec-3-steps-3{
        width:102%;
    }
    #step-3,#step-1{
        top: calc((100% - 60px)/2);
    }
    #step-2{
        top: calc((100% - 50px)/2);
    }
    #sec-4-main h1{
        font-size: 28px;
    }    
    #sec-4-main h2 {
        font-size: 20px;
    }
    #sec-4-btn{
        width:82%;
    }
    #sec-4-main p{
        font-weight: 700;
        font-size: 8px;
        line-height: 3vh;
    }
    #sec-4-main {
        height: 70vh;
        top: calc((100% - 70vh + 50px)/2);
    }
    #sec-4-right{
        line-height: 3vh;
        font-size: 9px;
    }
    #robot-1 {
        top: 16vh;
        right: 0vw;
    }
    #quest-p-1, #quest-p-2, #quest-p-3, #quest-p-4 {
        font-size: 10px;
        font-weight: 600;
        left: calc((100% - 342px)/2);
        top: calc((100% - 11px)/2);
    }
    #answer-1,#answer-2,#answer-3,#answer-4{
        font-size: 13px;
    }
    #icon-main{
        width:40%;
    }
    #contact-menu div h2 {
        font-size: 75%;
    }
}
@media only screen and (min-width: 576px) and (max-width:767px){
    .nav{
        display: none;
    }
    #nav-r{
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: space-evenly;
    }
    #resp{
        display: block;
    }
    .quest{
        z-index: 1;
        background: white;
    }
    #answer-1, #answer-2, #answer-3, #answer-4 {    
        font-size: 14px;
    }
    #nav-r div{
        height:50px;
    }
    .slide>img{
        width:100%;
    }
    #logo{
        position: absolute;
        width:534px;
        height:208px;
        left: calc((100% - 534px)/2);
        top: calc((100% - 208px)/2);
    }
    #nav{
        width: 100%;
    }
    #contact-1 img, #contact-4 img {
        left: calc((100% - 25vh) / 2);
        width: 25vh;
        height: 25vh;
    }
    #contact-3 img{
        left: calc((100% - 19vh) / 2);
        height: 19vh;
        width: 19vh;
    }
    #contact-2 img{
        left: calc((100% - 21vh) / 2);
        height: 21vh;
        width: 21vh;
    }
    #contact-menu div h1 {
        font-size: 125%;
    }
    #contact-1,#contact-2,#contact-3,#contact-4{
        height:100%;
        width:50%;
    }
    #contact-menu{
        height:80vh;
        display: block;
    }
    #contact-resp,     #contact-resp-2{
        width:100%;
        display: flex;
        justify-content: space-betweens;
        height:50%;
    }
    #contact-menu div h2 {
        font-size: 110%;
    }
    .cont-resp,#map{
        margin-top:50vh;
    }
    #icon-main{
        width: 48%;
    }
    #sec-2, #sec-3{
        height:180vh;
        display: block;
    }
    #sec-2-left, #sec-2-right{
        height:50%;
        width:100%;
        padding: 0 0 0 10%;
    }   
    #sec-3-left, #sec-3-right{
        height:50%;
        width:100%;
        margin-left: 0;
    }
    #sec-3-left{
        position: relative;
    }
    #sec-3-steps-1,#sec-3-steps-2,#sec-3-steps-3{
        width:90%;
    }
    #sec-2-left-img {
        height: 80%;
        width: 60%;
        left: 20%;
        top: 10%;
    }
    #sec-2-right-p {
        text-align: center;
        margin-top: 0;
        line-height: 4vh;
        font-size: 15px;
    }
    #step-1, #step-2{
        position: absolute;
        font-size: 11px;
        top:calc((100% - 78px)/2);
    }    
    #step-3 {
        position: absolute;
        font-size: 11px;
        top:calc((100% - 91px)/2);
    }
    #circle-icon-3 {
        height: 12vw;
        width: 12vw;
    }
    #span-1 {
        position: absolute;
        right: 3vw;
        font-size: 13px;
        width: 60vw;
    }
    
    #sec-3-left-img {
        margin: 15vh auto;
        position: unset;
        width: calc(80vw - 80px);
        height: calc(80vw - 80px);
    }
    #sec-4{
        height:180vh;
        width:100%;
    }
    #sec-4-right{
        height: 33vh;
        width: 60%;
        top: 120vh;
        left: 20%;
    }    
    #sec-4-main{
        top: calc((50% - 85vh + 50px)/2);
        width: 80%;
        height:95vh;
    }
    #sec-4-main h1 {
        font-size: 45px;
    }
    #sec-4-main p {
        font-size: 13px;
    }
    #sec-4-right p{
        font-size: 14.5px;
    }
    .carousel-button.prev{
        left: 0.5rem;
    }
    .carousel-button.next{
        right: 0.5rem;
    }
    .carousel button{
        font-size: 40px;
    }
    #robot-1 {
        width: 30%;
        top: 22vh;
        right: 1vw;
    }
    .quest{
        width:90%;
    }
    #quest-p-1, #quest-p-2, #quest-p-3, #quest-p-4 {
        font-size: 15px;
        left: calc((100% - 473px) / 2);
        top: calc((100% - 18px) / 2);
    }
}
@media only screen and (min-width:425px) and (max-width:575px){
    .nav{
        display: none;
    }
    #nav-r{
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: space-evenly;
    }
    #resp{
        display: block;
    }
    #span{
        font-size: 12px;
    }
    #nav-r div{
        height:50px;
    }
    .slide>img{
        width:100%;
    }
    #logo{
        position: absolute;
        width:373.8px;
        height:145.6px;
        left: calc((100% - 373.8px)/2);
        top: calc((100% - 145.6px)/2);
    }
    #nav{
        width: 100%;
    }
    #contact-1 img, #contact-4 img {
        left: calc((100% - 25vh) / 2);
        width: 25vh;
        height: 25vh;
    }
    #contact-3 img{
        left: calc((100% - 19vh) / 2);
        height: 19vh;
        width: 19vh;
    }
    #contact-2 img{
        left: calc((100% - 21vh) / 2);
        height: 21vh;
        width: 21vh;
    }
    #sec-3-right-h2 {
        font-weight: 600;
        text-align: center;
        color: #56B8DD;
        font-size: 32px;
    }
    #contact-menu div h1 {
        font-size: 125%;
    }
    #contact-1,#contact-2,#contact-3,#contact-4{
        height:100%;
        width:50%;
    }
    #contact-menu{
        height:80vh;
        display: block;
    }
    #contact-resp,     #contact-resp-2{
        width:100%;
        display: flex;
        justify-content: space-betweens;
        height:50%;
    }
    #contact-menu div h2 {
        font-size: 80%;
    }
    .cont-resp,#map{
        margin-top:50vh;
    }
    #icon-main{
        width: 48%;
    }
    #sec-2, #sec-3{
        height:180vh;
        display: block;
    }
    #sec-2-left, #sec-2-right{
        height:50%;
        width:100%;
        padding: 0 0 0 10%;
    }   
    #sec-3-left, #sec-3-right{
        height:50%;
        width:100%;
        margin-left: 0;
    }
    #sec-3-left{
        position: relative;
    }
    #sec-3-steps-1,#sec-3-steps-2,#sec-3-steps-3{
        width:100%;
    }
    #sec-2-left-img {
        height: 80%;
        width: 60%;
        left: 20%;
        top: 10%;
    }
    #sec-2-right-p {
        text-align: center;
        margin-top: 0;
        line-height: 4vh;
        font-size: 12px;
    }
    #step-2 {
        position: absolute;
        line-height: 3vh;
        font-size: 9px;
        margin-left: 20px;
        top: calc((100% - 100px) / 2);
    }
    #step-1, #step-3{
        position: absolute;
        line-height: 3vh;
        font-size: 9px;
        margin-left: 20px;
        top: calc((100% - 117px) / 2);
    }    
    #sec-3-steps-2 #sec-3-steps-l h1,    #sec-3-steps-3 #sec-3-steps-l h1 {
        left: calc((100% - 97px) / 2);
    }
    #circle-icon-3 {
        height: 20vw;
        width: 20vw;
    }
    #span-1 {
        position: absolute;
        right: 3vw;
        font-size: 11.5px;
        width: 60vw;
        margin-top: 2vw;
    }
    
    #sec-3-left-img {
        margin: 22vh auto;
        position: unset;
        width: calc(90vw - 90px);
        height: calc(90vw - 80px);
    }
    #sec-4{
        height:180vh;
        width:100%;
    }
    #sec-4-right{
        height: 33vh;
        width: 60%;
        top: 120vh;
        left: 20%;
    }    
    #sec-4-main{
        top: calc((50% - 85vh + 50px)/2);
        width: 80%;
        height:95vh;
    }
    #sec-4-btn {
        width: 84%;
    }
    #sec-4-main h1 {
        font-size: 32px;
    }
    #sec-4-right p {
        line-height: 3vh;
        font-size: 11px;
    }
    #sec-4-main-p{
        font-size: 9.8px;
    }
    #sec-6-h1 {
        font-size: 40px;
    }
    .carousel-button.prev{
        left: 0.5rem;
    }
    .carousel-button.next{
        right: 0.5rem;
    }
    .carousel button{
        font-size: 40px;
    }
    #robot-1 {
        width: 30%;
        top: 22vh;
        right: 1vw;
    }
    .quest{
        width:90%;
    }
    #quest-p-1, #quest-p-2, #quest-p-3, #quest-p-4 {
        font-size: 11px;
        left: calc((100% - 350px) / 2);
        top: calc((100% - 13px) / 2);
    }
    .quest{
        z-index: 1;
        background: white;
    }
    #answer-1, #answer-2, #answer-3, #answer-4 {    
        font-size: 12px;
    }
    #icon-main {
        width: 90%;
    }
    #sec-2, #sec-3{
        height: 160vh;
        display: block;
    }    
    #sec-3{
        height: 180vh;
    }
    #sec-4-btn-a {
        font-size: 30px;
    }
}
@media only screen and (min-width:320px) and (max-width:424px){
    
    #sec-4-btn-a {
        font-size: 30px;
    }
    .nav{
        display: none;
    }
    #nav-r{
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: space-evenly;
    }
    #resp{
        display: block;
    }
    #span{
        font-size: 9.5px;
    }
    #nav-r div{
        height:50px;
    }
    .slide>img{
        width:100%;
    }
    #logo {
        position: absolute;
        width: 299px;
        height: 117px;
        left: calc((100% - 299px)/2);
        top: calc((100% - 117px)/2);
    }
    #nav{
        width: 100%;
    }
    #contact-1 img, #contact-4 img {
        left: calc((100% - 25vh) / 2);
        width: 25vh;
        height: 25vh;
    }
    #contact-3 img{
        left: calc((100% - 19vh) / 2);
        height: 19vh;
        width: 19vh;
    }
    #contact-2 img{
        left: calc((100% - 21vh) / 2);
        height: 21vh;
        width: 21vh;
    }
    #sec-3-right-h2 {
        font-weight: 600;
        text-align: center;
        color: #56B8DD;
        font-size: 32px;
    }
    #contact-menu div h1 {
        font-size: 125%;
    }
    #contact-1,#contact-2,#contact-3,#contact-4{
        height:100%;
        width:50%;
    }
    #contact-menu{
        height:80vh;
        display: block;
    }
    #contact-resp,     #contact-resp-2{
        width:100%;
        display: flex;
        justify-content: space-betweens;
        height:50%;
    }
    #contact-menu div h2 {
        font-size: 80%;
    }
    .cont-resp,#map{
        margin-top:50vh;
    }
    #sec-2-left, #sec-2-right{
        height:40%;
        width:100%;
        padding: 0 0 0 10%;
    }   
    #sec-2-right{
        height:60%;
    }   
    #sec-3-left, #sec-3-right{
        height:62%;
        width:100%;
        margin-left: 0;
    }
    #sec-3-left{
        
        position: relative;
    }
    #sec-3-steps-1,#sec-3-steps-2,#sec-3-steps-3{
        width:100%;
    }
    #sec-2-left-img {
        height: 80%;
        width: 60%;
        left: 20%;
        top: 10%;
    }
    #sec-2-right-p {
        text-align: center;
        margin-top: 0;
        line-height: 4vh;
        font-size: 9.5px;
    }
    #step-3 {
        position: absolute;
        line-height: 3vh;
        font-size: 9px;
        margin-left: 40px;
        top: calc((100% - 152px) / 2);
    }
    #step-1, #step-2{
        position: absolute;
        line-height: 3vh;
        font-size: 9px;
        margin-left: 40px;
        top: calc((100% - 135px) / 2);
    }    
    #sec-3-steps-2 #sec-3-steps-l h1,    #sec-3-steps-3 #sec-3-steps-l h1 {
        left: calc((100% - 97px) / 2);
    }
    #circle-icon-3 {
        height: 20vw;
        width: 20vw;
    }
    #span-1 {
        position: absolute;
        right: 3vw;
        font-size: 9px;
        width: 60vw;
        margin-top: 2vw;
    }
    
    #sec-3-left-img {
        margin: 22vh auto;
        position: unset;
        width: calc(90vw - 90px);
        height: calc(90vw - 80px);
    }
    #sec-4{
        height:180vh;
        width:100%;
    }
    #sec-4-right {
        height: 45vh;
        width: 60%;
        top: 120vh;
        left: 20%;
    }
    #sec-4-main{
        top: calc((50% - 85vh + 50px)/2);
        width: 80%;
        height:95vh;
    }
    #sec-4-btn {
        width: 84%;
    }
    #sec-4-main h1 {
        font-size: 23px;
    }
    #sec-4-main h2 {
        font-size: 16px;
    }
    #sec-4-right p {
        line-height: 3vh;
        font-size: 11px;
    }
    #sec-4-main-p{
        font-size: 9.8px;
    }
    #sec-6-h1 {
        font-size: 40px;
    }
    .carousel-button.prev{
        left: 0.5rem;
    }
    .carousel-button.next{
        right: 0.5rem;
    }
    .carousel button{
        font-size: 40px;
    }
    #robot-1 {
        width: 30%;
        top: 22vh;
        right: 1vw;
    }
    .quest{
        width:90%;
    }
    #quest-p-1, #quest-p-2, #quest-p-3, #quest-p-4 {
        font-size: 8.3px;
        left: calc((100% - 275px) / 2);
        top: calc((100% - 10px) / 2);
    }
    .quest{
        z-index: 1;
        background: white;
    }
    #answer-1, #answer-2, #answer-3, #answer-4 {    
        font-size: 12px;
    }
    #icon-main {
        width: 90%;
    }
    #sec-2, #sec-3{
        height: 160vh;
        display: block;
    }    
    #sec-3{
        height: 200vh;
    }
    #sec-3-steps-1, #sec-3-steps-2, #sec-3-steps-3 {
        height: 33vh;
        width: 100%;
        margin: 3vh auto 3vh auto;
        display: flex;
        justify-content: space-between;
    }
}
@media only screen and (min-height:750px){
    #sec-2{
        height: 120vh;
    }
    #sec-3-right {
        height: 55%;
    }
    #sec-3-left{
        height:45%;
    }
    #sec-3{
        height:145vh;
    }
    #sec-6{
        height:100vh;
    }
    #sec-4,#sec-5{
        height:130vh;
    }
    #step-1, #step-3 {
        top: calc((100% - 117px) / 2);
        line-height: 13px;
    }
    #step-2{
        line-height: 13px;
    }
    #sec-3-steps-1, #sec-3-steps-2, #sec-3-steps-3 {
        height: 20vh;
    }
    #sec-4-main{
        height:60vh;
        top: 10vh;
    }
    #sec-4-main p {
        line-height: 1.5vh;
    }
    #sec-4-btn {
        width: 66%;
    }
    #sec-4-right {
        top: 80vh;
    }
}