/* button css */
.rr-btn-group { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font_dmsans); }
.rr-btn-group.btn-whte .b { border: 1px solid white; color: var(--white); }
.rr-btn-group.btn-whte .c { border: 1px solid white; color: var(--white); }
.rr-btn-group span { letter-spacing: 0; }
.rr-btn-group:hover .b { transform: rotate(-20deg); }
.rr-btn-group:hover .c { transform: translate(-7px, 0px); }
.rr-btn-group .b { padding: 9px 25px; font-weight: 500; font-size: 18px; line-height: 1; color: var(--black); background-color: transparent; border: 2px solid var(--black); border-radius: 50px; transition: all 0.3s; }
.rr-btn-group .c { padding: 9px 11px; font-weight: 500; font-size: 18px; line-height: 1; color: var(--black); background-color: transparent; border: 2px solid var(--black); border-radius: 50px; transition: all 0.3s; }
.rr-btn-group .c i { rotate: -30deg; }

.rr-btn {
  justify-content: center; position: relative; overflow: hidden; z-index: 5; padding: 19px 34px; background-color: var(--theme); color: var(--white); border: 1px solid var(--theme); border-radius: 100px; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; text-transform: capitalize; white-space: nowrap;
}
.dark .rr-btn { color: var(--black); }
@media only screen and (max-width: 767px) { .rr-btn { padding: 16px 29px; font-size: 14px; } }
.rr-btn:hover::before, .rr-btn:focus::before { height: 100%; }
.rr-btn:hover .btn-wrap .text-one, .rr-btn:focus .btn-wrap .text-one { transform: translateY(-150%); }
.rr-btn:hover .btn-wrap .text-two, .rr-btn:focus .btn-wrap .text-two { top: 50%; transform: translateY(-50%); color: var(--black); }
.dark .rr-btn:hover .btn-wrap .text-two, .dark .rr-btn:focus .btn-wrap .text-two { color: var(--white); }
.rr-btn:after { display: block; clear: both; content: ""; }
.rr-btn::before { background-color: var(--white); content: ""; width: 100%; height: 0; bottom: 0; position: absolute; transition: all 0.5s; }
.dark .rr-btn::before { background-color: var(--black); }
.rr-btn .btn-wrap { z-index: 1; float: left; overflow: hidden; position: relative; display: inline-block; border: none; }
.rr-btn .btn-wrap .text-one, .rr-btn .btn-wrap .text-two { display: flex; gap: 10px; align-items: center; }
.rr-btn .btn-wrap .text-one { position: relative; color: var(--white); transition: all 0.5s; }
.dark .rr-btn .btn-wrap .text-one { color: var(--black); }
.rr-btn .btn-wrap .text-two { position: absolute; top: 100%; color: var(--white); transition: all 0.5s; }
.dark .rr-btn .btn-wrap .text-two { color: var(--black); }