@font-face {
 src: url(LTSaeada_Medium.otf);
 font-family: lts_med;
}

body {
font-family: lts_med;
}

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fefcf9;
}

ul.nav li {
  float: right;
}

ul.nav li.left {
  float: left;
}

ul.nav li.left img{
  float: none;        /* remove float */
    margin: 0;          /* remove top/bottom margins */
    padding: 0;
  width: auto;        /* or whatever size you want */
    height: 16px;       /* keep aspect ratio */
    display: block;


}

ul.nav li a {
  display: flex;
  color: black;
  text-align: center;

  padding: 14px 16px;
  text-decoration: none;
}

ul.nav li a:hover {
  background-color: #f1f6fd;
}

/*
Source - https://stackoverflow.com/a
Posted by Temani Afif, modified by community. See post 'Timeline' for change history
Retrieved 2026-01-05, License - CC BY-SA 4.0
*/

.box {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background: #fefcf9;
}
.box:after {
  -webkit-mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  background:#e7ecf9;
}

.headone{
color: #444f8c;
text-align: center;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 0px;
}

.headthree{
color: #444f8c;
text-align: center;
padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
}

.headfive{
color: #444f8c;
text-align: center;
padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
}

.container hr {
    width: 33%;       /* make it stretch across the container */
     border: none;      /* optional, remove default borders */
        border-top: 3px solid #ccc; /* visible line */
        margin: 10px 0;    /* spacing */
}

.onecolumn{
clear:both;
height: 100%;
display: flex;
flex-direction: column; /* Stacks image and text vertically */
align-items:center;
}

.sideimgtwo {
  height: 40vh;
  width: auto;
}

.container{
 display: flex;
 flex-direction: column; /* Stacks image and text vertically */
    height: 100%;
    padding: 0 10px;         /* Space inside the button */
    border: none;           /* Removes default button border */
    border-radius: 8px;     /* Rounded corners */
    cursor: pointer;        /* Changes cursor to a hand on hover */
    background-color:#A2BFFE; /* Default background color */

    /* Typography */
    font-size: 16px;
    color: #444f8c;
    text-align: center;
    align-items: center;
}

.productbutton{
 display: flex;
 flex-direction: row; /* Stacks image and text vertically */
    padding: 15px;          /* Space inside the button */
    border: none;           /* Removes default button border */
    border-radius: 8px;     /* Rounded corners */
    cursor: pointer;        /* Changes cursor to a hand on hover */
    background-color:#A2BFFE; /* Default background color */

    /* Typography */
    font-size: 16px;
    color: white;
    text-align: center;
    align-items: center;
}

.side-wrapper {
  width: 50vw;              /* right half of screen */
  height: 100vh;            /* optional, for vertical centering */
  margin-left: auto;        /* pushes it to the right side */
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
}


.icon-button {
    /* Layout properties */
    display: inline-block;
    width:70%;
    height: 33%;
    margin-top:30px;
    margin-left:20px;
    margin-right:20px;
    padding: 5px;          /* Space inside the button */
    border: none;           /* Removes default button border */
    border-radius: 8px;     /* Rounded corners */
    cursor: pointer;        /* Changes cursor to a hand on hover */
    background-color: #e7ecf9; /* Default background color */

    /* Typography */
    font-size: 16px;
    font-family: lts_med;
    color: white;
    text-align: center;

    /* The "raised" effect (box-shadow) */
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1);

    /* Transition for smooth hover/active effects */
    transition: all 0.3s ease;
}

.icon-button img {
    /* Space between the image and the text */
    margin: 0px;
    border-radius: 20px;
    /* Set image size */
    width: 100%;
    height: 100%;
}

/* Hover and Active (pressed) states */
.icon-button:hover {
    background-color: #e0e0e0;
    /* Slightly higher shadow on hover */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* Moves up slightly */
}

.icon-button:active {
    background-color: #d0d0d0;
    /* Flatter shadow when pressed */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.06);
    transform: translateY(1px); /* Moves down slightly to simulate being pressed */
}