:root {
    --bg-light: #ffffff;
    --bg-dark: #333333;
    --bg-blue: #77dbf4;
    --bg-blue: #77dbf4;


    --text-dark: #333333;
    --text-light: #ffffff;
    --text-blue: #77dbf4;



    --button-deepblue: #59bbd4;
    --button-blue: #77dbf4;
    --button-light: #ffffff;


    --btn-textlight: white;
    --btn-textdark: black;
    --btn-textblue: #77dbf4;


   
    --color-yellow: #ffcb00;
    --color-purple: #9c27b0;
    --color-light: #ffffff;
    --color-green: #4caf50;
    --color-lightblue: #c4effa;


    /* Logo SVG */
    --svg-light-color: #77dbef; 
    --svg-dark-color: #ffcc00;  

    
    --skyblue-light: hsl(102, 100%, 74%); 
    --skyblue-dark: #71c7fd;  
  }
  






  /* ----------
  Body Styling 
  -------------*/

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;  
    overflow-y: scroll; 
  }



  body {
    font-family: 'Poppins', sans-serif, Arial, Helvetica, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-light);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

   body.darkMode {
    background-color: var(--bg-dark);
    color: var(--text-dark);
  }

  body.darkMode strong{
    font-weight: 500;
  }
  



  /* ---------------------
  Brand Logo Styling 
  -----------------------*/
  
  .brandlLogo {
    transition: filter 0.3s ease;
  }
  
  .brandLogo {
    filter: invert(73%) sepia(56%) saturate(707%) hue-rotate(184deg) brightness(195%) contrast(191%);
  
  }
  
  body.darkMode .brandLogo {
    filter: none; 
  }





  /* ---------------------
  Toggle Button Styling
  -----------------------*/

  .toggleBtn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: var(--button-deepblue);
    color: var(--button-text-light);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .toggleBtn.darkMode {
    background-color: var(--button-blue);
    color: var(--btn-textdark);
  }




  section {
    transition: background-color 0.3s ease, color 0.3s ease;
  }