@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

body {
    font-family: 'Oswald';
    overflow-x: hidden;
}

/* Header */

.header {
    padding: 20px 10px 10px 10px;
    position: relative;
    z-index: 3;
}

.navbar {
    display: block;
}

.nav-ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 0;
    padding-left: 0;
}

.navlogo {
    width: 70%;
}

.list {
    color: white;
    text-decoration: none;
}

.list:hover,
.footul li:hover a {
    color: #FF000E;
    transition: 0.3s;
}

.active {
    color: #FF000E;
    transition: 0.3s;
}

.loginbtns {
    text-align: end;
}

.gsbtn {
    color: white;
    text-decoration: none;
    background-color: #FF000E;
    padding: 10px 30px;
    border: 1px solid #FF000E;
    font-size: 15px;
}

.gsbtn:hover {
    background-color: transparent;
    color: white;
    transition: 0.3s;
}

/* Header */

.main-banner-content h2 {
    font-size: 60px;
    text-align: center;
    font-weight: 800;
    width: 80%;
    line-height: 62px;
}

.main-banner-content p {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

.main-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    width: 70%;
    margin: auto;
}


.sec1 {
    background: url(../images/main-bg.png);
    padding: 250px 10px 200px;
    background-size: cover;
    background-position: center;
    margin-top: -115px;
    position: relative;
}


.sec2,
.sec3,
.sec5 {
    padding: 50px 10px;
}

.bx-icon img {
    background-color: #FF000E;
    padding: 20px;
    border-radius: 5px;
}

.sec2 .gsbtn:hover,
.fifthcol .gsbtn:hover,
.offcanvas-body .gsbtn:hover,
.blog-main .sec3 .gsbtn:hover
{
background-color: transparent;
color: #FF000E;
transition: 0.3s;
}

.img-box {
    display: grid;
    grid-template-columns: 12% 85%;
    gap: 20px;
}

.abt-img img {
    width: 100%;
}

.blackhead {
    font-size: 36px;
    line-height: 42px;
}

.service h4 {
    font-size: 18px;
    margin: 0;
}

.redhead {
    color: red;
    letter-spacing: 12px;
    font-weight: 400;
    font-size: 20px;
}

.abt-cntnt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bx-cntnt h6 {
    font-size: 20px;
    margin-bottom: 0;
}

.abt-cntnt p {
    color: #7f7272;
}

.service p {
    font-weight: 300;
    margin-bottom: 5px;
}

.bx-cntnt {
    width: 70%;
}

.abt-cntnt a {
    margin-top: 30px;
}

.sec3-inner {
    text-align: center;
    width: 70%;
    margin: auto;
}

.service {
    background-color: #FFDEDE;
    padding: 20px 15px;
    text-align: center;
    border-radius: 10px;
    color: #7f7272;
    margin-top: 20px;
}

.service:hover {
    background-color: #FF000E;
    color: white;
    transition: 0.3s;
}

.service img {
    padding: 8px 12px;
    margin-bottom: 10px;
}

.service:hover img {
    filter: grayscale(1) brightness(18.5);
    background-color: #00000052;
    transition: 0.3s;
}

.service:hover .rm {
    color: white;
    transition: 0.3s;
}

.sec4-inner img {
    width: 100%;
    margin-top: 50px;
}

.testimonial img {
    width: 8% !important;
    margin-bottom: 10px;
}

.rm {
    color: #7f7272;
    text-transform: uppercase;
}

.sec4 {
    background: url(../images/sec4-bg.png);
    background-size: cover;
    padding: 100px 50px;
    text-align: center;
}

.sec4-inner .redhead,
.sec4-inner .blackhead,
.sec6-inner .redhead,
.sec6-inner .blackhead {
    color: white;
    text-align: center;
}

.testi-img img {
    width: 80%;
}

.testi-img {
    text-align: center;
}

.sec5-inner {
    padding-bottom: 30px;
}

.stars i {
    color: #FF000E;
    font-size: 18px;
}

.stars {
    padding-bottom: 30px;
}

.testimonial p {
    font-size: 18px;
    font-style: italic;
}

.testi-info h6 {
    color: #FF000E;
    font-weight: 400;
}

.sec6-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    margin: auto;

}

.sec6 {
    padding: 100px;
    background: url(../images/sec6-bg.jpg);
    background-size: cover;

}

/* Footer */

.footul {
    list-style: none;
    padding: 0;
}

.foot-d {
    display: grid;
    grid-template-columns: 25% 11.5% 11.5% 11.5% 25%;
    gap: 50px;
    align-items: baseline;
    padding: 50px 10px 20px;
}

.footul a {
    color: #7E7E7E;
    text-decoration: none;
    line-height: 30px;
    font-size: 18px;
}

.payopts img {
    width: 70% !important;
}

.firstcol p {
    font-size: 18px;
}

.firstcol img {
    width: 60%;
}

.foot-d h4 {
    font-size: 22px;
    font-weight: 700;
}

.reserve p {
    margin-bottom: 0;
    text-align: center;
}

.copyright {
    border-top: 1px solid #7E7E7E;
    padding: 10px;
}

.emfield {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
}

/* Footer */


/* About Us */

.about-us-main .sec1 {
    background: url(../images/about/about-bg.png);
    background-size: cover;
    background-position: 50%;
    padding: 280px 10px 230px;
}

.about-us-main .abt-img img {
    width: 80%;
}

.about-us-main .abt-img {
    text-align: center;
}

/* About Us */



/* Services */

.service-main .sec1 {
    background: url(../images/service/service-bg.png);
    background-size: cover;
    background-position: 50%;
    padding: 280px 10px 230px;
}

.service-inner-content {
    color: #7E7E7E;
}

.service-inner-content h3 {
    font-size: 35px;
    padding-top: 10px;
}

.service-inner-content .bx-icon img {
    background-color: #A60000;
    border-radius: 20px;
    padding: 18px 20px;
}

.service-inner-image img {
    width: 100%;
}

.s-sec2,
.s-sec3,
.s-sec4,
.s-sec5,
.s-sec6,
.s-sec7 {
    padding: 30px 10px;
}

/* Services */



/* Contact Us */


.contact-us-main .sec1 {
    background: url(../images/contact/contact-bg.png);
    background-size: cover;
    background-position: 50%;
    padding: 280px 10px 230px;
}

.blog a {
    color: inherit;
    text-decoration: none;
}

.blog img {
    width: 100%;
}

.blog-date h4 {
    font-weight: 400;
    font-size: 28px;
}

.blog-date h5 {
    font-weight: 400;
    font-size: 18px;
    color: #A8A8A8;
}

.blog-info {
    display: grid;
    grid-template-columns: 26% 72.5%;
    gap: 10px;
    padding-top: 20px;
}

.rm-blog {
    color: black;
    text-decoration: none;
    font-size: 18px;
    margin-top: 30px;
    display: block;
}

.rm-blog i {
    padding-left: 10px;
}


.cta img {
    width: 100%;
}

.cta-content {
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.cta {
    position: relative;
}

.cta-content h5 {
    font-size: 20px;
    font-weight: 400;
}

.cta-content p {
    font-size: 30px;
    font-weight: 500;
    width: 70%;
    margin: auto auto 30px;
}

.form-field {
    width: 100%;
    padding: 15px;
    background-color: #ffb8b8;
    border: 0;
    border-radius: 15px;
    color: black;
}

.form-field:focus,
.msg-field:focus {
    outline: 0;
}

.form-field::placeholder,
.msg-field::placeholder {
    color: black;
}

.c-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.msg-field {
    background-color: #ff7a7a;
    width: 100%;
    padding: 15px 15px 80px;
    border-radius: 15px;
    border: 0;
    color: black;
}

.sub-btn {
    background-color: black;
    color: white;
    padding: 12px 25px;
    border-radius: 15px;
    border: 1px solid black;
}

.sub-btn:hover {
    background-color: transparent;
    color: black;
    transition: 0.3s;
}

.contact-form {
    padding: 20px 25px;
    border: 1px solid #FF0000;
    border-radius: 20px;
}

/* Contact Us */



/* Blog */

.blog-main .sec1 {
    background: url(../images/blog/blog-bg.png);
    background-size: cover;
    background-position: 50%;
    padding: 280px 10px 230px;
}

.blog-main .sec2 .blog-cntnt h4 {
    font-size: 40px;
}

.blog-main .sec2 .side .blog-cntnt h4 {
    font-size: 25px;
}

.blog-main .sec2 .blog-info {
    display: grid;
    grid-template-columns: 72.5% 25%;
}

.blog-main .sec2 .blog-date {
    text-align: right;
}

.blog-main .side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.blog-main .side .blog p {
    margin-bottom: 5px;
}

.blog-main .m-blog .blog img {
    height: 500px;
}

.blog-main .side .blog .rm-blog {
    margin-top: 0;
}

.blog-main .side .blog img {
    height: 250px;
}

.blog-main .side .blog-info {
    padding-top: 5px;
}

.blog-main .side .blog-date h4 {
    font-size: 24px;
}

.blog-main .side .blog-date h5 {
    font-size: 16px;
}

.blog-main .sec3 .blog {
    padding-bottom: 20px;
}

.blog-main .sec3 .blog .rm-blog {
    margin-top: 20px;
}

.blog-main .sec3 .gsbtn {
    display: block;
    width: max-content;
    margin: 20px auto auto;
    padding: 15px 40px;
}

/* Blog */

@media only screen and (min-width:0px) and (max-width:767px) {

    /* Header */

    .navbar-toggler {
        float: right;
    }

    .navbar-toggler i {
        font-size: 25px;
        color: white;
    }

    .navlogo {
        width: 80%;
    }

    .navbar-brand .logo {
        width: 50%;
    }

    #navbarOffcanvas {
        background-color: white !important;
    }

    .nav-ul {
        gap: 15px;
        flex-direction: column;
    }

    .list {
        color: black;
    }

    .loginbtns {
        display: flex;
        margin-top: 15px;
    }

    /* Header */


    .main-banner-content {
        width: 100%;
    }

    .sec1 {
        padding: 230px 10px 180px;
    }

    .main-banner-content p {
        font-size: 14px;
        width: 90%;
    }

    .abt-cntnt {
        text-align: center;
        align-items: center;
    }

    .redhead {
        font-size: 14px;
        letter-spacing: 5px;
    }

    .main-banner-content h2 {
        font-size: 35px;
    }

    .img-box {
        grid-template-columns: 100%;
    }

    .bx-cntnt {
        width: 100%;
    }

    .bx-icon img {
        width: 18%;
    }

    .bx-icon img {
        padding: 15px;
    }

    .gsbtn {
        padding: 10px 25px;
        font-size: 14px;
    }

    .blackhead {
        font-size: 28px;
    }

    .abt-cntnt p {
        color: #7f7272;
        font-size: 14px;
    }

    .abt-cntnt a {
        margin-top: 0;
    }

    .bx-cntnt h6 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .sec3-inner {
        width: 100%;
    }

    .sec3-inner p {
        font-size: 14px;

    }

    .testi-img img {
        width: 80%;
    }

    .stars i {
        font-size: 14px;
    }

    .testimonial p {
        font-size: 14px;
    }

    .stars {
        padding-bottom: 10px;
    }

    .sec4-inner img {
        margin-top: 20px;
    }

    .sec4 {
        padding: 50px 10px;
    }

    .reserve p,
    .rm,
    .service p {
        font-size: 14px;
    }

    .sec5-inner {
        padding-bottom: 10px;
        text-align: center;
    }

    .testimonial {
        text-align: center;
        margin-top: 20px;
    }

    .service h4 {
        font-size: 20px;
    }

    .service img {
        width: 25%;
    }

    .testimonial {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sec6-inner {
        width: 80%;
    }

    .testi-info h4 {
        font-size: 18px;
    }

    .testi-info h6 {
        font-size: 14px;
    }

    .sec6 {
        padding: 50px 10px;
    }

    /* Footer  */

    .firstcol p {
        font-size: 16px;
    }

    .firstcol img {
        width: 60%;
    }

    .foot-d {
        grid-template-columns: 100%;
        gap: 10px;
    }

    .footul a {
        font-size: 16px;
    }

    .foot-d h4 {
        font-size: 18px;
        font-weight: 700;
    }

    .fifthcol p {
        font-size: 14px;
    }

    .emfield {
        padding: 8px;
        margin-bottom: 10px;
    }

    .payopts img {
        width: 70% !important;
        margin-bottom: 10px;
    }


    /* Footer  */

    /* About Us */

    .about-us-main .sec1 {
        padding: 230px 10px 180px;
    }

    .about-us-main .abt-img img {
        width: 100%;
    }

    .about-us-main .sec3 .abt-cntnt {
        margin-top: 15px;
    }

    .about-us-main .sec2 .abt-cntnt {
        margin-bottom: 15px;
    }

    /* About Us */


    /* Services */
    .service-main .sec1 {
        padding: 230px 10px 180px;
    }

    .service-inner-content .bx-icon img {
        padding: 15px 18px;
        width: 20%;
    }

    .service-inner-content {
        text-align: center;
    }

    .service-inner-content h3 {
        font-size: 30px;
        padding-left: 0;
    }

    .service-inner-content p {
        font-size: 14px;
    }

    .service-inner-content .bx-icon {
        padding-top: 10px;
    }

    .s-sec2,
    .s-sec3,
    .s-sec4,
    .s-sec5,
    .s-sec6,
    .s-sec7 {
        padding: 20px 10px;
    }

    /* Services */



    /* Contact Us */

    .contact-us-main .sec1 {
        padding: 230px 10px 180px;
    }

    .form-field {
        padding: 10px;
    }

    .msg-field {
        padding: 10px 10px 60px;
    }

    .sub-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .contact-form {
        padding: 15px 20px;
    }

    .cta-content p {
        font-size: 22px;
        width: 85%;
    }

    .blog-cntnt h4 {
        font-size: 18px;
    }

    .rm-blog {
        font-size: 16px;
        margin-top: 20px;
    }

    .blog-date h5 {
        font-size: 14px !important;
    }

    .blog-date h4 {
        font-size: 22px !important;
    }

    .cta img {
        margin-top: 20px;
    }

    .sec3 {
        text-align: center;
    }

    .blog-cntnt {
        text-align: left;
    }

    .blog-date {
        text-align: left;
    }

    .blog {
        padding-top: 15px;
    }

    .sec2,
    .sec3,
    .sec5 {
        padding: 30px 10px;
    }


    /* Contact Us */



    /* Blog */

    .blog-main .sec1 {
        padding: 230px 10px 180px;
    }

    .blog-main .side .blog img {
        height: 100%;
    }

    .blog-main .blog p {
        font-size: 14px;
    }

    .blog-main .side .blog p {
        margin-bottom: 10px;
    }

    .blog-main .sec2 .blog-info {
        grid-template-columns: 79.5% 18%;
    }

    .blog-main .sec2 .blog-cntnt h4 {
        font-size: 25px;
    }

    .m-blog .blog p {
        font-size: 14px;
    }

    .blog-main .sec3 .blog .rm-blog {
        margin-top: 10px;
        text-align: left;
    }

    .blog-main .m-blog .blog img {
        height: 100%;
    }

    .blog-main .sec3 .blog-cntnt h4 {
        font-size: 22px;
    }

    .blog-main .sec3 .blog-info {
        display: grid;
        grid-template-columns: 25% 72.5%;
    }

    .blog-main .sec3 .gsbtn {
        padding: 10px 30px;
    }

    /* Blog */

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

    /* Header */

    .navlogo {
        width: 100%;
    }

    .nav-ul {
        gap: 25px;
    }


    /* Header */

    .main-banner-content {
        width: 90%;
    }

    .sec1 {
        padding: 230px 10px 180px;
    }

    .main-banner-content p {
        font-size: 14px;
        width: 90%;
    }

    .abt-cntnt a {
        margin-top: 10px;
    }

    .redhead {
        font-size: 14px;
        letter-spacing: 8px;
    }

    .main-banner-content h2 {
        font-size: 60px;
    }

    .gsbtn {
        padding: 10px 25px;
        font-size: 14px;
    }

    .blackhead {
        font-size: 32px;
    }

    .bx-icon img {
        padding: 10px;
        width: 100%;
    }

    .abt-cntnt p {
        color: #7f7272;
        font-size: 13px;
    }

    .bx-cntnt h6 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .sec3-inner {
        width: 80%;
    }

    .sec3-inner p {
        font-size: 14px;

    }

    .testi-img img {
        width: 100%;
    }

    .stars i {
        font-size: 14px;
    }

    .testimonial p {
        font-size: 14px;
    }

    .stars {
        padding-bottom: 10px;
    }

    .reserve p,
    .rm,
    .service p {
        font-size: 14px;
    }

    .service h4 {
        font-size: 20px;
    }

    .service img {
        width: 25%;
    }

    .sec6-inner {
        width: 50%;
    }

    .testi-info h4 {
        font-size: 20px;
    }

    .testi-info h6 {
        font-size: 14px;
    }

    .sec6 {
        padding: 100px 10px;
    }



    /* Footer  */

    .firstcol p {
        font-size: 16px;
    }

    .foot-d {
        grid-template-columns: 25.5% 12% 12% 12% 26.5%;
        gap: 20px;
    }

    .footul a {
        font-size: 16px;
    }

    .foot-d h4 {
        font-size: 18px;
        font-weight: 700;
    }

    .fifthcol p {
        font-size: 14px;
    }

    .emfield {
        padding: 8px;
        margin-bottom: 10px;
    }

    .payopts img {
        width: 100% !important;
    }


    /* Footer  */



    /* About Us */

    .about-us-main .sec1 {
        padding: 230px 10px 180px;
    }

    .about-us-main .abt-img img {
        width: 100%;
    }

    /* About Us */




    /* Services */


    .service-main .sec1 {
        padding: 230px 10px 180px;
    }

    .service-inner-content .bx-icon img {
        padding: 15px 18px;
        width: 20%;
    }

    .service-inner-content h3 {
        font-size: 30px;
        padding-left: 0;
    }

    .service-inner-content p {
        font-size: 14px;
    }

    /* Services */



    /* Contact Us */

    .contact-us-main .sec1 {
        padding: 230px 10px 180px;
    }

    .form-field {
        padding: 10px;
    }

    .msg-field {
        padding: 10px 10px 60px;
    }

    .sub-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .contact-form {
        padding: 15px 20px;
    }

    .cta-content p {
        font-size: 22px;
        width: 85%;
    }

    .blog-cntnt h4 {
        font-size: 18px;
    }

    .rm-blog {
        font-size: 16px;
        margin-top: 20px;
    }

    .blog-date h5 {
        font-size: 12px;
    }

    .blog-date h4 {
        font-size: 20px;
        margin-bottom: 5px;
    }


    /* Contact Us */


    /* Blog */

    .blog-main .sec1 {
        padding: 230px 10px 180px;
    }

    .blog-main .side .blog img {
        height: 100%;
    }

    .blog-main .sec2 .side .blog-cntnt h4 {
        font-size: 18px;
    }

    .blog-main .side .blog-date h5 {
        font-size: 12px;
    }

    .blog-main .side .blog-date h4 {
        font-size: 20px;
    }

    .blog-main .side .blog p {
        font-size: 12px;
    }

    .blog-main .side .blog .rm-blog {
        font-size: 14px;
    }

    .blog-main .sec2 .blog-cntnt h4 {
        font-size: 25px;
    }

    .m-blog .blog p {
        font-size: 14px;
    }

    .blog-main .sec3 .blog .rm-blog {
        margin-top: 10px;
    }

    .blog-main .m-blog .blog img {
        height: 100%;
    }

    .blog-main .sec3 .gsbtn {
        padding: 10px 30px;
    }

    /* Blog */

}