.container {
	display: grid;
	/*  grid-template-rows: 6rem minmax(calc(100vh - 6rem), max-content) min-content;*/
	grid-template-columns: [full-start] minmax(6rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
		
		 minmax(6rem, 1fr)[full-end];
		 position:relative;
}

.header-area {
	grid-column: full-start/full-end;
}
.bubble{
	width:30rem;
	height:30rem;
	border-radius:30% 70% 70% 30% / 30% 47% 53% 70%;
	 position:absolute;
	 bottom:2rem;
	 left:2rem;
  animation-name: bubble-ani;
  animation-duration:100s;
  animation-iteration-count: infinite;
   }

@keyframes bubble-ani{
  0%   {background-color:rgba(255, 255,255, .1); bottom:30%; left:0%;}
  25%  {background-color:rgba(255, 255,255, .1); bottom:40%; left:20%;}
  60%  {background-color:rgba(255, 255,255, .1); bottom:30%; left:40%;}
  70%  {background-color:rgba(255, 255,255, .1); bottom:20%; left:60%;}
  80%  {background-color:rgba(255, 255,255, .1); bottom:30%; left:60%;}
  90%  {background-color:rgba(255, 255,255, .1); bottom:10%; left:40%;}
  100% {background-color:rgba(255, 255,255, .1); bottom:10%; left:0%;}
}
.bubble1{
width:40rem;
	height:40rem;
	border-radius:30% 70% 70% 30% / 75% 47% 53% 25%;
	 position:absolute;
	 bottom:0rem;
	 right:2rem;
  animation-name: bubble1-ani;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  overflow:hidden;
  }
  @keyframes bubble1-ani {
  
  0%   {background-color:rgba(255, 255,255, .1); bottom:0%; right:10%;}
  25%  {background-color:rgba(255, 255,255, .1); bottom:20%; right:20%;}
  60%  {background-color:rgba(255, 255,255, .1);; bottom:30%; right:40%;}
  70%  {background-color:rgba(255, 255,255, .1); bottom:30%; right:40%;}
  80%  {background-color:rgba(255, 255,255, .1); bottom:20%; right:50%;}
  90%  {background-color:rgba(255, 255,255, .1); bottom:10%; right:30%;}
  100% {background-color:rgba(255, 255,255, .1);bottom:0%; right:10%;}
}


.index-fullWidth-container{
	grid-column: full-start/full-end;
	display: grid;
	grid-template-rows: max-content;
	grid-template-columns: [full-start] minmax(6rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(6rem, 1fr)[full-end];
   /*min-height:90vh;*/
	background-image: linear-gradient(to bottom, rgba(255, 193,.1),rgba(255, 193, 7, .3));
	/*position:relative;*/
	padding-bottom:5rem;
}
.first-row{
grid-column: col-start 1/full-end;
		display: grid;
	grid-template-rows: max-content;
	grid-template-columns: [full-start] minmax(6rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(6rem, 1fr)[full-end];
   }
.advertise-con {
	grid-column: full-start/col-end 6;
	margin:3rem auto 0rem;
	/*flex-direction: column;*/
	}
.advertise{
	width:70%;
	cursor:pointer;
	transition: transform 0.1s ease-in-out;
     }
.advertise:hover{
	transform: scale(1.1);
}
 .destination-con{
  flex-direction: column;
   margin-left:-2rem;
 }
 .destination{
	width:90%;
 	background-image: url('/images/destination-bg.png');
	background-repeat: no-repeat;
	background-position: center center; 
	background-size: contain;
 	background-color:transparent; 
	
 }
.bounce-in-right {
  	animation: bounce-in-right 2s ease;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
.bounce {
 	 animation:bounce 8s ease infinite;
}
@keyframes bounce {
  30% { transform: scale(1); }
  40%, 60% { transform: rotate(-5deg) scale(1.1); }
  50% { transform: rotate(5deg) scale(1); }
  70% { transform: rotate(0deg) scale(1.1); }
  100% { transform: scale(1); }
}
.destination p{
	color:#ffc107;
	 font-size:2rem; 
	 padding:3rem 2rem 3rem 2rem; 
	 font-weight:700;
	 text-align:center;
}
.advertise-details{
	margin-top:2rem;
}
.adDetailFlex{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	color:#333;
	font-weight:600;
 	letter-spacing: 0px;
}
.star{
	width:1.5rem;
	height:1.5rem;
	float:left;
	margin-right:.5rem;
	
	}
.advertise p{
	color:#333; 
	font-weight:500;
	font-size:2.4rem;
}
.signin-container{
	grid-column: col-start 7/center-end;
	padding-top:5rem;
	margin:3rem auto 0rem;
	background-color:rgba(255, 255,255, .1);
	
	
	box-shadow: 1px 2px 20px 0 rgba( 31, 38, 135, 0.37 );
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 10px;
	position:relative;

}
.login-con{
	padding:2rem;
}	
.row{
	padding:1rem 0rem;
	display:flex;
	align-items:center;
	justify-content:center;
}
.row:after {
	content: "";
	display: table;
	clear: both;
}
 .col-25 {
	float: left;
	width: 10%;
	margin-top: 1rem;
	font-weight:500;
}

.col-75 {
	float: left;
	width: 90%;
	margin-top: 1rem;
}

.login-con input[type=text], .login-con input[type=password] {
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--clr-y-light-3); 
	resize: vertical;
	border-radius: .4rem;
}
.username{
	width:2rem;
	height:2rem;
	float:right;
	margin-right:.5rem;
	}
.login-con input::placeholder{
	color:#d3d3d3;
}

.login-con input:focus {
	background-color: var(--clr-y-light-2);
	outline:none;
	border: 1px solid var(--clr-y-light-4);
}

.signInWithGoogle{
	margin:auto;
	background-color:#ffffff;
	display:flex;
	justify-content:center;
	align-items:center;
	    width: 260px;
	    height:40px;
    max-width: 400px;
    min-width: min-content;
     border:1px solid #dadce0;
    border-radius: 20px;
    cursor:pointer;
    overflow: hidden;
    transition:border-color .218s;
}

.signInWithGoogle:hover {
	border-color:var(--cly-b-dark);
	
}

.G-img{
	height: 18px;
    margin-right: 8px;
    min-width: 18px;
    width: 18px;
  
}
.G-text{
	font-weight:500;
	color: #3c4043;
	letter-spacing:0.25px;
	text-align:center;
	white-space:nowrap;
	text-overflow: ellipsis;
	font-size:14px;
}
.raod img{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	
	
}
.road1{
	opacity: 0.1;
	padding-top:5rem;
}
.car-move img{
	width:7rem;
	height:3rem;
	position:absolute;
	bottom:1rem;
	left:0;
 animation-name: car;
  animation-duration: 10s;
 /* animation-iteration-count: infinite;*/
  overflow:hidden;
  z-index:1;
  }
  @keyframes car {
  
  0%   {bottom:3%; left:0%;}
  100% {bottom:3%; left:75%;}
}
.contactIndex-con{
	grid-column: full-start/ full-end;
	background-image: linear-gradient(to right, #997304 0%, #ffc107 51%, #997304 100%);
    padding:1rem 5rem;
}
.moveY{
	 animation: float 2.8s ease-in-out infinite;
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
     transform: translatey(-6px);
	}
	100% {
		transform: translatey(0px);
	}
}
.twenty4{
	background-image: url('/images/twenty4.png');
	background-repeat: no-repeat;
	background-position: center center; 
	background-size: contain;
	 background-color:transparent; 
	
 }
 .twenty4 p{
 	color:#fff; 
 	font-weight:600;
 	padding:1rem 0rem 0rem 3rem;
 	margin: 5rem 1rem 3rem 6rem;
 }
.contact-ul{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor:pointer;
	transition: transform 0.1s ease-in-out;
     }
  .username-contact{
    cursor:pointer;
	transition: transform 0.1s ease-in-out;
  }
.username-contact:hover, 
.contact-ul:hover{
	transform: scale(1.1);
}
/*RESPONSIVE*/
@media only screen and (max-width:72em)
{
/** 1152 / 16 = 72 **/
.advertise-con {
	grid-column: full-start/col-end 7;
}
.advertise{
	width:70%;
}
.destination p{
		 padding:2rem 1.4rem 2rem 1.4rem;
	 font-weight:700;
	}
.star{
	width:1.2rem;
	height:1.2rem;
	}
.signin-container{
	grid-column: col-start 8/ col-end 9;
	padding-top:2rem;
	margin:3rem auto 0rem;
	
}
}
@media only screen and (max-width:62em)
{
/** 992 / 16 = 62 **/


.advertise-con {
	grid-column: full-start / full-end;
	margin:5rem auto 1rem;
	}
.advertise{
	width:70%;
}
.destination p{
	 font-size:2.8rem; 
	 padding:3rem 2rem 3rem 2rem; 
	
}
.advertise p{
	font-size:2.8rem;
}
.signin-container{
	grid-column: col-start 2/ col-end 7;
	/*padding:10rem 4rem;*/
	padding-top:5rem;
	margin:3rem auto 5rem;
	
}
.road1{
	opacity: 0.04;
	padding-top:5rem;
}
.bubble{
	width:25rem;
	height:25rem;
}

@keyframes bubble-ani{
  0%   {background-color:rgba(255, 255,255, .1); bottom:30%; left:0%;}
  25%  {background-color:rgba(255, 255,255, .1); bottom:40%; left:20%;}
  60%  {background-color:rgba(255, 255,255, .1); bottom:50%; left:30%;}
  70%  {background-color:rgba(255, 255,255, .1); bottom:20%; left:40%;}
  80%  {background-color:rgba(255, 255,255, .1); bottom:30%; left:40%;}
  90%  {background-color:rgba(255, 255,255, .1); bottom:20%; left:20%;}
  100% {background-color:rgba(255, 255,255, .1); bottom:10%; left:0%;}
}
.bubble1{
width:30rem;
height:30rem;
	
	
}
@keyframes bubble1-ani {
  
  0%   {background-color:rgba(255, 255,255, .1); bottom:0%; right:10%;}
  25%  {background-color:rgba(255, 255,255, .1); bottom:20%; right:20%;}
  60%  {background-color:rgba(255, 255,255, .1);; bottom:50%; right:40%;}
  70%  {background-color:rgba(255, 255,255, .1); bottom:60%; right:40%;}
  80%  {background-color:rgba(255, 255,255, .1); bottom:30%; right:45%;}
  90%  {background-color:rgba(255, 255,255, .1); bottom:10%; right:30%;}
  100% {background-color:rgba(255, 255,255, .1);bottom:0%; right:10%;}
}
}
@media only screen and (max-width: 48em) {
/* 768 / 16 = 48   */ 
.advertise{
	width:70%;
}
.destination p{
	 font-size:2.2rem; 
	 padding:2.6rem 1.8rem 2.6rem 1.8rem; 
	line-height:1.4;
}
.signin-container{
	padding-top:5rem;
	margin:3rem auto 5rem;
}
.road1{
	opacity: 0.07;
	padding-top:5rem;
}
.contactIndex-con{
	padding:1rem;
}
 .twenty4 p{
 color:#fff; 
 font-weight:500;
 padding:1rem 0rem 0rem 3rem;
 margin: 4rem .5rem 2.5rem 5rem;
 line-height:1.4;
 }
.contact-ul{
	display: flex;
    align-items: center;
    justify-content: flex-start;
}
	}



@media only screen and (max-width: 37.5em) {
	/** 600 / 16 = 37.5 **/
	h1{
	font-size:2.4rem;
	}
	h2{
	font-size:1.6rem;
}
.index-fullWidth-container{
	grid-template-columns: [full-start] minmax(1rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(1rem, 1fr)[full-end];
   }
.first-row{
grid-template-columns: [full-start] minmax(.5rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(1rem, 1fr)[full-end];
   
}
.advertise-con {
	grid-column: full-start / full-end;
	margin:5rem auto 0rem;
	flex-direction: column-reverse;
	}
.advertise{
	width:80%;
}
.destination p{
	 font-size:2.2rem; 
	 padding:2.6rem 1.8rem 2.6rem 1.8rem; 
	line-height:1.4;
}

	.signin-container{
	grid-column: center-start /center-end;
	/*padding:5rem 3rem;*/
	padding-top:5rem;
	margin:3rem auto 5rem;
}
.road1{
	opacity: 0.04;
	padding-top:5rem;
}
 @keyframes car {
  
  0%   {bottom:3%; left:0%;}
  100% { bottom:3%; left:78%;}
}
	.bubble{
	width:15rem;
	height:15rem;
}

	.bubble1{
	width:20rem;
	height:20rem;
	}
.contactIndex-con{
	padding:1rem;
	flex-direction: column;
}
}
@media only screen and (max-width:25em) {
	/* 400 /16  = 25  */
		h1{
	font-size:2.2rem;
	}
	h2{
	font-size:1.4rem;
}
		.index-fullWidth-container{
	grid-template-columns: [full-start] minmax(1rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(1rem, 1fr)[full-end];
}
.first-row{
grid-template-columns: [full-start] minmax(1rem, 1fr)[center-start] repeat(9, [ col-start ] minmax(min-content, 14rem)[col-end])[center-end]
			 minmax(1rem, 1fr)[full-end];
   
}
.signin-container{
	padding-top:5rem;
	margin:5rem auto 5rem;
}
.road1{
	opacity: 0.04;
	padding-top:5rem;
}
	.bubble{
	width:10rem;
	height:10rem;
}	

	.bubble1{
width:15rem;
	height:15rem;
}


}