آموزش ساخت باکس تماس با ما در المنتور

selector {
    min-height: 200px;
    overflow: hidden;
    max-width:90%;
    border-radius:60px;
background: linear-gradient(0deg, rgba(255,230,230,1) 0%, rgba(255,255,255,1) 100%);
    padding-bottom:370px;
    padding-top:50px;
    box-shadow: 0px 11px 30px -7px rgba(253, 253, 253, 0.55);
    overflow: hidden;
}

selector .bottom-bar {
    background: linear-gradient(0deg, rgba(174,126,219,1) 0%, rgba(255,255,255,0.3) 100%);
       height:120px;
    backdrop-filter: blur(5px);
    transition:all 0.7s ;
    position:absolute;
    bottom:0px;
    right: 0px;
    border-radius:60px;
    border:2px solid rgba(255,255,255,0.7);
    z-index:100;

}


selector .bottom-bar:hover {
    height:230px;
}


selector .chev-icon {
    transition:all 0.5s ease;
}
selector:hover .chev-icon {
    transform: rotate(180deg) translateY(10px);
}
selector:hover .inner-grid {
    opacity:1;
}



selector .inner-grid {
        opacity:0;
    transition:all 0.5s ease;
}

selector .bottom-bar:hover .inner-grid {
    opacity:1;
}


selector .top-bar {
    min-height: 37px;
    position:absolute;
    right:0px;
    top:0px;
    padding:20px;
    z-index:1;
    border-radius:60px 60px 0px 0px;
    border:2px solid #ffffff;
    box-shadow:0px 3px 10px -3px rgba(0,0,0,0.3);
}
selector .contact-image {
    position:absolute;
    height: 450px;
    z-index:2;
    transition: all 0.5s ease;
}

selector:hover .contact-image {
    transform: scale(1.08,1.08);
}