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

    /* start of general styles */
    body {
        padding: 0;
    }

    .btn a {
        font-size: 13px;
        padding: 9px 30px;
        line-height: 30px;
    }

    .main-title {
        height: 130px;
    }

    .main-title-green {
        font-size: 20px;
        line-height: 37px;
        letter-spacing: 1.5px;
    }

    .main-title-green:hover {
        font-size: 23px;
    }

    .text-btn-green a {
        font-size: 13px;
        padding: 7px 3px;
    }

    .title-gray {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .text-gray {
        font-size: 13px;
        margin-bottom: 30px;
        line-height: 20px;
    }

    /* end of general styles */


    /* start of navigation */
    .nav-btn {
        width: 56px;
        height: 56px;
        top: 30px;
        right: 30px;
    }

    .nav-line {
        width: 24px;
        height: 2px;
    }

    .nav-line::before {
        transform: translateY(-5px);
    }

    .nav-line::after {
        transform: translateY(4px);
    }

    .nav-btn:hover .nav-line::before {
        transform: translateY(-7px);
    }

    .nav-btn:hover .nav-line::after {
        transform: translateY(6px);
    }

    .nav-nav {
        width: 100%;
        top: 50%;
        left: -30px;
        transform: translateY(-50%);
    }

    .nav-link {
        font-size: 23px;
    }

    /* end of navigation */


    /* start of header */
    #header {
        background: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)),
            url(../img/hero-small.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }

    .header-logo img {
        width: 54px;
        position: relative;
        top: 30px;
        left: 30px;
    }

    .header-text h1 {
        margin-top: 125px;
        letter-spacing: 10px;
        font-size: 45px;
    }

    .header-text h4 {
        letter-spacing: 5px;
        font-size: 14px;
        margin-bottom: 45px;
    }

    /* end of header */


    /* start of about-natours */
    #about-natours {
        margin-top: 25px;
    }

    .row {
        max-width: 350px;
        margin: 0 auto;
    }

    .about-dscrpt {
        width: 100%;
        margin-right: 0;

    }

    .about-images {
        width: 60%;
    }

    .about-images img {
        width: 70%;
    }

    .about-images img:hover {
        outline: 10px solid #55c57a;
        outline-offset: 7px;
    }

    .about-images img:nth-child(1) {
        top: 5%;
        left: -10%;
    }

    .about-images img:nth-child(2) {
        top: 0;
        left: 40%;
        z-index: 15;
    }

    .about-images img:nth-child(3) {
        top: 5%;
        left: 100%;
    }

    /* end of about-natours */
    /* start of benefits section */
    #benefits {
        padding: 80px 0 30px 0;
    }

    .benefit-box {
        width: 300px;
        height: auto;
        padding: 23px;
        padding-bottom: 0;
        float: none;
        margin: 0 auto;
    }

    .benefit-box:first-child,
    .benefit-box:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    #benefits .row {
        max-width: 900px;
        min-height: 200px;
        margin: 0 auto;
        float: none;
    }

    .benefit-icon i {
        font-size: 45px;
        margin: 10px 0 25px 0;

    }

    #benefits .text-gray {
        padding-bottom: 20px;
        margin-bottom: 35px;
    }

    /* end of benefits section */


    /* start of popular-tours section */
    #popular-tours {
        margin-top: 60px;
    }

    #popular-tours .main-title-green {
        font-size: 18px;
    }

    .flip-card-area {
        width: 346px;
        height: 615px;
        margin-bottom: 40px;
        position: relative;
    }

    .flip-card {
        width: 100%;
        height: 615px;
        position: relative;
    }

    /* ======= Front side of the flip card ======= */
    .front-side {
        width: 100%;
        height: 615px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card-image {
        height: 180px;
    }

    .card-title {
        width: 70%;
        font-size: 21px;
        top: 13%;
        right: 1%;
    }

    .card-items {
        margin: 20px 0;
    }

    .card-title span:nth-child(1) {
        top: -80px;
    }

    .card-title span:nth-child(2) {
        top: -40px;
    }

    /* ======= Back side of the flip card ======= */
    .back-side {
        width: 100%;
        height: 210px;
        position: absolute;
        top: 405px;
        left: 0;
        text-align: center;
        box-sizing: border-box;
        padding: 50px 0;
        transform: rotateY(0);
        -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -ms-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -o-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .only {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .price {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .flip-card-area:hover .flip-card {
        transform: rotateY(0);
    }

    #popular-tours .btn-green {
        margin-top: 30px;
    }

    /* end of popular-tours */


    /* start of comments section */
    #comments {
        margin-top: 80px;
        padding: 80px 0;
    }

    #comments .main-title-green {
        font-size: 18px;
    }

    .comment-box {
        width: 50%;
        padding: 32px 32px 0px 60px;
        transform: skewX(0);
    }

    .comment-image {
        width: 120px;
        height: 120px;
    }

    .comment-image,
    #comments .title-gray,
    #comments .text-gray {
        transform: skewX(0);
    }

    #comments .title-gray {
        line-height: 20px;
    }

    .shadow-1::after,
    .shadow-2::after {
        font-size: 14px;
    }

    #comments .text-btn-green {
        margin-top: 65px;
    }

    /* end of comments section */


    /* start of booking section */
    #booking {
        padding: 80px 0;
    }

    .booking-box {
        width: 350px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/nat-10.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .booking-form-area {
        width: 85%;
        padding: 30px 45px;
    }

    #booking .main-title {
        height: 65px;
    }

    #booking .main-title-green:hover {
        font-size: 22px;
        transform: skewX(15deg) skewY(2deg) translateX(-5px);
    }

    .booking-form input {
        width: 70%;
        padding: 12px 20px;
        font-size: 12px;
        margin: 12px 0;
    }

    .booking-form input[type=email] {
        margin-bottom: 30px;
    }

    .booking-form label {
        font-size: 10px;
    }

    label.btn-label {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .booking-form input[type="text"]:not(:placeholder-shown)+label {
        opacity: 1;
        visibility: visible;
    }

    .booking-form input[type="text"]:not(:placeholder-shown)+label {
        top: 10px;
    }

    .booking-form input[type="email"]:not(:placeholder-shown)+label {
        top: -5px;
    }

    .rounded-btn {
        width: 16px;
        height: 16px;
        margin-right: 7px;
    }

    .rounded-btn::before {
        width: 11px;
        height: 11px;
    }

    #booking .btn a {
        padding: 3px 25px;
    }

    #booking .btn a {
        padding: 3px 25px;
    }

    #booking button {
        margin: 10px 0 20px 0;
    }

    /* end of booking section */


    /* start of footer */
    footer {
        width: 100%;
        padding: 65px 0;
    }

    footer .row {
        min-height: 150px;
        margin-top: 50px;
        float: none;
        position: relative;
    }

    .left-side,
    .right-side {
        min-height: 0;
        width: 350px;
        float: none;
        position: relative;
        left: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .left-side {
        text-align: center;
        margin-bottom: 50px;
    }


    .footer-menu ul li a,
    .footer-dscrpt p,
    .footer-dscrpt p a {
        font-size: 12px;
    }

    /* end of footer */


    /* start of popup */
    .popup-box,
    .right-popup {
        width: 95%;
        float: none;
        margin: 0 auto;
    }

    .left-popup {
        width: 80%;
        float: left;
        margin: 12% 10% 2% 10%;
    }

    .left-popup img {
        width: 47.5%;
        height: 130px;
        float: left;
    }

    .left-popup img:nth-child(1) {
        margin-right: 2.5%;
    }

    .left-popup img:nth-child(2) {
        margin-left: 2.5%;
    }

    .right-popup .main-title {
        text-align: center;
        height: 170px;
        margin-top: 2%;
        margin-bottom: 15%;
    }

    .right-popup .main-title-green {
        font-size: 18px;
        margin: 0;
    }

    .popup-terms .title {
        text-align: center;
    }

    .popup-terms p.text-gray {
        font-size: 11px;
        line-height: 12px;
        column-count: 1;
        text-align: center;
    }

    /* end of popup */
}
@media only screen and (min-width:601px) and (max-width: 900px) {

    /* start of general styles */
    body {
        padding: 0;
    }

    .btn a {
        font-size: 13px;
        padding: 7px 30px;
        line-height: 30px;
    }

    .main-title {
        height: 100px;
    }

    .main-title-green {
        font-size: 23px;
        letter-spacing: 1.5px;
    }

    .main-title-green:hover {
        font-size: 26px;
    }

    .text-btn-green a {
        font-size: 13px;
        padding: 7px 3px;
    }

    .title-gray {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .text-gray {
        font-size: 13px;
        margin-bottom: 30px;
        line-height: 20px;
    }

    /* end of general styles */


    /* strart of navigation */
    .nav-btn {
        width: 56px;
        height: 56px;
        top: 30px;
        right: 30px;
    }

    .nav-line {
        width: 24px;
        height: 2px;
    }

    .nav-line::before {
        transform: translateY(-5px);
    }

    .nav-line::after {
        transform: translateY(4px);
    }

    .nav-btn:hover .nav-line::before {
        transform: translateY(-7px);
    }

    .nav-btn:hover .nav-line::after {
        transform: translateY(6px);
    }

    .nav-nav {
        top: 50%;
        left: -30px;
        transform: translateY(-50%);
    }

    .nav-link {
        font-size: 23px;
    }

    /* end of navigation */


    /* start of header */
    #header {
        background: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)),
            url(../img/hero-small.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .header-logo img {
        width: 54px;
        position: relative;
        top: 30px;
        left: 30px;
    }

    .header-text h1 {
        margin-top: 125px;
        letter-spacing: 30px;
        font-size: 45px;
    }

    .header-text h4 {
        letter-spacing: 14px;
        font-size: 15px;
        margin-bottom: 45px;
    }

    /* end of header */


    /* start of about-natours section */
    #about-natours {
        margin-top: 30px;
    }

    .row {
        max-width: 350px;
        margin: 0 auto;
    }

    .about-dscrpt {
        width: 100%;
        margin-right: 0;
    }

    .about-images {
        width: 60%;
        margin-top: 60px;
    }

    .about-images img {
        width: 70%;
    }

    .about-images img:hover {
        outline: 10px solid #55c57a;
        outline-offset: 7px;
    }

    .about-images img:nth-child(1) {
        top: 5%;
        left: -10%;
    }

    .about-images img:nth-child(2) {
        top: 0;
        left: 40%;
        z-index: 15;
    }

    .about-images img:nth-child(3) {
        top: 5%;
        left: 100%;
    }

    /* end of about-natours section */

    /* start of benefits section */
    #benefits {
        padding: 80px 0 30px 0;
    }

    .benefit-box {
        width: 300px;
        height: auto;
        padding: 23px;
        padding-bottom: 0;
        float: none;
        margin: 0 auto;
    }

    .benefit-box:first-child,
    .benefit-box:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    #benefits .row {
        max-width: 900px;
        min-height: 200px;
        margin: 0 auto;
        float: none;
    }

    .benefit-icon i {
        font-size: 45px;
        margin: 10px 0 25px 0;

    }

    #benefits .text-gray {
        padding-bottom: 20px;
        margin-bottom: 35px;
    }

    /* end of benefits section */

    /* start of popular-tours section */
    #popular-tours {
        margin-top: 70px;
    }

    #popular-tours .main-title-green {
        font-size: 20px;
    }

    #popular-tours .row {
        height: 1965px;
    }

    .flip-card-area {
        width: 346px;
        height: 615px;
        margin-bottom: 40px;
        position: relative;
    }

    .flip-card {
        width: 100%;
        height: 615px;
        position: relative;
    }

    /* ======= Front side of the flip card ======= */

    .front-side {
        width: 100%;
        height: 615px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card-image {
        height: 180px;
    }

    .card-title {
        width: 70%;
        font-size: 21px;
        top: 12%;
        right: 1%;
    }

    .card-items {
        margin: 20px 0;
    }

    .card-title span:nth-child(1) {
        top: -80px;
    }

    .card-title span:nth-child(2) {
        top: -40px;
    }

    .card-items .text-gray {
        font-size: 12px;
    }

    .card-items li {
        padding: 8px;
    }

    /* ======= Back side of the flip card ======= */

    .back-side {
        width: 100%;
        height: 230px;
        position: absolute;
        top: 385px;
        left: 0;
        text-align: center;
        box-sizing: border-box;
        padding: 50px 0;
        transform: rotateY(0);
        -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -ms-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -o-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .only {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .price {
        font-size: 40px;
        margin-bottom: 30px;
    }

    .flip-card-area:hover .flip-card {
        transform: rotateY(0);
    }

    #popular-tours .btn-green {
        position: relative;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        margin-top: 50px;
    }

    /* end of popular-tours section */


    /* start of comments section */
    #comments {
        margin-top: 80px;
        padding: 80px 0;
    }

    #comments .main-title-green {
        font-size: 20px;
    }

    .comment-box {
        width: 50%;
        padding: 32px 32px 0px 60px;
    }

    .comment-image {
        width: 120px;
        height: 120px;
    }

    #comments .title-gray {
        line-height: 20px;
    }

    .shadow-1::after,
    .shadow-2::after {
        font-size: 14px;
    }

    #comments .text-btn-green {
        margin-top: 65px;
    }

    /* end of comments section */


    /* start of booking section */
    #booking {
        padding: 80px 0;
    }


    .booking-box {
        width: 350px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/nat-10.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .booking-form-area {
        width: 70%;
        padding: 30px 45px;
    }

    .booking-form input {
        width: 85%;
        padding: 12px 20px;
        margin: 10px auto;
        font-size: 12px;
    }

    .booking-form input[type=email] {
        margin-bottom: 30px;
    }

    .booking-form label {
        font-size: 10px;
    }

    .booking-form input[type="text"]:not(:placeholder-shown)+label {
        opacity: 1;
        visibility: visible;
    }

    .booking-form input[type="text"]:not(:placeholder-shown)+label {
        top: 10px;
    }

    .booking-form input[type="email"]:not(:placeholder-shown)+label {
        top: -5px;
    }

    label.btn-label {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .rounded-btn {
        width: 16px;
        height: 16px;
        margin-right: 7px;
    }

    .rounded-btn::before {
        width: 11px;
        height: 11px;
    }

    #booking .btn a {
        padding: 3px 25px;
    }

    #booking button {
        margin: 10px 0 20px 0;
    }

    /* end of booking section */


    /* start of footer */
    footer {
        width: 100%;
        padding: 65px 0;
    }

    footer .row {
        min-height: 150px;
        margin-top: 50px;
        float: none;
        position: relative;
    }

    .left-side,
    .right-side {
        width: 350px;
        min-height: 0;
        float: none;
        position: relative;
        left: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .left-side {
        text-align: center;
        margin-bottom: 50px;
    }


    .footer-menu ul li a,
    .footer-dscrpt p,
    .footer-dscrpt p a {
        font-size: 12px;
    }

    /* end of footer */

    /* start of popup */
    .popup-box, 
    .right-popup {
        width: 80%;
        float: none;
        margin: 0 auto;
    }

    .left-popup{
        width: 80%;
        float: left;
        margin: 12% 10% 2% 10%;
    }

    .left-popup img{
        width: 47.5%;
        height: 130px;
        float: left;
    }

    .left-popup img:nth-child(1){
        margin-right: 2.5%;
    }

    .left-popup img:nth-child(2) {
        margin-left: 2.5%;
    }

    .right-popup .main-title {
        text-align: center;
        height: 170px;
        margin-top: 2%;
        margin-bottom:15%;
    }

    .right-popup .main-title-green {
        margin: 0;
    }

    .popup-terms .title {
        text-align: center;
    }

    .popup-terms p.text-gray {
        font-size: 11px;
        line-height: 12px;
        column-count: 1;
        text-align: center;
    }
    /* end of popup */
}

@media only screen and (min-width:901px) and (max-width: 1200px) {
    /* start of general styles */

    .btn a {
        font-size: 14px;
        padding: 10px 40px;
        line-height: 30px;
    }

    .main-title {
        height: 140px;
    }

    .main-title-green {
        font-size: 31px;
    }

    .main-title-green:hover {
        font-size: 33px;
    }

    .text-btn-green a {
        font-size: 14px;
        padding: 7px 3px;
    }

    .title-gray {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .text-gray {
        font-size: 14px;
        margin-bottom: 30px;
        line-height: 24px;
    }

    /* end of general styles */


    /* strart of navigation */
    .nav-btn {
        width: 63px;
        height: 63px;
    }

    .nav-line {
        width: 27px;
        height: 2px;
    }

    .nav-link {
        font-size: 25px;
    }

    /* end of navigation */


    /* start of header */
    .header-logo img {
        width: 61.5px;
        position: relative;
        top: 30px;
        left: 30px;
    }

    .header-text h1 {
        letter-spacing: 35px;
        font-size: 50px;
        font-weight: 400;
    }

    .header-text h4 {
        letter-spacing: 16px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    /* end of header */


    /* start of about-natours section */
    #about-natours {
        margin-top: 90px;
    }

    .row {
        max-width: 1030px;
        min-height: 200px;
        margin: 0 auto;
    }

    .about-dscrpt {
        width: 45%;
        margin-right: 9%;
    }

    .about-images {
        width: 45%;
    }

    .about-images img {
        width: 55%;
    }

    /* end of about-natours section */


    /* start of benefits section */
    .benefit-box {
        width: 15%;
        height: 300px;
        margin-right: calc((100% - (4 * 17%)) / 14.5);
        margin-left: calc((100% - (4 * 17%)) / 14.5);
        padding: 23px;
        padding-bottom: 0;
        float: left;
    }

    #benefits .row {
        max-width: 900px;
        min-height: 200px;
        margin: 0 auto;
    }

    .benefit-box:first-child {
        margin-left: 2%;
    }

    .title {
        height: 20px;
        margin-bottom: 30px;
    }

    #benefits .text-gray {
        margin-bottom: 35px;
    }

    .benefit-icon i {
        font-size: 55px;
    }

    /* end of benefits section */


    /* start of popular-tours section */
    #popular-tours {
        margin-top: 100px;
    }

    #popular-tours .main-title-green {
        font-size: 27px;
    }

    .flip-card-area {
        width: 31%;
        height: 470px;
    }

    /* ======= Front side of the flip card ======= */

    .front-side {
        width: 100%;
        height: 470px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card-image {
        height: 200px;
    }

    .card-title {
        font-size: 25px;
    }

    .card-items {
        margin: 20px 0;
    }

    /* ======= Back side of the flip card ======= */

    .back-side {
        width: 100%;
        height: 470px;
        position: absolute;
        top: 0;
        left: 0;
    }

    #popular-tours .btn-green {
        margin-top: 90px;
    }

    /* end of popular-tours */


    /* start of comments section */
    #comments .main-title-green {
        font-size: 27px;
    }

    .comment-box {
        padding: 45px 60px 0px 90px;
        margin-bottom: 70px;
    }

    .comment-image {
        width: 135px;
        height: 135px;
    }

    .shadow-1::after,
    .shadow-2::after {
        font-size: 16px;
    }

    /* end of comments section */


    /* start of booking section */
    #booking {
        padding: 135px 0;
    }

    .booking-box {
        background: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%, transparent 100%),
            url(../img/nat-10.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .booking-form-area {
        width: 65%;
    }

    label.btn-label {
        margin-top: 10px;
    }

    .rounded-btn {
        width: 18px;
        height: 18px;
        margin-right: 7px;
    }

    .rounded-btn::before {
        width: 13px;
        height: 13px;
    }

    #booking .btn a {
        padding: 5px 30px;
    }

    #booking button {
        margin: 10px 0 30px 0;
    }

    /* end of booking section */


    /* start of popup */
    .popup-box {
        width: 90%;
    }

    .popup-terms p.text-gray {
        line-height: 18px;
        text-align: left;
    }
    /* end of popup */
}