@import url(https://fonts.googleapis.com/css2?family=Michroma&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Michroma&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Michroma&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Michroma&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
p,
div,
li {
  font-family: "Poppins", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
a {
  font-family: "Michroma", sans-serif;
}
header {
  top: 0;
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 5px 2px;
  z-index: 4;
}

.bars {
  height: 2px;
  width: 25px;
  background-color: #14213d;
  border: none;
  margin: 1px;
  transition: all 0.3s ease;
}
.menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu.active .bars:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.menu.active .bars:nth-child(2) {
  opacity: 0;
}

.menu.active .bars:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}
/*navBar styling*/
.nav {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  top: 6vh;
  right: 0;
  gap: 3vw;
  position: absolute;
  width: 100%;
  background-color: #ffffff;
}
.nav a {
  text-decoration: none;
  color: #000000;
}
/*search input styling*/
#searchBox {
  display: none;
  align-items: center;
  justify-content: flex-start;
}
#searchInput {
  background-color: #e5e5e586;
  border: none;
  border-radius: 1.5vw;
  height: 4vw;
}
#searchBox img {
  height: 4vw;
  width: 4vw;
  position: relative;
  left: -5vw;
}
/*icon styling*/
#iconDiv img {
  height: 10vw;
  width: 10vw;
}
#iconDiv {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}
#iconDiv h1 {
  font-size: 12px;
  position: relative;
  left: -2.5vw;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .menu {
    display: none;
  }
  .nav {
    display: flex;
    background-color: none;
    flex-direction: row;
    gap: 2vw;
    position: relative;
    align-items: unset;
    width: unset;
    top: 0;
    right: 0;
    margin-bottom: 0;
  }
  #searchInput {
    height: 1.5vw;
  }
  #searchBox {
    display: flex;
    gap: 0.5vw;
    justify-content: space-between;
  }
  #searchBox img {
    height: 2vw;
    width: 2vw;
    position: unset;
    left: 0;
  }
  #iconDiv img {
    height: 6vw;
    width: 6vw;
  }
  #iconDiv h1 {
    left: -1.5vw;
    font-size: 24px;
  }
}

/*footer styling*/
footer{
    background: #000000;
    color: #ffffff;
    width: 94%;
    margin: 0 auto;
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2vw 3vw 5vh;
    gap: 10vh;
    z-index: 3;
}
#footerNav{
    display: flex;
    flex-direction: column;
    gap: 4vw;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1vw;
}
#subscribe{
    display: flex;
    align-items: stretch;
}
#subscribe input{
    border: 1px solid #fca311;
    padding: 2px 4px;
    background: black;
}
#subEmail{
    color: white;
}
#rightFoot{
    display: flex;
    flex-direction: column;
    gap: 1vh;
    align-items: center;
}
footer img{
    height: 60vw;
    width: 80vw;
}
footer a{
    text-decoration: none;
    color:#e5e5e5;
}
#contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}
#subButton{
    background-color: #fca311;
    box-sizing: content-box;
    text-align: center;
    vertical-align: middle;
    padding: 10px 20px;
}
footer span {
    color: #fca311;
}

@media only screen and (min-width:768px){
    footer{
        width: 94%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1vw 3vw;
        gap: 0;
    }
    #rightFoot{
        gap: 5px;
        align-items: unset;
    }
    #footerNav{
        flex-direction: row;
        gap: 2vw;
    }
    footer img{
        height: 10vw;
        width: 16vw;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    grid-area: header;
}

footer {
    grid-area: footer;
}

body {
    width: 100%;
    background-color: #ffffff;
    display: grid;
    grid-template-areas:
        'header header header header header'
        'main main main main main'
        'main main main main main'
        'main main main main main'
        'main main main main main'
        'main main main main main'
        'footer footer footer footer footer';
}

.active {
    display: flex;
}

/* Aside styling */
aside {
    position: fixed;
    margin-top: 5vh;
    padding: 2vh 0;
    background-color: #14213d;
    color: #ffffff;
    display: none;
    grid-area: main;
    width: 75%;
    height: 100%;
    overflow-y: auto;
    z-index: 4;
}

aside h3 {
    margin-left: 2vw;
}

aside > div {
    margin-top: 5vh;
}

aside > div li {
    font-size: 14px;
    padding: 3vw;
    margin-top: 5vw;
}

#closeButton {
    float: right;
    display: block;
    background-color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    text-align: center;
    margin-right: 10px;
    color: #000000;
}

/* Main styling */
main {
    grid-area: main;
    margin-top: 10vh;
    width: 100%;
    flex-direction: column;
    gap: 2vh;
    padding: 2vw 3vw;
    display: flex;
}

.halfImg {
    width: 80%;
    height: auto;
    margin: 3vw auto;
    object-fit: contain;
}

.startImg {
    width: 100%;
    align-self: center;
    margin: 0 auto;
}

.div-img-achieve {
    display: grid;
    position: relative;
    grid-template-columns: 0.25fr 1fr 1fr 0.25fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    height: 50vh;
}

.div-img-achieve::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#getStartHead {
    grid-column: 2/4;
    grid-row: 2/4;
    text-align: center;
    color: #ffffff;
    z-index: 2;
    padding: 0 3vw;
}

#getStartImg {
    grid-column: 1/5;
    grid-row: 1/4;
    height: 50vh;
}

.hover {
    width: 80%;
    margin: 0 auto;
    position: fixed;
    bottom: 5vh;
    background: rgba(252, 163, 17, 0.6);
    border: 0.5px solid #fca311;
    backdrop-filter: blur(10.4px);
    box-shadow: 0 2px 1.5px 1px #fca31133;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 1.5vw;
    border-radius: 2vw;
    align-self: center;
}

.hoverIcon {
    height: 8vw;
    width: 8vw;
    border-radius: 50%;
    padding: 0.5vw;
    background: #fca21113;
    box-shadow: 1px 1px 25px #fca31186, 1px 1px 20px #fca31195, 2px 2px 37px #a96c0a, -2px -2px 37px #a96c0a;
}

.viewText {
    color: #a96c0a;
    text-shadow: 2px 2px 1.5px 1px #d9d9d933;
    vertical-align: middle;
}

iframe {
    width: 100%;
    height: 315px;
    margin: 3vw auto;
}

.download {
    display: none;
}

/* Footer styling */
span {
    font-weight: bold;
}

.appBox img {
    height: 150px;
    width: 150px;
}

.appBox p {
    border-left: 3px solid #fca311;
    padding-left: 0.5vw;
}

.appBox {
    margin: auto;
    width: 98%;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    justify-items: space-between;
    gap: 6vw;
}

/* General styling */
.selected {
    background-color: #a96c0a;
}

div,
li,
h1,
h2,
h3,
h4,
p {
    padding: 0.05vw;
    margin: 0.5vw 0.25vw;
}

ul {
    margin-left: 6vw;
}

aside ul {
    margin-left: 0;
}

header div,
header li,
header h1,
header p,
header h2,
header h3,
footer div,
footer li,
footer h1,
footer h2,
footer p,
footer h3 {
    margin: 0;
    padding: 0;
}

main > h1 {
    font-size: 1.7em;
}

aside ul li.menu-item {
    padding: 10px 15px;
    margin: 0 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.3s ease;
}

aside ul li.menu-item:hover {
    background-color: #f0f0f0;
    transform: translateX(5px);
    color: #14213d;
}

aside ul li.menu-item.active {
    background-color: white;
    color: #14213d;
    font-weight: bold;
}

aside ul li.menu-item.active:hover {
    background-color: #f0f0f0;
    color: #14213d;
}

.menu-item {
    position: relative;
    padding: 10px 15px 10px 30px; /* Increased left padding for dot */
    margin: 0 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.3s ease;
}

.menu-item:before {
    content: '';
    position: absolute;
    left: -7%;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #fca311;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-item.active:before {
    opacity: 1;
}

.menu-item:hover {
    background-color: #f0f0f0;
}

.menu-item.active {
    background-color: white;
    color: #14213d;
}

/* Table styling - Updated to prevent horizontal overflow and add padding */
table,
td,
th,
tr {
    border: 1px solid black;
    padding: 8px; /* Added padding for table elements */
}

table {
    max-width: 100%;
    width: 100%; /* Ensure table does not exceed container width */
    table-layout: fixed; /* Prevent table from overflowing */
    border-collapse: collapse;
}
thead{
    font-size: 12px;
}

.tables-container {
    max-width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
}

@media only screen and (min-width: 768px) {
    .menu-item,
    aside ul li.menu-item {
        border-radius: 4px;
        margin: 5px 0;
        border-bottom: none;
    }

    ul {
        margin-left: 3vw;
    }

    .menu {
        display: none;
    }

    body {
        width: 100%;
        background-color: #ffffff;
        display: grid;
        grid-template-areas:
            'header header header header header'
            'aside aside main main main'
            'aside aside main main main'
            'aside aside main main main'
            'aside aside main main main'
            'aside aside main main main'
            'aside aside footer footer footer';
    }

    main {
        width: 73%;
        margin-left: 27%;
        margin-bottom: 10vh;
        padding-left: 1vw;
    }

    aside {
        height: 90vh;
        position: fixed;
        margin-top: 13vh;
        background-color: #14213d;
        color: #ffffff;
        display: block;
        padding: 2vw;
        grid-area: aside;
        width: 25%;
        overflow-y: auto;
    }

    #closeButton {
        display: none;
    }

    aside > div li {
        margin-top: 2vw;
        padding: 0 0.5vw;
    }

    .div-img-achieve {
        height: 60vh;
    }

    #getStartImg {
        height: 60vh;
    }

    #getStartHead {
        padding: 0;
    }

    .appBox img {
        height: 150px;
        width: 150px;
    }

    .appBox {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .hover {
        display: none;
    }

    iframe {
        width: 80%;
        height: 400px;
    }

    .download {
        display: inline-block;
        align-self: center;
    }

    .downloadBox img {
        height: 1.5vw;
        width: 1.5vw;
    }

    .download a {
        text-decoration: none;
    }

    .halfImg {
        width: 50%;
    }

    .downloadBox {
        background: #fca311;
        color: #ffffff;
        padding: 0.5vw 1vw;
        width: 12vw;
        height: 5vh;
        display: flex;
        gap: 0.5vw;
        align-items: center;
        justify-content: center;
        position: relative;
        text-align: center;
        vertical-align: middle;
        z-index: 2;
    }

    .downloadcta {
        background: #ffffff;
        border: 1px solid #fca311;
        top: 7vh;
        position: relative;
        left: 0.5vw;
        width: 12vw;
        height: 5vh;
        z-index: 1;
    }

    footer {
        width: 73%;
        margin-left: 27%;
    }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*Ai pop up and button styling*/
#chatGPT,
#geminiAI {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background-color: #ffffff;
  border-radius: 1vw;
  padding: 2vw;
  left: 0;
  top: 0;
  display: none;
}
.close {
  border-radius: 50%;
  background-color: red;
  width: 30px;
  height: 30px;
  padding: 2px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  text-align: center;
  vertical-align: middle;
  margin: 0.5vw;
  position: relative;
  float: right;
  display: inline;
}
.frameBox {
  height: 100%;
}
.aiText {
  display: inline-block;
  position: relative;
}
#chatgpt,
#gemini {
  height: 90%;
  width: 100%;
}
#ai {
  height: 14vh;
  width: 10vw;
  position: fixed;
  bottom: 15vh;
  right: 5vw;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
#midDiv {
  background-color: #14213d;
}
.aiDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 14vw;
  width: 14vw;
  border-radius: 50%;
  border: 1px solid #14213d;
}
#ai img {
  width: 80%;
  height: 80%;
  margin: 0 auto;
}
.popUp{
  display: none;
  width: 10vw;
  height: 10vw;
  border-radius: 1vw;
}
.active {
  display: flex;
}
@media only screen and (min-width: 768px) {
  #chatGPT,
  #geminiAI {
    width: 40vw;
    height: 90vh;
    top: 5vh;
    left: 30vw;
    padding: 1vw;
  }
  #ai {
    height: 14vh;
    width: 5vw;
    bottom: 10vh;
    right: 1vw;
    gap: 10px;
  }
  .aiDiv {
    height: 5vw;
    width: 5vw;
    border-radius: 0.5vw;
  }
  .textDiv {
    margin-right: 5vw;
  }
  .popUp {
    width: 3vw;
    height: 3vw;
    border-radius: 0.3vw;
  }
  .frameBox {
    height: 95%;
  }
}