// Social
// -----------------
.acm-social {
	// Style 1
	&.style-1 {
		a {
			background: var(--color-primary);
			border-radius: $border-radius;
			color: $white;
			display: inline-block;
			height: 35px;
			line-height: 35px;
			margin-left: $spacer / 2;
			text-align: center;
			width: 35px;

			&:hover,&:focus,&:active {
				opacity: 0.8;
			}
		}
	}
}

// Features
// ------------
@keyframes left-right {
	from {
	  transform: translateX(30%);
	}
	to {
	  transform: translateX(-100%);
	}
}

.acm-features {
	// Style 1
	&.style-1 {
		--heading-color: #fff;
		--body-text-color: #fff;
		background-size: cover;
		background-position: center center;
		color: var(--body-text-color);
		padding-top: $grid-gutter-width * 6;
		padding-bottom: $grid-gutter-width * 6;
		position: relative;
		text-align: center;
		overflow: hidden;

		// Desktop view
		@include media-breakpoint-up(xl) {
			background-attachment: fixed;
		} 

		// Tablet view
		@include media-breakpoint-down(xl) {
			padding-top: $grid-gutter-width * 3;
			padding-bottom: $grid-gutter-width * 3;
		}

		@include media-breakpoint-down(sm) {
			padding-top: $grid-gutter-width * 2;
			padding-bottom: $grid-gutter-width * 2;
		}

		// Text animation
		.text-animation {
			animation: left-right 200s linear infinite;
			position: absolute;
			top: 30%;
			left: 30%;
			font-size: 200px;
			font-weight: 700;
			text-transform: uppercase;
			white-space: nowrap;
			opacity: 0.1;

			// Tablet view
			@include media-breakpoint-down(xl) {
				font-size: 100px;
			}
		}

		// Mask
		.mask {
			background: rgba(0,0,0,0.1);
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}

		.container-fluid {
			position: relative;
			z-index: 2;
		}

		// Title
		.section-title-wrap {
			font-size: var(--hero-font-size);
			font-weight: 700;
			margin-bottom: var(--gutter-sm);
			text-shadow: 0 0 10px rgba(0,0,0,0.2);
			letter-spacing: -2px;
		}

		// Mod Search
		.mod-finder {
			label {
				display: none;
			}

			input.form-control {
				background-image: url('../images/icons/search.png');
				background-position: left 18px center;
				background-repeat: no-repeat;
				border: 0;
				border-radius: 40px;
				padding: $spacer var(--gutter-normal) $spacer $grid-gutter-width * 1.5;
				height: 54px;
				width: 800px;
				max-width: 100%;
			}

			.mod-finder__search.input-group {
				margin-left: auto;
				margin-right: auto;
				position: relative;
				max-width: 100%;
				width: 800px;

				button.btn-primary {
					border-radius: 50px!important;
					position: absolute;
					right: 6px;
					top: 6px;
					padding: $spacer / 2 $spacer;

					.icon-search {
						display: none;
					}
				}
			}

			.awesomplete > ul {
				background: $white;
				color: $gray-800;
				text-align: left;
				padding: $spacer / 2;

				&:before {
					left: $spacer * 3;
				}

				li:hover {
					background: $gray-100;
					border-radius: $border-radius;
				}

				mark {
					background: transparent;
					padding: 0;
				}
			}
		}

		// Feature
		.features-list {
			gap: $grid-gutter-width;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			text-align: center;
			list-style: none;
			margin: var(--gutter-normal) 0 0;
			padding: 0;

			// Tablet view
			@include media-breakpoint-down(md) {
				gap: $grid-gutter-width / 2;
			}

			i {
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
				background: rgba(0,0,0,0.2);
				border-radius: $border-radius;
				color: $white;
				font-size: $font-size-sm;
				margin-right: $grid-gutter-width / 4;
				line-height: 36px;
				height: 36px;
				width: 36px;
			}
		}
	}

	// Style 2
	&.style-2 {
		background: var(--color-light);

		// Intro Image
		.features-media {
			position: relative;

			.intro-img {
				height: 100%;

				img {
					object-fit: cover;
					object-position: center center;
					height: 100%;
					width: 100%;
				}
			}

			.intro-img-2 {
				background: $white;
				border: 10px solid $white;
				border-radius: $border-radius;
				position: absolute;
				top: 10%;
				right: -100px;
				transform: rotate(-10deg);
				width: 500px;

				// HD view screen
				@media (max-width: 1500px) {
					right: -30px;
					width: 350px;
				}

				// Tablet view
				@include media-breakpoint-down(lg) {
					display: none;
				}

				img {
					border-radius: $border-radius;
				}
			}
		}

		// Content
		.features-desc {
			padding-left: 100px;

			// Tablet view
			@include media-breakpoint-down(lg) {
				padding-left: $grid-gutter-width / 2;
			}
		}

		.info-wrap {
			padding: var(--gutter-xl);
			max-width: 900px;

			@media (max-width: 1500px) {
				padding-left: 0;
			}

			.info-desc {
				margin-top: var(--gutter-sm);
			}

			.acm-action {
				margin-top: var(--gutter-normal);
			}
		}
	}

	// Style 3
	&.style-3 {
		.features-item {
			background: $white;
			border-radius: $border-radius;
			border: 1px solid $border-color;
			padding: var(--gutter-lg) var(--gutter-normal);
			height: 100%;

			// Icon
			.img-icon {
				margin-bottom: var(--gutter-normal);

				svg,img {
					max-width: 100px;
				}
			}

			// Statics
			.number {
				color: var(--color-primary);
				font-weight: 700;
				margin-top: 0;
				margin-bottom: var(--gutter-xs);
			}
		}
	}

	// Style 4
	&.style-4 {
		// Intro Image
		.intro-img {
			margin-bottom: var(--gutter-normal);

			img {
				border-radius: $border-radius;
				width: 100%;
			}
		}

		// Content
		.features-inner {
			margin-left: auto;
			margin-right: auto;
			max-width: 900px;

			p:last-child {
				margin-bottom: 0;
			}
		}
	}
}

// Testimonials
.acm-testimonial {
  // Style 1
  &.style-1 {
    .testimonial-wrap {
      

      .owl-stage-outer {
      	border: 1px solid $border-color;

        &:before {
          background-color: var(--body-bg-color);
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 2px;
        }

        &:after {
          background-color: var(--body-bg-color);
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 2px;
        }
      }

      .owl-stage {
        display: flex;

        .owl-item {
          border-left: 1px solid $border-color;
          display: flex;
          flex: 1 0 auto;
        }
      }

      .testimonial-item-wrap {
        background-image: url('../images/quotes.png');
        background-repeat: no-repeat;
        background-position: top $grid-gutter-width * 2 right $grid-gutter-width;
        padding: $grid-gutter-width * 2 $grid-gutter-width;

        // Tablet view
        @include media-breakpoint-down(xl) {
          padding: $grid-gutter-width;
          background-position: top $grid-gutter-width right $grid-gutter-width;
        }

        // Mobile view
        @include media-breakpoint-down(sm) {
          padding: $spacer-xl;
          background-position: top $spacer-xl right $spacer-xl;
        }
      }

      // Avatar
      .testimonial-img {
        margin-bottom: $grid-gutter-width;

        // Mobile view
        @include media-breakpoint-down(sm) {
          margin-bottom: $grid-gutter-width / 2;
        }

        img {
          border-radius: 50%;
          max-width: 80px;
          width: auto;
        }
      }

      // Name
      .testimonial-name {
        color: var(--color-primary);
        margin-top: $spacer;
        margin-bottom: 0;
      }

      // Position
      .testimonial-position {
        color: $gray-700;
      }
    }

    // Owl
    .owl-carousel .owl-dots {
    	position: absolute;
    	width: 100%;

    	// Tablet view
    	@include media-breakpoint-down(lg) {
    		position: static;
    	}
    }
  }
}

// Team
.acm-teams {
	// Style 1
	&.style-1 {
		overflow: hidden;

		.owl-carousel .owl-stage-outer {
			overflow: visible;
		}

		// Team Item
		.teams-item-inner {
			position: relative;

			// Intro Image
			.teams-img {
				img {
					border-radius: $border-radius;
				}
			}

			// Content
			.teams-text {
				background: rgba(255,255,255,0.7);
				border-radius: $border-radius;
				bottom: var(--gutter-sm);
				position: absolute;
				left: var(--gutter-sm);
				right: var(--gutter-sm);
				padding: var(--gutter-sm);
				text-align: center;

				// Title
				h4 {
					margin-top: 0;
				}
			}
		}
	}
}

// CTA
.acm-cta {
  &.style-1 {
    --heading-color: #fff;
    --body-text-color: rgba(255,255,255,0.8);
    color: var(--body-text-color);

    .cta-wrap {
      background: $black;
      border-radius: $border-radius;
      display: flex;
      justify-content: center;
      position: relative;
      padding: $grid-gutter-width * 2;
      text-align: center;

      @include media-breakpoint-down(lg) {
        flex-direction: column;
        padding: $grid-gutter-width;
      }
    }

    // Content
    .cta-content {
      max-width: 700px;
      position: relative;
      z-index: 2;

      // Title
      .cta-title {
        margin-top: 0;
        margin-bottom: $spacer / 2;
        text-transform: capitalize;
        font-weight: 700;
      }

      .cta-action {
        margin-top: $grid-gutter-width;
      }
    }

    // Decor
    .cta-decor {
      margin-right: $grid-gutter-width * 3;
      position: relative;
      z-index: 2;

      // Tablet view
      @include media-breakpoint-down(xxl) {
        margin-right: $grid-gutter-width;
      }

      // Mobile view
      @include media-breakpoint-down(lg) {
        margin-bottom: $grid-gutter-width;
      }
    }
    
    // Background
    .cta-bg {
      border-radius: $border-radius;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      opacity: 0.5;
      width: 100%;
    }

    // Resize on Megamenu
    .mega-col-module & {
    	.cta-wrap {
    		padding: $spacer;

    		// Title
    		h1 {
    			font-size: var(--h4-font-size);
    		}

    		// Action
    		.cta-content .cta-action {
    			margin-top: var(--gutter-xs);
    		}
    	}
    }
  }
}

// Gallery
.acm-gallery {
	// Style 1
	&.style-1 {
		padding-left: 10px;
		padding-right: 10px;

		img {
			border-radius: $border-radius;
		}
	}
}