* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }



 .dark {
     --bg: #e2e8f0;
     --text: #0f172a;
     --highlight-color: #0077ff;
 }





 :root {
     --hue: 223;
     --primary: hsl(var(--hue), 90%, 50%);
     --trans-dur: 0.3s;
     --trans-timing: cubic-bezier(0.76, 0.05, 0.24, 0.95);
     --trans-timing-in: cubic-bezier(0.76, 0.05, 0.86, 0.06);
     --trans-timing-out: cubic-bezier(0.05, 0.76, 0.06, 0.86);


     --bg: #0f172a;
     --fg: #ffffffec;
     --back: #121b2fba;
     --a-color: #7979ff;
     --text: #ffffffec;
     --highlight-color: #00eaff;
 }



 p,
 b {
     opacity: 0.8 !important;
 }

 h2,
 h3 {
     opacity: 0.95 !important;
 }






 /* 
 body {
     background-color: var(--bg);
     transition:
         background-color var(--trans-dur),
         color var(--trans-dur);

 }

 body:has(.switch__input:checked) {
     background-color: var(--fg);
     color: var(--bg);
 } */



 body {
     margin: 0;
     font-family: sans-serif;
     background: var(--bg);
     color: var(--text);

     background-image: radial-gradient(#754fc8d0 1px, transparent 1px);
     background-size: 40px 40px;
     background-attachment: fixed;
     height: 100vh;
 }





 body,
 html {
     scroll-behavior: smooth;
 }

 a {
     text-decoration: none !important;
 }



 /* HEADER */

 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 30px;
     /* background: var(--bg, black); */
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
     color: #00eaff;
     /* box-shadow: 0 1px 100px #00000030; */
     /* background-color: #1e293beb; */
     color: #e2e8f0;



     color: #fff;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     top: 0;
     z-index: 1000;
     backdrop-filter: blur(10px);
 }

 .logo a {
     text-decoration: none;
     font-size: 22px;
     font-weight: 700;
     color: var(--text);
     /* color: #e2e8f0; */

 }

 .logo span {
     color: #ff00f2;
     color: var(--highlight-color);
 }

 .logo :hover {
     color: var(--highlight-color);

 }







 /* details container */
 .menu-pages details {
     position: relative;
     font-family: Arial, sans-serif;
     color: var(--a-color);
 }

 /* summary button */
 .menu-pages summary {
     cursor: pointer;
     list-style: none;
     font-weight: 600;
     /* padding: 8px 14px; */
     border-radius: 6px;
     transition: 0.3s;
 }

 /* remove default arrow */
 .menu-pages summary::-webkit-details-marker {
     display: none;
 }

 /* custom arrow */
 .menu-pages summary::after {
     content: "▼";
     font-size: 12px;
     margin-left: 6px;
     transition: 0.3s;
 }

 /* rotate arrow when open */
 .menu-pages details[open] summary::after {
     transform: rotate(180deg);
 }

 /* dropdown menu */
 .pages-dropdown {
     position: absolute;
     top: 40px;
     left: 0;
     background: #1b1b1b9b;
     background: var(--bg);
     border-radius: 8px;
     min-width: 180px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 /* dropdown list */
 .pages-dropdown li {
     list-style: none;
 }

 /* links */
 .pages-dropdown li a {
     display: block;
     padding: 10px 15px;
     /* color: white; */
     color: var(--highlight-color);
     text-decoration: none;
     transition: 0.3s;
 }

 /* hover effect */
 .pages-dropdown li a:hover {
     background: #4facfe;
     color: white;
 }


 /* NAV */

 .nav-links {
     list-style: none;
     display: flex;
     gap: 30px;
 }

 .nav-links a {
     text-decoration: none;
     color: var(--a-color);
     font-weight: 900;
     font-weight: 500;
 }

 .nav-links a:hover {
     color: #00eaff;
     color: var(--text);

 }

 /* RIGHT SIDE */

 .header-right {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 #themeToggle {
     border: none;
     background: none;
     font-size: 20px;
     cursor: pointer;
 }

 /* HAMBURGER */

 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
 }

 .hamburger span {
     width: 25px;
     height: 3px;
     background: var(--text);
     margin: 4px 0;
 }

 /* MOBILE */
 @media(min-width:1300px) {
     .header {
         display: flex;
         justify-content: space-around;
     }
 }

 @media(max-width:768px) {


     #navbar {
         position: absolute;
         top: 70px;
         left: 0;
         width: 100%;
         background: var(--bg);
         display: none;
     }

     #navbar.active {
         display: block;
     }

     .nav-links {
         flex-direction: column;
         padding: 20px;
         gap: 15px;
     }

     .hamburger {
         display: flex;
     }

 }



 /* footer */
 /* === SIMPLE FOOTER === */
 .footer {
     background: #1e293b;
     color: white;
     padding: 40px 0 20px;
     margin-top: 60px;
 }

 .footer-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .footer-main {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
     padding-bottom: 20px;
     border-bottom: 1px solid #334155;
 }

 .footer-brand h3 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .footer-brand span {
     color: #0f72ff;
 }

 .footer-brand p {
     color: #cecece;
     margin: 0;
 }

 .footer-social {
     display: flex;
     gap: 15px;
 }

 .footer-social a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #334155;
     color: white;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .footer-social a:hover {
     background: #0f72ff;
     transform: translateY(-2px);
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* color: #94a3b8; */
     font-size: 0.9rem;
 }

 .footer-links {
     display: flex;
     gap: 20px;
 }

 .footer-links a {
     color: #cbcbcb;
     text-decoration: none;
     transition: color 0.3s ease;
 }

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

 /* Responsive */
 @media (max-width: 768px) {
     .footer-main {
         flex-direction: column;
         gap: 20px;
         text-align: center;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }
 }





 .btn {
     margin-top: 25px;
     padding: 12px 32px;
     font-size: 1.1rem;
     border-radius: 12px;
     border-radius: 50px;
     cursor: pointer;
     /* background: transparent; */
     background: rgba(0, 0, 255, 0.637);
     border: 2px solid #00eaff;
     color: #fcfcfc;
     transition: .3s;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;

 }

 .btn:hover {
     background: transparent;
     color: #1943ea;
     /* box-shadow: var(--hero-glow); */
     box-shadow: 0 0 20px #00eaff;

     transform: translateY(-5px);

 }







 .btns {
     margin-top: 25px;
     padding: 12px 32px;
     font-size: 1.1rem;
     border-radius: 12px;
     border-radius: 50px;

     cursor: pointer;
     background: transparent;
     border: 2px solid #1943ea;
     color: var(--a-color,#fcfcfc);
     transition: .3s;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;

 }

 .btns:hover {
     background: #fff;

     color: #000000;
     /* box-shadow: var(--hero-glow); */
     box-shadow: 0 0 20px #00eaff;
     /* box-shadow: 0 0 20px rgba(0, 0, 255, 0.637); */

     transform: translateY(-5px);

 }













 /* day mod and night mod */




 .input {
     font: 1.5em/9.5 sans-serif;
 }



 .switch {
     margin: auto;
     position: relative;
 }

 .switch__icon,
 .switch__input {
     display: block;
 }

 .switch__icon {
     position: absolute;
     top: 0.8em;
     right: 0.9em;
     width: 0.75em;
     height: 0.75em;
     transition:
         opacity calc(var(--trans-dur) / 2),
         transform calc(var(--trans-dur) / 2);

 }

 .switch__icon polyline {
     transition: stroke-dashoffset calc(var(--trans-dur) / 2);
 }

 .switch__icon--light,
 .switch__icon--light polyline {
     transition-delay: calc(var(--trans-dur) / 2);
     transition-timing-function: var(--trans-timing-out);
 }

 .switch__icon--dark {
     opacity: 0;
     transform: translateX(-0.75em) rotate(30deg) scale(0.75);
     transition-timing-function: var(--trans-timing-in);
 }

 .switch__input {
     background-color: hsl(210, 90%, 70%);
     border-radius: 0.75em;
     box-shadow:
         0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0),
         0.125em 0.125em 0.25em hsla(var(--hue), 90%, 10%, 0.2);
     outline: transparent;
     position: relative;
     width: 3em;
     height: 1.5em;
     -webkit-appearance: none;
     appearance: none;
     -webkit-tap-highlight-color: transparent;
     transition:
         background-color red,
         box-shadow 0.15s linear;
 }

 .switch__input:focus-visible {
     box-shadow:
         0 0 0 0.125em hsl(var(--hue), 90%, 50%),
         0.125em 0.125em 0.25em hsla(var(--hue), 90%, 10%, 0.2);
 }

 .switch__input:before,
 .switch__input:after {
     content: "";
     display: block;
     position: absolute;
 }

 .switch__input:before {
     background-color: hsl(50, 90%, 50%);
     border-radius: inherit;
     mask-image: linear-gradient(120deg, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 80%);
     -webkit-mask-image: linear-gradient(0deg, hsla(0, 100%, 50%, 0.908) 20%, hsla(0, 100%, 45%, 0.405) 100%);
     inset: 0;
 }

 .switch__input:after {
     background-color: hsl(0, 0%, 100%);
     border-radius: 50%;
     box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue), 90%, 10%, 0.1);
     top: 0.125em;
     left: 0.125em;
     width: 1.25em;
     height: 1.25em;
     transition:
         background-color var(--trans-dur) var(--trans-timing),
         transform var(--trans-dur) var(--trans-timing);
     z-index: 1;
 }

 .switch__input:checked {
     background-color: hsl(290, 90%, 40%);
 }

 .switch__input:checked:before {
     background-color: hsl(220, 90%, 40%);
 }

 .switch__input:checked:after {
     background-color: hsl(0, 0%, 0%);
     transform: translateX(1.5em);
 }

 .switch__input:checked~.switch__icon--light,
 .switch__input:checked~.switch__icon--light polyline {
     transition-delay: 0s;
     transition-timing-function: var(--trans-timing-in);
 }

 .switch__input:checked~.switch__icon--light {
     opacity: 0;
     transform: translateX(-0.75em) rotate(-30deg) scale(0.75);
 }

 .switch__input:checked~.switch__icon--light polyline {
     stroke-dashoffset: 1.5;
 }

 .switch__input:checked~.switch__icon--dark {
     opacity: 1;
     transform: translateX(-1.5em);
     transition-delay: calc(var(--trans-dur) / 2);
     transition-timing-function: var(--trans-timing-out);
 }

 .switch__sr {
     overflow: hidden;
     position: absolute;
     width: 1px;
     height: 1px;
 }






 /* //===============  .scroll-btn  top se buttom and buttom se top  =============  // */
 .scroll-btn {
     position: fixed;
     right: 20px;
     bottom: 20px;
     width: 50px;
     height: 50px;

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

     font-size: 22px;
     /* color:var(--text); */
     color: white;


     border-radius: 50%;
     cursor: pointer;

     /* background: linear-gradient(135deg, #00eaff, #11ffb8); */
     background-color: var(--primary);

     backdrop-filter: blur(10px);
     box-shadow:
         0 10px 25px rgba(0, 0, 0, 0.25),
         inset 0 0 10px rgba(255, 255, 255, 0.2);

     transition: all .3s ease;

     z-index: 1000;

     opacity: 0;
     transform: translateY(20px);
     pointer-events: none;
 }

 /* show button */
 .scroll-btn.show {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 /* hover effect */
 .scroll-btn:hover {
     transform: scale(1.12);
 }

 /* mobile friendly */
 @media (max-width:700px) {

     .scroll-btn {
         right: 2px;
         bottom: 15px;
         width: 40px;
         height: 40px;
         font-size: 20px;
     }

 }


 /* --------------------------------------------------------------- */

 /* language */

 .language-switch {
     /* position: fixed; */
     top: 20px;
     right: 20px;
 }

 .language-switch button {
     padding: 6px 12px;
     margin-left: 5px;
     cursor: pointer;
 }

 @media (max-width:750px) {
     .language-switch button {
         padding: 0;

     }


 }

 /* ---------------------------------------------------------------------------------------- */