/*---------------------------------
    Footer CSS 
-----------------------------------*/
.footer-area{
    &.style-one{
        background-color: var(--primaryColor);
        .footer-bottom{
            padding: 38px 0;
        }
    }
    &.style-two{
        background-color: var(--primaryColor);
        .footer-bottom{
            padding: 27px 0;
            border-top: 1px solid rgba(153,168,171,0.35);
        }
    }
    .contact-num{
        font-size: 24px;
    }
    .footer-bottom{
        
        .footer-bottom-menu{
            li{
                margin-right: 16px;
                padding-right: 23px;
                display: inline-block;
                position: relative;
                &::after{
                    position: absolute;
                    top: 50%;
                    right: 0;
                    content: "|";
                    font-size: 18px;
                    color: var(--grayColor);
                    transform: translateY(-50%);
                }
                &:last-child{
                    padding-right: 0;
                    margin-right: 0;
                    &:after{
                        display: none;
                    }
                }
                a{
                    color: var(--grayColor);
                    &:hover{
                        color: var(--secondaryColor);
                    }
                }
            }
        }
    }
    .logo-text {
        display: block;
        width: 100%;
        white-space: nowrap;
        font-weight: 700;
        font-family: var(--secondaryFont);
        line-height: 1;
        font-size: clamp(14.7rem, 10vw, 5rem);
        line-height: 19vh;
        position: relative;
        left: -5px;
        letter-spacing: 0.02em;
    }
}
.footer-widget{
    .footer-menu{
        &.style-one{
            columns: 2;
        }
        li{
            margin-bottom: 8px;
            &:last-child{
                margin-bottom: 0;
            }
            a{
                position: relative;
                color: var(--grayColor);
                &:after {
                    position: absolute;
                    content: "";
                    top: 100%;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--secondaryColor);
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: transform 0.5s;
                }
                &:hover{
                    color: var(--whiteColor);
                    &:after {
                        transform: scaleX(1);
                        transform-origin: left;
                    }
                }
            }
        }
    }
    .newsletter-form{
        &.style-one{
            input{
                height: 54px;
                background-color: #043138;
                padding: 12px 16px;
                &::placeholder{
                    color: var(--grayColor);
                    opacity: 1;
                }
            }
            button{
                padding: 9px 14px 6px;  
                i{
                    color: var(--secondaryColor);
                    font-size: 20px;
                    line-height: 1;
                }  
            }
        }
    }
}
// Max width 767px //
@media only screen and (max-width: 767px) {
    .footer-widget{
        .footer-widget-title{
            font-size: 22px;
            margin-bottom: 15px;
        }
    }
    .footer-area{
        .logo-text {
            font-size: clamp(5.4rem, 10vw, 5.4rem);
            line-height: 10vh;
            margin-bottom: 15px;
        }
    }
}
// Max width 991px //
@media only screen and (max-width: 991px) {
    .footer-area{
        .footer-bottom {
            .footer-bottom-menu {
                li{
                    margin-right: 10px;
                    padding-right: 14px;
                }
            }
        }
    }
}
// Min width 992px //
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-area{
        .logo-text {
            font-size: clamp(7.2rem, 10vw, 7.2rem);
            line-height: 10.5vh;
        }
    }
}

// Min width 992px //
@media only screen and (min-width: 992px) {
    .footer-area{
        &.style-one{
            position: sticky;
            bottom: 0;
        }
        .logo-text {
            font-size: clamp(10.2rem, 10vw, 10.2rem);
            line-height: 16.5vh;
        }
    }
}
// Min width 992px //
@media only screen and (min-width: 1200px) {
    .footer-area{
        .logo-text {
            font-size: clamp(11.8rem, 10vw, 11.8rem);
        }
        &.style-two{
            .logo{
                margin-top: 8px;
            }
        }
    }
}
// Min width 1400px //
@media only screen and (min-width: 1400px) {
    .footer-area{
        .logo-text {
            font-size: clamp(14.7rem, 10vw, 14.7rem);
        }
    }
}