* {
    margin: 0;padding: 0;
}

.back {
    text-decoration:none;
}

.left {

    /* border: 2px solid black; */
    /* margin-left: 34px; */
    padding: 20px;
    /* float: left; */
    display: inline-block;
    width: 45%;
    height: 45%;
    /* The width is 20%, by default */
}

.main {
    color: #848586;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 21px;
    line-height: 1.8em;
    /* background-color: #f1f1f1; */
    padding: 20px;
    display: inline-block;
    /* float: left; */
    width: 45%;
    height: 45%;
    margin: 12px 23px 00px 23px;
    /* margin-bottom: 30px; */
    /* vertical-align: middle; */
    /* The width is 60%, by default */
}
.mainabout {
    color: #848586;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 21px;
    line-height: 1.8em;
    /* background-color: #f1f1f1; */
    padding: 12px;
    display: inline-block;
    /* float: left; */
    width: 45%;
    height: 45%;
    margin: 12px 23px 00px 23px;
    /* margin-bottom: 30px; */
    /* vertical-align: middle; */
    /* The width is 60%, by default */
}

.right {
    background-color: #04AA6D;
    padding: 20px;
    float: left;
    width: 20%;
    /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
    .containt,
    .back,
    .heading,
    .right,
    .main,
    .tm-btn,
    .mainabout{
        width: 100%;
        /* The width is 100%, when the viewport is 800px or smaller */
    }
    .header{
        width: 100%;
    }
    /* .box{
        width: 200%;
    } */
    .containt{
        margin: 0;
        padding: 0;
    }
    
    img{
        size:inherit;
    }
    .left,.main{
        width: 200%;
    }
}

.header {
    /* margin: 23px; */
    /* padding: 23px; */
    /* height: 80px; */
    margin-top: 15px;
    color: #848586;
    font-size: 30px;
    margin: 20px;
    font-weight: bold;
}

.box {
    display: flex;
    justify-content: space-around;    
    flex-wrap: wrap;
}

.containt {
    margin: 4px auto;
    padding: 4px;
}

.heading {
    margin-left: 20px;
    font-size: 30px;
    color: #728d28;
    ;
}

.background {
    background-color: #f1f1f1;

}
.imal {
    position: relative;
    animation: myfirst1 3s 1;
    animation-direction: alternate;
}

@keyframes myfirst1 {
    0% {
        left: -200px;
        top: 0px;
    }

    /* 50%   {image-resolution:initial} */
    100% {
        left: 00px;
        top: 0px;
    }

}

.imar {
    position: relative;
    animation: myfirst2 3s 1;
    animation-direction: alternate;
    
}

@keyframes myfirst2 {
    0% {
        right: -200px;
        top: 0px;
    }

    100% {
        right: 00px;
        top: 0px;
    }

}
.tm-btn {
    padding: 10px 40px;
    color: white;
    background-color: #728d28;
    display: inline-block;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

button.tm-btn {
    padding: 15px 40px;
}