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

body, html { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.4; color: #242424; }

a { text-decoration: none; color: unset; }
img { vertical-align: middle; }
ul { list-style: none; }
p { line-height: 26px; }
h1, h2, h3, h4 { font-weight: 700; color: #232323; font-family: "Mirza", serif; line-height: 1; }
button { border: 0; outline: 0; letter-spacing: 1px; font-family: unset; }


:root {

	--c1 : #fb5300;
	--c2 : #132e4c;
	--c3 : #ffda4f;
	--c4 : #ad784e;

	--bs: 0 3px 15px 0 #0000001a;
	--bs2 : 0 3.4px 2.7px -30px #0000000f, 0 8.2px 8.9px -30px #00000012, 0 25px 40px -30px #00000033;
	--bs3: inset 0px 0px 20px 10px #00000030;
	--ts : all 0.5s ease-in-out;
	--fa : "Font Awesome 6 Pro";
	--fs : 40px;

	--gc : linear-gradient(90deg, #57c680 0%, #b5559e 77%);
	--gch : linear-gradient(90deg, #b5559e 0%, #57c680 77%);

	--cg : linear-gradient(90deg, #ff73dd 0%, #b5559e 77%);
	--cgh : linear-gradient(90deg, #b5559e 0%, #ff73dd 77%);

}


.widget_section { width: 100%; display: block; padding: 70px 16px; }
.container { max-width: 1140px; margin: auto; }
@media all and (max-width:480px) {
	.widget_section { padding: 60px 16px; }
}


/*  ---------- ----- HEADER ----- ---------- */
.header { position: fixed; width: 100%; z-index: 1000; transition: all 0.3s ease;
	padding: 6px 16px; display: flex; justify-content: space-around; align-items: center; background: #fff; }
.header.sticky { background: #fff; color: #000!important; box-shadow: var(--bs); }

.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo_img { width: 180px; }
.logo_img img { width: 100%; height: auto; }

.navbar ul { display: flex; }
.navbar ul li {  }
.navbar ul li a { display: block; padding: 8px 16px; font-size: 14px; font-weight: 600; transition: var(--ts); text-transform: uppercase; }
.navbar ul li a:hover { color: var(--c1); }
.nav__act { color: var(--c1); font-weight: 800!important; }

.model_btn button { display: inline-block; padding: 10px 32px; font-size: 14px; background: var(--c1); color: #fff; transition: var(--ts); border-radius: 50px; }
.model_btn button:hover { background: var(--c2); }

#nav__btn { display: none; }
.nav__btn { display: none; width: 40px; height: 40px; position: relative; background: var(--c1); color: #fff; border-radius: 4px; z-index: 1; }
.nav__btn:before { content: "☰"; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 24px; text-align: center; position: absolute; top: 0; left: 0; z-index: -1; }
#nav__btn:checked ~ .nav__btn:before { content: "⛌"; font-size: 22px; }

@media all and (max-width: 992px) {
	.header { padding: 6px 16px; background: #fff; justify-content: space-between; }

	.logo h1 { font-size: 22px; }

	.navbar ul { display: none; max-height: 430px; padding: 0; position: absolute; top: 100%; right: 0px; left: 0px; background: #fff; box-shadow: var(--bs); transition: var(--ts); }
	.navbar ul li a { padding: 12px 16px; }

	.model_btn { display: none; }

	#nav__btn:checked ~ ul { display: block; transform: translateY(0%); }
	.nav__btn { display: block; }
}





/* TITLE */
.design { background-image: url('assets/images/design.png'); }
.section_title { text-align: center; margin-bottom: 32px; }
.section_title h2 { font-size: 42px; text-transform: uppercase }

@media all and (max-width:480px) {
	.section_title h2 { font-size: 36px; }
}


/* Button */
.call-to-action { text-align: center; margin-top: 32px; }

.action_btn { display: inline-block; width: 250px; height: 50px; line-height: 50px; text-align: center;
	cursor: pointer; position: relative; font-weight: 900; background: #fff0; color: #fff; transition: all 0.5s; z-index: 1; }
.action_btn::before,
.action_btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s; z-index: -1; }

.action_btn::before { background: var(--c1); }
.action_btn:hover::before { opacity: 0 ; transform: scale(0.5,0.5); }

.action_btn::after { opacity: 0; border: 1px solid rgba(255,255,255,0.5); background:var(--c2); transform: scale(1.2,1.2); }
.action_btn:hover::after { opacity: 1; transform: scale(1,1); }





/* ---------- Banner ---------- */
.banner-section { width: 100%; display: block; position: relative; background: var(--c2); overflow: hidden; z-index: 9; padding-top: 100px; }

.banner_row { display: flex; align-items: center; max-width: 1140px; margin: auto; z-index: 3; }
.banner_col { width: 100%; display: block; }

.banner_img { display: block; }
.banner_img img { width: 100%; height: auto; }

.banner_text { display: block; color: #fff; }
.banner_text h1 { font-size: 38px; color: var(--c3); }
.banner_text h1 span { display: block; }
.banner_text h2 { font-size: 20px; color: unset; margin-top: 12px; }
.banner_text p { margin-top: 12px; }

.banner_btn { margin-top: 24px; }

.banner-carousel { display: block; width: 100%; position: relative; overflow: hidden;  }
.banner-carousel .banner { width: 100%; display: inline-block; overflow: hidden; }

@media all and (max-width: 480px) {
	.banner_row { flex-direction: column; justify-content: space-between; padding-top: 0; }
	.banner_text { padding: 32px 16px 0px 16px; }
	.banner_text h1 span { display: inline-block; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.banner-row { flex-direction: column; }
}


/* ---------- ----- POPUP MODEL ----- ---------- */
.modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0;
  width: 100%; height: 100%; overflow: auto; background: #00000080; }

.modal-content { background: #fefefe; margin: auto; border: 1px solid #888; width: 380px;  border-radius: 12px; overflow: hidden;  }

.modal-head { display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 16px; background: var(--c2); color: #fff; }
.modal-head h3 { font-size: 32px; color: #fff; }

.close { color: #aaaaaa; font-size: 28px; font-weight: bold; }
.close:hover,
.close:focus { color: #fff; text-decoration: none; cursor: pointer; }

.modal-body { display: block; width: 100%; }
.modal-body iframe { width: 100%; height: 400px; border: 0; }



/* ---------- ----- About ----- ----------  */
.section_about { width: 100%; display: block; padding: 80px 16px; }
.about_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.about_col { display: block; width: 100%; }
.about_img { display: block; }
.about_img img { width: 100%; height: auto; }
.about_col span { display: block; font-size: 18px; }
.about_col h2 { font-size: 40px; font-weight: 900; }
.about_col p { margin-top: 12px; text-align: justify; }

.anchor_btn { display: inline-block; padding: 12px 24px;
	background: var(--c1); color: #fff; font-weight: 600; border-radius: 6px; margin-top: 16px; transition: var(--ts); }
.anchor_btn:hover { background: var(--c2); }

.about_col .action_btn { margin-top: 24px; }
.about_col .action_btn span { font-size: 15px; }

@media all and (max-width:480px) {
	.about_row { grid-template-columns: repeat(1, 1fr); }
	.about_col h3 { font-size: 36px; }
}



/* ---------- ----- Our Venture ----- ---------- */
.section_venture  { width: 100%; display: block; position: relative; padding: 70px 16px; }
.venture_carousel { display: block; }
.venture_cell { display: inline-block; width: 100%; }
.venture_carousel .flickity-page-dots { z-index: 2; bottom: -66px }
.venture_carousel .flickity-page-dots .dot { display: inline-block;
	width: 16px; height: 16px; margin: 0 6px; background: #fff0; border-radius: 50%; cursor: pointer; position: relative; }
.venture_carousel .flickity-page-dots .dot:before { content: "⦿"; color: #09204a; }

.venture_box { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.venture_image { width: 100%; display: block; position: relative; border-radius: 12px; overflow: hidden; }
.venture_image img { width: 100%; height: auto; }

.venture_text { display: block; position: relative; }
.venture_text h3 { font-size: 40px; color: var(--c2); }
.venture_text h3 span { display: block; }
.venture_text .bold { font-size: 20px; font-weight: 600; }
.venture_text p { margin-top: 16px; text-align: justify; }
.venture_text button { display: block; margin-top: 24px; }

.venture_button_group { width: 148px; display: flex; justify-content: space-between; align-items: center; padding: 6px; position: relative; margin: auto; margin-top: 32px; }
.venture_button_group:before { content: ""; display: block; width: 100%; height: 100%; background: #fff; box-shadow: var(--bs); position: absolute; left: 0; top: 0; border-radius: 50px; }
.venture_button_group button { display: block; position: relative; width: 38px; height: 38px; text-align: center;
	font-size: 18px; border-radius: 50px;  background: var(--c1); color: #fff; z-index: 9; }


@media all and (max-width:480px) {
	.venture_box  { grid-template-columns: repeat(1, 1fr); }
	.projects_btns { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
}

@media (min-width:480px) and (max-width: 992px) {
	.venture_box  { grid-template-columns: repeat(1, 1fr); }
}



/* ---------- ----- Amenities ----- ----------  */

.amenities__ { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 16px; }
.amenities_ { display: block; width: 100%; background: #fff; box-shadow: var(--bs); padding: 24px 16px; border-radius: 12px; }
.amenities_icon { display: block; width: 82px; height: 82px; padding: 8px; border-radius: 50px; margin: auto; background: var(--c2); padding: 12px; transition: var(--ts); }
.amenities_icon img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.amenities_text { display: block; text-align: center; margin-top: 12px; }
.amenities_text h3 { font-size: 20px; }

.amenities_:hover .amenities_icon { background: var(--c1); }
.amenities_:hover .amenities_text h3 { color: var(--c2); }

@media all and (max-width:480px) {
	.amenities__ { grid-template-columns: repeat(2, 1fr); }
	.amenities_text h3 { font-size: 18px; }

}


/* ---------- ----- Why Choose ----- ---------- */
.section_why { width: 100%; display: block; position: relative; padding: 80px 16px;
	background: url('assets/images/bg_services.jpg')no-repeat top center / cover; background-attachment: fixed; }
.row_why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.col_why { display: block; width: 100%; }

.title_why { display: block; margin-bottom: 32px; }
.title_why span { display: block; font-size: 18px; color: var(--c1); font-style: italic; }
.title_why h1 { color: #fff; font-size: 48px; text-transform: uppercase; }

.box_grid_why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.box_why { display: block; padding: 30px 16px; text-align: center; background: #13162b; box-shadow: var(--bs); border-radius: 12px; }
.box_why img { width: 72px; height: auto; filter: invert(45%) sepia(54%) saturate(525%) hue-rotate(163deg) brightness(90%) contrast(92%); transition: var(--ts); }
.box_why h3 { font-size: 20px; margin-top: 16px; color: #fff; font-weight: 500; transition: var(--ts); }
.box_why:hover img { filter: brightness(0) invert(1); }

.why_btn { margin-top: 24px; }

@media all and (max-width: 480px) {
	.section_why { padding: 80px 16px; }
	.row_why { grid-template-columns: repeat(1, 1fr); }
	.title_why h1 { font-size: 28px; }
	.box_grid_why { grid-template-columns: repeat(2, 1fr); }
	.box_why { padding: 16px; }
	.box_why img { width: 60px; }
	.box_why h3 { font-size: 18px; }
}

@media (min-width:480px) and (max-width: 992px) {
	.section_why { padding: 80px 16px; }
	.box_why img { width: 60px;}
}


/* ---------- ----- HighLights ----- ---------- */
.HighLights { display: block; }
.highlights_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; }
.highlights_col { display: block; width: 100%; background: #fff; box-shadow: var(--bs3); padding: 24px 16px; border-radius: 6px; transition: var(--ts); }
.highlights_icon { display: block; width: 82px; height: 82px; padding: 8px; border-radius: 50px; margin: auto; background: var(--c2); padding: 16px; transition: var(--ts); }
.highlights_icon img { width: 100%; height: auto; filter: brightness(0) invert(1); }
{  filter: invert(21%) sepia(20%) saturate(689%) hue-rotate(196deg) brightness(97%) contrast(86%); }
.highlights_text { display: block; text-align: center; margin-top: 12px; }
.highlights_text h3 { font-size: 20px; }

.highlights_col:hover .highlights_icon { background: var(--c1); }
.highlights_col:hover .highlights_icon img {  }
.highlights_col:hover .highlights_text h3 {  }

@media all and (max-width:480px) {
	.highlights_row { grid-template-columns: repeat(2, 1fr); }
	.highlights_text h3 { font-size: 18px; }
}


/* ---------- ----- Specifications ----- ---------- */
.accordion { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; }

.accordion_box { border-radius: 8px; overflow: hidden; }
.accordion_box .button { display: block; padding: 20px; width: 100%; position: relative;
	text-align: left; background: var(--c2); color: #fff; border: 0; cursor: pointer; font-family: unset; font-weight: 600; }
.accordion_box .button:after { content: '+'; color: #fff; float: right; font-size: 20px; font-weight: 800; line-height: normal; }

.accordion_box .content { display: none; margin: 0; padding: 20px; background-color: #fff; border-top: 1px solid #ddd; }
.accordion_box.on .button:after { content: '-'; }
.accordion_box.on .content { display: block; }

@media all and (max-width:480px) {
	.accordion { grid-template-columns: repeat(1, 1fr); }
	.accordion_box .button { padding: 16px; }
}


/* ---------- ----- Layout ----- ---------- */
.layout_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }
.layout_col { display: block; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--bs); }
.layout_col img { width: 100%; height: auto; }

@media all and (max-width:480px) {
	.layout_row { grid-template-columns: repeat(1, 1fr); }
}

/* ---------- ----- Fixed Button ----- ---------- */
.fixed_btns { display: flex; justify-content: flex-end; padding: 0px 60px; position: fixed; bottom: 60px; right: 0; z-index: 99; }
.fixed_btn { display: block; width: 62px; position: relative; }
.fixed_btn img { width: 100%; height: auto; overflow: hidden; }

@media all and (max-width: 480px) {
	.fixed_btns { padding: 0px 24px; bottom: 24px; }
	.fixed_btn { width: 42px; }
}



/* ========== ===== ===== Contact Page ===== ===== ========== */

.contact_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.contact_col { display: block; width: 100%; }

.contact_form { display: block; padding: 32px; background: #fff; border-radius: 6px; box-shadow: 0px 7px 24px 0px #0000001f; }
.contact_form h2 { font-size: 32px; }
.contact_form p { margin-top: 16px; }
.contact_form form { display: block; }
.form_group { display: flex; gap: 16px; margin-top: 16px; }
.form_group input,
.form_group select,
.form_group textarea { width: 100%; padding: 16px; background: #f3f5fd; border: 1px solid #f3f5fd; outline: 0; }
.form_group button { text-transform: uppercase; }

/* ----- MAP ----- */
.map_area { display: block; width: 100%; height: 56vh; padding: 16px; background: #fff; border-radius: 12px; box-shadow: var(--bs); overflow: hidden;  }
.map_area iframe { display: block; width: 100%; height: 100%; border: 0; }

@media all and (max-width: 480px) {
	.section-contact { padding: 60px 16px; }
	.contact_row { grid-template-columns: repeat(1, 1fr); }
	.form_group { flex-direction: column; }
	.contact_form { padding: 32px 16px; }

	.map_area { height: 40vh; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.contact_row { grid-template-columns: repeat(1, 1fr); }
}



/* ---------- ----- Footer ----- ---------- */
.footer { background: #d4d4d4; }
.footer_row { max-width: 1140px; margin: auto; display: grid; grid-template-columns: 35% 30% 35%; padding: 60px 16px; }
.footer_col { display: block; width: 100%; }
.footer_col h3 { font-size: 32px; text-transform: uppercase; font-weight: 900; margin-bottom: 20px; }

.footer_col:nth-child(2) { padding: 0 50px; }

.footer_logo { width: 180px; margin: auto; }
.footer_logo img { width: 100%; height: auto; }

.footer_title { margin-top: 16px; text-align: justify; }
.footer_title h4 {  font-size: 24px; }
.footer_title p { margin-top: 12px;  }

.social_icons { display: inline-flex; gap: 9px; margin-top: 16px; }
.social_icons a { display: block; width: 42px; height: 42px; line-height: 42px; text-align: center;
	background: #f2f2f2; border-radius: 50px; font-size: 16px; transition: var(--ts); }
.social_icons a:hover { background: var(--c2); color: #fff; }

.footer_links { display: block; }
.footer_links li+li { margin-top: 12px; }
.footer_links li { transition: var(--ts); }
.footer_links li:before { content: '\f061'; font-family: var(--fa); margin-right: 6px; font-weight: 600; transition: var(--ts); }
.footer_links li:hover { color: var(--c1); }
.footer_links li:hover:before { margin-right: 8px; }

.footer_address+.footer_address { margin-top: 16px; }
.footer_address { display: flex; gap: 16px; }
.footer_icon { display: block; width: 42px; height: 42px; line-height: 42px; background: var(--c2); color: #fff; border-radius: 50%; text-align: center; font-size: 22px; }
.footer_info { display: block; width: 80%;}
.footer_info h4 { color: var(--c2); font-size: 24px; }
.footer_info p  { margin-top: 4px; }

.foot_link+.foot_link { margin-top: 16px; }
.foot_link { display: flex; align-items: center; gap: 16px; }
.foot_link i { display: block; width: 42px; height: 42px; line-height: 42px; background: var(--c1); color: #fff; border-radius: 50%; text-align: center; font-size: 22px; }
.foot_link a { font-size: 16px; color: #fff; }

.footer__row { max-width: 1140px; margin: auto; display: block; padding: 16px; text-align: center; border-top: 1px solid var(--c1); }
.footer__row p { font-size: 16px; }
.footer__row p a { color: var(--c1); font-weight: 900; }

@media all and (max-width:480px) {
	.footer_row { grid-template-columns: repeat(1, 1fr); grid-gap: 32px; padding: 40px 16px; }
	.footer_col:nth-child(2) { padding: 0px; }
	.footer_logo { width: 180px; margin: auto; }
}