.navbar { display: flex; justify-content: space-between; background-color: var(--secondary-color); padding: 10px 5px; position: fixed; width: 100%; height: 75px; box-shadow: 1px 0px 2px var(--golden-color); z-index: 1; border-bottom: 2px solid var(--text-and-hover-color);}.logo img { height: 40px; width: 220px; animation: fadeDown 1s ease forwards;}.outter-nav { padding: 5px 5px;}.inner-nav { display: flex; justify-content: end; align-items: center; gap: 35px; padding: 5px 5px;}.inner-nav-item a { color: var(--text-color-initial); font-weight: 600;}.inner-nav-item li a { position: relative;}.inner-nav-item li a::after { content: ""; height: 3px; width: 0; background: var(--text-and-hover-color); position: absolute; bottom: -6px; left: 0; transition: 0.3s;}.inner-nav-item li a:hover::after { width: 100%;}.inner-nav-item img { height: 20px;}.active-page a { color: var(--text-and-hover-color);}.btn-tp-1 button { padding: 10px 15px; border-radius: 5px; min-width: 150px; font-weight: 700; background-color: var(--primary-color); color: var(--text-color-initial); border-style: none; cursor: pointer; transition: transform 0.5s ease-in-out;}.btn-tp-1 button:hover { background-color: var(--text-and-hover-color); color: var(--nav-and-footer-color); box-shadow: 3px 0px 6px grey; transform: scale(1.1);}.btn-tp-2 button { min-width: 150px; margin-top: 10px; padding: 10px 15px; border-radius: 5px; font-weight: 700; background-color: var(--text-and-hover-color); color: var(--text-color-initial); border-style: none; cursor: pointer; transition: transform 0.5s ease-in-out;}.btn-tp-2 button:hover { background-color: var(--text-and-hover-color); color: var(--text-color-initial); box-shadow: 3px 0px 6px grey; transform: scale(1.1);}.btn-flex { font-weight: 600; display: flex; align-items: center; gap: 5px;}#myBtn img { height: 25px;}#myBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: var(--text-and-hover-color); color: var(--text-color-initial); cursor: pointer; padding: 12px; border-radius: 4px; font-weight: 400; animation: fadeIn 1s ease-in-out;}#myBtn:hover { background-color: var(--secondary-color);}.animated-border { margin: 0 auto; padding: 2em; max-width: 700px; width: 90%; background: #1c1f2b; text-align: center; border-radius: 10px; position: relative;}@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false;}.animated-border::after,.animated-border::before { content: ""; position: absolute; height: 101%; width: 101%; background-image: conic-gradient(from var(--angle), #f2a172, #8082a6); top: 50%; left: 50%; translate: -50% -50%; z-index: -1; padding: 3px; border-radius: 10px; animation: 7s spin linear infinite;}.animated-border::before { filter: blur(1.5rem); opacity: 0.5;}.footer { display: flex; justify-content: end; padding: 15px 15px; gap: 5px; border-top: 3px solid var(--text-and-hover-color); background-color: var(--nav-and-footer-color);}.footer-list { display: flex; flex-direction: column; margin: 20px 20px;}.footer-list-item h2 { color: var(--text-color-initial); font-weight: 600; font-size: 20px;}.footer-list-item li { margin: 20px 5px; font-weight: 700; color: var(--text-body); list-style: none;}.footer-list-item a { font-weight: 600; color: var(--text-body);}.footer-list-item a:hover { color: var(--text-and-hover-color);}.logo-footer > img { height: 225px; width: 150px;}.footer-icons { display: flex; align-items: center; gap: 10px;}.footer-icons img { height: 25px; transition: transform 0.5s ease-in-out; border-radius: 50%;}.footer-icons img:hover { height: 30px; transform: scale(1.5); box-shadow: 3px 0px 6px var(--bg-light);}.flex-icons { display: flex; gap: 10px; align-items: center;}.flex-icons img { height: 20px; border-radius: 50%; transition: transform 0.5s ease-in-out;}.flex-icons img:hover { transform: scale(1.5); box-shadow: 3px 0px 6px var(--bg-light);}.rounded-bg-icons { margin-bottom: 10px; padding: 10px 10px; background-color: var(--text-color-initial); text-align: center; height: 40px; width: 40px; border-radius: 50%;}em { color: var(--bg-light);}#menu__toggle { position: absolute; left: -9999px; }@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}@keyframes spin { from { --angle: 0deg; } to { --angle: 360deg; }}@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); }}@keyframes fadeDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); }}@media (width <= 970px) { .logo img { width: 100%; } .inner-nav-item { text-align: center; margin-bottom: 30px; }#menu__toggle:checked ~ .menu__btn > span { transform: rotate(45deg); }#menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); }#menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); }#menu__toggle:checked ~ .inner-nav { visibility: visible; left: 0; }#menu__toggle:checked ~ .inner-nav li { animation: fadeIn 1s ease-in-out; } .menu__btn { display: flex; align-items: center; position: fixed; top: 20px; right: 20px; width: 26px; height: 26px; margin: 5px 5px; cursor: pointer; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: var(--text-color-initial); transition-duration: 0.25s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; }#menu__toggle { opacity: 0; } .inner-nav { flex-direction: column; place-items: center; display: block; position: fixed; visibility: hidden; top: 75px; left: -100%; width: 100%; height: 100%; margin: 0; padding: 80px 15px; opacity: 0.95; box-shadow: 1px 0px 6px var(--text-and-hover-color); transition-duration: 0.55s; z-index: 1; background-image: url(../assets/images/hero-banner-smaller.png); background-size: cover;  background-position: center;  background-repeat: no-repeat;  } .active-page a { color: var(--text-and-hover-color); } .logo-footer > img { width: 35%; } .footer { display: flex; flex-direction: column; } .footer-list { display: flex; flex-direction: column; margin: 5px 5px; }}