@use '../utils' as *;

/*=============================
    	15. location
===============================*/


.td-location{
    &-2{
        &-addres{
            & span{
                font-weight: 500;
                font-size: 20px;
                color: var(--td-common-white);
            }
            & p{
                font-family: var(--td-ff-poppins);
                font-weight: 500;
                line-height: 28px;
                color: var(--td-common-white);
            }
            & a{
                font-family: var(--td-ff-poppins);
                font-weight: 500;
                line-height: 28px;
                color: var(--td-common-white);
                &:hover{
                    color: var(--td-theme-secondary);
                }
            }
            & .td-border{
                width: 3px;
                height: 83px;
                background: #503895;
                margin-left: 64px;
                margin-right: 60px;
                margin-top: 5px;
                @media #{$xl,$lg,$md,$sm,$xs} {
                    margin-left: 30px;
                    margin-right: 30px;  
                }
            }
        }
        &-map{
            @media #{$lg,$md,$sm,$xs} {
                margin-left: 0;
            }
            & iframe{
                width: 100%;
                height: 100%;
                filter: saturate(0);
                clip-path: polygon(0 0, 94% 0%, 100% 10%, 100% 80%, 100% 100%, 7% 100%, 0% 87%, 0% 20%);
                border-radius: 30px;
                @media #{$lg,$md,$sm} {
                    height: 500px;
                }
                @media #{$xs} {
                    clip-path: polygon(0 0, 100% 0%, 100% 10%, 100% 100%, 100% 100%, 7% 100%, 0% 100%, 0% 20%);
                    height: 300px;
                }
            }
        }
    }
}