.phone_dropdown {position: absolute;bottom: 100%;left: 50px;width: 260px;background: white;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: flex-start;justify-content: flex-start;border: solid 1px var(--main);}
.phone_dropdown a {font-weight: 600 !important;font-size: 15px !important;color: #000 !important;padding: 7px 0;text-align: left !important;}
.btn-frame {display: block;cursor: pointer;position: fixed}
.btn-frame i {width: 50px;height: 50px;border-radius: 50%;overflow: hidden;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;background: var(--main);padding: 7px;}
.btn-frame .pulse {animation-name: pulse}
.btn-frame .pulsation {width: 70px;height: 70px;background-color: var(--main);border-radius: 50px;position: absolute;left: calc(50% - 70px / 2);top: calc(50% - 70px / 2);z-index: -1;transform: scale(0);animation: arcontactus-pulse 2s infinite}
.btn-frame .pulsation:nth-of-type(2n) {animation-delay: .5s}

#social {position: fixed;z-index: 999;left: var(--left, inherit);right: var(--right, inherit);bottom: var(--bottom, inherit);display: none}
#social .btn-frame {position: relative;margin: 20px 0}
#social .btn-frame .pulsation {background: var(--main) !important}
#social i img, #hotline i img{border-radius: 50%;}
.btn_animation--style:before { content: ""; position: absolute; margin: 0 auto; inset: 0; width: 100%; background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); height: 60px; animation: rotate360 4s linear infinite; transition: all 0.2s linear; z-index: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; pointer-events: none; -webkit-animation: rotate360 4s linear infinite; }  
.btn_animation--style:after { content: ""; position: absolute; background: white; inset: 4px; border-radius: 4px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } 

.toolbar { width: 100%; bottom: 0px; position: fixed; z-index: 500; left: 0px; display: none; -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -moz-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -ms-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -o-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); } 
.toolbar.is-active .list-phone { display: block; -webkit-animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards; animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards; } 
.toolbar .list-phone { position: absolute; bottom: 100%; left: 30px; opacity: 0; transform: scale(0); transform-origin: 50% 100%; display: none; } 
.toolbar .list-phone a { display: flex; flex-wrap: wrap; align-items: center; justify-content: start; background: var(--main); max-width: 240px; padding: 5px 10px; margin: 10px 0; border-radius: 50px; padding-right: 30px; } 
.toolbar .list-phone svg { max-width: 26px; max-height: 26px; } 
.toolbar .list-phone span { display: block; width: calc(100% - 40px); color: white; font-weight: 700; white-space: nowrap; } 
.toolbar .phone { position: relative; width: 50px; height: 50px; z-index: 99; display: flex; align-items: center; justify-content: center; background: var(--main); border-radius: 50%; margin: 0 0px -25px 30px; transition: transform .2s ease-in-out; } 
.toolbar .phone a { color: white; display: block; position: relative; } 
.toolbar .phone a:before,
.toolbar .phone a:after { position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); width: 30px; height: 3px; border-radius: 2rem; background-color: var(--main); opacity: 0; transition: opacity .2s ease-in-out; } 
.toolbar .phone a:after { transform: translate(-50%, -50%) rotate(45deg); } 
.toolbar .phone svg { max-width: 27px; max-height: 27px; display: block; position: relative; fill: var(--main); } 
.toolbar.is-active .phone { transform: rotate(-180deg); } 
.toolbar.is-active .phone img { opacity: 0; } 
.toolbar.is-active .phone a:before,
.toolbar.is-active .phone a:after { opacity: 1; } 
.toolbar ul { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0px; margin: 0px; --size: 33px; -webkit-mask: radial-gradient(var(--size) at 55px 0px, #0000 99%, #fff 101%) 100%; background: var(--background); padding: 5px 0; padding-left: 90px; border-radius: 10px 10px 0px 0px; } 
.toolbar ul li { text-align: center; width: 25%; line-height: 1; } 
.toolbar ul li a { display: block; width: 100%; color:var(--main); } 
.toolbar ul li .icon { position: relative; margin: 0 auto; text-align: center; } 
.toolbar ul li a span { display: inline-block; font-weight: 400; font-size: 9px; margin-top: 5px; color: white; text-transform: capitalize; } 
.toolbar ul li a img,
.toolbar ul li svg { fill: var(--main);} 
.toolbar .phone img { animation: tada 1.2s infinite; fill: var(--main); } 
.tada { animation: tada 1.2s infinite; } 
.lang-toolbar { display: flex; justify-content: center; align-items: center; } 
.toolbar ul li.lang-toolbar a { display: inline-block; width: unset; margin: 0px 2px; font-size: unset; } 
.toolbar ul li.lang-toolbar a img { height: 10% !important; } 
.ex6 path { fill: transparent; stroke: var(--main); stroke-width: 0.5; stroke-dasharray: 1500; stroke-dashoffset: 1500; -webkit-animation: dash 5s ease forwards; animation: dash 5s ease forwards; } 
@-webkit-keyframes dash { to { fill: var(--main); stroke-dashoffset: 0; } }
@keyframes dash { to { fill: var(--main); stroke-dashoffset: 0; } }
@keyframes tada { 
 0% { transform: scaleX(1) } 10%,20% { transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%,50%,70%,90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } 
 to { transform: scaleX(1) } 
 }
@keyframes quickShow { 
 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } 
 }
@keyframes arcontactus-pulse {
    0% {-webkit-transform: scale(0);transform: scale(0);opacity: 1}
    50% {opacity: .5}
    100% {-webkit-transform: scale(1);transform: scale(1);opacity: 0}
}
@keyframes rotate360 { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } 
}