@use '../utils' as *;

/*----------------------------------------*/
/*  OFFCANVAS CSS START
/*----------------------------------------*/

.offcanvas {
    &__logo{
        & img {
            max-width: 128px;
        }
         
    }
    &__area {
        position: fixed;
        right: -490px;
        top: 0;
        width: 450px;
        height: 100%;
        
       
        transition-duration: .5s;
        z-index: 999;
        -ms-overflow-style: none;
        /* for Internet Explorer, Edge */
        scrollbar-width: none;
        /* for Firefox */
        overflow-y: scroll;
        min-width: 300px;
        min-height: 768px; 
        background-size: cover;
        
        &::-webkit-scrollbar {
            display: none;
            /* for Chrome, Safari, and Opera */
        }
        background-color: var(--tp-grey-1);

        &.offcanvas-opened {
            right: 0px;
        }

        @media #{$xs} {
            width: 290px;
        }
    }

    &__wrapper {
        position: relative;
        padding: 45px;
        overflow: auto;
        width: 100%;
        height: 100%;
        scrollbar-width: none;
        & .tp-btn{
            height: 45px;
            line-height: 45px;
        }
        @media #{$xs} {
            padding: 20px;
        }

    }

    &__close {
        &-btn {
            display: inline-block;
            font-size: 16px;
            height: 40px;
            width: 40px;
            line-height: 36px;
            background: var(--tp-theme-primary);
            color: #fff;

            &:hover {
                background: var(--tp-theme-secondary);
            }
        }
    }
    &-info{
        & p {
            margin-bottom: 40px;
            color: var(--tp-common-black);
        }
    }
    &__top {
        padding-bottom: 20px;
        @media #{$xs,$sm,$md} {
            margin-bottom: 0;
        }
    }

    &__cta {
        &-2{
            position: static;
        }
        position: absolute;
        bottom: 0;
        @media #{$xs,$sm,$md} {
            position: static;
        }
        
        &-title {
            color: var(--tp-common-black);
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 22px;
            margin-bottom: 20px;
            
        }

        & span {
            display: block;
            font-size: 16px;
            color: var(--tp-common-black);
            margin-bottom: 15px;
            & a  {
                &:hover {
                    color:var(--tp-theme-primary) ;
                }
            }
        }
    }
    
    
}