/* 05.06. Footer */
.footer {
	position: relative;

	// Above Footer Detail
	&::before,
	&::after {
		z-index: 100;
		position: absolute;
		content: "";
		background-color: $primary-color;
	}

	&::before {
		@media (min-width: $screen-md-min) {
			width: 43px;
			height: 43px;
			top: -21px;
			transform: rotate(135deg);
			right: calc(50% - #{($container-desktop - $grid-gutter-width) / 2} - 85px);
		}

		@media (min-width: $screen-lg-min) {
			right: calc(50% - #{($container-large-desktop - $grid-gutter-width) / 2} - 85px);
		}
	}

	&::after {
		@media (min-width: $screen-md-min) {
			height: 30px;
			top: -30px;
			right: 0;
			width: calc(50% - #{($container-desktop - $grid-gutter-width) / 2} - 63px);
		}

		@media (min-width: $screen-lg-min) {
			width: calc(50% - #{($container-large-desktop - $grid-gutter-width) / 2} - 63px);
		}
	}


	&-top {
		position: relative;
		background-color: $primary-color;
		color: #9eb7cb;
		padding: 30px 0;

		@media (min-width: $screen-md-min) {
			padding: 55px 0;
		}

		// Under Footer Detail
		&::before,
		&::after {
			z-index: 100;
			position: absolute;
			content: "";
			background-color: $primary-color;
		}

		&::before {
			@media (min-width: $screen-md-min) {
				width: 43px;
				height: 43px;
				bottom: -21px;
				transform: rotate(135deg);
				left: calc(50% - #{($container-desktop - $grid-gutter-width) / 2} - 85px);
			}

			@media (min-width: $screen-lg-min) {
				left: calc(50% - #{($container-large-desktop - $grid-gutter-width) / 2} - 85px);
			}
		}

		&::after {
			@media (min-width: $screen-md-min) {
				height: 30px;
				bottom: -30px;
				left: 0;
				width: calc(50% - #{($container-desktop - $grid-gutter-width) / 2} - 63px);
			}

			@media (min-width: $screen-lg-min) {
				width: calc(50% - #{($container-large-desktop - $grid-gutter-width) / 2} - 63px);
			}
		}

		&__headings {
			color: #ffffff;
			font-size: 21px;
			margin-top: 0;
			margin-bottom: 21px;
		}
	}

	&-bottom {
		background-color: #162f42;
		color: #577186;
		padding: 10px 0;
		text-align: center;

		@media (min-width: $screen-md-min) {
			padding: 19px 0;
		}

		a {
			color: #eeeeee;
			font-weight: bold;

			&:hover {
				color: #ffffff;
			}
		}

		&__left {
			@media (min-width: $screen-md-min) {
				float: left;
			}
		}

		&__right {
			padding-top: 5px;

			@media (min-width: $screen-md-min) {
				float: right;
				padding-top: 0;
			}
		}
	}
}