@use '../../utils' as *;

/*----------------------------------------*/
/*  6.1 footer
/*----------------------------------------*/

// Footer style 
.footer__area-common {
	position: relative;
	z-index: 1;
	
	&.background {
		background: #F7F7F7;
	}
	.shape{
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
		img{
			width: 100%;
			height: 100%;
		}
	}
	
	@media #{$md} {
		padding-top: 60px;
	}
	@media #{$sm,$xs} {
		padding-top: 50px;
	}
}

.footer-wrap{
	padding: 50px 0 77px 0;

	@media #{$lg} {
		--bs-gutter-x: none;
	}
	
	@media #{$md, $sm, $xs} {
		padding: 0px 0 70px 0;
	}
}

.footer {
	
	&__main {
		position: relative;
		padding-bottom: 80px;
		@media #{$sm} {
			padding-bottom: 60px;
		}
		@media #{$xs} {
			padding-bottom: 40px;
		}
	}
	
	&__widget {
		margin-bottom: 0;
		
		&.footer__widget-item-1 {
			// max-width:323px;
			@media #{$md, $sm, $xs} {
				max-width:100%
			}
		}
		&.footer__widget-item-2 {
			padding-left: 20px;
			@media #{$lg} {
				padding-left:10px;
			}
			@media #{$md, $sm, $xs} {
				padding-left:0;
			}
		}
		&.footer__widget-item-3 {
			padding-left: 65px;

			@media #{$lg} {
				padding-left:20px;
			}

			@media #{$md, $sm, $xs} {
				padding-left:0;
			}
		}
		
		&-title {
			h4 {
				font-family: var(--rr-ff-heading);
				font-weight: var(--rr-fw-regular);
				color: var(--rr-heading-primary2);
				margin-bottom: 35px;
				font-style: normal;
				font-size: 24px;
				line-height: 26px;
				z-index: 10;
				margin-top: 18px;
				
				@media #{$lg} {
					font-size: 18px;
				}
			}

			&-2{
				h4{
					color: var(--rr-common-white);
					margin-top: 0;
					@media #{$md, $sm, $xs} {
						margin-top: 30px;
					}
				}
			}
		}
		
		&-description {
			p {
				font-size: var(--rr-fs-body2);
				margin-bottom: 0;
				opacity: 0.9;
				color: var(--rr-common-black);
			}
		}
		&-from{
			display: flex;
			align-items: center;
			gap: 12px;
		}
	}
	
	&__logo {
		img {
			max-width: 188px;
		}
	}
	
	&__content {
		
		p {
			font-family: var(--rr-fs-body);
			color: var(--rr-text-body);
			font-weight: var(--rr-fw-regular);
			font-style: normal;
			font-size: 16px;
			line-height: 27px;
			margin-bottom: 0;
		}

		&-2{
			p{
				color: var(--rr-common-white);
				font-family: var(--rr-ff-heading);
				font-weight: var(--rr-fw-regular);
				font-style: normal;
				font-size: 20px;
				line-height: 26px;
				@media #{$md, $sm, $xs} {
					margin-top: 30px;
				}
			}
		}
	}
	
	&__link {
		ul {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 15px;
			li {
				list-style: none;
				display: flex;
				align-items: flex-start;
				a {
					font-family: var(--rr-fs-body);
					color: var(--rr-text-body);
					font-weight: var(--rr-fw-regular);
					font-style: normal;
					font-size: 16px;
					line-height: 27px;

					i{
						margin-top: 5px;
					}
					
					&:hover {
						color: var(--rr-theme-primary);
						&::before {
							width: 12px;
						}
					}
				}
			}
		}

		&-2{
			ul{
				li{
					a{
						color: var(--rr-common-white)
					}
				}
			}
		}
	}
	
	&__social {
		@include flexbox();
		gap: 10px;
		
		a {
			overflow: hidden;
			position: relative;
			color: var(--rr-text-body);
			align-items: center;
			display: flex;
			justify-content: center;
			width: 36px;
			height: 36px;
			background: transparent;
			font-size: 14px;
			border-radius: 500px;
			border: 1px solid rgba(0, 29, 8, 0.1);
			
			
			&:hover {
				color: var(--rr-theme-primary);
				border: 1px solid var(--rr-theme-primary);
			}
		}
	}
	
	&__subscribe {
		max-width: 210px;
		ul{
			li{
				list-style: none;
				display: flex;
				align-items: flex-start;
				a{
					font-family: var(--rr-fs-body);
					color: var(--rr-text-body);
					font-weight: var(--rr-fw-regular);
					font-style: normal;
					font-size: 16px;
					line-height: 27px;
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					gap: 15px;

					&:hover{
						color: var(--rr-theme-primary);
					}
				}
				.icon{
					width: 40px;
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #E7E7EB;
					border-radius: 500px;
				}
				.text{
					font-family: var(--rr-ff-body);
					color: var(--rr-text-body);
					font-weight: var(--rr-fw-regular);
					font-style: normal;
					font-size: 16px;
					line-height: 27px;
					&-2{
						color: var(--rr-common-white);
						color: var(--rr-common-white);
						font-family: var(--rr-ff-body);
						font-weight: var(--rr-fw-regular);
						font-style: normal;
						font-size: 16px;
						line-height: 27px;
						opacity: 0.8;
					}
				}
				.mail{
					font-family: var(--rr-ff-body);
					color: var(--rr-text-body);
					font-weight: var(--rr-fw-regular);
					font-style: normal;
					font-size: 16px;
					line-height: 27px;

					&-2{
						color: var(--rr-common-white);
						font-family: var(--rr-ff-body);
						font-weight: var(--rr-fw-regular);
						font-style: normal;
						font-size: 16px;
						line-height: 27px;
						opacity: 0.8;
					}
				}
				.number{
					color: var(--rr-common-white);
					font-family: var(--rr-ff-body);
					font-weight: var(--rr-fw-regular);
					font-style: normal;
					font-size: 16px;
					line-height: 27px;
					opacity: 0.8;
				}
			}
		}
		&.subscribe-2{
			max-width: inherit;
		}
		&-2{
			ul{
				li{
					display: block !important;
					a{
						display: block !important;
					}
				}
			}
			&-heading{
				color: var(--rr-common-white);
				font-family: var(--rr-ff-body);
				font-weight: var(--rr-fw-sbold);
				font-style: normal;
				font-size: 16px;
				line-height: 27px;
			}
		}
	}
	
	&__background-shpae {
		position: absolute;
		z-index: -1;
		bottom: 0;
		left: 0;
		background-position: left bottom;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}
}