Funding_page/css/style.scss

@import 'templates/_variables.scss';

:root {
	--color-scheme: dark;
	--blue: #0084b4;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: beige;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #212529;
	--primary: #0084b4;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: beige;
	--danger: #dc3545;
	--light: #dee2e6;
	--dark: #212529;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: "Roboto Condensed", sans-serif;
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

$yellow: #FFCC00;

@media all {
	.bg-warning {
		color: #212529
	}
}

@media all {
	#sidebar {
		background: #212529
	}
}

.sidebar-close {
	background: transparent
}

@media all {
	.sidebar-close {
		color: #f8f9fa
	}
}

*,
*::before,
*::after {
	box-sizing: border-box
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block
}

body {
	margin: 0;
	// font-family: "Roboto Condensed", sans-serif;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	font-size: 1rem;

	letter-spacing: 2px;
}


@media all {
	body {
		color: #f8f9fa;
		background-color: #212529;
	}
}

[tabindex="-1"]:focus:not(:focus-visible) {
	outline: 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

p {
	margin-top: 0;
	margin-bottom: 1rem
}



.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-auto {
	margin-left: auto !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.mx-2 {
	margin-right: 0.5rem !important;
	margin-left: 0.5rem !important;
}

.p-1 {
	padding: 0.25rem !important;
}

.p-2 {
	padding: 0.5rem !important;
}

.p-3 {
	padding: 1rem !important;
}

.p-4 {
	padding: 1.5rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.col {
  flex: 100%;
}

.w-50 {
	width: 50% !important;
}

.h-100 {
  height: 100% !important;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex: 100%;
  }

  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}
// toggler label and input
.toggle,
[id^=drop] {
	display: none;
}



/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
	
/* Media Queries
--------------------------------------------- */

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

@media (min-width: 576px) {
	.d-sm-block {
		display: block !important;
	}
}

@media (min-width: 768px) {
	.d-md-block {
		display: block !important;
	}
	.d-md-none {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.d-lg-none {
		display: none !important;
	}
}

input[type="radio"][class="style"]:checked + label {
	color:white;
	background:#6666ff;
}

.align-items-center {
   align-items: center !important;
}

.order-1 {
	order: 1 !important;
}

.order-2 {
  	order: 2 !important;
}

.title {
	font-size: 1.3rem;
}

.footer {
	color:#656565;
	a {
		color:#656565;
		text-decoration:none;

		&:hover { 
			color: #78AD42;
		}
	}

	h5 {
		color: black;
		font-weight: 600;
		padding-bottom: 15px;
	}

	.link {
		padding-bottom: 20px;
	}
}

@media (min-width: 992px) {
	.order-lg-1 {
		order: 1 !important;
	}

	.order-lg-2 {
		order: 2 !important;
	}
}

/* Airspace Template SCSS */
@mixin tablet{
	@media(max-width:768px) {
	  	@content;
	}
}

.w-25 {
	width: 25% !important;
}

.w-50 {
	width: 50% !important;
}

.w-75 {
	width: 75% !important;
}

.w-100 {
	width: 100% !important;
}

.blank {
  height: 130px;
  width: 100%;
	background-color: white;
}

.btn-yellow {
	outline: none;
	border: 3px solid $yellow;
	background-color: transparent;
	padding: .5rem 1rem;
	color: $yellow;
	transition: all .4s;
	&:hover {
		background-color: rgba(255, 255, 255, 0.246);
	}
	&__fill {
		color: black;
		background-color: $yellow;
		transition: all .4s;
		&:hover {
			background-color: #ffcc0078;
		}
	}
}

.btn-blue {
	display: inline-block;
	outline: none;
	border: 3px solid #2980B8;
	background-color: #2980B8;
	color: white;
	padding: .5rem 1rem;
	transition: all .4s;
	&:hover {
		background-color: #0e7fc5;
	}
}

.nav-link {
	cursor: pointer;
}

.hero {
	height: 42rem;
	background-position: center;
	background-size: cover;
	background-image: linear-gradient(
        to bottom,
        rgba(#2980B8, 0.8),
        rgba(#2980B8, 0.1)
        ), url(../imgs/hero-img.jpg);
	&__imgfr {
		margin: 0 9rem; 
		transform: translateY(-90px);
		position: relative;
		@media (max-width: 992px) {
			margin: 0 3rem; 
		}
		@media (max-width: 576px) {
			margin: 0 0rem; 
		}
	}
	&__stamp {
		position: absolute;
		left: -6rem;
		bottom: -4rem;
		width: 150px;
		@media (max-width: 992px) {
			width: 120px;
		}
		@media (max-width: 576px) {
			transform: translateX(-50%);
			left: 50%;
			bottom: -3rem;
		}
	}
	&__underline  {
		width: 50%;
		height: 6px;
		background-color: transparent;
		border: none;
		border-top: 2px solid black;
		border-bottom: 2px solid black;
		margin: 2.5rem auto;
	}
	&__h2 {
		font-size: 3rem;
		letter-spacing: 2px;
		@media (max-width: 992px) {
			margin: 0 6rem; 
		}
		@media (max-width: 576px) {
			font-size: 2rem;
			margin: 0rem; 
		}
	}
	&__p {
		color: black;
		margin: 0 12rem;
		@media (max-width: 992px) {
			margin: 0 6rem; 
		}
	}

}

.text-dark {
	color: black
}

.footer {
  background-color: #CAD7E6;
	padding: 3rem;
	.right-column {
		border-left: 1px solid black;
		@media (max-width: 830px) {
			border-left: none;
		}
	}
}

.footer .row{
  display: flex;
  align-items: center;
}

.footer .footer-aigirl {
  font-weight: 600;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.footer .footer-follow {
  font-size: 1.6rem;
	margin-bottom: 1rem;
	color: black;
	font-size: 1rem;
	font-weight: 600;
	margin-top: 2rem;
}

.footer .footer-socials a{
  margin-right: 5px;
}

.logos {
	&__img {
		width: 22rem;
		height: 12rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		}
	padding-bottom: 10rem;
	@media (max-width: 576px) {
		padding-bottom: 3rem;
	}
}

.cards {
	.card {
		&__imgfr {
			position: relative;
			cursor: pointer;
			&::before {
				content: " ";
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.25);
				display: none;
			}
			&:hover {
				&::before {
					display: block;
				}
				.card__comingSoon {
					display: inline-block;
				}
			}
		}
		&__play {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		&-text {
			color: #848484;
		}
		&-learn {
			color: #2980B8;
			text-decoration: none;
		}
		&-body {
			height: 340px;
		}
		&__comingSoon {
			display: inline-block;
			border: 2px solid white;
			font-weight: 600;
			color: white;
			padding: .3rem;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: none;
		}
	}
	.card-img-top {
		height: auto;
		@media (max-width: 576px) {
			height: auto;
		}
	}

}

.condition {
	.imgfr {
		position: absolute;
		left: 5rem;
		bottom: -3.5rem;
		width: 22rem;
		height: 22rem;
		background-image: url(../imgs/pexels-bess-hamiti-35537.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		@media (max-width: 860px) {
			width: 16rem;
			height: 16rem;
		}
	}
}

.carousels {
	color: black;
	background-color: white;
	.items > .item {
		width: 100%;
		height: 16rem;
	}
	.strong {
		font-size: 2rem;
		position: relative;
		z-index: 2;
		&::after {
			position: absolute;
			width: 100%;
			height: .8rem;
			background-color: $yellow;
			left: 0;
			bottom: 0;
			content: "";
			z-index: -1;
		}
	}
	.left_quotation, .right_quotation {
		position: absolute;
	}
	.left_quotation {
		left: 0;
		top: 0;
	}
	.right_quotation {
		right: 0;
		bottom: 0;
	}
}

.footer-contacts {
	width: 60%;
	@media (max-width: 860px) {
		width: 90%;
	}
}

.hero {
	.container {
		@media (min-width: 1400px){
			max-width: 1190px;
		}
	}
}

.condition {
	.container {
		@media (min-width: 1400px){
			max-width: 1190px;
		}
	}
}

.dropdown-menu__bg {
	background-color: white;
	@media (max-width: 576px){
		background-color: transparent;
	}
	a {
		color: black;
		@media (max-width: 576px){
			color: white;
		}
	}
}