/* Big tablet to 1200px( widths smaller then the 1140px row) */
@media only screen and (max-width: 1200px) {
    h1{font-size: 300%}
}

.row{padding: 0 2%;}

/*Small tablet to big tablet*/
@media only screen and (max-width: 1023px) {
    body { font-size: 18px; }
    section { padding: 60px 0; }

     .hero-text-box{
        padding: 0 4%;
        width: 95%;
    }
    
    .long-copy{
        width:80%;
        margin-left: 10%;
    }
    
    .logo{
    height: 70px;
    margin-left: 3%;
    margin-top: 10px;
}
    
    .main-nav {margin-top: 30px;}
    
    .main-nav li {margin-left: 15px;}
    
    .steps-box {margin-top: 10px;} 
    .steps-box:last-child {margin-top: 10px;}
    .work-steps {margin-bottom: 40px;}
    .work-steps:last-of-type {margin-bottom: 60px;}
    
    .app-screen {width: 50%;}
    
    .icon-small {width: 20px;}
    
    .plan-box {
        width: 100%;
        margin-left: 0%;
    }
    
    .plan-price{font-size: 250%;}
    .contact-form {width:90%;}
    


/*Small phones to small tablets: from 481px to 767px*/
@media only screen and (max-width: 767px) {
    body{font-size: 16px;}
    section{padding: 30px 0;}
    .row,
    .hero-text-box{
        padding: 0 4%;
        width: 95%;
    }
    
    .header-index {
        background-attachment:scroll;
        height: 80vh;
        background-size: cover;
    }
    
    .contact-page{padding-top: 30px}
    
    
    .section-testimonials{
        background-attachment: scroll;
        background-size: cover;
    }
    
    .other-page>h2{
        margin-top: 60px;
    }

    .cookie-wrapper{
        max-width: calc(100vw - 60px);
        font-size: 80%;
    }

    .cookie-header{
        display: none;
    }
    
    /*responsive nav*/
    .sticky{
        background-color: transparent;
        box-shadow: none;
    }
    
    nav ul{
    position: fixed;
    top: 0px;
    left: -100%;
    background: rgb(245, 245, 245);
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
    margin-right: 0;
    z-index: 999;
    padding-top: 66px;
  }
    
    
    .main-nav:lang(en) {
        left: -100%;
        margin-right: 0;
        margin-top: 0;
        position: fixed;
    }
    
    .main-nav:lang(ar){
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        position: fixed;
    }
    
    
    .main-nav li a:link,
    .main-nav li a:visited{
        color: #555;
    }
    
    nav .menu-btn i{
        display: block;
        float: right;
        margin: 10px 10px;
        background: #2ecc71;
        padding: 20px;
        border-radius: 100%;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        z-index: 9999;
        position: relative;
    }
    
    .menu-btn-i{
        display: block;
        float: right;
        margin: 10px 10px;
        background: #2ecc71;
        padding: 15px;
        border-radius: 100%;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        z-index: 9999;
        position: relative;
    }
    
    nav .menu-btn i:lang(ar){
        float: left;
    }
    
    .main-nav li{
        display: block;
        margin: 40px
    }
    
    
    
    .menu-btn{
    }
    
    #click:checked ~ ul{left: 0;}  

    nav ul{transition: all 0.3s ease;}

    .gallery-update>div{
    width: 100%;
    padding-top: 0;
    margin: 10px 0;
    }
    
    .image-update{
        width: 100%;
        /*height: auto;*/
        position: static;
    }
    
    .updates{display: block}
    
    .updates-image{width: 100%}
    
    .updates-content{width: 100%}
    
    .updates-image>img{width: 100%}
    
    .updates-content>div{
        width: 100%;
        margin: 7% 0;
    }
    
    .video-play{font-size: 700%;}
    
    }
    ----------------------------
    
    .col { 
        width: 100%; 
        margin-left: 0;
    }
    
    .btn:link,
    .btn:visited,
    input[type=submit]{
    padding: 10px 20px;
    font-size: 90%;  
}
    
    .scroll{display: none;}
    
   
    /*
    .mobile-nav-icon{
        display: inline-block;
        margin: 10px 20px;
    }
    
    .main-nav:lang(en){
        float: left;
        margin-top: 10px;
        margin-left: 5px;
        font-size: 90%;
    }
    
    .main-nav li{
        display: block;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 5px 0;
        font-size: 80%;
    }
    
    .logo:lang(en){height: 50px;}
    
    .stick .main-nav{margin-top: 10px;}
    
    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited{padding: 10px 0;}
    .sticky .mobile-nav-icon {margin-top: 10px;}
    .sticky .mobile-nav-icon i {color: #555;}
    */
    
    ---------------------------------------------------
   
    .hero-text-box{width: 95%;}
    
    h1 {font-size: 180%;}
    h2 {font-size: 150%;}
    
    .long-copy{
        width: 100%;
        margin-left: 0%;
    }
    
    .work-steps div{
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }
    
    .work-steps {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .work-steps:last-of-type {margin-bottom: 20px;}

    .steps-box:first-child{text-align: center;}
    .app-screen{width: 40%;}
    
    .map{
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 0;
}

.map-box{
    width: 100%;
    height: auto;
    position: relative;
}
    
    .map-container{width: 100%;}

.contact-form {width:100%;}
    
.form-box{
    position: relative;
    height: auto;
    padding: 30px 0;
    width: 100%;
}
    

    
    .contact-page-content{overflow: visible}

    .grid-container{grid-template-columns: repeat(1, 1fr);}
    
}



/* Small Phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    
    .pic-photo img{opacity: 1;}
    .pic-showcase li{width: 25%;}
    .pic-showcase{width: 200%;}
    
}