/*
=====================================
THEME COLORS
=====================================

--white             #fff 
--black             #000 (inner-black: #14181a)

--dark-green        #243030 (backside: #3a4a4d;)  (new dark green: #243030)
--light-green       #0dff92 (hover: #80f8c2)


--secondary-text    #585858

=====================================
OTHER GLOBALS
=====================================

border-radius: 8px;


*/


/*
=====================================
THEME COLORS
=====================================

*/


:root 
{
  /*--background-primary-color: #000;
  --background-secondary-color: #14181a;

  --text-color: #fff;
  --text-color-secondary: #585858;

  --primary-color: #243030;
  --secondary-color: #3a4a4d;
  --active-color: #0dff92;*/

  --background-primary-color: #ffffff;
  --background-secondary-color: #e7efff;
  --text-color: #000000;
  --text-color-secondary: #6d7e9f;
  --primary-color: #1D2950;
  --secondary-color: #ffffff;
  --active-color: #007BFF;
}



/* 
=====================================
BASE styling
=====================================
*/
* 
{ 
    /*transition: all 0.3s ease-in-out;*/ /* Smooth transition for all properties */ 
    -webkit-overflow-scrolling: touch; /* Enable momentum scrolling */
}

html * 
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
*,
*:after,
*:before 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body 
{
    /* you need to set this to assign to the main element a min height of 100% */
    height: 100%;
    top: 0px!important;
}
  
body 
{
    font-family: "Titillium Web", sans-serif;
    color: var(--text-color);
    background-color: var(--background-primary-color);
    /*background-color: var(--background-secondary-color);*/
    user-select: none;
}

p 
{
    font-size: 15px;
    line-height: 1.4; /* Optimal for readability */
    margin-bottom: 1rem; /* Spacing between paragraphs */
}

a, a:visited
{
    text-decoration: none;
    color: var(--background-primary-color);
}

/* a:visited
{
    color:unset;
} */

ul
{
    list-style: none;
}

ul li:hover a
{
    color:var(--active-color);
}

img 
{
    transition: transform 0.3s ease-in-out; /* Apply transition for transform property */
}

header img:hover,
footer img:hover  
{ transform: scale(1.05); /* Slightly enlarge image on hover */ }

hr { color: var(--text-color-secondary); }

/* 
=====================================
LAYOUT styling
=====================================
*/

/*DELETE THIS LATER */
main, aside {
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
}

.container 
{
    display: flex;
    flex-direction: column;
}

.content-wrapper 
{
    display: flex;
    flex-direction: column;
    /*-webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;*/
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

main 
{
    flex: 2;
    margin-right: 10px;
}

aside 
{
    flex: 1;
    background-color: var(--background-secondary-color);
}

section
{
  margin-bottom:30px;
}
/* 
=====================================
GENERAL H1 to H5 styling
=====================================
*/

h1 
{
    font-size: 2.5rem; /* Main title */
    margin-bottom: 1rem; /* Add spacing below */
}
  
h2 
{
    font-size: 2rem; /* Section title */
    margin-bottom: 0.75rem;
}
  
h3 
{
    font-size: 1.75rem; /* Subsection title */
    margin-bottom: 0.5rem;
}
  
h4 
{
    font-size: 1.5rem; /* Smaller subsection */
    margin-bottom: 0.4rem;
}
  
h5 
{
    font-size: 1.25rem; /* Even smaller */
    margin-bottom: 0.3rem;
}

h1,
h2,
h3,
h4,
h5 
{
    margin-top: 1rem;
}

.card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

.cta:hover {
     opacity: 0.9;
 }