.reg-button {
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    border: none;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--clr);
    color: #fff;
    border-radius: 10rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
  }
  
  .button__icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    position: relative;
    color: var(--clr);
    background-color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  .reg-button:hover {
    background-color: #000;
  }
  
  .reg-button:hover .button__icon-wrapper {
    color: #000;
  }
  
  .button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
  }
  
  .reg-button:hover .button__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
  }
  
  .reg-button:hover .button__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
  }
  
  .cssbuttons-io-button {
    display: flex;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    padding: 0.7em 1.4em 0.7em 1.1em;
    color: white;
    background: #ad5389;
    background: linear-gradient(
      0deg,
      rgba(20, 167, 62, 1) 0%,
      rgba(102, 247, 113, 1) 100%
    );
    border: none;
    box-shadow: 0 0.7em 1.5em -0.5em #7808D0;
    letter-spacing: 0.05em;
    border-radius: 20em;
  }
  
  .cssbuttons-io-button svg {
    margin-right: 6px;
  }
  
  .cssbuttons-io-button:hover {
    box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
  }
  
  .cssbuttons-io-button:active {
    box-shadow: 0 0.3em 1em -0.5em #14a73e98;
  }
  
  .icon12 {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
  }
  
  .view-button {
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    padding: 10px 20px;
    border-radius: 100px;
    background: #7808D0;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  
  .view-button:hover {
    background: #c4e201;
  }
  
  .view-button > svg {
    width: 34px;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
  }
  
  .view-button:hover svg {
    transform: translateX(5px);
  }
  
  .view-button:active {
    transform: scale(0.95);
  }
  
  .top-nav {
    background-color: #466f05;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .col-auto p {
    display: inline-block;
    margin-bottom: 0;
    columns: #fff;
    margin-right: 10px;
  }
  
  .top-nav span,
  .top-nav i {
    vertical-align: middle;
  }
  
  .notice-board {
    height: 400px;
  
    overflow: hidden;
    position: relative;
  }
  
  .scrolling-content {
    position: absolute;
    width: 100%;
    animation: scroll 10s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      top: 100%;
    }
  
    100% {
      top: -100%;
    }
  }
  
  .text-bolder {
    font-weight: bold;
  }
  
  .text-danger {
    color: red;
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar {
    width: 10px;
    background-color: #f5f5f5;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #fff;
    background-image: -webkit-gradient(
      linear,
      40% 0%,
      75% 84%,
      from(#9c415f),
      to(#19911d),
      color-stop(0.6, #de8754)
    );
  }
  
  :root {
    --circle-size: clamp(1.5rem, 5vw, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
  }
  
  .nav-link a:hover {
    color: #ff0000;
  }
  
  .form-container {
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 10px;
  }
  label {
    font-size: 1rem;
}
.page-wrapper {
bottom: 0;
width: 100%;
z-index: 11111;
top: 35px;
}

footer p,
footer strong,
footer b,
footer {
color: #b0b0b0;
}

.footer-top {
background: #303030;
background-size: cover;
}

.footer-top,
.footer-bottom {
background-color: #1c1f2f;
}

.footer-bottom {
padding: 15px 0;
border-top: 1px solid #313646;
background-color: #181828 !important;
color: #b0b0b0;
}

.footer-site-info {
font-size: 92.86%;
}
#footer-navigation,
#footer-navigation li a:hover,
.custom-footer,
.custom-footer li a:hover {
color: white;
}

#footer-navigation,
#footer-navigation li a,
.custom-footer,
.custom-footer li a {
color: #99a9b5;
padding-top: 15px;
}

.footer-bottom ul {
margin: 0;
}
.inline-inside {
font-size: 0;
line-height: 0;
}
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
#footer-menu li {
display: inline-block;
padding: 0 21px;
position: relative;
line-height: 1;
}

#footer-navigation li a,
.custom-footer,
.custom-footer li a {
color: #99a9b5;
padding-top: 15px;
}

#footer-menu li + li:before {
content: "";
width: 0;
height: 100%;
position: absolute;
left: -1px;
top: 0;
font-size: 0;
border-left: 1px solid #232234;
border-right: 1px solid #333146;
}


.custom-footer,
.custom-footer li a {
color: #99a9b5;
padding-top: 15px;
}

#footer-socials {
text-align: right;
}

#footer-socials .socials {
text-align: right;
margin: 0 -7px;
display: inline-block;
vertical-align: middle;
}

a.socials-item {
display: inline-block;
vertical-align: top;
text-align: center;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
margin: 0 5px;
line-height: 16px;
padding: 10px;
border-radius: 50%;
background-color: #141421;
border: 1px solid #2e2e4c;
box-shadow: 3px 9px 16px rgb(0, 0, 0, 0.4),
-3px -3px 10px rgba(255, 255, 255, 0.06), inset 14px 14px 26px rgb(0, 0, 0, 0.3),
inset -3px -3px 15px rgba(255, 255, 255, 0.05);
}

.socials-item i {
display: inline-block;
font-weight: normal;
width: 1em;
height: 1em;
line-height: 1;
font-size: 16px;
text-align: center;
vertical-align: top;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
text-rendering: auto;
}

.facebook {
color: #4e64b5;
}

.twitter {
color: #00aced;
}
.instagram {
color: #9a8f62;
}
.youtube {
color: #c82929;
}

.telegram {
color: #2ca5e0;
}

a.socials-item:hover {
box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
border-color: rgba(255, 6, 224, 0.61);
background: linear-gradient(
to right,
rgba(255, 9, 9, 0.12941176470588237),
#c000ffb5,
rgba(255, 0, 94, 0.14)
);
}

.footer-bottom a:hover {
color: white;
}

footer p,
footer li {
font-size: 15px;
line-height: 22px;
}

.widget {
margin-bottom: 50px;
}

.footer-title {
margin-bottom: 40px;
color: #fff;
font-weight: 500;
text-transform: capitalize;
padding-bottom: 15px;
font-size: 16px;
position: relative;
}

.footer-title:after {
width: 50px;
background: #fff;
opacity: 0.2;
height: 1px;
content: "";
position: absolute;
bottom: 0;
left: 0;
}

.gem-contacts-item {
padding-top: 10px;
font-size: 15px;
}

.gem-contacts-item i {
padding-right: 10px;
}

footer .widget ul {
list-style: none;
margin-top: 5px;
}

.posts li {
border-bottom: 1px solid #393d50;
padding-bottom: 12px;
padding-top: 6px;
}

footer li {
font-size: 15px;
line-height: 22px;
}

.gem-pp-posts-date {
color: #00bcd4;
font-size: 89.5%;
}

footer p {
line-height: 24px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bolder;
}

.wpcf7-form-control-wrap .wpcf7-form-control {
padding: 7px !important;
width: 100%;
}

.wpcf7-form-control-wrap input {
background: #1c1f2f;
overflow: hidden;
border: 1px solid #2e344d;
background-color: #1c1f2f;
box-shadow: 10px 10px 36px rgb(0, 0, 0, 0.5),
-13px -13px 23px rgba(255, 255, 255, 0.03);
border-radius: 5px;
transition: all 0.3s ease-in-out 0s;
}

.wpcf7-form-control-wrap input:hover {
background-color: transparent;
box-shadow: 10px 10px 36px rgb(0, 0, 0, 0.5),
-13px -13px 23px rgba(255, 255, 255, 0.03),
inset 14px 14px 70px rgb(0, 0, 0, 0.2),
inset -15px -15px 30px rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.2);
color: white;
}

.wpcf7 .wpcf7-form .contact-form-footer textarea {
height: 160px;
width: 100%;
}

.wpcf7-form-control-wrap textarea:hover {
background-color: transparent;
box-shadow: 10px 10px 36px rgb(0, 0, 0, 0.5),
-13px -13px 23px rgba(255, 255, 255, 0.03),
inset 14px 14px 70px rgb(0, 0, 0, 0.2),
inset -15px -15px 30px rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.2);
color: white;
}

.wpcf7-form-control-wrap textarea {
background: #1c1f2f;
overflow: hidden;
border: 1px solid #2e344d;
background-color: #1c1f2f;
box-shadow: 10px 10px 36px rgb(0, 0, 0, 0.5),
-13px -13px 23px rgba(255, 255, 255, 0.03);
border-radius: 5px;
transition: all 0.3s ease-in-out 0s;
}

textarea {
overflow: auto;
resize: vertical;
}

.wpcf7 .wpcf7-form .contact-form-footer .wpcf7-submit {
width: 100%;
padding: 11px;
margin: 0;
line-height: 0;
}
.wpcf7-form .contact-form-footer .wpcf7-submit {
background-color: #394050;
color: #99a9b5;
border: none;
cursor: pointer;
padding: 15px 40px;
font-size: 14px;
font-weight: 400;
transition: all 0.5s;
letter-spacing: 2px;
box-shadow: none;
text-transform: uppercase;
outline: none !important;
border-radius: 5px;
min-width: 140px;
border-width: 1px 0px 0px 1px;
border-style: solid;
border-color: #2e344d;
}

.wpcf7-form input[type="submit"] {
height: 40px;
line-height: 21px;
padding: 10px 40px;
font-size: 14px;
}

.posts li a {
color: #99a9b5;
}

.wpcf7-form .contact-form-footer .wpcf7-submit:hover {
box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
border-color: rgba(255, 6, 224, 0.61);
background: linear-gradient(
to right,
rgba(255, 9, 9, 0.12941176470588237),
#c000ffb5,
rgba(255, 0, 94, 0.14)
);
color: white;
}

img {
border-style: none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.widget_gallery a {
display: inline-block;
}

.widget_gallery ul {
padding-left: 0;
display: table;
}

.widget_gallery li {
display: inline-block;
width: 33.33%;
float: left;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
padding: 2px;
}

.widget_gallery.gallery-grid-4 li {
width: 30%;
}

#waterdrop {
height: 30px;
}

#waterdrop canvas {
bottom: -70px !important;
}




@media (max-width: 768px) {
.logo-left img,
.logo-right img {
height: 50px; 
width: auto; 
}

.logo-center h3 {
font-size: small;
}

.sticky-header {
padding: 5px; 
}


.container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap; 
}

.logo-left,
.logo-right {
flex: 0 0 auto; 
margin: 0; 
}

.logo-center {
flex: 1 1 auto;
text-align: center;
}
.login-box{
width: fit-content;
}

}