/* 
DESIGN & DEVELOP BY : Imam ul Tahir
PHONE & WATTSAPP : +92 033 437 65516
*/

.mainheader {background: url(../images/main-header.jpg) no-repeat center center; background-size: cover;}
.mainheader .header {background: linear-gradient(#121212 49%, #b0b0b08a); padding: 20px 0;}
.mainheader .header img {margin: 0 auto; display: block;}
.mainheader .mainheadercontent {min-height: auto; color:#fff; text-align: center;}
.mainheader .mainheadercontent h4 {}
.mainheader .mainheadercontent h1 {text-transform: uppercase; font-weight: bold;}
.mainheader .mainheadercontent p {}
.mainheader .mainheadercontent a {background-color:#f58400; text-transform:uppercase; padding:10px 30px; color:#fff; text-decoration:none; transition: all .5s ease-in-out; display:block; width:220px; margin:30px auto;}
.mainheader .mainheadercontent a:hover {background-color:#c36b05; transition: all .5s ease-in-out;}

.contentone {margin:30px -15px 30px -15px;}
.contentone .contentone-left {padding: 0 20px 0 0;}
.contentone .contentone-right {padding: 0 0 0 40px; border-left: 1px dashed #ccc;}
.contentone .contentone-rightinner {text-align: center;}
.contentone .contentone-rightinner img {margin: 0 auto;}


.contenttwo {background: #ccc; padding: 40px 0;}
.contenttwo h3 {margin: 0;}
.contenttwo h1 {font-size:15px; font-weight:bold; color:#fff;}

.contentthree {margin:30px -15px 0 -15px;}
.contentthree h2 {margin: 0;}
.contentthree-left {padding: 0 40px 0 0;}
.contentthree-right {}



.contentfour {margin:30px -15px 0 -15px;}
.contentfour .contentfour-left {padding: 0 20px 0 0;}
.contentfour .contentfour-left ul {}
.contentfour .contentfour-left ul li {list-style-image: url(../images/arrow.png); font-size: 15px; line-height: 2;}
.contentfour .contentfour-left ul li a {}
.contentfour .contentfour-right {padding: 0 0 0 40px; border-left: 1px dashed #ccc;}


.topfooter {background: #191919; padding: 30px 0; color: #fff;}
.topfooter a {color: #fff;}
.topfooter .footerinner {padding: 0 20px;}
.topfooter .footerinner ul {}
.topfooter .footerinner ul li {list-style-image: url(../images/arrow2.png);}
.topfooter .footerinner ul li a {color: #fff; text-decoration: none;}
.topfooter .footerinner h3 {margin: 0;}
.topfooter .borderleft {border-left: 1px dashed #505050;}


.lastfooter {background: #000; padding: 30px; text-align: center; color: #fff;}
.lastfooter a {color: #fff;}

.accordion-menu {width: 100%; margin: 60px auto 20px; background: #fff; border-radius: 4px; list-style: none; margin: 0; padding: 0; border: 1px solid #8f8b8b;}
.accordion-menu li.open .dropdownlink {color: #f58400;}
.accordion-menu li.open .dropdownlink .fa-chevron-down {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.accordion-menu li:last-child .dropdownlink {border-bottom: 0;}
.dropdownlink {cursor: pointer; display: block; padding:30px 15px 30px 45px; font-size: 18px; border-bottom: 1px solid #ccc; color: #212121; position: relative; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; background: linear-gradient(#ccc 49%, #eeeeee);}
.dropdownlink i {position: absolute; top: 35px; left: 16px;}
.dropdownlink .fa-chevron-down {right: 12px; left: auto;}
.submenuItems {display: none; background: #ccc; padding: 20px;}
.submenuItems li {border-bottom: 1px solid #B6B6B6;}
.submenuItems a {display: block; color: #727272; padding: 12px 12px 12px 45px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}
.submenuItems a:hover {background-color: #f58400; color: #fff;}



.cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 30px;}
.logo {height: 50px; margin-right: 20px;}
.leading {height: 240px; margin-bottom: 30px; padding: 30px; color: white; ackground: url('https://cdn.glitch.com/a5121e34-96b3-4a70-8227-040c51e64fae%2Fcat.jpg?1509635989509') center #333 no-repeat; background-size: cover; color: white; text-shadow: 0px 0px 5px #000;}
.leading-bigtext { margin-right: 60px; font-weight: bold; font-size: 24vw;}
@media (min-width: 700px) {
  .leading-bigtext { font-size:140px;}
}
.leading-text {max-width: 900px; font-size: 1.2em; line-height: 1.4em;}
article {position:relative;}
.article-img {height: 170px; width: 100%; object-fit: cover;}
.article-title {position: absolute; bottom: 0; width: 100%; padding: 10px; background-color: rgba(255, 255, 255, 0.2);}





/* Online Reservation */
.onlinereservation {padding:0 20px 40px 20px; float:left; width:100%; background:#000;}
.onlinereservation h1 {color:#08b028;}
.onlinereservation .col-sm-4 {padding-right:15px;}
.onlinereservation .lastcol-sm-4  {padding:0;}
.onlinereservation h2, .onlinereservation p {color:#fff;}
.onlinereservation a {font-size:20px; color:#fd6934; text-decoration:none; transition:color .5s ease-in-out;}
.onlinereservation a:hover {color:#ff875b; transition:color .5s ease-in-out;}
.onlinereservation input, .onlinereservation select, .onlinereservation textarea {width:100%; margin:15px 0 0 0; padding:10px; border:0px; color:#000;}
.onlinereservation textarea {height:70px;}
.onlinereservation span {color:#fff; margin:15px 0 0 0; float:left;}
.onlinereservation input[type="submit"] {-webkit-box-shadow:inset 0 -1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); background-image: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-shadow: none; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; color: #fff; background:#f58400; color:#fff; font-weight:bold; transition: background .5s ease-in-out;}
.onlinereservation input[type="submit"]:hover {background:#c46c06; transition:background .5s ease-in-out;}
.onlinereservation .return_trip {width:100%; background:#f58400; padding:10px 0; text-align:center; float:left; text-transform:uppercase; box-shadow:inset 0px 0px 20px #ffa236; margin: 30px 0 0 0; border-radius: 3px; -webkit-box-shadow:inset 0 -1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); background-image: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-shadow: none; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s;}
.onlinereservation .return_trip a {color:#fff; text-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);}

 /* ===============                      ===============
                   Phones and Handhelds
   ===============                      =============== */
@media only screen and (max-width: 599px) {
.contentone .contentone-right, .contentfour .contentfour-right {padding:0; border-left:inherit;}
.contentthree-left, .contentfour .contentfour-left {padding:0;}
}

@media only screen and (max-width: 549px) and (min-width: 400px) {
.contentone .contentone-right, .contentfour .contentfour-right {padding:0; border-left:inherit;}
.contentthree-left, .contentfour .contentfour-left {padding:0;}
}

@media only screen and (max-width: 650px) and (min-width: 550px) {
.contentone .contentone-right, .contentfour .contentfour-right {padding:0; border-left:inherit;}
.contentthree-left, .contentfour .contentfour-left {padding:0;}
}

/* ===============                      ===============
                         Tablets
   ===============                      =============== */
@media only screen and (max-width: 990px) and (min-width: 600px) {
}

/* ===============                      ===============
                         Laptops
   ===============                      =============== */
@media only screen and (max-width: 1125px) and (min-width: 1000px) { 

}