@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Raleway:wght@400;500&display=swap');

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

:root {
    --bg-color: #00340E;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}


a {
    text-decoration: none;
}

li {
    list-style: none;
    font-family: 'Raleway', sans-serif;
}

p {
    font-size: 1.8rem;
    font-family: 'Poppins', sans-serif;
}

h1,
h2,
h3,
h4,
h5{
    font-family: 'Raleway', sans-serif;
}

.section {
    padding: 5rem 0;
}

.cmn-heading {
    font-size: 4rem;
    padding: 7rem 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}



/* Header Section */

.navbar {
    background-color: var(--bg-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
}

.navbar-toggler{
    border: 3px solid #fff;
    font-size: 2rem;
}

.navbar-toggler-icon{
    filter: invert(1);
    color: #fff;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-family: 'Montserrat', sans-serif;
}

.navbar-nav .nav-item .nav-link {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

.btn {
    padding: 0.8rem;
    font-size: 1.6rem;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    transition: all .3s ease;
}

.btn:hover {
    background-color: #fff;
    color: var(--bg-color);
}



/* Hero Section */

.d-block {
    width: 100%;
}

.card-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 16%;
    right: 2%;
    padding: 4rem 3rem;
    background-color: var(--bg-color);
    border-radius: 1rem;
    max-width: 450px;
}

.highlights h4 {
    padding: 1.5rem 0;
    font-size: 1.6rem;
    color: #fff;
}

.highlights h2 {
    font-size: 2.8rem;
    background-color: azure;
    padding: .5rem 3rem;
}

.highlights h3 {
    font-size: 2.3rem;
    color: #fff;
}

.mall-logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mall-img {
    width: 50%;
}

.card-form {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

.card-form h2 {
    font-size: 2.5rem;
    color: #fff;
}

.card-input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-input input {
    font-size: 1.8rem;
    outline: none;
    padding: .5rem 1rem;
    text-indent: 5px;
}

.card-btn {
    padding: 1rem 2.3rem;
    font-size: 1.6rem;
    font-weight: bold;
}


/* Overview-section */

.overview-btn {
    border: 2px solid var(--bg-color);
    color: var(--bg-color);
    padding: 1rem 2.3rem;
    font-size: 1.6rem;
    font-weight: bold;
}

.overview-btn:hover {
    background-color: var(--bg-color);
    color: #fff;
}

/* Price List Section */

.price-list-container {
    background-color: var(--bg-color);
}

.price-card-container {
    padding: 2rem 0 10rem 0;
}

.price-list-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem .5rem;
    border-radius: 2rem;
    background-color: azure;
    cursor: pointer;
    transition: all .3s ease;
}

.price-list-card:hover {
    transform: translateY(-10%);
}

.price-list-card h2 {
    background-color: var(--bg-color);
    color: #fff;
    font-size: 2.5rem;
    padding: .5rem 3.5rem;
}


/* Amenities Section */

.amenities-container {
    background-color: azure;
    padding: 2rem 5rem 10rem;
    border-radius: 3rem;
    box-shadow: .8rem .8rem 2rem gray;
}

.amenites-card {
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    padding: 3rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Location Section */

.location-data {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.location-data li {
    font-size: 1.8rem;
    /* list-style: disc; */
    font-weight: 500;
    text-align: center;
}


/* Contact Us section */

.contact-form-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.contact-form label {
    font-size: 1.8rem;
    color: #fff;
}

.contact-form input {
    font-size: 1.8rem;
    padding: .5rem 1rem;
    outline: none;
    border-radius: .5rem;
    color: var(--bg-color);
    font-weight: 500;
}


.about-mall-of-noida {
    padding: 7rem 5rem;
    border-radius: 3rem;
    background-color: azure;
    box-shadow: .8rem .8rem 2rem gray;
}

.main-contact-form{
    border-radius: 3rem;
    background-color: var(--bg-color);
    box-shadow: .8rem .8rem 2rem gray;
    padding: 7rem 5rem;
}

.contact-form-container h2,
.about-mall-of-noida h2{
    font-size: 2.5rem;
    text-transform: uppercase;
}

/* Footer Section */

.footer-container{
    padding: 2rem 0 5rem 0;
    background-color: var(--bg-color);
}



/* Popup section */

.modal{
    z-index: 9999999;
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.popup-form label {
    font-size: 1.8rem;
    color: var(--bg-color);
}

.popup-form input {
    font-size: 1.8rem;
    padding: .5rem 1rem;
    outline: none;
    border-radius: .5rem;
    font-weight: 500;
    border-color: #00340E;
}

.popup-form .btn{
    border: 2px solid #00340E;
    color: #00340E;
}

.popup-form .btn:hover{
    color: #fff;
    background-color: #00340E;
}


/* Fix Whatshapp */


.fix-whatsApp {
	background: #25d366;
	color: #fff;
	position: fixed;
	bottom: 50px;
	left: 40px;
	font-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0;
	height: 0;
	padding: 35px;
	text-decoration: none;
	border-radius: 50%;
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
	}
}

.btn-whatsapp-pulse-border {
	bottom: 120px;
	right: 20px;
	animation-play-state: paused;
}

.btn-whatsapp-pulse-border::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	padding: 25px;
	border: 5px solid #25d366;
	opacity: 0.75;
	animation-name: pulse-border;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.mobile-footer{
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

@keyframes pulse-border {
	0% {
		padding: 25px;
		opacity: 0.75;
	}
	75% {
		padding: 50px;
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.fixed-whatsapp{
	color: #fff !important;
}


/*Additional CSS*/
.main-section section img{
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.mob-banner{
    display: none;
}
.desk-banner{
    display: block;
}


@media screen and (max-width: 991px) {
	.fix-whatsApp{
		display: none;
	}
    .mobile-footer{
        display: block;
    }
    .card-section {
        position: static;
        padding: 4rem 3rem;
        border-radius: 1px;
        width: 95%;
        margin: auto;
    }
    .main-section{
        padding-top: 4rem;
    }
    .amenities-container {
        padding: .1rem 2rem 5rem;
        border-radius: 1px;
    }
    .about-mall-of-noida {
        padding: 3rem 1rem;
        border-radius: 1px;
        background-color: azure;
    }
    .main-contact-form {
        border-radius: 1px;
        padding: 3rem 1rem;
    }
}


@media (max-width: 767px){
    .main-section section img{
        height: 350px;
        object-fit: cover;
    }
    
    .about-img{
        padding-top: 40px;
    }
    .desk-banner{
        display: none;
    }
    .mob-banner{
        display: block;
    }
}