/*==========================================================================
Contact
==========================================================================*/
.contact__area {
    &-bottom {
        position: relative;
        &-form {
            width: 510px;
            background: var(--heading-color);
            padding: 65px;
            position: absolute;
            top: -150px;
            right: 70px;
            z-index: 1;
            form {
                input{
                    background: transparent;
                    border-color: var(--color-11);
                    color: var(--color-2);
                    &:focus {
                        border-color: var(--primary-color);      
                        color: var(--color-2);                  
                    }
                }
                textarea {
                    background: transparent;
                    border-color: var(--color-11);
                    color: var(--color-2);
                    &:focus {
                        border-color: var(--primary-color);      
                        color: var(--color-2);                  
                    }
                }
            }
            &.page {
                top: -505px;                
            }
        }
        &-map {
            iframe {
                width: 100%;
                height: 570px;
                display: block;
            }
        }
    }
    &-info {
        margin-top: 30px;
        &-item {
            display: flex;
            margin-bottom: 25px;
            gap: 25px;
            &-icon {
                i {
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    color: var(--primary-color);
                    border-radius: 50%;
                    background: var(--color-6);  
                    font-size: 20px;                
                }
            }
            &-content {
                span {
                    color: var(--color-1);
                    display: inline-block;
                    margin-bottom: 5px;
                }
                h5 {
                    max-width: 240px;
                    font-weight: 600;
                    a {
                        transition: all .4s ease-out 0s;
                        &:hover {
                            color: var(--primary-color);
                        }
                    }
                }
            }
            &:last-child {
                margin: 0;
            }
        }
    }
}
@media (max-width: 1199px) {
    .contact__area {
        &-bottom {
            &-form {
                &.page {
                    right: 30px; 
                    width: 430px;     
                    padding: 40px;              
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .contact__area {
        &-bottom {
            &-form {
                width: 100%;
                position: initial;
                margin-bottom: 30px;
                &.page {
                    width: 100%;            
                }
            }
        }
    }
}
@media (max-width: 575px) {
    .contact__area {
        &-bottom {
            &-form {
                padding: 50px;
            }
        }
    }
}
@media (max-width: 475px) {
    .contact__area {
        &-bottom {
            &-form {
                padding: 50px 30px;
                &.page {
                    padding: 50px 30px;        
                }
            }
        }
    }
}