*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
display-none{
    display: none!important;
}
:root{
    --primary-color: #0a1c33;
    --secondary-color: #b0c8e8;
    --white: rgb(223, 220, 220);
    --black: #000;
    --bottom: 80px;

}
body{
    font-family: 'Lato', sans-serif!important;
}
.mobile-menu-1 {
    background: #063067;
    height: 40px;
    width: 100%;
    position: fixed;
    z-index: 1;
    bottom: 0;
    display: none;
}
.mobile-menu-1 ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    align-items: center;
    height: 100%;
}
.mobile-menu-1 ul li {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: 0.5s ease all;
}
.mobile-menu-1 ul li:hover {
    background-color: #3c9516;
}
.mobile-menu-1 ul li span {
    color: #fff;
}
.mobile-menu-1 ul li:nth-child(1),.mobile-menu-1 ul li:nth-child(2),.mobile-menu-1 ul li:nth-child(3) {
   border-right: 1px solid #fff;
}

.banner .main-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;

}
.banner .carousel-item{
    width: 740px!important;
    height: 503px!important;
}

.banner .carousel-item img{
    height: 100%!important;
    object-fit: cover!important;
}
.banner .main-grid-item:last-child{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.banner .content{
    color: var(--black);
    padding: 15px 30px 0px 30px;
}
.banner .content h3{
    font-size: calc(14px + 3vmin);
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--primary-color);
    text-align: start;
}
.banner .content h4{
    font-weight: 800;
    margin-top: 5px;
}
.banner .location{
    display:flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 600;
}
.banner .location-content{
    margin-left: 5px;
    color: rgb(188, 188, 188);
    font-weight: 600;
}
.banner .carousel-control-prev .material-symbols-outlined,.banner .carousel-control-next .material-symbols-outlined{
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color);
}
.banner .carousel-indicators li {
    height: 5px;
    background-color: var(--primary-color);
}
.content-second{
    color: var(--black);
    padding: 0 30px 0px 30px; 
}
.content-second ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.content-third ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.content-second ul li{
    text-decoration: none;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    font-weight: 600;
    font-size: calc(12px + .5vmin);
    padding: 10px;
}
.content-second ul li{
    border-bottom: .5px solid rgb(188, 188, 188);
    line-height: 2;
}
.content-second ul li:nth-child(1),.content-second ul li:nth-child(2){
    border-top: .5px solid rgb(188, 188, 188);
    border-left: .5px solid rgb(188, 188, 188);
}
.content-second ul li:nth-child(3),.content-second ul li:nth-child(4){
    border-left: .5px solid rgb(188, 188, 188);
}
.content-second ul li:nth-child(2),.content-second ul li:nth-child(4){
    border-right: .5px solid rgb(188, 188, 188);
}
.content-third ul li{
    border: none!important;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
.content-third ul li p{
    margin: 0;
}
.content-third ul li p:last-child{
    color: #000;
    font-weight: 600;
    font-size: calc(8px + .8vmin);
    width: 100%;
    text-align: center;
}
.content-second ul li {
    font-size: calc(6px + 1vmin);
    color: rgb(188, 188, 188);
}
.content-second ul li span{
    font-size: calc(9px + 1vmin);;
    color: #000;
}

.price span{
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    padding: 5px;
    
}
button{
    width: 100%;
    padding: 10px;
    border: none;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
    transition: 0.5s ease;
}
.banner button:hover{
    background: #063067;
}
/* pricing */
.main-pricing{
   
}
.title h2,.master .content h2{
    font-size: calc(16px + 1.5vmin)!important;
    color:#fff!important
}
.pricing .title{
    text-align: center;
    margin: var(--bottom) 0;
    font-size: calc(16px + 1.5vmin)
}
.floor-plans .title, .amenities .title, .disclaimer-sec .title{
    margin: var(--bottom) 0 40px 0;
}
.floor-plans .content-main, .amenities .content-main, .disclaimer-sec .disclaimer{
    margin: 40px 0;
}
.floor-plans .content-main p, .amenities .content-main p, .disclaimer-sec .disclaimer p{
    text-align: center;
}
.pricing .title h2,.master .content h2{
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-gap: 20px;
    align-items: center;
}
#price .img-container svg{
	width:30%!important;
}
#price .content svg{
	width:25px!important;
}
#price .price_button{
	width: 100%;
    padding: 6px 10px;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    transition: 0.5s ease;
    border-radius: 25px;
    border: 3px solid #3c9516!important;
    margin: 5px 0 0 0;
    background: #fff;
}
#price .content p{
	font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #000;
    margin: 5px 0;
	color:#fff;
}
#price .content svg{
	fill:white;
}
#price .content{
	display: flex;
    justify-content: space-evenly;
    background: #063067;
    width: 50%;
	margin:10px auto;
	border-radius: 30px;
	
}
.content-wrapper{
	display:flex;
	gap:15px;
}
.master .content h2{
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 5px;
    align-items: center;
}
.pricing .title h2:after, .pricing .title h2:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #e3e0e0;
    border-top: 1px solid #e3e0e0;
    height: 5px;
}
.master .content h2:after {
    content: " ";
    display: block;
    border-bottom: 1px solid #e3e0e0;
    border-top: 1px solid #e3e0e0;
    height: 5px;
}
.master p {
    color: #fff!important;
}
.master-plan .img-container{
    position: relative;
}
.master-plan .img-container .overlay{
    position: absolute;
    width: calc(130px + 25vmin);
    height: 150px;
    background: #000000d9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.master-plan .button{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
    margin: auto;
}
.master-plan .button button{
    background-color: #fff;
    color: var(--primary-color);
}
.master-plan .button button:hover {
    background: #15355e;
    color: white;
}

.banner button:hover{
    background: #063067;
}
.pricing .title h2{
    color: #0a1c33!important;
}
.pricing .title h2,.master .content h2{
    font-weight: 600;
}
.pricing .main-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-bottom: var(--bottom);
    gap: 30px;
}
.pricing .content{
   display: flex;
   justify-content: space-evenly;
}
.pricing .content li{
    text-decoration: none;
    list-style: none;
}
.pricing .content li{
    margin: 0;
    font-weight: 600;
    display: flex;
    gap: 5px;
    
}
.pricing .img-container .material-symbols-outlined {
    font-size: 60px;
    color: white;
    background: var(--primary-color);
    border-radius: 100%;
    padding: 15px;
}
.pricing .main-grid-item {
    padding: 25px;
    background: #fbfbfb;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    transition: 0.5s ease;
}
.pricing .main-grid-item:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.pricing p {
    font-size: calc(16px + 2vmin);
    font-weight: 800;
    margin: 0;
    color: #000;
    margin: 10px;
}
/* floor plans */
.floor-plans .main-grid img,.gallery img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: all .5s ease;
}
.floor-plans .img-container,.gallery .img-container{
    overflow: hidden;
}
.floor-plans .main-grid-item,.gallery .main-grid-item{
    padding: 0px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}
.floor-plans .main-grid img:hover,.gallery .main-grid img:hover {
    transform: scale(1.1)!important;
}
.floor-plans .content-main,.amenities .content-main p {
    background-color: var(--primary-color);
    padding: 15px;
}
.floor-plans .content-main p,.amenities .content-main p {
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
}
/* master sec */
.master{
   margin-bottom: var(--bottom);
}
.master .content{
    color: var(--white);
    padding: 15px!important;
}
.master .main-grid {
    background-color: var(--primary-color);
}
.master .main-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.master .carousel-item{
    width: 555px!important;
    height: 377px!important;
}
.master .button {
    display: flex;
    
}
.master .button button:first-child{
    background: #3c9516!important;
}
.master .button button:last-child{
    background: #063067;
}
/* walk-thru */
.walk-thru .main-grid{
    grid-template-columns: 100%!important;
    padding: 30px;
    background: var(--primary-color);
}
.walk-thru iframe{
    width: 100%!important;
    max-width: 100%!important;
    height: 503px!important;
}
/* amenities */
.amenities .main-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr!important;
    gap: 10px;
}
.amenities .main-grid .main-child{
    border: 1px solid rgb(208, 208, 208);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.amenities img{
    width:40%;
}
.amenities h6{
    font-weight: 600;
}
.pop-up-img{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    height: 100%;
    width: 100%;
    z-index: 99999;
    display: none;
}
.pop-up-img span{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 40px;
    font-weight: bolder;
    color: var(--white);
    cursor: pointer;
    padding: 15px 20px 0 0;
    
}
.pop-up-img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    padding: 15px;
    width: 740px;
}

/* responsive */
@media screen and (max-width: 991px) {
    .banner .carousel-item{
        width: 100%!important;
        height: 100%!important;
    }
    .banner .main-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .banner .carousel-item img {
        height: 100%!important;
        width: 100%!important;
        object-fit: cover!important;
    }
    .pricing .main-grid {
        grid-template-columns: 1fr;
    }
    .master .main-grid {
        display: flex;
        flex-direction: column-reverse;
    }
    .amenities .main-grid{
        grid-template-columns: 1fr 1fr 1fr!important;
    }
  }
  @media screen and (max-width: 768px) {
    .pop-up-img img{
        width: 95%;
    }
  }
  @media screen and (max-width: 480px) {
    :root{
        --bottom: 30px;
    }
    .mobile-menu-1 {
        display: block;
    }
    .banner .content {
        padding-top: 15px;
    }
    .banner .content,.content-second {
        padding: 0 15px;
    }
    .walk-thru iframe {
        width: 100%!important;
        max-width: 100%!important;
        height: 100%!important;
    }

}
@media screen and (max-width: 479px) {
    
    .banner .content {
        padding-top: 10px;
    }
    
}
  /* disclaimer */
  .disclaimer p {
    color: rgba(0, 0, 0, 0.687);
    font-size: 16px;
  }
  @media screen and (max-width: 320px) {
    .banner .content {
        padding-top: 15px;
    }
    .content-second ul li span {
        font-size: calc(9px + 1vmin)!important;
    }
    .location-content{
        font-size: calc(10px + 1vmin);
        line-height: 1;
    }
    .banner .location {
        margin: 0 0 8px;
    }
    .master .content h2 {
        font-size: 16px!important;
    }
    .master .button button {
        font-size: 12px!important;
    }
    .amenities .main-grid {
        grid-template-columns: 1fr 1fr!important;
    }
  }