:root {
    --white: #e8e9ed;
    --gray: #434257;
    --blue: #1565C0;
    --green: #4caf50;
    --red: #ef5350;
    --info: #2D74DAFF;
    --scroll-mouse: rgba(255, 255, 255, 0.918);
    --yellow: #FBC02D;
    --dark-gray: #121212;
    --light-gray: #ddd;
    --teal: #00695C;
    --color-recommended-hint-text: #FFB300;

    /* Common styling*/
    --color-visa-card: var(--blue);
    --color-amex-card: #1976D2;
    --color-master-card: #FF3D00;
    --color-discover-card: #616161;
    --color-diners-card: #546E7A;
    --color-jcb-card: #3F51B5;
    --color-default-card: #757575;

    /*Outlined text field styling*/
    --md-outlined-text-field-container-shape: 7px;
    --md-sys-color-primary: var(--color-fg);
    --md-outlined-text-field-label-text-color: var(--color-fg);
    --md-outlined-text-field-input-text-color: var(--color-fg);
    --md-outlined-text-field-error-focus-input-text-color: var(--color-fg);
    --md-outlined-text-field-error-hover-input-text-color: var(--color-fg);
    --md-outlined-text-field-error-input-text-color: var(--color-fg);
    --md-outlined-text-field-focus-input-text-color: var(--color-fg);
    --md-outlined-text-field-hover-input-text-color: var(--color-fg);
    --md-outlined-text-field-hover-label-text-color: var(--color-fg);
    --md-outlined-text-field-hover-outline-color: var(--color-fg);
    --md-outlined-text-field-outline-color: var(--color-fg);
    --md-outlined-text-field-outline-width: 2px;
    --md-outlined-text-field-input-text-size: 16px;
    --md-outlined-text-field-label-text-size: 16px;
    --md-outlined-text-field-input-text-font: 'Hind Madurai', sans-serif;
    --md-outlined-text-field-label-text-font: 'Hind Madurai', sans-serif;
    --md-outlined-text-field-supporting-text-color: var(--color-fg);
    --md-outlined-text-field-supporting-text-font: 'Hind Madurai', sans-serif;

    /* Select styling*/
    --md-outlined-select-text-field-label-text-color: var(--color-fg);
    --md-outlined-select-text-field-input-text-color: var(--color-fg);
    --md-outlined-select-text-field-focus-input-text-color: var(--color-fg);
    --md-outlined-select-text-field-outline-color: var(--color-fg);
    --md-outlined-select-text-field-outline-width: 2px;
    --md-outlined-select-text-field-input-text-size: 18px;
    --md-outlined-select-text-field-label-text-size: 18px;
    --md-outlined-select-text-field-input-text-font: 'Hind Madurai', sans-serif;
    --md-outlined-select-text-field-label-text-font: 'Hind Madurai', sans-serif;
    --md-outlined-select-text-field-trailing-icon-color: var(--color-fg);
    --md-outlined-select-text-field-hover-input-text-color: var(--color-fg);
    --md-outlined-select-text-field-hover-label-text-color: var(--color-fg);
    --md-outlined-select-text-field-hover-outline-color: var(--color-fg);
    --md-outlined-select-text-field-hover-trailing-icon-color: var(--color-fg);

    /* Button styling */
    --md-filled-button-container-shape: 0;
    --md-filled-button-label-text-color: var(--color-bg);
    --md-filled-button-label-text-size: 18px;
}

[data-theme="light"] {
    --color-bg: white;
    --color-fg: rgba(0, 0, 0, 0.87);
    --nav-hover-bg-color: var(--light-gray);
    --nav-hover-border-color: rgba(0, 0, 0, 0.7);
    --nav-active-border-color: black;
    --icon-button-foreground-color: black;
    --icon-button-background-color: white;
    --icn-display-mode: url("https://img.icons8.com/ios-glyphs/100/000000/sun--v1.png");
    --icn-display-mode-menu-item: url("https://img.icons8.com/ios-glyphs/100/000000/sun--v1.png");
    --icn-email: url("https://img.icons8.com/external-kiranshastry-solid-kiranshastry/100/000000/external-email-business-kiranshastry-solid-kiranshastry.png");
    --icn-whatsapp: url("https://img.icons8.com/ios-filled/100/000000/whatsapp--v1.png");
    --icn-facebook: url("https://img.icons8.com/ios-filled/250/000000/facebook-f.png");
    --icn-instagram: url("https://img.icons8.com/ios-glyphs/120/000000/instagram-new.png");
    --icn-twitter: url("https://img.icons8.com/ios-filled/250/000000/twitterx--v1.png");
    --icn-youtube: url("https://img.icons8.com/ios-filled/250/000000/youtube-play.png");
    --icn-linkedin: url("https://img.icons8.com/ios-filled/250/000000/linkedin.png");
    --icn-profile: url("https://img.icons8.com/ios/100/000000/user-male-circle--v1.png");
    --icn-show-password: url("https://img.icons8.com/ios-glyphs/100/000000/visible--v1.png");
    --icn-hide-password: url("https://img.icons8.com/ios-glyphs/100/000000/hide.png");
    --bg-icon-button-selected: var(--green);
    --border-color-radio-button: var(--gray);
    --bg-color-radio-button: black;
    --color-radio-button-selected: white;
    --bg-color-input-counter-button: var(--light-gray);
    --icn-circular-add: url("https://img.icons8.com/ios/60/1E88E5/add--v1.png");
    --icn-save: url("https://img.icons8.com/metro/100/000000/save.png");
    --icn-request: url("https://img.icons8.com/metro/100/000000/ask-question.png");
    --icn-cards: url("https://img.icons8.com/metro/100/000000/bank-cards.png");
    --color-bg-requests: var(--light-gray);
}

[data-theme="dark"] {
    --color-bg: var(--dark-gray);
    --color-fg: var(--white);
    --nav-hover-bg-color: var(--gray);
    --nav-hover-border-color: rgba(255, 255, 255, 0.7);
    --nav-active-border-color: white;
    --icon-button-foreground-color: white;
    --icon-button-background-color: black;
    --icn-display-mode: url("https://img.icons8.com/ios-glyphs/100/FFFFFF/moon-symbol.png");
    --icn-display-mode-menu-item: url("https://img.icons8.com/ios-glyphs/100/FFFFFF/moon-symbol.png");
    --icn-email: url("https://img.icons8.com/external-kiranshastry-solid-kiranshastry/100/FFFFFF/external-email-business-kiranshastry-solid-kiranshastry.png");
    --icn-whatsapp: url("https://img.icons8.com/ios-filled/100/FFFFFF/whatsapp--v1.png");
    --icn-facebook: url("https://img.icons8.com/ios-filled/250/FFFFFF/facebook-f.png");
    --icn-instagram: url("https://img.icons8.com/ios-glyphs/120/FFFFFF/instagram-new.png");
    --icn-twitter: url("https://img.icons8.com/ios-filled/250/FFFFFF/twitterx--v1.png");
    --icn-youtube: url("https://img.icons8.com/ios-filled/250/FFFFFF/youtube-play.png");
    --icn-linkedin: url("https://img.icons8.com/ios-filled/250/FFFFFF/linkedin.png");
    --icn-profile: url("https://img.icons8.com/ios/100/FFFFFF/user-male-circle--v1.png");
    --icn-show-password: url("https://img.icons8.com/ios-glyphs/100/FFFFFF/visible--v1.png");
    --icn-hide-password: url("https://img.icons8.com/ios-glyphs/100/FFFFFF/hide.png");
    --bg-icon-button-selected: var(--teal);
    --border-color-radio-button: var(--white);
    --bg-color-radio-button: white;
    --color-radio-button-selected: black;
    --bg-color-input-counter-button: var(--white);
    --icn-circular-add: url("https://img.icons8.com/ios/60/42A5F5/add--v1.png");
    --icn-save: url("https://img.icons8.com/metro/100/FFFFFF/save.png");
    --icn-request: url("https://img.icons8.com/metro/100/FFFFFF/ask-question.png");
    --icn-cards: url("https://img.icons8.com/metro/100/FFFFFF/bank-cards.png");
    --color-bg-requests: var(--gray);
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Hind Madurai', sans-serif;
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
}

body {
    background: var(--color-bg);
    color: var(--color-fg);
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.navigation-bar {
    background-color: var(--color-bg);
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navigation-bar a {
    float: left;
    color: var(--color-fg);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 19px;
    font-family: 'Anton', sans-serif;
}

.navigation-bar a:hover {
    background-color: var(--nav-hover-bg-color);
    border-bottom: 7px solid var(--nav-hover-border-color);
}

.navigation-bar a.active {
    border-bottom: 7px solid var(--nav-active-border-color);
}

.menu {
    display: none;
    cursor: pointer;
    margin: 20px;
}

.display-mode-toggle-container {
    float: right;
    margin: 20px;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--color-fg);
    margin: 6px 0;
    transition: 0.5s;
    border: 1px solid var(--color-fg);
    opacity: .8;
    border-radius: 2px;
    box-shadow: 0;
}

.bar2 {
    width: 19px;
}

.bar3 {
    width: 27px;
}

.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
    width: 35px;
}

#display-mode-toggle {
    content: var(--icn-display-mode);
    display: none;
}

#display-mode-menu-item-image {
    content: '';
    display: none;
    /* content: var(--icn-display-mode-menu-item); */
}

.display-mode-toggle-container {
    display: none;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #37474F;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;

}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: var(--nav-hover-border-color);
    cursor: pointer;
}

.carousel {
    margin-top: 100px;
    background: transparent;
    height: 100%;
    float: center;
    outline: none;
}

.centered-image {
    display: block;
    margin: auto;
}

.nerdoid-button {
    background-color: black;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.alt-button {
    background-color: var(--color-bg);
    border: none;
    color: var(--color-fg);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.nerdoid-button:hover {
    background-color: var(--green);
    transition: .5s;
}

.alt-button:hover {
    background-color: var(--info);
    color: white;
    transition: .5s;
}

.circle-logo-container {
    text-align: center;
}

.circle-logo {
    background-color: white;
    border: 1px solid white;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.flickity-enabled:focus .flickity-viewport {
    outline: none;
}

blockquote {
    font-weight: 100;
    font-size: 1.7rem;
    max-width: 70%;
    line-height: 1.4;
    position: relative;
    padding: .5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

blockquote:before,
blockquote:after {
    position: absolute;
    color: var(--yellow);
    font-size: 8rem;
    width: 4rem;
    height: 4rem;
}

blockquote:before {
    content: '“';
    left: -5rem;
    top: -2rem;
}

blockquote:after {
    content: '”';
    right: -5rem;
    bottom: 1rem;
}

.icon-button {
    border: 3px solid var(--icon-button-foreground-color);
    border-radius: 10px;
    background-color: var(--icon-button-background-color);
    padding: 8px 16px;
}

.social-icons {
    margin: 0 auto;
    width: 40%;
}

.icon {
    margin: 0 auto;
    display: block;
}

.icon-button-text {
    text-align: center;
    font-size: 19px;
}

.footer {
    width: 100%;
    background-color: var(--color-bg);
    overflow: auto;
    padding: 100px 0;
}

.footer-table {
    width: 100%;
}

.footer-text {
    color: var(--color-fg);
    font-size: 16px;
    font-weight: 200;
}

.footer-detail {
    text-align: center;
    vertical-align: top;
    padding: 10px;
}

.snackbar {
    background-color: var(--green);
    position: fixed;
    bottom: 0;
    padding: 10px;
    color: white;
    display: none;
}

textarea {
    resize: none;
}

.modal {
    display: block;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 80%;
    margin: auto;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
}

.spinner {
    width: 40px;
    height: 40px;

    position: relative;
    margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--green);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.recommended-hint-text {
    color: var(--color-recommended-hint-text);
    font-style: italic;
}

@-webkit-keyframes sk-bounce {

    0%,
    100% {
        -webkit-transform: scale(0.0)
    }

    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {

    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

#copyright-text {
    color: var(--color-fg);
    text-align: center;
}

#email-icon {
    content: var(--icn-email);
}

#whatsapp-icon {
    content: var(--icn-whatsapp);
}

#facebook-icon {
    content: var(--icn-facebook);
}

#instagram-icon {
    content: var(--icn-instagram);
}

#twitter-icon {
    content: var(--icn-twitter);
}

#youtube-icon {
    content: var(--icn-youtube);
}

#linkedin-icon {
    content: var(--icn-linkedin);
}

.input-counter input,
textarea {
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 10px;
}

.input-counter input[type="button"] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

.input-counter input::-webkit-outer-spin-button,
.input-counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

.input-counter {
    clear: both;
    margin: 15px 0;
    position: relative;
}

.input-counter input[type='button'] {
    background-color: var(--bg-color-input-counter-button);
    min-width: 38px;
    width: auto;
    transition: all 300ms ease;
}

.input-counter .input-counter-minus,
.input-counter .input-counter-plus {
    font-weight: bold;
    height: 38px;
    padding: 0;
    width: 38px;
    position: relative;
}

.input-counter .quantity-field {
    position: relative;
    height: 38px;
    left: -6px;
    text-align: center;
    width: 62px;
    display: inline-block;
    font-size: 13px;
    margin: 0 0 5px;
    resize: vertical;
}

.input-counter-plus {
    left: -13px;
}

.input-counter input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

.nerdoid-select {
    padding: 5px 10px;
}

.glow-filter {
    position: relative;
    display: inline-block;
    scale: 1;

    animation: onloadscale 1s ease-out forwards;
}

.glow-filter::before {
    content: attr(data-text);
    position: absolute;
    pointer-events: none;
    color: #fffaf6;
    background: linear-gradient(0deg, #dfe5ee 0%, #fffaf6 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: url(#glow-4);
    -moz-filter: url(#glow-4);
    -webkit-filter: url(#glow-4);

    opacity: 0;
    animation: onloadopacity 1s ease-out forwards;
}

#loading-overlay {
    display: none;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg);
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 0;
    margin: 0;
}

.loading-overlay-content {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

md-outlined-text-field {
    margin: auto;
    display: block;
}

.profile-button {
    float: right;
    content: var(--icn-profile);
    margin: 10px;
    display: none;
}

#mobile-profile-button {
    display: none;
    margin: 20px;
}

.contact-number-table {
    width: 100%;
    display: block;
    border: 2px solid var(--color-fg);
    border-radius: 7px;
}

.select-country-code {
    background-color: transparent;
    width: 100%;
    outline: 0;
    border: 0;
    color: var(--color-fg);
}

.delete-button {
    color: #B71C1C;
}

.next-button {
    outline: none;
    border: 0;
    background-color: var(--color-fg);
    color: var(--color-bg);
    font-size: 16px;
    padding: 12px;
    width: 100%;
    display: none;
}

.next-button:hover {
    background-color: var(--green);
    color: white;
    font-weight: bold;
    transition: .3s;
}

strong {
    font-weight: bold;
}

.or-text {
    text-align: center;
}

.counter-container {
  position: relative;
  width: 2em;
  height: 2em;
  border: 3px solid var(--yellow);
  background-color: var(--yellow);
  border-radius: 50%;
  transition: all 500ms ease-in-out;
  cursor: pointer;
}

.itemCount,
.itemCount-icon {
  width: 2em;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  color: black;
  place-items: center;
}

.itemCount {
  font-size: 1.5rem;
  font-family: sans-serif;
  visibility: hidden;
  user-select: none;
}

.itemCount::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.5em;
  background: var(--yellow);
  z-index: -1;
  transition: height 400ms ease-in-out;
}

.itemCount-icon {
  border-radius: 50%;
  font-size: 1.35rem;
  transition: left 500ms ease-in-out;
  color: #fff;
}

.expand {
  width: 10em;
  border-radius: 4em;
  background-color: #fff;
}

.expand .plus-icon {
  left: 85%;
  color: black;
}

.expand .minus-icon {
  left: 15%;
  color: black;
}

.expand .itemCount {
  visibility: visible;
}

.itemCount.showDown::before {
  top: 0;
  height: 100%;
}

.itemCount.hideDown::before {
  height: 0;
  bottom: 0;
}

.itemCount.showUp::before {
  bottom: 0;
  height: 100%;
}

.itemCount.hideUp::before {
  height: 0;
  top: 0;
}

.itemCount-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


@keyframes onloadscale {
    24% {
        scale: 1;
    }

    100% {
        scale: 1.02;
    }
}

@keyframes onloadopacity {
    24% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 768px) {
    .navigation-bar {
        display: none;
    }

    .menu {
        display: inline-block;
    }

    #display-mode-toggle {
        display: inline-block;
    }

    #profile-button {
        display: none;
    }

    .profile-image {
        margin-top: 0;
    }
}