/*
Theme Name: MiniCity Child Theme
Version: 1.0
Description: A child theme of Understrap
Author: admin
Template: understrap
*/

@import url("../understrap/style.css");

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ********** GENERAL ********** */

:root {
	--teal:       #22B5B1;
	--pink:       #E499A9;
	--pink2:      #C8647A;
	--pink3:      #FDDAE3;
	--darkteal:   #113640;
	--lightblue:  #DEF8FF;
	--lightblue2: #D6E7F0;
    --black:      #000000;
	--offblack:   #515151;
	--offblack2:  #626262;
    --white:      #FFFBF8;
	--offwhite:   #E5F7FF;
	--offwhite2:  #F2FDFF;
	--beige:      #E4D5CC;
}

html {
	margin-top: 0 !important;
}

body {
	font-family: "Poppins", sans-serif !important;
	font-size: 17px;
}

#page {
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Nunito", sans-serif;
	font-weight: 700 !important;
	letter-spacing: 1px;
	padding: 0 !important;
}

h1 {
	font-size: 64px !important;
	line-height: 1.25em !important;
	letter-spacing: 1px;
}

h1.h1-small {
	font-size: 48px !important;
}

h2 {
	font-size: 48px !important;
	line-height: 100%;
	color: var(--darkteal);
}

h3 {
	font-size: 20px !important;
}

h3.h3-large {
	font-size: 32px !important;
}

h4 {
	
}

h5 {
	
}

h6 {
	
}

p {
	font-family: "Poppins", sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: 1px;
}

p.p-large {
	font-size: 19px !important;
}

.subtitle {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	line-height: 100%;
	font-weight: 700 !important;
	color: var(--pink);
}

.btn-cta {
	display: inline-block;
	width: initial !important;
	padding: 16px 40px;
	border-radius: 10px;
	border: 1px solid var(--teal);
	background-color: var(--teal);
	
	font-size: 16px;
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
	text-align: center;
	transition: all .75s;
}

.btn-cta a {
	color: var(--white);
	text-decoration: none;
}

.btn-cta a:hover {
	color: var(--white) !important;
}

.btn-cta:hover {
	color: var(--teal);
	background-color: transparent;
	border-color: var(--teal);
	transition: all .75s;
}

.btn-cta-transparent {
	background-color: transparent;
	border: 1.5px solid var(--teal);
	color: var(--teal);
	transition: all .75s;
}

.btn-cta-transparent:hover {
	background-color: transparent;
	transition: all .75s;
}

.btn-cta-transparent-two {
	background-color: transparent;
	border: 1.5px solid var(--teal);
	color: var(--teal);
	transition: all .75s;
}

.btn-cta-transparent-two:hover {
	background-color: var(--teal);
	border: 1.5px solid var(--teal);
	color: var(--white) !important;
	transition: all .75s;
}

.btn-cta-lightblue {
	background-color: #d6e7f0;
	color: var(--teal);
	border: 1px solid var(--teal);
	transition: all .5s;
}

.btn-cta-lightblue:hover {
	background-color: var(--teal);
	color: var(--white);
	transition: all .5s;
}

.btn-icon {
    margin-right: 8px;
    position: relative;
    top: -1px;
}

.bg-pink2 {
	background-color: var(--pink2);
}

.bg-pink3 {
	background-color: var(--pink3);
}

.bg-lightblue2 {
	background-color: var(--lightblue2);
}

.bg-offwhite {
	background-color: var(--offwhite);
}

.text-teal {
	color: var(--teal);
}

.rounded-10 {
	border-radius: 10px;
}

.mw-675 {
	max-width: 675px;
	margin-left: auto;
	margin-right: auto;
}

.mw-725 {
	max-width: 725px;
	margin-left: auto;
	margin-right: auto;
}

.mw-800 {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.mw-1000 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.border-10 {
	border: 1px solid rgba(0, 0, 0, .25);
}

.rounded-10 {
	border-radius: 10px;
}

.rounded-20 {
	border-radius: 20px;
}

.py-10 {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

.col-padding-right {
	padding-right: 2.5% !important;
}

.col-padding-left {
	padding-left: 2.5% !important;
}

.hideme {
	display: none !important;
}

.mobile {
	display: none !important;
}

/* .desktop {
	display: flex !important;
} */

/* Columns */

.col-4 {
    margin: 10px 15px;
    width: calc(33.333% - 30px) !important;	
}

.hideme {
	display: none;
}

/* ********** NAVIGATION ********** */

#wpadminbar {
	display: none;
}

.announcement-bar {
	font-weight: 600;
	font-size: 14px;
	padding: 7px 20px;
}

.navbar {
    position: absolute !important;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: transparent; /* Completely transparent by default */
    transition: background-color 0.3s ease;
}

.navbar {
/* 	padding-top: 25px !important; */
  	transition: all 0.3s ease;
}

.navbar-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    background-color: var(--green);
	border-bottom: 1px solid #6f6f6f;
}

header .container {
    max-width: 1280px;
    background-color: var(--offwhite2);
    border-radius: 10px;
    padding: 0px 0 0 25px;
    position: fixed;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
	border: 1px solid #dbdbdb;

    transition: top 0.3s ease; /* 👈 This is the magic */
}

header .container.sticky {
	top: 15px;
}

.navbar-brand img {
	max-width: 185px;
}

#main-nav li {
    margin: 0 20px;
	padding: 0;
}

#main-nav li a {
	font-size: 14px;
	line-height: 100%;
	color: var(--darkteal);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

.nav-logo,
.nav-info {
	display: none;
}

.nav-cta-one {
	background-color: var(--lightblue);
	padding: 20px 28px;
	color: var(--teal) !important;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	text-decoration: none !important;
}

.nav-cta-two {
	background-color: var(--teal);
	padding: 20px 28px;
	color: var(--white) !important;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	text-decoration: none !important;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.nav-cta-one,
.nav-cta-two {
	display: none;
}

.offcanvas {
	background-color: var(--green) !important;
}

.nav-logo-mobile,
.nav-mobile {
	display: none;
}

/* Coming Soon */

.nav-container {
  position: relative; /* Anchor for absolute positioning */
  z-index: auto;
}

.hero-coming-soon {
	position: absolute;
    bottom: -138px;
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 1000;
	max-width: 250px;
    right: 15%;
}

.nav-container > *:not(.hero-coming-soon) {
  position: relative;
  z-index: 1; /* Ensures they layer above the image */
}

/* ********** HOME ********** */

/* Hero */

.hero {
	background-size: cover;
	background-position: center;
}

.home-hero {
/* 	background-image: url('https://cc.kuro-studios.com/wp-content/uploads/2025/04/cc_hero_home.webp'); */
	background-image: url('/wp-content/uploads/2025/05/background_teal_pink.webp');
	background-image: url('/wp-content/uploads/2025/06/background_teal_pink_01.webp');
	background-image: url('/wp-content/uploads/2025/06/background_teal_pink_02.webp');
	background-color: var(--darkteal);
	background-color: var(--white);
}

.home-hero h1 img {
	height: 50px;
	position: relative;
	top: -8px;
}

.home-hero h1 .mc {
	visibility: hidden;
}

.hero .container {
	position: relative;
}

/* Row Two */

.home-row-two .col-md-4 {
	margin: 10px;
	width: calc(33.333% - 20px) !important;
}

.arrow {
	top: 5px;
	right: 5px;
}

.feature-img {
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

.feature-title {
	width: 100%;
    right: 0;
    bottom: 0;
    background-color: rgba(34, 181, 177, .8);
    height: 80px;
    display: flex;
    align-items: center;
	border-bottom-right-radius: 30px;
}

.feature-title h3 {
	margin-bottom: 0;
	color: #fff;
    padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Row Three */

.home-row-three .row.bg-lightblue2 {
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-image: url('/wp-content/uploads/2025/05/minicity_who_we_are_bg.webp');
	background-size: cover;
}

.home-row-three .row.bg-pink3 {
	background-image: url('/wp-content/uploads/2025/05/minicity_celebrate_bg.webp');
	background-size: cover;
}

/* Row Six */

.home-row-six .col-md-4 {
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	margin: 10px;
	width: calc(33.333% - 20px) !important;
}

/* CTA */

.row-cta {
	background-size: cover;
	background-position: center 75% !important;
	height: 650px;
}

.cta-logo {
	position: relative;
    top: -7px;
}

.subscription-form {
	max-width: 500px;
	margin: 0 auto;
}

.frm-fluent-form .ff-t-container {
	gap: 5px !important;
}

#fluentform_2 .fluentform .ff-el-form-control {
	padding: 9px 15px !important;
	position: relative;
    top: 1px;
}

/* ********** ABOUT ********** */

.hero-about {
	padding-top: 250px;
	padding-bottom: 50px;
}

/* ********** ACTIVITIES ********** */

.activities-row-two .col-md-2 {
    width: calc(20% - 20px) !important;
    margin: 10px;
}

.accordion-item {
	margin-bottom: 8px !important;
    border-radius: 10px !important;
}

.accordion-button  {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--black) !important;
	background-color: #fff !important;
	box-shadow: none !important;
}

.accordion-body {
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #515151 !important;
	padding-top: 0 !important;
}

/* ********** FAQ ********** */

.faq-tabs-section .nav-tabs .nav-link {
	color: var(--darkteal) !important;
}

/* ********** PRIVACY POLICY ********** */

.row-privacy-policy .container {
	max-width: 1000px !important;
}

.row-privacy-policy h2 {
	font-size: 20px !important;
}

.row-privacy-policy p {
	font-size: 16px !important;
}

/* ********** FOOTER ********** */

footer {
	background-color: var(--offwhite);
}

.footer-logo {
	max-width: 167px;
}

footer h4 {
	font-family: 'Poppins', sans-serif;
	font-size: 16px !important;
	font-weight: 600 !important;
}

footer ul {
	list-style: none;
    padding-left: 0;
}

footer ul li,
footer ul li a {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	color: var(--offblack);
	margin-bottom: 5px;
}

.disclaimer {
	font-size: 10px !important;
	line-height: 1.25em !important;
}

footer hr {
	border-color: #252525;
    opacity: .1;
}

.subfooter,
.subfooter a {
	font-size: 14px;
	color: var(--offblack2) !important;
}

/* ********** MEDIA QUERIES ********** */

@media (max-width: 1290px) {
	
	.nav-container.container {
		max-width: 97% !important;
	}
	
}

@media (max-width: 991px) {
	
	/* GENERAL */
	h1 {
		font-size: 48px !important;
	}
	
	h1.h1-small {
		font-size: 36px !important;
	}
	
	h2 {
		font-size: 36px !important;
	}
	
	h3 {
		font-size: 17px !important;
	}
	
	h3.h3-large {
		font-size: 22px !important;
	}
	
	p {
		font-size: 16px !important;
	}
	
	.subtitle {
		font-size: 18px !important;
	}
	
	.btn-cta {
		padding: 12px 30px;
    	font-size: 14px;
	}
	
	.container {
		max-width: 95% !important;
	}
	
	.mobile {
		display: block !important;
	}
	
	.desktop {
		display: none !important;
	}
	
	/* HEADER/NAVIGATION */
	header .container {
		padding: 5px 20px;
	}
	
	.nav-cta-one,
	.nav-cta-two {
		display: none;
	}
	
	.offcanvas {
		display: block !important;
		background-color: var(--teal) !important;
		width: 100%;
		height: 100vh;
	}
	
	#main-nav li a {
		color: var(--white) !important;
		font-size: 21px !important;
	}
	
	.nav-mobile-one {
		margin-top: 8px !important;
	}
	
	.nav-mobile .icon {
		position: relative;
		top: -2px;
		margin-right: 6px;
	}
	
	.offcanvas-header {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.nav-logo-mobile img {
		max-width: 200px;
		margin-bottom: 25px;
		position: relative;
		top: -5px;
	}
	
	/* Sticky Nav */
	.nav-container.container {
		position: fixed;
		height: 75px;
	}
	
	.navbar-brand.custom-logo-link {
		position: inherit;
	}
	
	.navbar-toggler {
		position: inherit !important;
    	right: 15px;
	}
	
	.offcanvas {
		width: 50% !important;
		position: fixed !important;
		top: -60px !important;
		right: -3% !important;
		height: 101vh !important;
		z-index: 1001 !important;
	}
	
	.offcanvas-backdrop.fade.show {
		position: fixed !important;
		width: 100% !important;
		height: 101vh !important;
		top: -60px !important;
		left: -3% !important;
		z-index: 2;
	}
	
	/* HOME */
	.home-row-three .btn-cta-transparent-two.ms-2 {
		width: 206px !important;
    	margin-left: 0 !important;
		margin-top: 10px;
	}
	
	ul.list-unstyled li {
		font-size: 15px;
	}
	
	.home-row-six h3.h3-large.my-4 {
		font-size: 20px !important;
		margin-bottom: 10px !important;
	}
	
	.home-row-six p {
		font-size: 14px !important;
	}
	
	.row-cta {
		height: 450px;
	}
	
	/* ABOUT */
	.about-row-three .col-md-3 {
		width: 50% !important;
	}
	
	/* ACTIVITIES */
	.activities-row-two .col-md-2 {
		width: calc(33.333% - 20px) !important;
	}
	
	/* FOOTER */
	footer h4 {
		font-size: 15px !important;
	}
	
	footer li a {
		font-size: 13px;
	}
	
	footer .col-md-6.text-end {
		text-align: initial !important;
		margin-top: 15px;
    	margin-bottom: -25px !important;
	}
	
	.footer-social img {
		max-width: 40px;
	}
	
}

@media (max-width: 767px) {
	
	/* GENERAL */
	h1 {
		font-size: 35px !important;
	}
	
	h1.h1-small {
		font-size: 27px !important;
	}
	
	h2 {
		font-size: 24px !important;
	}
	
	h3 {
		font-size: 15px !important;
	}
	
	h3.h3-large {
		font-size: 18px !important;
	}
	
	p {
		font-size: 15px !important;
	}
	
	.subtitle {
		font-size: 16px !important;
	}
	
	.btn-cta {
		padding: 10px 27px;
    	font-size: 14px;
	}
	
	.container {
		max-width: 95% !important;
	}
	
	.py-10 {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
	
	.btn-cta,
	.home-hero .btn-cta.btn-cta-transparent.ms-2 {
		width: 250px !important;
		max-width: initial !important;
	}
	
	/* NAVIGATION */
	.offcanvas {
		width: 100% !important;
	}
	
	.offcanvas-body {
		padding-top: 75px !important;
	}
	
	header .container {
		top: 40px;
	}
	
	.hero-coming-soon {
		display: none !important;
	}
	
	/* HOME */
	.hero.home-hero.vh-100 {
		padding-top: 125px;
		background-image: none;
		background-color: var(--white);
		height: initial !important;
	}
	
	.home-hero .btn-cta.btn-cta-transparent.ms-2 {
		width: 250px !important;
		margin-top: 10px;
		margin-left: 0 !important;
	}
	
	.home-hero .col-md-6:nth-of-type(2) {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}
	
	.home-hero p {
		margin-top: -30px !important;
	}
	
	.home-row-two .col-md-4 {
		width: calc(100% - 20px) !important;
	}
	
	.mobile-reverse {
		flex-direction: column-reverse;
	}
	
	.mobile-reverse .col-md-6.pe-5 {
		padding-right: calc(var(--bs-gutter-x) * .5) !important;
		margin-top: 20px !important;
	}
	
	.col-md-6.ps-5 {
		padding-left: calc(var(--bs-gutter-x) * .5) !important;
		margin-top: 20px !important;
	}
	
	.row.p-4 {
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}
	
	.home-row-six .col-md-4 {
		width: calc(100% - 20px) !important;
	}
	
	.row-cta .btn-cta {
		width: 235px !important;
	}
	
	.row-cta .btn-cta.btn-cta-transparent.ms-2 {
        margin-top: 10px;
        margin-left: 0 !important;
    }
	
	a.btn-cta.btn-cta-lightblue.ms-2 {
		margin-left: 0 !important;
		margin-top: 10px !important;
	}
	
	/* ABOUT */
	.about-row-three .col-md-3 {
        width: 100% !important;
    }
	
	/* ACTIVITIES */
	.feature-img {
		height: 350px;
		object-fit: cover;
	}
	
	.activities-row-two .col-md-2 {
		width: calc(100% - 20px) !important;
	}
	
	.accordion-button {
		font-size: 17px !important;
	}
	
	.accordion-body {
		font-size: 15px !important;
	}
	
	/* FAQ */
	.nav.nav-tabs.justify-content-center.mb-5 {
		display: block !important;
		margin-bottom: 25px !important;
	}
	
}