/*
    Everaious  CSS Style
    2024 Everaious  CSS

    Owner: Anthony Rodriguez
    Email: anthony@everaious.com

    Written & Coded By & Maintained By Anthony Rodriguez
*/

:root{
    --everaious-mainbody-reworked: #131313;
}

* {
    box-sizing: border-box;
}

/* Prevent horizontal scrollbar caused by absolute/sticky elements and ensure canvas fits viewport */
html, body {
    overflow-x: hidden; /* hide horizontal overflow */
    width: 100%;
}

.everaious-background-main-container, .everaious-background-animation {
    width: 100vw; /* use viewport width to avoid scrollbars from potential margins */
    height: 100vh;
}

@font-face {
    font-family: 'Quicksand';
    src: url(./Quicksand-Regular.ttf);
}
@font-face {
    font-family: 'Quicksand-Light';
    src: url(./Quicksand-ExtraLight.ttf);
}

/* Layout and base */
.everaious-main-body{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    font-family: 'Quicksand';
    margin: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
    -o-scroll-behavior: smooth;
}

.everaious-background-animation{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.everaious-background-main-container{
    position: sticky;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.everaious-mobile-navbar{
    display: none;
    z-index: 10;
}

.everaious-mobile-head-container{
    text-align: center;
    color: #ffffff;
    font-family: 'Quicksand';
    background-color: #131313d9;
    height: 100%;
    width: 0;
    position: sticky;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: width 0.5s, margin-right 0.5s;
}

.everaious-sub-nav-menu a{
    margin-right: 50px;
    border-bottom: #131313 1px solid;
}

.everaious-main-body li { list-style: none; }
.everaious-main-body img { display: block; margin: auto; margin-bottom: 10px; }
.everaious-main-body h1 { color: #fff; font-size: 30px; text-align: center; }
.everaious-main-body p { color: #fff; font-size: 20px; text-align: center; }
.everaious-main-body a { color: #fff; font-size: 20px; text-align: center; text-decoration: none; }

.everaious-nav-links a:hover { text-shadow: 0px 0px 10px #fff; transition: 2s; color: #fff; font-size: 20px; text-align: center; }

.everaious-main-header-body h1 { color: #131313; font-weight: 100; }
.everaious-main-header-body { margin-top: 20px; }
.everaious-main-header-body img { width: 100px; height: 100px; }

.everaious-sub-nav-menu { padding-left: 15px; padding-right: 15px; }
.everaious-sub-nav-menu a { font-size: 28px; color: #131313; }

.everaious-navigation-search-container{ float: right; display: flex; justify-content: flex-end; }
.everaious-navigation-search-container button{ background-color: #131313; color: #ffffff; }

/* Footer contact */
.everaious-footer-submit-contact button {
    border: none;
    color: #131313;
    font-family: 'Quicksand';
    text-align: center;
    text-decoration: none;
    padding: 8px 20px;
    background-color: #ffffff;
    border-radius: 50px;
}
.everaious-footer-submit-contact input {
    background-color: #131313;
    color: #ffffff;
    font-family: 'Quicksand';
    border-radius: 50px;
    border: solid #ffffff 1px;
    padding: 5px 10px;
}
.everaious-footer-submit-contact ::placeholder { color: #ffffff; }

.everaious-bottom-footer h3{ border-top-left-radius: 2px; border-bottom-left-radius: 2px; border-left: #ffffff 1px solid; margin-right: 10px; margin-left: 13px; }
.everaious-sub-navmenu button{ border: none; color: #131313; font-family: 'Quicksand'; text-align: center; padding: 8px 20px; background-color: transparent; }

.everaious-bottom-footer h3 { color: #ffffff; font-size: 20px; text-align: center; font-weight: 100; }
.everaious-bottom-footer button:hover { color: #ffffff; background-color: #131313; transition: 3.1s; }

.everaious-viewmore-container{ font-family: 'Quicksand'; text-align: center; display: grid; place-content: center;  margin-top: 35px; }
.everaious-middle-subsector h3{ margin-bottom: 50px; }

.everaious-chat-box-panel-container{ display: flex; justify-content: center; align-items: center; margin: 20px 0; }

.everaious-middle-section-page h3{ font-size: 30px; font-weight: 100; text-align: center; color: #ffffff; font-family: 'Quicksand-Light'; }
.everaious-viewmore-container h3{ color: #131313; font-size: 30px; font-weight: 100; text-align: center; }
.everaious-viewmore-container a{ color: #131313; animation: everaious-arrow-bounce 1s infinite; }

@keyframes everaious-arrow-bounce { 0%{ transform: translateY(0);} 50%{ transform: translateY(10px);} 100%{ transform: translateY(0);} }

.everaious-viewmore-container button{ border: none; color: #131313; font-family: 'Quicksand'; text-align: center; padding: 8px 50px; background-color: transparent; border-radius: 50px; font-size: 25px; }

.everaious-creativity-and-customization-body{ margin-top: 50px; margin-bottom: 50px; display: flex; justify-content: center; align-items: center; }

.everaious-middle-section-page { padding-top: 50px; color: #131313; padding-bottom: 1000px; margin-top: 100px; font-weight: 100; box-shadow: 0px 1px 16px 0px #131313; background-color: #131313; }
.everaious-middle-sub-section-page h3{ font-family: 'Quicksand-Light'; color: #ffffff; font-size: 30px; text-align: center; }
.everaious-middle-section-page p{ font-family: 'Quicksand-Light'; color: #ffffff; font-size: 20px; text-align: center; }

.everaious-cards-gallery-container h3{ color: #131313; font-size: 30px; font-weight: 100; font-family: 'Quicksand-Light'; text-align: center; }

.everaious-instagram { margin: 0; padding: 0; content: url('/everaiousresources/everaiousmediasocial/Instagram_Glyph_White.png'); vertical-align: middle; height: 25px; width: 25px; }
.everaious-facebook { margin: 0; padding: 0; content: url('/everaiousresources/everaiousmediasocial/Facebook_Logo_Secondary.png'); vertical-align: middle; height: 25px; width: 25px; }
.everaious-x { margin: 0; padding: 0; content: url('/everaiousresources/everaiousmediasocial/logo-white.png'); vertical-align: middle; height: 25px; width: 25px; }
.everaious-linkedin { margin: 0; padding: 0; content: url('/everaiousresources/everaiousmediasocial/In-White-128@2x.png'); vertical-align: middle; height: 25px; width: 25px; }
.everaious-arrow-down { margin: 0; padding: 0; content: url('/everaiousresources/everaiousassets/everaious-arrow-down.png'); vertical-align: middle; height: 25px; width: 25px; }

.everaious-contact-container{ margin-top: 10px; margin-right: 15px; position: absolute; right: 0; }

.everaious-navbar { box-shadow: 0px 1px 16px 0px #131313; font-size: 25px; overflow: hidden; background-color: #131313; font-family: 'Quicksand'; display: flex; justify-content: center; }
.everaious-dropdown { text-align: center; display: inline-block; overflow: hidden; }
.everaious-navbar a { float: left; font-size: 24px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: 'Quicksand'; }
.everaious-navbar a { font-family: 'Quicksand'; color: #ffffff; }
.everaious-navbar h2 { font-family: 'Quicksand'; font-weight: 500; text-align: center; }
.everaious-dropdown { float: left; overflow: hidden; }
.everaious-dropdown .everaious-dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; }
.everaious-navbar a:hover, .everaious-dropdown:hover .everaious-dropbtn { background-color: transparent; }

.everaious-signin { margin-top: 10px; margin-right: 15px; position: absolute; right: 0; border-radius: 15px; background-color: #ffffff; overflow: hidden; font-family: 'qa'; }
.everaious-signin a { color: #131313; }
.everaious-signin:hover a { transition: 3s; }
.everaious-signin:hover { animation: everaiousbuttonanimationvarone infinite 2s; transition: 2s; }

@keyframes everaiousbuttonanimationvarone{ 0%{ transition: 3.1s; background-color: #ffffff; color: #131313; border-radius: 1px; } 50%{ transition: 3.1s; background-color: #ffffff; color: #131313; border-radius: 50px; } 100%{ transition: 3.1s; background-color: #ffffff; color: #131313; border-radius: 1px; } }

.everaious-dropdown-content { display: none; position: absolute; background-color: #131313; padding-bottom: 350px; box-shadow: 0px 1px 16px 0px #131313; width: 100%; left: 0; z-index: 1; animation: fade-in 1.2s ease-in-out; }

@keyframes fade-in { from { opacity: 0; filter: blur(4px); } to { filter: blur(0px); opacity: 1; } }

.everaious-dropdown-content .everaious-header { padding-top: 1px; padding-bottom: 1px; }
.everaious-dropdown-content .everaious-header h2{ font-size: 26px; }

@media screen and (max-width: 1200px) {
    .everaious-navbar { flex-direction: column; }
  .everaious-column{ width: 100%; height: 100%; }
  .everaious-column a{ text-align: center; }
    .everaious-signin { margin-bottom: 5px; margin-right: 0; position: relative; }
      .everaious-signin a{ color: #131313; text-align: center; width: 100%; display: block; padding: 14px 16px; text-decoration: none; font-size: 21px; }
}

.everaious-dropdown:hover .everaious-dropdown-content { display: block; }

.everaious-column { font-family: 'Quicksand'; float: left; width: 33.33%; padding: 10px; background-color: #131313; height: 250px; animation: slide-in 0.5s ease-in-out; }
@keyframes slide-in { from { transform: translateY(15%); } to { transform: translateX(0); } }
.everaious-dropdown .everaious-header { border-bottom: #ffffff 1px solid; color: #ffffff; }
.everaious-dropdown:hover .everaious-dropdown-content { display: block; }
.everaious-dropdown:hover button { border-bottom: #ffffff 1px solid; }
.everaious-column a { font-weight: 500; float: none; color: #ffffff; padding: 16px; text-decoration: none; display: block; text-align: center; }
.everaious-column h3 { color: #ffffff; font-weight: 500;  }
.everaious-column a:hover { transition: 3.1s; background-color: #ffffff; color: #131313; border-radius: 50px; }
.everaious-background-column { background-color: #151515; border-radius: 35px; padding-top: 1px; padding-bottom: 35px; }
.everaious-row:after { display: table; clear: both; }

@media screen and (max-width: 600px) { .everaious-column { width: 100%; height: auto; } }

@media screen and (max-width: 1200px) { .everaious-navbar { flex-direction: column; } .everaious-column { width: 100%; height: 100%; } .everaious-column a { text-align: center; } .everaious-signin { margin-bottom: 5px; margin-right: 0; position: relative; } .everaious-signin a { color: #131313; text-align: center; width: 100%; display: block; padding: 14px 16px; text-decoration: none; font-size: 21px; } }

@media (max-width: 1350px){ .everaious-navbar{ display: none; } .everaious-mobile-navbar{ display: block; } }

@media (max-width: 1400px) { .everaious-cards-gallery-container .everaious-card { flex-direction: column; } .everaious-cards-gallery-container .everaious-card img { width: 100%; height: 100%; margin-bottom: 10px; } }

@media (max-width: 1000px) { .everaious-cards-gallery-container .everaious-card { flex-direction: column; } .everaious-cards-gallery-container .everaious-card img { width: 100%; height: 1500px; margin-bottom: 10px; } .everaious-cards-gallery-container .everaious-card { padding: 20px; width: 100%; height: 1500px; } }

@media (max-width: 768px) { .everaious-main-body { height: auto; } .everaious-main-body h1 { font-size: 24px; } .everaious-main-body p, .everaious-main-body a { font-size: 16px; } }

.everaious-nav-links a { margin-right: 50px; }
.everaious-bottom-footer h3{ color: #ffffff; font-size: 20px; text-align: center; font-weight: 100; }
.everaious-bottom-footer { box-shadow: 0px -1px 10px #131313; padding-top: 100px; padding-bottom: 300px; bottom: 0; position: relative; border-top: #ffffff 1px solid; background-color: #131313; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
.everaious-footer-link { padding-left: 8.6px; padding-bottom: 5.6px; padding-top: 5.6px; text-decoration: none; color: #ffffff; }
.everaious-footer-link-list { list-style-type: none; padding: 0; margin: 0; flex-basis: 25%; }
.everaious-footer-link-list-item { margin-bottom: 10px; }
@media (max-width: 768px) { .everaious-footer-link-list { flex-basis: 50%; } }
@media (max-width: 480px) { .everaious-footer-link-list { flex-basis: 100%; } }
.everaious-footer-heading { font-weight: bold; margin-bottom: 10px; }
.everaious-footer-social-icons { display: flex; justify-content: center; margin-top: 20px; }
.everaious-sub-set-social-icons a { margin-right: 10px; }
.everaious-footer-social-icon { margin: 0 5px; font-size: 20px; color: #333; }
@media (max-width: 480px) { .everaious-footer { padding-bottom: 100px; } }
.everaious-footer-credit { font-size: 12px; margin-top: 20px; }
.everaious-footer-email-input { padding: 5px; margin-top: 10px; width: 200px; }
.everaious-footer-email-button { padding: 5px 10px; margin-top: 10px; background-color: #ffffff; color: #131313; border: none; cursor: pointer; }
.everaious-footer-email-button:hover { background-color: #131313; color: #ffffff; }
.everaious-bottom-footer a:hover{ transition: 3.1s; margin-left: 4px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-left: 1px solid #ffffff; }
.everaious-nav-links  { color: #131313; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; background-color: #ffffff; border-radius: 50px; }


.everaious-interactive-features-container{ display: flex; justify-content: center; align-items: center; margin-top: 50px; margin-bottom: 50px; gap: 50px; flex-wrap: wrap; background-color: #151515;}



.everaious-card { width: 300px; height: 500px; perspective: 1000px; margin: 10px; display: inline-block; }
.everaious-card-inner { border-radius: 50px; box-shadow: 0px 0px 15px #131313; position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1.9s; transform-style: preserve-3d;  }
.everaious-card:hover .everaious-card-inner { transform: rotateY(180deg); }
.everaious-mobile-head-container{ margin: 0; text-align: center; color: #ffffff; font-family: 'Quicksand'; background-color: #131313; height: 100%; width: 0; z-index: 1; position: fixed; top: 0; right: 0; overflow-x: hidden; transition: width 0.5s, margin-right 0.5s; }
.everaious-card-front, .everaious-card-back { position: absolute; border-top-left-radius: 50px; border-bottom-right-radius: 50px; width: 100%; height: 100%; backface-visibility: hidden; }
.everaious-card-front { background-color: #131313; color: black; }
.everaious-card-back { background-color: #131313; color: white; transform: rotateY(180deg); }
.everaious-card-back h1 { color: #ffffff; font-size: 30px; text-align: center; font-weight: 100; font-family: 'Quicksand'; }
.everaious-card-back p { color: #ffffff; font-size: 30px; text-align: center; font-weight: 100; font-family: 'Quicksand'; }
.everaious-card img { width: 100%; height: 88%; object-fit: cover; }
.everaious-gallery-professional-pictures{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.everaious-card-front img { border-top: #ffffff solid 2px; border-bottom-right-radius: 50px; filter: grayscale(100%); }
.everaious-gallery-casual-pictures{ display: flex; flex-wrap: wrap; }
.everaious-gallery-grid-container img { box-shadow: 0px 0px 5px #131313; filter: grayscale(100%); }
.everaious-gallery-main-section-container{ margin-top: 5px; padding-left: 15px; padding-right: 15px; }
.everaious-gallery-main-section-container h1{ color: #131313; font-size: 30px; text-align: center; font-weight: 100; font-family: 'Quicksand'; }
.everaious-card-back h1{ margin-top: 50px; }
.everaious-nav-container img { height: 50px; width: 50px; vertical-align: middle; }
.everaious-mobile-navbar{ width: 100%; background-color: transparent; padding-bottom: 50px; margin-right: 5px; position: sticky; top: 10px; }
.everaious-mobile-navbar .everaious-sub-navmenu{ box-shadow: 0px 1px 16px 0px #131313; padding-bottom: 10px; padding-top: 10px; padding-right: 5px; padding-left: 5px; border-radius: 5px; margin-right: 5px; float: right; background-color: #131313; }
.everaious-socials-section-listed-container a { margin-right: 8px; }
@media (max-width: 1350px){ .everaious-navbar{ display: none; } .everaious-mobile-navbar{ display: block; } }

@media (max-width: 1400px) { .everaious-cards-gallery-container .everaious-card { flex-direction: column; } .everaious-cards-gallery-container .everaious-card img { width: 100%; height: 88%; margin-bottom: 10px; } }

@media (max-width: 1000px) { .everaious-cards-gallery-container .everaious-card { flex-direction: column; } .everaious-cards-gallery-container .everaious-card img { width: 100%; height: 88%; margin-bottom: 10px; } .everaious-cards-gallery-container .everaious-card { padding: 20px; width: 100%; height: 1500px; } }

@media (max-width: 768px) { .everaious-main-body { height: auto; } .everaious-main-body h1 { font-size: 24px; } .everaious-main-body p, .everaious-main-body a { font-size: 16px; } }

/* Layout for demo image + info box: keep SVG/image on the left, text and button on the right */
.everaious-container-software-demo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin: 24px auto;
    margin-bottom: 150px;
    padding: 12px;
}

.everaious-container-software-demo h3{ font-family: Quicksand; font-size: 16px;}
.everaious-container-software-demo img{
    flex: 0 0 48%;
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block; /* override global centering */
    margin: 0;
}
.everaious-information-box-context{
    flex: 1 1 48%;
    text-align: left;
    color: #ffffff;
}
.everaious-information-box-context h2{ font-size: 18px; line-height: 1.5; font-weight: 300; }
.everaious-information-box-context button{ margin-left: 35%; margin-top: 12px; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; background-color: #131313; color: white;  font-family: Quicksand; font-size: 16px; }

@media (max-width: 900px){
  .everaious-container-software-demo{ flex-direction: column; padding: 8px; }
  .everaious-container-software-demo img{ flex: 0 0 auto; max-width: 90%; }
  .everaious-information-box-context{ text-align: center; }
    .everaious-information-box-context button{ margin-left: 0; }
}