@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,300&display=swap');


/* ##########HTML ELEMENT STYLING ####### */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "montserrat", sans-serif;
}

html {
    font-size: 62.5%px;
}



/* ############### UTILITY CLASSES ################ */

.container {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
}

.large-heading {
    font-size: 2.5rem;
}

.medium-h {
    font-size: 2rem;
}

.t-red {
    color: #e63946;
}

.t-light {
    color: #f4f4f4;
}

.t-black {
    color: #333;
}

.t-grey {
    color: #555;
}

.bg-dark {
    background-color: #263238;
    padding-bottom: 4rem;
}

ul li {
    list-style: none;
}

a {
    font-size: 1.6rem;
    text-decoration: none;
}

p,
li {
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    letter-spacing: 0.05em;
}

h1,
h2,
h3 {
    margin-bottom: 0.5em;
    letter-spacing: 0.15em;
    font-weight: 500;
}

.btn {
    display: inline-block;
    padding: 0.5em 1em;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0.5em 0;
}

.btn-primary {
    background-color: white;
    color: red;
    border-radius: 100px;
}

.btn-primary:hover {
    background-color: red;
    color: white;
    border: 2px solid white;
}

.btn-sec {
    background-color: White;
    color: red;
    border: 2px solid red;
    border-radius: 1.5em;
    padding: 0.1 0.5em;
}

.btn-sec:hover {
    background-color: red;
    color: white;
    border: 2px solid #ddd;
}

.formbtn {
    display: block;
    margin: 20px auto;
    padding: 0.5rem 3rem;
    text-transform: uppercase;
    background-color: red;
    outline: none;
    border: none;
    color: white;
}




/* ############## HEADER STYLING ################# */

.header {
    position: relative;
    height: 95vh;
    /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/header-image.jpg"); */
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.bolnews.com/wp-content/uploads/2021/08/Tourist-spot-in-Pakistan_16dd01a7947_large.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.navbar .logo
 {
    float: left;
    font-size: 3.5rem;
    margin-top: 1rem;
   
}

.aboutnav .navitem{
    padding: 0.5rem;
    /* margin: 2rem; */
}

.header .navbar .navitems{
    float: right;
}


.navbar .navitem {
    float: left;
    margin-top: 1rem;
}

.navbar .navitems {
    display: inline-block;
    padding: 1rem;
}

.navbar a:link,
.navbar a:visited {
    color: #f4f4f4
}

.navbar::after {
    content: none;
    display: block;
    clear: both;
}

.navbar a:hover {
    border-bottom: 4px solid white;
}

.navbar a {
    padding: 0.3rem;
}

/* .navbar {
    float: left;
    top: 0px;
} */



/* ###############HEADER CONTENT STYLING############## */


.header-content {
    /* border: 2px solid white; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0,) 0.5);
}

.header-content h1 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 3rem;
}

.header-content p {
    text-transform: uppercase;
}


/* ################ SHOWCASE SECTION STYLING ############### */

.showcase {
    background-color: #ddd;
    padding: 10rem 0px;
}

.row {
    height: 350px;
    background-color: #fff;
    box-sizing: border-box;



}

.row1 {
    margin-bottom: 10rem;
    background-color: #fff;
    box-shadow: 5px 5px 20px 0px #aaa;
}

.row2 {
    box-shadow: 5px 5px 20px 0px #aaa;
}

.row1 .imgbox,
.row2 .textbox {
    float: left;
    width: 50%;
}

.row2 .imgbox,
.row1 .textbox {
    float: right;
    width: 50%;
}

.row .imgbox {

    height: 100%;
}

.textbox {
    padding: 1.5rem;

}

.row .imgbox img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.row::after {
    content: none;
    display: block;
    clear: both;
}


/* ################# features section styling ########### */

.box-features {
    padding: 10rem;
}

.box {
    width: 33.333333%;
    float: left;
    border: 2px solid black;
    padding: 2rem;
    box-sizing: border-box;
}

.box-1,
.box-3 {
    background-color: #263238;
    color: white;
}

.box-2 {
    background: linear-gradient(25deg, #d64c7f, #ee4758 50%);
    color: white;
}

.box-wrap {
    box-shadow: 0px 0px 20px 0px black;

}

.box-wrap::after {
    content: "";
    display: block;
    clear: both;
}





/* #################footer#################### */
.footer {
    background-color: #263238;
    color: #f4f4f4;
    padding: 2rem;
    text-align: center;
}

.smlinks i {
    margin: 1rem;
}


/* ########### About us page ############ */
.aboutnav {
    margin: 1rem;
}

.about {
    padding: 5rem 0rem;
}

.ah {
    border-bottom: 5px solid red;

}


/* ################# about list ############## */
.aboutlist {
    text-align: center;
    margin-top: 2rem;
}

.aboutlist .left {
    float: left;
    width: 50%;
}

.aboutlist .right {
    float: right;
    width: 50%;
}

.aboutlist::after {
    content: "";
    display: block;
    clear: both;
}

.aboutlist li::before {
    content: "\2713";
    color: #e63946;
    font-weight: bold;
    padding-right: 1rem;
}

/* ####################aboutcount################## */
.counts {
    /* border: 6px solid red; */
    margin-top: 3rem;
}

.countitem {
    float: left;
    /* border: 2px solid red; */
    width: 25%;
    text-align: center;
}

.counts::after {
    content: "";
    display: block;
    clear: both;
}

.countitem span {
    font-size: 3rem;
    font-weight: 700;
    color: red;
}

.countitem p {
    font-weight: 700;
    color: grey;
}



/* ##################cta about ############# */
.cta {
    background: linear-gradient(25deg, #d64c7f, #ee4758 50%);
    color: #f4f4f4;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.319);

}

.ctaleft {
    float: left;
    width: 60%
}

.ctaright {
    width: 40%;
    float: right;
    text-align: right;
}

.btncta {
    /* text-align: center;/bn  */
    display: inline-block;
    font-weight: 700;
    font-size: 2rem;
    border: 4px solid white;
    color: #f4f4f4;
    padding: 0.3rem 2.5rem;

}

.ctaleft p {
    text-align: center;
}

.cta {
    margin-bottom: 4rem;
}


/* #################### contact form ############### */

.contactform {
    padding: 5rem 0rem;
}

.cform {

    padding: 1rem;
    height: 760px;
}

.form {
    height: 640px;
}

.cform .address {
    float: left;
    width: 49%;
    background-color: #fff;
}

.cform .address i {
    display: inline-block;
    margin-right: 1rem;
}

.cform .address h2 {
    display: inline-block;

}

.cform .form {
    float: right;
    width: 49%;
    background-color: #f7f7f7;
    padding: 1rem;

}

.cform .addressgroup {
    margin-bottom: 3rem;
}

.cform .address .img {
    max-width: 90%;
    /* min-height:40rem ; */
    object-fit: cover;
    object-position: right;
}

.form h3 {
    border-bottom: 4px solid red;
}

.form.label {
    display: block;
    width: 100%;
}

.cform::after {
    content: "";
    display: block;
    clear: both;
}








/* ########################## media queries ################ */

@media (max-width: 500px) {
    html {
        /* font-size: 8px; */
        font-size: 50%;
    }

    .navbar .navitems,
    .navbar .logo {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .row {
        height: auto;
        width: 100%;
    }

    .row .imgbox,
    .row .textbox {
        float: none;
        width: 100%;
        text-align: center;
    }

    .box-features .box {
        float: none;
        width: 100%;
        text-align: center;
        box-shadow: 0px 0px 20px 0px black;
    }

    .box-features .box-2, .box-features .box-3 {
        margin-top: 7rem;
    }

    .box-wrap {
        box-shadow: none;
    
    }

    .ctaleft,
    .ctaright {
        float: none;
        text-align: center;
        width: 100%;
    }
    .ctaright .btncta{
        text-align: center;
    }

    .contactform .address{
        float: none;
        width: 100%;
        height: auto;
        margin-bottom:5rem ;
    }

    .contactform .form{
        float: none;
        width: 100%;
    height: auto;
        /* padding-bottom:20rem ; */
        box-sizing: border-box;
        /* margin-bottom: 10rem; */
    }

    .formbtn{
        /* padding-bottom: 20rem; */
    }
}