$slick-dot-width: 20px;
$slick-dot-height: 20px;
$slick-dot-color: white;
$slick-dot-color-active: $slick-dot-color;
$slick-opacity-default: 0.75;
$slick-opacity-on-hover: 1;
$slick-opacity-not-active: 0.25;

.hero-1 {

    .slide-bg {
        padding: 200px 0;
        position: relative;

        @include breakpoint (max-xl){
            padding: 150px 0;
        }

        @include breakpoint (max-md){
            padding: 130px 0;
        }

        @include breakpoint (max-sm){
            padding: 100px 0;
        }

        &::before {
            @include before;
            background: $color-gradient-2;
        }
    }

    .hero-content {
        position: relative;
        z-index: 1;

        @include breakpoint (max-sm){
           text-align: center;
           margin: 0 auto;
        }

        h4 {
            color: $white;
            margin-bottom: 30px;
            position: relative;

            @include breakpoint (max-sm){
                font-size: 20px;
            }

            &::before {
                position: absolute;
                bottom: -10px;
                left: 10px;
                content: "";
                background-image: url(../../assets/img/hero/bar.png);
                width: 241px;
                height: 8px;
                background-repeat: no-repeat;
                background-size: cover;

                @include breakpoint (max-sm){
                   left: 50%;
                   transform: translateX(-50%);
                }
            }
        }

        h1 {
            color: $white;

            @include breakpoint (max-xxl){
                font-size: 74px;
            }

            @include breakpoint (max-xl){
                font-size: 70px;
            }

            @include breakpoint (max-lg){
                font-size: 60px;
            }

            @include breakpoint (max-md){
                font-size: 42px;
            }

            @include breakpoint (max-sm){
                font-size: 32px;
                line-height: 120%;
            }
        }

        .hero-button {
            margin-top: 50px;

            @include breakpoint (max-md){
               margin-top: 40px;
            }

            @include breakpoint (max-sm){
                margin-top: 30px;
            }
        }
    }

    .frame-shape {
        position: relative;
        z-index: 1;
        animation: rounded 6s linear infinite;

        @include breakpoint (max-sm){
           display: none;
        }
    }

    // Change animation presets
	.single-slide [data-animation-in] {
		opacity: 0;
		animation-duration: 1s;
		transition: opacity 0.5s ease 0.3s;
		transition: 1s;
        
	}

	.slick-nav {
		width: 44px;
		height: 44px;
		position: absolute;
		cursor: pointer;
		top: calc(50% - 44px);

		&.prev-arrow {
			left: 3%;
			transform: scaleX(-1);
			z-index: 999;

		}
		&.next-arrow {
			left: auto;
			right: 3%;
		}
		i {
			display: block;
			position: absolute;
			margin: -10px 0 0 -10px;
			width: 20px;
			height: 20px;
			left: 50%;
			top: 50%;
            
			&:before,
			&:after {
				content: "";
				width: 10px;
				height: 2px;
				border-radius: 1px;
				position: absolute;
				left: 50%;
				top: 50%;
				background: #fff;
				margin: -1px 0 0 -5px;
				display: block;
				transform-origin: 9px 50%;
                @include breakpoint (max-md){
                    display: none;
                }
			}
			&:before {
				transform: rotate(-40deg);
			}
			&:after {
				transform: rotate(40deg);
			}
		}
		&::before,
		&::after {
			content: "";
			display: block;
			position: absolute;
			left: 1px;
			right: 1px;
			top: 1px;
			bottom: 1px;
			border-radius: 50%;
			border: 2px solid rgba(255, 255, 255, 0.12);
            @include breakpoint (max-md){
                display: none;
            }
		}
		svg {
			width: 44px;
			height: 44px;
			display: block;
			position: relative;
			z-index: 1;
			color: #fff;
			stroke-width: 2px;
			stroke-dashoffset: 126;
			stroke-dasharray: 126 126 0;
			transform: rotate(0deg);
		}
		&.animate {
			svg {
				animation: stroke 1s ease forwards 0.3s;
			}
			i {
				animation: arrow 1.6s ease forwards;
				&:before {
					animation: arrowUp 1.6s ease forwards;
				}
				&:after {
					animation: arrowDown 1.6s ease forwards;
				}
			}
		}
	}

	.animated {
		transition: all 0.5s ease-in-out;
	}
}

.hero-2 {
    background-color: $bg-color-5;
    padding: 50px 0;

    .text-transparent {
        position: absolute;
        top: 75%;
        left: -5%;
        transform: translateY(-50%) rotate(-90deg);

        h2 {
            font-size: 80px;
            font-weight: 600;
            text-transform: uppercase;
            line-height: 1;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: $text-color;
            -webkit-text-fill-color: transparent;
            opacity: 0.2;
        }

        @include breakpoint (max-xl4){
            display: none;
        }
    }

    @include breakpoint (max-lg){
       padding-bottom: 0;
    }

    .hero-content {
        @include breakpoint (max-md){
           padding-top: 40px;
        }

        @include breakpoint (max-xl){
            padding-top: 60px;
        }

        @include breakpoint (max-sm){
            text-align: center;
            padding-top: 30px;
         }

        h5 {
            font-weight: bold;
            border-bottom: 2px solid $theme-color;
            display: inline-block;
            color: $theme-color;
            margin-bottom: 30px;

            @include breakpoint (max-sm){
                font-size: 20px;
                margin-bottom: 20px;
            }
        }

        h1 {
            font-size: 70px;
            line-height: 114%;
            margin-bottom: 30px;

            @include breakpoint (max-xxl){
                font-size: 64px;
            }

            @include breakpoint (max-xl){
                font-size: 60px;
            }

            @include breakpoint (max-lg){
                font-size: 48px;
            }

            @include breakpoint (max-md){
                font-size: 36px;
            }

            @include breakpoint (max-sm){
                font-size: 28px;
                margin-bottom: 15px;
            }

            span {
                position: relative;
                
                &::before {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    content: "";
                    width: 190px;
                    height: 11px;
                    background-image: url(../../assets/img/hero/line.png);
                    background-repeat: no-repeat;
                    background-size: cover;

                    @include breakpoint (max-md){
                        display: none
                    }
                }
            }
        }

        .hero-button {
            @include flex;
            gap: 33px;
            margin-top: 50px;

            @include breakpoint (max-sm){
                margin-top: 30px;
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }

    .hero-image {
        width: 730px;
        height: 803px;
        margin-left: -100px;
        position: relative;
        z-index: 9;
        margin-bottom: -50px;

        @include breakpoint (max-xl4){
            margin-left: -250px;
        }

        @include breakpoint (max-xxl){
            width: 550px;
            height: 630px;
            margin-left: -150px;
        }

        @include breakpoint (max-xl){
            margin-left: -220px;
        }

        @include breakpoint (max-lg){
            text-align: center;
            max-width: 600px;
            height: initial;
            width: initial;
            margin-left: 0;
            margin: 0 auto;
        }

        @include breakpoint (max-sm){
            text-align: center;
            max-width: 420px;
        }

        img {
            @include imgw;
        }

        .circle-shape {
            position: absolute;
            top: 12%;
            left: 15%;
            width: 582px;
            height: 582px;
            z-index: -1;
            animation: handed 18s linear infinite;
            
            @include breakpoint (max-xxl){
               left: -3%;
            }

            @include breakpoint (max-xl){
                left: 8%;
             }

            @include breakpoint (max-md){
                left: -2%;
                top: 0;
             }

            @include breakpoint (max-sm){
                display: none;
            }
        }

        .frame-shape {
            width: 86px;
            position: absolute;
            top: 30%;
            left: 12%;
            animation: rounded 4s linear infinite;

            @include breakpoint (max-sm){
                display: none;
            }
        }

        .frame-shape-2 {
            position: absolute;
            width: 84px;
            top: 15%;
            right: 12%;
            animation: rounded 5s linear infinite;

            @include breakpoint (max-sm){
                display: none;
            }
        }

        .frame-shape-3 {
            position: absolute;
            width: 67px;
            top: 40%;
            right: 0%;
            animation: rounded 6s linear infinite;

            @include breakpoint (max-sm){
                display: none;
            }
        }
    }
}

.hero-3 {
    position: relative;

    .slider-button {
        @include breakpoint (max-md){
            display: none;
        }

        .hero-nav-prev {
            font-size: 18px;
            color: $white;
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            line-height: 40px;
            border: 1px solid $border-color-2;
            text-align: center;
            @include transition;

            &:hover {
                background-color: $theme-color-2;
                color: $white;
                border: 1px solid transparent;
            }
        }

        .hero-nav-next {
            font-size: 18px;
            color: $white;
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            line-height: 40px;
            border: 1px solid $border-color-2;
            text-align: center;
            @include transition;

            &:hover {
                background-color: $theme-color-2;
                color: $white;
                border: 1px solid transparent;
            }
        }
    }

    .slide-bg {
        position: relative;
        padding: 190px 0;

        @include breakpoint (max-xl){
            padding: 160px;
        }

        @media (max-width: 1191px) {
            padding: 120px;
        }

        @media (max-width: 991px) {
            padding: 100px 0px;
        }

        @media (max-width: 767px) {
            padding: 100px 0px;
        }

        &::before {
            @include before;
            background: rgba(16, 10, 47, 0.58);
        }

        .hero-content {
            position: relative;
            z-index: 9;
            text-align: center;

            br {
                @include breakpoint (max-lg){
                    display: none;
                }
            }

            h4 {
                color: $white;
                position: relative;
                margin-bottom: 20px;

                @include breakpoint (max-md){
                   font-size: 18px;
                }

                @include breakpoint (max-sm){
                    font-size: 16px;
                }

                &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    right: 0;
                    content: "";
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-image: url(../../assets/img/hero/line-circle.png);
                    width: 330px;
                    height: 50px;
                }
            }

            h1 {
                color: $white;

                @include breakpoint (max-xxl){
                    font-size: 70px;
                }
    
                @include breakpoint (max-xl){
                    font-size: 68px;
                }

                @media (max-width: 1191px) {
                    font-size: 56px;
                }
    
                @media (max-width: 991px) {
                    font-size: 42px;
                    line-height: 1.3;
                }

                @media (max-width: 767px) {
                    font-size: 32px;
                }
            }

            .hero-button {
                margin-top: 50px;

                @include breakpoint (max-md){
                   margin-top: 30px;
                }
            }
        }
    }
}