@media screen and (max-width: 1670px) and (min-width: 1090px) {
    .wrapper {
        width: min(100rem, 100%);
    }

    h1 {
        font-size: 4.4rem;
        line-height: 5.3rem;   
    }

    p {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    h2 {
        font-size: 3rem;
        line-height: 3.5rem;   
    }

    /* grid */
    .wrapper .grid-container {
        padding: 17.5rem 0 8.5rem 0;
    }

    .wrapper .grid-container h2 {
        padding-bottom: 2rem;
    }

    .wrapper .grid-container p {
        padding-bottom: 1.7rem;
    }

    .wrapper .grid-container p:last-child {
        padding-bottom: 2rem;
    }

    a.button{
        font-size: 1.4rem;
        line-height: 2.6rem;
        padding: .8rem 1.6rem;
        width: 11.3rem;
        height: 3.8rem;
    }

    


    /*================================ home ===============================================*/

    #home {
        height: 100%;
        margin-block: 10rem 0;
    }
      
      #home img {
        display: flex;
        padding: 6.5rem 0 8rem 0;
      }

    section header h1 {
        width: 60.4rem;
    }

    section header p {
        width: 48.8rem;
    }

    /*================================ ISH ===============================================*/
    #ish a.button {
        width: 18rem;
    }

    #ish .wrapper div {
        padding-bottom: initial;
    }

    /*============================================= Page 3 ============================================================*/

    /*================================ system ===============================================*/

    #system {
        margin-block: 10rem 0;
    }

    #system .grid-container {
        grid-gap: 7rem;
        grid-template-columns: 1.1fr 1fr;
        padding: 14.4rem 0 14.7rem;
    }
    
    #system .wrapper .grid-container img {
        max-width: 95%;
    }

    #system .box-img {
        bottom: 28.7rem;
        left: 8rem;
        width: 34.4rem;
        height: 31.4rem;
        z-index: -1;
    }

    #system .grid-container:last-child {
        height: 80.3rem;
    }

    /*============================================= Page 2 ============================================================*/

    /*================================ Home-works ===============================================*/

    #home-works {
        margin-block: 10rem 0;
        height: 89.3rem;
        text-align: center;
    }

    #home-works h1 {
        margin-bottom: 1rem;
    }

    /*================================ delimitation-areas ===============================================*/

    #delimitation-areas .grid-container {
        grid-template-columns: 45.74rem 55.08rem;
        grid-gap: 4.18rem;
        padding: 14.4rem 0 12.1rem 0;
      }

    #delimitation-areas img {
        width: 90%;
        height: 95%;
    }

    /*================================ accordion ===============================================*/

    #accordion .wrapper {
        width: min(90.8rem, 100%);
    }

    #accordion h3 {
        font-size: 1.6rem;
        line-height: 1.6rem;

    }

    #accordion p {
        padding-bottom: 2.2rem;
    }

    #accordion p:last-child {
        padding-bottom: 2.2rem;
    }

    summary {
        padding: 1.5rem 3.5rem;
        border-radius: 6px;
        
      }

    #accordion .grid-container {
        padding: 5.6rem 0.8rem 0 0.8rem;
    }

    #accordion .wrapper .grid-container {
        padding: 6.2rem 0 3.2rem 0;
    }

    /*================================ final-calc ===============================================*/

    #final-calc .wrapper {
        width: min(90.8rem, 100%);
        padding: 0;
    }
    
    #final-calc .grid-container {
        grid-gap: 4.18rem;
        padding: 12.8rem 0 13.6rem 0;
    }

    /*================================ Footer ===============================================*/

    footer .wrapper {
        padding-top: 13rem;
    }
    footer .grid-container a {
        font-size: 1.4rem;
    } 
    footer .grid-container p {
        font-size: 1.4rem;
    }

    footer .wrapper .grid-container {
        grid-template-columns: 26rem 26rem 40rem;
        grid-gap: 3rem;
    }

    footer li {
        padding-bottom: 0.2rem;
    }

    footer .logo-text p{
        line-height: 2.5rem !important;
    }

    .referency {
        font-size: 1.3rem;
        padding: 2.1rem 0 2.6rem;
    }

}

@media (max-width: 1090px) {
    /*================================ General ===============================================*/
    body { 
        overflow-x: hidden; 
    }

    .wrapper {
        width: min(55rem, 100%);
        margin-inline: auto;
        padding-inline: initial;
    }

    section header h1,
    section header p {
        width: 36.5rem;
    }

    h1 {
        font-size: 3.26rem;
        line-height: 4.1rem;
    }

    p {
        font-size: 1.6rem;
        line-height: 2.2rem;

        padding: 0 0 2rem 0;
    }

    h2 {
        font-size: 3.0rem;
        line-height: 3.5rem; 
    }

    a.button {
        padding: 0.8rem 1.6rem;
        gap: 1rem;
    
        width: 11.3rem;
        height: 3.8rem;
    
        font-size: 1.6rem;
        line-height: 2.2rem;

        border-radius: 0.26rem;

        color: var(--bg-color);
        text-decoration: none;
    }

    .wrapper .grid-container {
        display: block;
        grid-template-columns: initial;
        padding: initial;
    }

    .wrapper .grid-container h2 {
        width: 26.5rem;
        padding-bottom: 2rem;
    }

    .wrapper .grid-container p {
        padding-bottom: 2rem;
    }

    .wrapper .grid-container img {
        max-width: 50%;
    }

    /*================================ home ===============================================*/

    #home {
        margin-block: 0;
        background-position: 20% 40%;
        background-size: auto;
        width: 100vw;
    }

    #home img {
        width: 25%;
        padding: 7rem 0 7.2rem 0;
    }


    /*================================ Security ===============================================*/

    #security {
        padding-block: 8.1rem;
        
    }

    #security .wrapper .grid-container {
        padding-right: initial;
        display: flex;
        flex-direction: column-reverse;
    }

    .wrapper .grid-container .beach {
    padding-right: initial;
    }

    #security .wrapper .grid-container img {
        margin-top: 5.6rem;
        display: block;
        max-width: initial;
        width: 100%;
    }

    .wrapper .grid-container .text {
        display: block;
    }  


    /*================================ ish ===============================================*/

    #ish .wrapper {
        padding: 5.9rem 0;
    }

    #ish .wrapper h2 {
        width: 33.5rem;
        padding-bottom: 2rem;
    }

    #ish .wrapper {
        padding: 5.9rem 0;
    }

    #ish .wrapper .button {
        width: 19rem;
    }

    /*============================================= Page 2 ============================================================*/

    /*================================ Home-works ===============================================*/

    #home-works {
        margin-block: 0;
        background-position: 20% 40%;
        background-size: cover;
        height: 414px;
    }

    #home-works .bg-color {
        background-color: hsla(212, 42%, 35%, 0.56);
    }

    #home-works h1, #home-works p {
        margin: 0;
        padding-bottom: 1rem;
    }

    /*================================ delimitation-areas ===============================================*/

    #delimitation-areas .wrapper .grid-container img {
        max-width: initial;
    }

    #delimitation-areas .grid-container {
        padding: 6.6rem 0 6rem 0;
    }




    /*================================ accordion ===============================================*/

    #accordion {
        padding: 6rem 0 6rem 0;
    }

    #accordion .wrapper {
        width: min(47rem, 100%);
    }

    #accordion .wrapper .grid-container {
    display: block;
    padding: 4.2rem 0 0 0;
    }

    #accordion p:last-child {
        padding-bottom: initial;
    }

    #accordion img {
        max-width: 100%;
        padding-bottom: 3.2rem;
    }

    #accordion h3 {
        width: 20.202rem;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 2.3rem;
    }

    #accordion details summary svg {
        width: 2rem;
    }

    #accordion .title > p {
        text-align: center;
        padding-right: initial;
        padding-left: initial;
    }

    details {
        text-align: left;
    }

    summary {
        padding: 1.8rem 2.1rem;
    }

    /*================================ final-calc ===============================================*/

    #final-calc .wrapper {
        width: min(55rem, 100%);
    }

    #final-calc img {
        max-width: 100%;
        padding-bottom: 3.3rem;
    }

    #final-calc .grid-container {
        padding: 6.1rem 0 6rem 0;
    }

    #final-calc p {
        padding: 0;
    }


    /*============================================= Page 3 ============================================================*/

    /*================================ system ===============================================*/

    #system {
        padding-block: 10rem;
        margin-block: 0;
        height: 125rem;
    }

    #system .grid-container {
        padding: 0;
    }

    #system .grid-container:last-child {
        position: relative;
        height: auto;
    }

    #system .box-img {
        bottom: 35rem;
        left: 13.6rem;
        width: 41rem;
        height: 37.5rem;
        border-radius: 0.5rem;
    }

    #system .wrapper .grid-container img {
        max-width: 95%;
    }

    /*====== Terms =================*/

    #terms, article {
        margin-block: 0;
    }

    #terms p {
        font-size: 1.6rem;
    }
    #terms .wrapper, article .wrapper{  
        padding: 6rem 0 6.5rem 0;
    }


    /*================================ footer ===============================================*/

    footer .wrapper .grid-container {
        grid-template-columns: initial;
        grid-gap: initial;
        padding: initial;
        }

    footer {
        display: block;
    }

    footer .wrapper {
        padding-top: 7.7rem;
    }

    footer .social-links img {
        width: 3.35rem;
        height: 3.5683rem;
    }

    footer p,
    footer li a{
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    .wrapper .basaoimg {
        padding-bottom: 3.8rem;
    }

    footer .site-map {
        padding-bottom: 7.7rem;
    }

    footer .other-links {
        padding-bottom: 5.9rem;
    }
}

@media (max-width: 600px) {

    /*================================ General ===============================================*/
    body { 
        overflow-x: hidden; 
    }
    
    .wrapper {
        width: min(33.5rem, 100%);
    }

    section header h1,
    section header p {
        width: initial;
    }



    /*================================ accordion ===============================================*/

    #accordion {
        padding: 6rem 0 6rem 0;
    }

    #accordion .wrapper {
        width: min(30rem, 100%);
    }

    #accordion .wrapper .grid-container {
    display: block;
    padding: 4.2rem 0 0 0;
    }

    #accordion p:last-child {
        padding-bottom: initial;
    }

    #accordion img {
        max-width: 100%;
        padding-bottom: 3.2rem;
      }

    #accordion h3 {
        width: 20.202rem;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 2.3rem;
    }

    #accordion details summary svg {
        width: 2rem;
    }

    details {
        text-align: left;
    }

    summary {
        padding: 1.8rem 2.1rem;
    }

    /*================================ final-calc ===============================================*/

    #final-calc .wrapper {
        width: min(30rem, 100%);
    }

    /*============================================= Page 3 ============================================================*/

    /*================================ system ===============================================*/

    #system {
        padding-block: 10rem;
        margin-block: 0;
        height: 125rem;
    }

    #system .grid-container {
        padding: 0;
    }

    #system .grid-container:last-child {
        position: relative;
        height: auto;
    }

    #system .box-img {
        bottom: 24rem;
        left: 6.6rem;
        width: 27rem;
        height: 26rem;
    }

}