:root {
    --comman_font: #28207D;
    --comman_background: #004E78;
    --seconary-color-yellow:#ffe200;
    --headings-font-family: 'Libre Baskerville', serif
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: poppins
}

html {
    scroll-behavior: smooth;
    font-size: 10px
}

.wrapper {
    display: grid
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-content: center
}

ul li {
    list-style-type: none
}

.blink-text {
    animation: blinker 3.9s cubic-bezier(.28,.03,.49,.99) infinite
}

.thanku-wrap {
    display: grid;
    grid-template-columns: 400px 1fr;
    padding: 50px 30px
}
.describe-itenary h2 {
    font-size: 3em;
    color: #28207d;
    font-weight: 500
}

.sighteeing-section {
    display: grid;
    align-content: center;
}

.thanku-wrap h1 {
    font-size: 50px;
    margin-bottom: 10px;
    color: #28207d
}
.sighteeing-section p {
    font-weight: 300;
    font-size: 1.6em;
    color: #28207d;
    padding-left: 10px;
}
.itenary-images img {
    margin: 0 auto;
    width: 100%
}


.sighteeing-section a {
    font-size: 16px;
    margin-top: 10px;
    padding-left: 10px;
}
@media only screen and (max-width: 880px){
.thanku-wrap {
    grid-template-columns: 1fr;
}
    .thanku-wrap .sighteeing-section {
    order: 2;
    text-align: center;
}
}


@keyframes blinker {
    50% {
        opacity: 0
    }
}

button,input[type=submit] {
    cursor: pointer
}

button:focus {
    outline: 0
}

input[type=submit] {
    outline: 0
}

.logo img {
 max-width: 250px;
 width: 100%;
}

.navigation {
    /* background: var(--comman_background); */
    /* background: #edf0f2; */
    background: #e4ebf0;
}

.main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(257px,1fr));
    grid-template-rows: 80px;
    align-content: center;
    padding: 21px;
    padding-left: 0;
    grid-row-gap: 20px;
    align-items: center
}

.right-banner {
    margin: 0 auto
}

.btn {
    align-self: center;
    justify-self: center;
    width: 200px;
    margin-left: 20px
}

.top-btn {
    /* background: var(--seconary-color-yellow); */
   background:  #1448bd;
    border-radius: 10px;
    font-size: 1.6em;
    border: var(--seconary-color-yellow);
    padding: 12px 25px;
    text-transform: uppercase;
    text-decoration: none;
    /* color: #000; */
    color:#ffff;
    margin-left: 5px
}

.number {
    align-self: center
}

.number a {
    display: inline-block;
    text-decoration: none;
    font-size: 2.1em;
    color:#393232;
    padding-top: 6px
}

.number img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    vertical-align: middle
}

.img-banner {
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('img/banner-min.jpg');
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid
}

.banner {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(300px,1fr));*/
     grid-template-columns: repeat(auto-fit,minmax(450px,1fr));
}

.banner-left,.right-banner {
    padding: 30px
}

.banner-left h1 {
    font-size: 4.2rem;
    font-size: 43.em;
    color: #fff;
    margin-top: 36px
}

.banner-left h2 {
    font-size: 3.1rem;
    /* color: var(--seconary-color-yellow); */color:#0ccaf2;
    line-height: 36px;
    margin-bottom: 30px;
    font-weight: 400
}

.banner-left h3 {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 300;
    margin-bottom: 10px
}

.banner-left .destination li {
    padding: 0 13px 0 0;
    color: #fff;
    font-size: 1.5rem;
    margin: 0 7px 10px 4px;
    font-weight: 100;
    display: inline-block;
    border-right: solid 1px #1c3c5c;
    line-height: 14px;
    text-transform: uppercase
}

ul.content {
    width: 77%;
    margin-top: 40px
}

.content li {
    padding: 0;
    margin: 0;
    border-bottom: solid 1px #fff;
    display: block;
    color: #fff;
    font-size: 2.2rem;
    line-height: 45px
}

.content li:nth-child(4) {
    border-bottom: none
}

.packages-inner {
    background: #fff;
    padding: 10px;
    padding-top: 0;
    border-radius: 5px!important
}

.right-banner .form {
    min-width: 400px;
    width: 100%;
    background-color: #fff;
    margin-top: 50px;
    border-radius: 5px
}

.right-banner .form h1 {
    /* background: var(--comman_background); */ background: #1448bd;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-size: 2.6rem;
    position: relative;
    /*border-radius: 5px*/
}

.query-form {
    padding: 30px
}

.query-form input[type=text],input[type=email],input[type=number],select,input[type=date],input[type=submit] {
    display: block;
    margin: 15px auto 5px;
    font-weight: 300;
    width: 100%;
    padding: 8px;
    font-size: 1.5em;
    color: #5b5f63;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem
}

.query-form input[type=submit] {
    width: 100%;
    padding: 8px;
    color: #fff;
    font-size: 16px;
    background-color: #1c3c5c;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 500
}

.last-banner {
    margin-top: 50px;
    background-color: rgba(0,0,0,.6)
}

.last-banner ul {
    text-align: center
}

.last-banner ul li {
    padding: 0 20px 0 0;
    margin: 20px 10px;
    display: inline-block;
    border-right: solid 1px #3a3937;
    color: #fff;
    font-size: 1.6rem
}

.last-banner ul li>span {
    display: block
}

.container.itenary-banner-container {
    align-self: center
}

.all-packages-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    grid-gap: 100px 30px;
    margin-bottom: 100px;
    padding: 50px 30px
}

.heading h2 {
    text-align: center;
    color: #222;
    margin: 50px 0;
    font-weight: 500;
    font-size: 2.4rem
}

.image {
    position: relative
}

.image img {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 600px
}

.packages-inner img {
    height: 280px;
    object-fit: cover;
    border-radius: 5px;
    position: relative
}

.off {
    position: absolute;
    background-color: var(--seconary-color-yellow);
    color: #000;
    width: 100px;
    text-align: center;
    top: 12px;
    border-radius: 0 10px 10px 0;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 5px
}

.image-over {
    /* background: var(--comman_background); */background: #1448bd;
    color: #fff;
    position: absolute;
    bottom: 0px;
    max-width: 600px;
    width: 100%;
    text-align: center
}

.image-over a {
    color: #fff;
    text-decoration: none
}

.packages-inner h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 10px 0
}

.packages-inner h4 {
    font-size: 18px;
    font-weight: 200;
    margin: 10px 0 25px
}

.packages-inner h4 span {
    color: #1c3c5c;
    font-weight: 300;
    font-size: 1.8rem
}

.packages-inner .inclusions {
    padding: 10px 0;
    margin: 0;
    border-bottom: solid 1px #cfcfcf;
    border-top: solid 1px #cfcfcf
}

.packages-inner .inclusions li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: inline-block;
    width: 23%;
    text-align: center;
    font-size: 1.5em;
    color: #4e4e4f
}

.destination-heading {
    font-size: 1.7rem!important;
    margin: 10px 0!important;
    font-weight: 300!important
}

.destination-list {
    font-weight: 600!important;
    margin-bottom: 10px
}

.destination-list-img {
    width: 15px;
    height: 15px!important;
    margin-right: 5px;
    padding-top: 3px
}

.inclusions img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 10px auto
}

.destination-covered {
    margin-bottom: 20px
}

.destination-covered ul li {
    display: block;
    font-weight: 300;
    line-height: 25px;
    font-size: 1.6rem
}

.price {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #cfcfcf;
    border-top: solid 1px #cfcfcf;
    padding: 10px 0;
    margin-top: 10px;
    float: left;
    width: 100%
}

.price h6 {
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 400;
    color: #4e4e4f
}

.price h5 {
    font-size: 18px;
    color: #222
}

.price p {
    background: #1c3c5c;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 400;
    padding: 9px;
    color: #fff;
    text-transform: uppercase;
    height: 45px
}

.price-btn button {
    width: 155px;
    height: 48px;
    padding: 5px 10px;
    font-size: 1.6rem;
    /* background-color: var(--comman_background); */background: #1448bd;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-transform: uppercase
}

.price-btn {
    display: grid;
    justify-items: center
}

.parallax {
    display: grid;
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url(img/last-banner.jpg);
    min-height: 200px;
    background-attachment: fixed;
    background-position: left top;
    background-repeat: no-repeat;
    padding: 60px 0;
    background-size: cover
}

.parallax-content {
    text-align: center
}

.parallax-content p {
    color: #fff;
    font-size: 4rem;
    margin-bottom: 10px
}

.button {
    /* background: var(--comman_background); */background: #1448bd;
    border-radius: 3px;
    border: none;
    font-size: 2rem;
    font-weight: 600;
    padding: 6px 20px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none
}

.parallax-content button a {
    text-decoration: none
}

.custom-content {
    margin: 50px 0;
    text-align: center
}

.custom-content h1 {
    font-weight: 500;
    font-size: 3.2em
}

.custom-content h2 span {
    color: #1448bd;
    font-weight: 400;
    font-size: 4rem
}

.custom {
    padding-bottom: 100px
}

.custom-list ul li {
    display: inline-block;
    width: 290px;
    margin: 20px auto;
    text-align: center;
    padding: 23px;
    border-right: 1px solid #eee
}

.custom-list ul li>h4 {
    /* color: #1c3c5c; */color:#1448bd;
    font-size: 2.4rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 0
}

.custom-list ul li>p {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 30px
}

.custom-list {
    text-align: center
}

.custom-list button a {
    text-decoration: none;
    color: #fff
}

.custom-list img {
    width: 40px;
    height: 40px
}

footer {
    /* background-color: var(--comman_background) */background: #1448bd;
}

.footer-list {
    margin-top: 50px;
    text-align: center;
    line-height: 32px;
    padding-top:50px;
}

.footer-list ul li {
    display: inline-block;
    color: #fff;
    /* border-right: 1px solid #fff; */
    font-size: 1.8rem;
    padding: 0 12px;
    line-height: 15px;
    text-transform: uppercase
}

.footer-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    grid-gap: 30px;
    justify-items: center;
    margin-bottom: 50px;
    padding: 30px
}

.guarantee {
    justify-self: center
}

.approve img {
    max-width: 300px;
    width: 100%
}

.footer-end h5 {
    padding-bottom: 30px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase
}

.customer {
    color: #fff;
    margin-top: 10px;
    font-size: 20px;
    text-transform: uppercase
}

.customer img {
    width: 20px;
    height: 20px
}

.customer a {
    margin-top: 10px;
    color: #fff;
    display: block;
    text-decoration: none;
    font-size: 2rem
}

.copywrite {
    background-color: #272727;
    padding: 5px
}

.copywrite p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font-size: 1.6rem
}

.copywrite p a {
    color: #1c3c5c
}

.copywrite .last {
    font-size: 11px;
    margin-top: 10px
}

.customer ul {
    display: flex;
    justify-content: center
}

.customer ul li {
    padding: 20px
}

button.lastMinute {
    width: 100%;
    padding: 8px;
    color: #fff;
    font-size: 16px;
    /* background-color: var(--comman_background); */background: #1448bd;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 500;
        margin-top: 10px;
}

button#lastMinute {
    width: 100%;
    padding: 8px;
    color: #fff;
    font-size: 16px;
    /* background-color: var(--comman_background); */background: #1448bd;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 500;
        margin-top: 10px;
}
/* The Modal (background) */

.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	padding-top: 70px;
	padding-left: 10px;
	padding-right: 10px;
	/* Location of the box */
	left: 0;
	top: 0  !important;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.7);
	/* Black w/ opacity */
}
.radio-btn.popup_name,.number .popup_name {
    background: none;
    border: none;
    padding: 0px;
    margin: 15px auto 5px;
}
input.next.btn-info {
    float: right;
    width: 100px;
    margin: 5px 0px;
}
input#personname {
    width: 100%;
    background: none;
   margin: 0 0 6px 0px;
    font-weight: 300;
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    color: #5b5f63;
    background-color: #fff;
    border: 1px solid red;
    border-radius: 0.25rem;
}
p.valErr, .valnameErr {
    background: #f512123b;
    margin: 10px 0px;
    color: #a91919;
    padding: 5px 7px;
    border-radius:3px;
}
/* Modal Content */

.modal-content {
	background-color: #fefefe;
	margin: auto;
	border-radius: 5px;
	width: 100%;
	max-width: 500px;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	/* background-color: var(--comman_background); */background: #1448bd;
	color: #fff;
	padding: 10px;
	border-radius: 5px 5px 0px 0px;
	cursor: pointer;
 font-size: 20px;
}

.modal-header h2{
	font-size: 2.4rem;
}

#form1,
#form2,
#form3,
#form4,
#form5,
#form6,
#form7,
#form8 {
	padding: 15px;
}

.onload-modal {
	margin-top: 5%;
	max-width: 410px;
	width: 100%;
}

.onload-modal h4 {
	font-size: 18px;
	line-height: 24px;
	color: #333;
	margin: 17px 9px 16px;
	font-weight: 700;
	text-align: center;
}

.onload-modal h5 {
	text-align: center;
	margin-bottom: 18px;
	font-weight: 300;
}

.radio-btn label {
	margin-left: 8px;
}

.error {
	margin-bottom: 10px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #1C3C5C;
}

.modal-heade {
	position: relative;
}

span.close2 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	line-height: 30px;
	text-align: center;
	position: absolute;
	top: -7px;
	right: -7px;
	background: #1C3C5C;
	font-size: 16px;
	cursor: pointer;
}






@media(max-width:900px){
  .right-banner {
    width: 90%;
}  
}
@media only screen and (max-width: 1200px) {
 .banner-left h1 {
     font-size:35px
 }

 .price p {
     font-size: 14px
 }
}

@media only screen and (max-width: 992px) {
 .query-form {
     padding:20px 10px 10px
 }

 .banner-left h2 {
     font-size: 21px
 }
}

@media only screen and (max-width: 791px) and (min-width:768px) {
 .logo {
     justify-self:center
 }
}

@media only screen and (max-width: 767px) {
    .banner{
            grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    }
    .right-banner{
        width:100%;
    }
 .banner-left h1 {
     font-size:28px
 }

 .fixed-bar {
     color: #f7f7f7;
     width: 100%;
     height: 85px;
     display: block;
     position: fixed;
     bottom: 0;
     display: flex
 }

 .main-content {
     text-align: center;
     display: block;
 }
.btn{
        margin: 20px auto 10px;
}
 .fixed-icon {
     width: 20%;
     height: 85px;
     background-color: #1f6da1;
     padding: 15px;
 }

 .fixed-icon img {
     width: 50px;
     height: 50px;
     margin-left: 70px
 }

 .fixed-btn button {
     font-size: 28px;
     width: 1000px;
     height: 85px;
     background: #ee5a24;
     border: none;
     color: #fff
 }

 .banner-left h2 {
     font-size: 23px;
     margin-bottom: 10px
 }

 .banner-left .destination li {
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 1px
 }

 ul.destination {
     margin-bottom: -20px
 }

 .last-banner,ul.content,.custom,.heading h2,.footer-list,.banner-left h3 {
     display: none
 }

 .right-banner .form {
     max-width: 100%;
     min-width: 100%
 }

 .query-form {
     padding: 10px
 }

 .button {
     font-size: 14px
 }

 .banner-left {
     text-align: center;
     padding: 20px
 }

 .right-banner {
     padding: 15px;
         padding-bottom: 30px;
 }

 .destination-heading {
     margin: 10px 0!important
 }

 .destination-list {
     letter-spacing: 1px;
     margin-bottom: 10px
 }

 .price {
     display: block
 }

 .price-tag {
     margin: 10px 0;
     display: flex;
     justify-content: center
 }

 .price p {
     width: 50%;
     display: flex;
     font-size: 15px;
     justify-content: center;
     margin: 10px auto
 }

 .price h5 {
     margin-bottom: 10px
 }

 .price h6 {
     padding: 3px 14px
 }

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

 .radio-btn {
     width: auto!important
 }

 .onload-modal {
     max-width: 363px;
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 10px;
     right: 10px
 }

 .query-form h5 {
     text-align: left!important
 }
}

@media only screen and (max-width: 569px) {
 .all-packages-wrapper {
     grid-gap:50px 30px;
     padding: 10px;
     padding-top:25px;
 }

 .guarantee {
     text-align: center
 }

 .customer ul {
     display: block;
     text-align: center
 }

 .customer ul li {
     padding: 10px
 }
}
.logo img {
    max-width: 200px;
    width: 100%;
  
}