@media (min-width: 769px) and (max-width: 1199px) {
	.col-cards { width: 100%; }
	.col-card {
		width: calc(33.33333333% - 12px);
		margin-right: 18px;
	}
}

@media (max-width: 768px) {
	
	.menu { display: none; }
	.mobile-header { display: flex; justify-content: space-between; padding: 20px 20px 15px 20px; background: #FFF; }
	.mobile-menu { 
		background: #F6F6F6;
        padding: 70px 45px 45px 45px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
		height: 100%;
        z-index: 9999999;
        display: block;
		
		opacity: 0;
		visibility: hidden;
		height: 0;
		transition: opacity 0.5s ease;
	
	}
	.mobile-menu.open {
		opacity: 1;
		visibility: visible;
		height: auto;
	}
	.mobile-menu ul, .mobile-menu ul li { list-style: none; padding: 0; margin: 0; }
	.mobile-menu a { color: #282828; font-size: 21px; font-weight: 600; text-decoration: none; display: block; margin-bottom: 15px; }
	.mobile-menu .back { position: absolute;
        top: 20px;
        right: 20px; }
	
	.hero-container, .location-container, .media-container > .container > .row { flex-direction: column-reverse; padding: 10px; }
	.col-card, .service-item, .col-services .service-item { width: 100%; }
	
	.row>* { padding-right: 0; }
	
	.hero-container { margin-bottom: 60px; }
	.hero-subtitle { padding-top: 20px; padding-bottom: 10px; font-size: 16px; font-weight: 500; }
	.hero-title, .page-student h1.hero-title { font-size: 21px; line-height: 28px; }
	.hero-intro { font-size: 16px; padding-bottom: 30px; padding-right: 30px; }
	.hero-intro .h { font-weight: 500; }
	.btn-inbp { font-size: 12px; padding: 12px 21px; }
	
	.cards-container, .gallery-container, .apartment-type-container, .phase-i-container { padding: 60px 0; }
	.services-container { padding: 60px 0 60px 40px; }
	.col-card { margin-bottom: 30px; }
	.row-cards { flex-direction: column; }
	
	.service-item { margin-bottom: 60px; }
	
	.location-container { padding: 60px 10px; }
	
	#gallery li img { height: 250px; }
	
	.award-container { padding: 170px 0; }
	.award-desc { padding: 5px 5%; }
	
	.carousel-row { flex-direction: column-reverse; }
	
	.carousel-img img { max-width: 100%; }
	.col-media-right img { width: 100%; }
	
	.carousel-container .row { margin: 0; }
	.carousel-title, .page-student h2.carousel-title { margin-top: 26px; font-size: 21px; }
	
	.location-container { padding-top: 80px; flex-direction: column; }
	.location-title { margin-top: 55px; font-size: 21px; line-height: 28px; }
	
	.media-title { margin-top: 37px; line-height: 37px; }
	.media-desc { color: #504275; }
	
	.footer-container { padding: 60px 10px 0; }
	.footer-container .row { flex-direction: column; align-content: flex-start; justify-content: flex-start; align-items: flex-start; }
	.footer-container .col-powered { text-align: left; margin-top:40px; margin-bottom:35px; padding-left: 7px;}
	.footer-container .footer-social { text-align: left; margin-bottom:15px;}
	.footer-container .footer-table { padding-top: 45px; }
	.footer-container .footer-table .col-end {text-align:left;align-items: flex-start; }
	.footer-container .footer-table .btn-inbp { margin: 30px 0 60px; padding: 16px 29px; }
	.footer-container .footer-table ul li { padding-bottom: 25px; }
	
	#contactModal .modal-content { flex-direction: column; height: auto; }
	#contactModal .contact-left { width: 100%; padding: 35px 20px; }
	#contactModal .contact-right { width: 100%; }
	#contactModal .contact-form-field { width: 100%; }
	#contactModal .contact-form-btn { text-align: left; margin-bottom: 3rem; }
	#contactModal .contact-form-field input, #contactModal .contact-form-field textarea { width: 100%; }
	
	/* Buy page */
	.row-title { margin-left: 0; margin-right: 0; }
	.phase-i-container .hero-title { margin-top: 35px; margin-bottom: 5px; }
	.phase-i-container .hero-intro { padding-right: 0; }
	.row-services { display: none; }
	.col-testimonal { width: 100%; margin-bottom: 60px; }
	.col-testimonals { flex-direction: column; }
	.ownership-top { padding: 0px 20px; }
	.ownership-top img { margin-bottom: 30px; }
	.ownership-title { margin-bottom: 20px; font-size: 21px; }
	.ownership-desc { line-height: 23px; }
	.row-ownership-services { display: none; }
	
	/*Brouscure*/
	.broschure-container { height: 740px; background: url('../img/broschure-bg-m.png') scroll no-repeat 50% 0; }
	.broschure-desc { padding: 0 1% 30px; }
	.broschure-btn { font-size: 14px; }
	
	.faq-q { font-size: 16px; padding-right: 45px; }
	
	.apartment-type-card {
		flex: 0 0 70%; /* roughly 1.5 cards visible */
		margin-right: 5px;
	}
	.apartment-type-container .row-title {
		margin-bottom: 30px;
	}
	#apartment-type-carousel { margin-left: 12px; margin-right: 12px; }
	
	.apartment-type-container h2 { font-size: 21px; margin-bottom: 1rem; }
	
	.m-x { display: none; }
	.apartment-type-btn { display: none; }
	.table-apartments tr td { width: auto; }
	
	/* Student page */
	.page-student .hero-intro { font-size: 16px; padding-right: 0; line-height: 25px; }
	.page-student .services-container { padding: 60px 0 60px 40px; }
	.page-student .phase-i-container .hero-container { flex-direction: column; }
	.page-student .hero-message.hero-message-right { padding-left: 0 }
	.page-student .phase-i-container .hero-title { margin-top: 25px; }
	.page-student .col-services { display: none; }
	
	/*Brouscure*/
	.dark-hero-container { height: 740px; background: url('../img/student-black-bg-m.png') scroll no-repeat 50% 0; }
	.dark-hero-container .dark-hero-title { font-size: 26px; }
	
	/* Apartment List */
	.search-box { background: url(../img/apartment-list-m.jpg) no-repeat center / 100% auto; max-width: 1440px; height: 485px; }
	.search-title { font-size: 34px; padding: 80px 0 20px 0; }
	.search-bar { flex-wrap: wrap; background: none; border-radius: 0; gap: 10px; padding: 0 5px; overflow: hidden; }
	.search-field { flex: 0 0 calc(50% - 5px); }
	.search-dropdown { margin-bottom: 20px; width: 90%; }
	#search-field-floor { display: none; }
	.search-btn { font-size: 14px; padding: 18px 46px; }
	.search-dropdown-title {
		max-width: 80%;
        height: 20px;
        overflow: hidden;
	}
	.search-dropdown-arrow {
		position: absolute;
		right: 28px;
        top: 17px;
	}
	.search-dropdown.open .search-dropdown-options { z-index: 9; }
	
	/* Apartment Page */
	.pp-top { height: auto; }
	.pp-top .txt-back { top: -12px; }
	/*.pp-status { opacity: 0; }*/
	.pp-details-block { width: 100%; }
	.pp-content h1 { font-size: 21px; font-weight: 600; }
	.pp-content h2 { font-size: 16px; }
	.pp-desc { font-size: 12px; line-height: 19px; padding-top: 5px; padding-right: 0; }
	.pp-detail-title { font-size: 16px; }
	.pp-details-block ul { margin-bottom: 27px; }
	.pp-details-block ul li { font-size: 12px; }
	.pp-content .btn-inbp { display: none; }
	.btn-broschure { padding: 12px 10px; margin: 0 !important; }
	.pp-tab { font-size: 9px; }
	.pp-col-left, .pp-col-right, .txt-back { font-size: 9px; }
	.pp-col-right img { display: none; }
	.pp-tab { padding: 12px 20px; margin-right: 0; }
	.back { padding-top: 0; }
	.pp-col-pp .btn-apartment-enquire { display: block; position: absolute; top: 0; right: 0; padding: 15px 19.5px; margin-right: 0; }
	
	.pp-top .btn-close.btn-close-back { width: 12px; }
	
	.apartment-modal-content { padding: 0 6%; }
	.pp-row { width: calc(100% + 24px); }
	
	
	/* About */
	.about-counters { margin-bottom: 0; }
	.counter-container { flex-direction: column; }
	.counter-box { width: 100%; margin-bottom: 75px; }
	.about-top { padding: 100px 5%; }
	.about-fullwidth-title { font-size: 21px; }
	.about-fullwidth-desc { font-size: 16px; }
	
	.about-boxes { flex-direction: column; }
	.about-box { width: 99%; margin-bottom: 25px; }
	.about-box-title { font-size: 16px; padding-bottom: 10px; }
	.about-box-desc { font-size: 10px; }
	
	.about-title { font-size: 21px; }
	
	/*.about-activities-row { display: block; width: 100%; float: left; }
	.about-activity-item { display: block; width: 50%; float: left; }*/
	.about-activity-desc { padding: 0 11%; font-size: 10px; }
	.about-activity-title img { width: 80px; }
	.about-activities-row { display: flex; gap: 10px; flex-direction: column; }
	
	.about-portfolio-row { flex-direction: column; }
	.about-portfolio-item { margin: 0 auto 55px auto; }
	
	.about-fullwidth { padding-bottom: 70px; }
	.about-founder { display: block; padding: 0 5%; }
	.about-founder-left { width: 100%; }
	.about-founder-left img { width: 100%; }
	.about-founder-right { padding: 30px 0; color: #575558; }
	
}

@media (max-width: 576px) {
    .container, .container-sm {
        max-width: 100%;
		padding: 0 20px;
    }
}