@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
   --primary: #165684;
   --primary-light: #1d7ab9;
   --secondary: #f8f9fa;
   --accent: #ff6b35;
   --dark: #212529;
   --light: #ffffff;
   --gray: #6c757d;
   --transition: all 0.3s ease;

   --heading:"PT Sans Narrow";
   --sub_heading:"Roboto";
   --text: Verdana, Tahoma, sans-serif;
} 
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
}
html{
    overflow-x: hidden;
}
body {
   font-family: var(--text);
   color: var(--dark);
   line-height: 1.6;
   overflow-x: hidden;
}
a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition);
}
ul {
   list-style: none;
}
img {
   max-width: 100%;
   height: auto;
}
section{
   padding: 5% 15%;
}
.btn {
   display: inline-block;
   padding: 12px 30px;
   background-color: var(--primary);
   color: var(--light);
   border-radius: 4px;
   font-weight: 500;
   transition: var(--transition);
   border: none;
   cursor: pointer;
}
.btn:hover {
   background-color: var(--primary-light);
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Navigation Styles */
#header {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 6;
}
.nav_bar {
   width: 100%;
   height: 12.5vh;
   
   padding: 0 15%;

   display: flex;
   justify-content: space-between;
   align-items: center;
   
   transition: all .5s ease;

   background-color: transparent;
}
.logo {
   width: 20%;

   display: flex;
   align-items: center;

   position: relative;
   z-index: 5;
}
.logo figure{
   width: 60px;
   height: 50px;

   display: flex;
   justify-content: center;
   align-items: center;

   padding: 5%;
   border-radius: 50%;
   overflow: hidden;

   background-color: #fff;
}
.logo h3{
   margin-left: 5%;

   font: bold 1.5rem var(--heading);

   color: var(--light);
}
.logo img {
   width: 60px;
   height: 30px;
}
.nav_list {
   width: 40%;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   list-style: none;
}
.nav_list li {
   position: relative;
}
.nav_list a {
   font: 1.2rem var(--sub_heading);
   text-decoration: none;
   color: var(--light);
   position: relative;
   padding-bottom: 5px;
   transition: all .5s;
}
.nav_list a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background-color: var(--secondary);
   transition: width 0.3s ease;
}
.nav_list a:hover::after {
   width: 100%;
}
.nav_list a.contact_btn::after{
   height: 0;
}
.nav_list a.contact_btn{
   background-color: var(--secondary);
   color: var(--primary);
   border: 2px solid var(--light);
   border-radius: 10px;
   padding: 0.5rem 1.5rem;
}
.nav_list a.contact_btn:hover {
   background-color: transparent;
   color: var(--light);
}
.lang-switcher {
   display: flex;
   gap: 0.5rem;
   position: relative;
   z-index: 5;
}
.lang-btn {
   font: 0.9rem var(--sub_heading);
   color: var(--light);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.25rem 0.5rem;
   border-radius: 3px;
   transition: all 0.3s ease;
}
.lang-btn.active {
   background-color: var(--dark);
   color: var(--light);
}
/* Hamburger Menu - Same as general.css */
.burger {
   display: none;
}
.hamburger-menu {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 10%;
   height: 100%;
}
#menu__toggle {
   opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
   transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
   top: 0;
   transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
   top: 0;
   transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
   top: 0;
   opacity: 1;
}
.menu__btn {
   position: absolute;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 45px;
   height: 55px;
   cursor: pointer;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
   display: block;
   position: absolute;
   width: 100%;
   height: 4px;
   border-radius: 15px;
   background-color: var(--light);
   transition-duration: .25s;
}
.menu__btn > span::before {
   content: '';
   top: -15px;
}
.menu__btn > span::after {
   content: '';
   top: 15px;
}
.menu__box {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: start;
   opacity: 0;
   position: absolute;
   top: -100vh;
   right: 0;
   width: 100%;
   margin: 0;
   padding: 10% 15%;
   list-style: none;
   background-color: var(--primary);
   transition-duration: .25s;
}
.menu__box li {
   display: flex;
   justify-content: center;
   align-items: center;
}
.menu__box li:first-child {
   margin-top: 15%;
}
.menu__box li a {
   display: flex;
   justify-content: start;
   align-items: center;
   position: relative;
   width: 100%;
   padding: 1.5rem;
   color: var(--light);
   font: 1.2rem var(--sub_heading);
   text-decoration: none;
   transition-duration: .25s;
}
/* Responsive adjustments */
@media screen and (max-width: 1264px) {
   .nav_list {
      display: none;
   }
   .burger {
      display: block;
   }
   .logo {
      width: 40%;
   }
}
@media screen and (max-width: 637px) {
   .logo {
      width: 50%;
   }
   .logo h3{
      font-size: 1.2rem;
   }
}
@media screen and (max-width: 453px){
   .nav_bar{
      padding: 0 5%;
   }
   .nav_bar h3{
      display: none;
   }
   .logo{
      width: 20%;
   }
   .menu__btn{
      width: 30px;
      height: 30px;
   }
   .menu__btn > span::before {
      top: -10px;
   }
   .menu__btn > span::after {
      top: 10px;
   }
}
/* Scrolled state */
#navbar.scrolled {
   background-color: var(--primary);
   height: 10vh;
}
/* Footer */
#footer {
   background-color: var(--primary);
   color: var(--light);
   padding: 5% 15% 0 15%;
}
.footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   margin-bottom: 40px;
}
.footer-column h3 {
   font-size: 1.3rem;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 10px;
}
.footer-column h3::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 50px;
   height: 2px;
   background-color: var(--accent);
}
.footer-column p {
   margin-bottom: 15px;
   opacity: 0.8;
}
.footer-links li {
   margin-bottom: 10px;
}
.footer-links a {
   opacity: 0.8;
   transition: var(--transition);
}
.footer-links a:hover {
   opacity: 1;
   padding-left: 5px;
}
.copyright {
   display: flex;
   justify-content: space-between;
   align-items: center;

   padding: 2% 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   font-size: 0.9rem;
   opacity: 0.7;
}
#footer .copyright p a{
   text-decoration: underline;
}
@media screen and (max-width: 900px){
   .copyright{
      flex-direction: column;
      text-align: center;
   }
}
.scroll-effect {
   opacity: 0;
   transition: all 0.8s ease-out;
   will-change: transform, opacity;
}
.from-left { transform: translateX(-100px); }
.from-right { transform: translateX(100px); }
.from-bottom { transform: translateY(100px); }
.scroll-effect.visible {
   opacity: 1;
   transform: translate(0, 0);
}