/* Media Querries */
@media only screen and (min-width:1900px) {
   
    section.intro img{
        height: 30rem;
        width: 30rem;
        border-radius: 50%;
        border: 5px solid rgba(0, 0, 0, 0.363);
        
    
    }
}


@media only screen and (min-width:1800px) {
    section.intro .image .center{
        margin: 0 auto;
        width: 60%;
    }
    section.intro img{
        height: 25rem;
        width: 25rem;
        border: 5px solid rgba(0, 0, 0, 0.363);
        
      
    
    }
   
}


@media only screen and (min-width:1700px) {
    
    header.top .menu ul li a{

        font-size: 1.3rem;
    }

    section.info .image .center{
        width: 50%;
        margin: 0 auto;
    }

    section.info .image img{
        width: 30rem;
        height: 35rem;
        border-radius: 50%;
        border: 1px solid white;
    }
    
    .myslide{
        height: 900px;
        width: 100%;
        display: none;
        overflow: hidden;
    
    }

}
@media only screen and (max-width:1250px) {
    
    header.top .menu ul li {

        margin: auto 1.3rem;
    }


}

@media only screen and (max-width:1100px) {
    
    header.top .menu ul li {

        margin: auto 1rem;
    }
    header.top .nav-bar{
        width: 95%;
    }
    section.intro .flex{
        width: 70%;
        margin: 0 auto;
    }


}

@media only screen and (max-width:1024px){
    

    header.top .menu ul li a{

        font-size: 0.9rem;
    }
    
    section.intro .text{
    
        font-size: 0.8rem;
    
    }

    .under::after{
        content: "";
        display: block;
        width: 6rem;
        height: 2px;
        background-color: white;
        margin: 5px auto;
    }

    .under{
        text-align: center;
        color: white;
        padding: 3rem 0;
        font-size: 2rem;
    }

}


@media only screen and (max-width:990px){



    section.intro img{
        height: 18rem;
        width: 18rem;
        border-radius: 50%;
        border: 5px solid rgba(0, 0, 0, 0.363);
        
    
    }
    section.intro .text h1{
        padding: 1rem 0;
    }  

    section.info .container{
        width: 90%;
        margin: 0 auto;
    
    }

    .md-full{
        width: 100% !important;
        margin: 1rem 0;
    }
    .md-text-center{
        text-align: center;
    }

    footer .block{
        width: 100% !important;
        align-items: center;
        align-content: center;
        text-align: center;
    }

}




@media only screen and (max-width:880px){
    body{
        font-size: 0.8rem ;
    }
    .btn{
        font-size: 0.9rem;
    }
    header.top.sticky{
        position: fixed;
    }
    header.top.sticky.active {
        background-color: transparent;
        position: fixed;
    }

    header.top .nav-bar{
        width: 100%;
    }

    header.top .logo{
        width: 100%;
        text-align: center;
    }
    header.top .logo img{
        width: 3.5rem;
        /* position: absolute;
        top: 0%;
        right: 0%; */
    }
    .top.sticky .logo img{
        width: 3rem;
    }


    header.top .nav-bar .menu{
        display: none;
    }
    header.top .nav-bar .search{
        display: none;
    }
    header.top.active .nav-bar{
        flex-direction: column;
        /* background-color: rgb(0, 0, 0, 0.9); */
        transition:all 0.5s ;
        border-radius: 6%;
        width: 12rem;
    }

    header.top.active .nav-bar .search{
        display: block;
        margin: 0.5rem auto;
    }
    /* .search{
        width: 100%;
        display: flex;
        flex-direction: row;
    } */
    .search img{
        cursor: pointer;
        width: 1rem;
    }

    /* 
    .search .search-box{
       width: 50% ;
       display: block; 
       text-align: center;
       margin: 0 auto;
    }

    header.top.active .nav-bar .search input{

    } */


    header.top.active .menu{
        text-align: center;
        height: auto;
        display: block;
        margin: 0 auto;
        width: 3rem;
    }

    header.top.active .menu ul{
        flex-direction: column;
    }
    header.top.active .menu ul li {
        text-align: center;
        padding: 0.5rem 0;
        margin: 0 -1rem;
    }
    .burger-btn{
        display: block;
        position: absolute;
        right: 5%;

    }
    .back-img .center .text {
        padding: 15rem 0;
    }
    .back-img .center .text {
        padding: 15rem 0;
        font-size: 1rem;
        letter-spacing: 4px;
    }

    section.intro .flex{
        width: 80%;
        margin: 0 auto;
    }

    section.offer .block{
        margin: 1rem 0.5rem ;
    }
    section.offer .mid{
        width: 95%;
    }

    section.message .box{
        width: 80%;
        margin: 1rem auto;
        color: rgb(126, 86, 43);
    }
    section.message .box h1{
        margin: 5rem 0;
        font-size: 2rem;
        letter-spacing: 6px;
        text-align: center;
        width: 100%;
        color: white;
    }

    .msg2 h1{
        color: rgb(126, 86, 43);
        padding: 2rem 4rem;
    }  

    .msg2 img{
        width: 10rem;
    }
    /* freelancing */

    section.goal .center{
        width: 95%;
        margin: 0 auto;
    }
    section.goal .text{
        width: 50%;
        padding: 0 2rem;
        
        text-align: left;
        line-height: 2;
        color: white
    }
    section.goal{
        background-color: white;
        margin-top: -5px;
        background-image: url('./images/offer.jpg');
        padding-bottom:2rem ;
    }

    /* contact */
    section.contact .center{
        width: 90%;
        margin: 0 auto;
        flex-direction: column;
    }
    section.contact .text{
        width: 100%;
    
    }
    section.contact .info{
        flex-direction: column;
        width: 100%;
    }
}

@media only screen and (max-width:770px){


section.intro .flex{
    width: 90%;
    margin: 0 auto;
}
section.message .box{
    width: 90%;
    margin: 1rem auto;
    color: rgb(126, 86, 43);
}

section.info .container{
    width: 95%;
    margin: 0 auto;

}

}

@media only screen and (max-width:750px){

    section.info .container{
        width: 50%;
        margin: 0 auto;
        flex-direction: column;
    
    }

    section.info .text{
        width: 100%;
        color: white;
        text-align: center;
        /* height: 10rem; */
    }

    section.info .text p{
        padding: 2rem 0;
        line-height: 1.5;
        letter-spacing: 2px;
    
    }

    section.info .image{
        width: 100%;
    }

   
    
    section.goal video{
        border-radius: 20%;
    }

}


@media only screen and (max-width:720px){


    section.intro .flex{
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }
    section.intro .image{
        width: 100%;
    
    }
    section.intro .image .center{
       margin: 0 auto; 
        width: 40%; 
    }

    section.intro .text{
        width: 100%;
        color: white;
        padding: 1rem 1rem;
        text-align:center;
    
    }
    section.intro .text p{
        padding: 0 2rem;
    }

    section.offer .mid.flex-col{
        display: flex;
        flex-direction:row;
    }
    section.offer .mid .flex{
        flex-direction: column;
        width: 50%;
    }

    section.offer .block{
        color: white;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 5px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    section.message .box h1{
        margin: 5rem 0;
        font-size: 1.5rem;
        letter-spacing: 6px;
        text-align: center;
        width: 100%;
        color: white;
    }

    section.goal .text{
        width: 100%;
        padding: 2rem 0;        
        text-align: center;

    }
    section.goal .video{
        width: 100%;
        padding: 0;
    }
    section.goal video{
        border-radius: 0;
        
    }
    

    section.goal .center{
        width: 70%;
        margin: 0 auto;
        flex-direction: column-reverse;
    }
    
}


@media only screen and (max-width:600px){
    .msg2 h1{
        color: rgb(126, 86, 43);
        padding: 2rem 3rem;
        
    }

    section.info .container{
        width: 60%;
        margin: 0 auto;
        flex-direction: column;
    
    }
}


@media only screen and (max-width:580px){

    section.intro .image .center{
       margin: 0 auto; 
        width: 50%; 
    }
    .carousel{
        width: 95%;
        height: auto;
        margin: auto auto;
    }
    .carousel-cell {
        width: 100%;
        height: auto;
    }
    .carousel-cell img{
        width: 100%;
    }
    section.info .image img{
        width: 18rem;
        height: 23rem;
        border-radius: 50%;
        /* border: 1px solid white; */
    }

    section.info .text p{
    font-size: 0.9rem;
    
    }
  
}



@media only screen and (max-width:500px){

    section.intro .image .center{
       margin: 0 auto; 
        width: 60%; 
    }

    .under{
        text-align: center;
        color: white;
        padding: 3rem 0;
        font-size: 1.5rem;
    }

    section.message .box h2{

        font-size: 0.9rem;
    }
    section.message .box h1{
        margin: 3rem 0;
        font-size: 1.1rem;
        letter-spacing: 5px;
    }
    .msg2 h1{
        color: rgb(126, 86, 43);
        padding: 2rem 2rem;
        font-size: 1rem;
        
    }
    .msg2 img{
        width: 8rem;
    }

    section.info .container{
        width: 70%;
        margin: 0 auto;
        flex-direction: column;
    
    }

    section.info .icon{
        width: 150px;
        height: 150px;
    }
    section.footer .center{
        width: 90%;

    }
}


@media only screen and (max-width:430px){

    section.intro .image .center{
       margin: 0 auto; 
        width: 70%; 
    }
    section.offer .mid.flex-col{
        display: flex;
        flex-direction:column;
    }
    section.offer .mid .flex{
        flex-direction: column;
        width: 100%;
    }
    section.message .box .line{
        height: 4px;
    }

    header.top.active .nav-bar{
        flex-direction: column;
        background-color: rgb(0, 0, 0, 0.9);
        transition:all 0.2s ;
        border-radius: 0;
        width: 100%;
    }

    section.info .container{
        width: 80%;
        margin: 0 auto;
        flex-direction: column;
    
    }
    .under{
        text-align: center;
        color: white;
        padding: 3rem 0;
        font-size: 1.5rem;
    }
    section.goal .center{
        width: 80%;
        margin: 0 auto;
        flex-direction: column-reverse;
    }
    
}

@media only screen and (max-width:380px){

    section.intro .image .center{
       margin: 0 auto; 
        width: 80%; 
    }
    section.offer .block{
        color: white;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    section.message .box h2{
        font-size: 0.8rem;
    }
    section.message .box h1{
        font-size: 1rem;
    }

    section.info .container{
        width: 90%;
        margin: 0 auto;
        flex-direction: column;
    
    }
    .under{
        text-align: center;
        color: white;
        padding: 3rem 0;
        font-size: 1.2rem;
    }
}


@media only screen and (max-width:350px){

    section.intro .image .center{
       margin: 0 auto; 
        width: 75%; 
    }

    section.intro img{
        height: 15rem;
        width: 15rem;
        border-radius: 50%;
        border: 5px solid rgba(0, 0, 0, 0.363);

    
    }
    section.message .box h2{
        font-size: 0.7rem;
    }
    section.message .box h1{
        font-size: 0.9rem;
    }

    
}