/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import "../plugins/fontawesome/css/all.min.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*----------------------------
   element      
----------------------------*/

:root {
   --black:#000000;
   --gray:#374151;
   --lightgray:#9CA3AF;
   --orange:#F47409;
   --red:#F50008;
   --green:#22C55E;
   --blue:#3B82F6;
   --purple:#A855F7;
   --cyan:#2DAC89;
   --cyan1:#B7F6FB;
   --yellow:#DFFF00;
   --white:#ffffff;
   --border:#CED4DA;
   --body:#F4F4F4;
   --white:#ffffff;

   --lightblue:#ECF3FF;
   --lightgreen:#E9FAEF;
   --lightred:#FEE6E7;
   --lightorange:#FEF2E7;
   --lightpurple:#F7EEFF;
   --sidebar-width: 250px;
}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
*{margin:0; padding:0}
a{ text-decoration:none;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 12px;background:var(--body);  font-family: "Inter", sans-serif;line-height: 26px;color:#455A64;-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #455A64;-webkit-font-smoothing: antialiased;}
:-ms-input-placeholder{color: #000;}

.wd10{width: 10%;}
.wd20{width: 20%;}
.wd30{width: 30%;}
.wd40{width: 40%;}
.wd50{width: 50%;}
.wd60{width: 60%;}
.wd70{width: 70%;}
.wd80{width: 80%;}
.wd90{width: 90%;}
.wd100{width:100%;}

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width:5px;
}
::-webkit-scrollbar:horizontal {
    height: 5px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color:var(--orange);
}
::-webkit-scrollbar-track { 
    background-color: var(--lightorange); 
    border-radius: 8px; 
} 


/*----------------------------
   header      
----------------------------*/
.header-navbar {background:var(--white);    box-shadow: 0 4px 10px rgb(0 0 0 / 5%); border-bottom: 1px solid var(--border); padding: 15px 0; position: relative; }
.header-navbar-info {display: flex; justify-content: space-between; align-items: center; }
.logo img {height: 80px; }

.nav-menu {display: flex; align-items: center; gap: 40px; }
.nav-menu ul.header-menu {display: flex; gap: 10px; list-style: none;     margin: 0;}
.nav-menu ul li {position: relative; }
.nav-menu ul li a {padding:12px 10px; color: var(--gray); font-weight: 600; text-decoration: none; font-size: 14px; position: relative; white-space: nowrap; }
.nav-menu ul li .submenu {position: absolute; top:30px; left: 0; background:var(--white); width: 180px; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); display: none; flex-direction: column; padding: 10px 0; list-style: none; }
.nav-menu ul li .submenu li {padding: 8px 15px; }
.nav-menu ul li .submenu li a {color: var(--gray); font-weight: 600; text-decoration: none; font-size: 12px; }
.nav-menu .has-submenu:hover .submenu {display: block; }

.right-section {display: flex; gap: 15px; }
.app-btn {background:var(--orange); color:var(--white); font-size: 14px; font-weight: bold; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; }
.menu-toggle {display: none; font-size: 22px; cursor: pointer; }

@media (max-width: 992px) {
    .menu-toggle {display: block; }
    .nav-menu {position: absolute; top: 70px; left: -100%; width: 100%; background: #fff; flex-direction: column; padding: 20px; transition: 0.3s; }
    .nav-menu.active {left: 0; }
    .nav-menu ul {flex-direction: column; gap: 15px; }
    .submenu {position: static; box-shadow: none; display: none; padding-left: 15px; }
    .has-submenu.active .submenu {display: block; }
    .right-section {margin-top: 15px; flex-direction: column; width: 100%; }
    .app-btn, .lang-btn {width: 100%; }
}




/*----------------------------
   header      
----------------------------*/
.footer{padding: 30px; text-align: center; background:#1C140C;  }
.footer  a {color: var(--white); font-weight: 500; font-size:14px; }
.footer  p {font-size: 0.9rem; margin-top: 12px; color:var(--white); }
.social-links {display: flex; gap: 12px; justify-content: center; margin-top:1rem; }
.social-icon {width: 40px; height: 40px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; color: #555; font-size: 18px; text-decoration: none; transition: all 0.3s ease; }

.social-icon:hover {color: #fff; transform: translateY(-3px); }
.social-icon.facebook:hover {background: #1877f2; }
.social-icon.instagram:hover {background: #e4405f; } 
.social-icon.twitter:hover {background: #1da1f2; } 
.social-icon.linkedin:hover {background: #0a66c2; }