@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



body {
    overflow-x: hidden;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.main-content {
    min-height: calc(100vh - 160px); 
    background-color: #f4f4f4;
}

.page-container {
    background-color: #fff;
    padding-bottom: 30px;
}

/*global setting */

.flex-container-custom {
    display: flex;
    
}

.smallPrint {
    font-size: .9rem;
    padding-left: 30px;
}

.no-pad-marg {
     padding-right: 0rem;
    padding-left: 0rem;  
}
.button {
    border-radius: 30px;
    background-color: #a73a43;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 25px;
    font-weight: 700;
}

.button:hover {
    background-color: #9bc1f9;
    color: #123a5d;
    font-weight: 700;
}

.button.white {
    background-color: #fff;
    border: 1px solid #0000ff;
    color: #0000ff;
}

.button.white:hover {
    background-color: #0000ff;
    border: 1px solid #fff;
    color: #fff;
}

.button.white-gray {
    background-color: #fff;
    border: 1px solid #999999;
    color: #999999;
}

.button.white-gray:hover {
    background-color: #9bc1f9;
    color: #123a5d;
    font-weight: 700;
}

.button.blue {
    background-color: #9bc1f9;
    border: 1px solid #123a5d;
    color: #123a5d;
}

.button.blue:hover {
    background-color: #123a5d;
    border: 1px solid #fff;
    color: #fff;
}


.rounded-select {
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  padding: 5px 10px 5px 10px; /* extra right padding for arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('/images/assets/down-chevron.png'); /* your custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px; /* size of your chevron */
}

.text-divider {
  display: flex;
  align-items: center; /* Vertically center the text and lines */
  white-space: nowrap; /* Prevent text from wrapping */
  padding-top:20px;
  padding-bottom: 20px;
  color: #a73a43;
  font-weight: 700;
}

.text-divider::before,
.text-divider::after {
  content: "";
  flex-grow: 1; /* Allow lines to fill available space */
  height: 1px; /* Line thickness */
  background-color: #a73a43; /* Line color */
  margin: 0 10px; /* Space between lines and text */
}

/* form elements */

.number-input {
  display: inline-flex;
  /*align-items: center;*/
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  height: 40px;
}

.number-input input[type="number"] {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    height: 40px;
  -moz-appearance: textfield;
}

/* Remove native spinner in Chrome/Safari */
.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input button {
  background: #f0f0f0;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

.number-input button:hover {
  background: #e0e0e0;
}


@media print, screen and (min-width: 40em) {
    .reveal.medium-large {
        width: 75%;
        max-width: 75rem;
    }
}

/* navigation */
/*top bar menu */

.top-bar-menu-grid-container {
    display: block;
    width: 100%;
    background-color: #123a5d;
    text-align: right;
}

ul.top-menu-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #123a5d;
}

.top-menu-bar li {
  float: right;
}

.top-menu-bar li a {
  display: inline-block;
  color: white;
  text-align: center;
  vertical-align: middle; 
  padding: 16px;
  text-decoration: none;
}

.top-menu-bar li a:hover {
  /*   background-color: #111111; */
}

.top-menu-bar li:first-child a{
  padding-right: 0px;
}
.top-menu-bar .amenu-initials{
    padding-right: 0px;
}

.top-text-menu-item {
    padding-top: 5px; 
}

.menu-view-cart {
    padding-top: 7px;
}
.menu-cart {
    padding-right: 4px!important;
}

.menu-cart-count {
    color:  #fff;
    font-size: .9rem;
}

@media print, screen and (min-width: 40em) {

    .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
        content: url('/images/assets/down-chevron.png');
         
        display: block;
        width: 10px; /* Set the actual width of the image */
        height: 10px; /* Set the actual height of the image */
        border-style: none;
        border-width: 0px;
        border-bottom-width: 0;
        border-color: transparent;
        right: -5px;
        left: auto;
        margin-top: -6px;
        transform-origin: 75% 75%;
        vertical-align: middle;
    }
    .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a:hover::after {
        transform: rotate(-180deg); /* Rotate the chevron 90 degrees clockwise on hover */
    }
    
    li.is-dropdown-submenu-parent.is-active a::after {
        transform: rotate(-180deg);
    }

    .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
        padding-right: .9rem;
    }
    
    [aria-haspopup="true"], [aria-haspopup="true"]:hover,
    .is-dropdown-submenu-parent, is-dropdown-submenu-parent:hover,
    is-dropdown-submenu-parent a, is-dropdown-submenu-parent a:hover{
        background-color: #fff!important;
        text-decoration: none!important;
      }
      .sub-menu-items {
          padding-top: 8px;
          padding-bottom: 8px;
          box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
      }
      .submenu-item {
          margin-left: 1rem;
      }
      .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
        right: -30px;
     }
}
/* menu */
.menu-login-button, .menu-portal-button {
    padding-top: 2px;
    height: 70px;
}



.topbar-responsive {
  background: #ffffff;
  padding: 1rem .5rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}

.topbar-responsive .topbar-responsive-logo {
  color: #fefefe;
  vertical-align: middle;
}

.topbar-responsive .menu {
  background: #ffffff;
}

.topbar-responsive .menu li:last-of-type {
  margin-right: 0;
}

.topbar-responsive .menu a {
  color: #264a6a;
  transition: color 0.15s ease-in;
}


.topbar-responsive .menu a:hover {
  color: #c6d1d8;
}

.blue-line-bar {
    height:4px;
    background-color: #9bc1f9;
    margin-bottom: 0px;
    
}

@media screen and (max-width: 39.9375em) {
  .topbar-responsive .menu a {
    padding: 0.875rem 0;
  }
}

.topbar-responsive .menu .topbar-responsive-button {
  color: #fefefe;
  border-color: #fefefe;
  border-radius: 5000px;
  transition: color 0.15s ease-in, border-color 0.15s ease-in;
}

.topbar-responsive .menu .topbar-responsive-button:hover {
  color: #c6d1d8;
  border-color: #c6d1d8;
}

@media screen and (max-width: 39.9375em) {
  .topbar-responsive .menu .topbar-responsive-button {
    width: 100%;
    margin: 0.875rem 0;
  }
}

@media screen and (max-width: 39.9375em) {
  .topbar-responsive {
    padding: 0.75rem;
  }
  .topbar-responsive .top-bar-title {
    position: relative;
    width: 100%;
  }
  .topbar-responsive .top-bar-title span {
    position: absolute;
    right: 0;
    border: 1px solid #fefefe;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .topbar-responsive .top-bar-title span .menu-icon {
    margin-bottom: 4px;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@media screen and (max-width: 39.9375em) {
  .topbar-responsive-links {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    width: 100%;
    -webkit-animation: fadeIn 1s ease-in;
            animation: fadeIn 1s ease-in;
  }
}

.main-content {
    min-height: calc(100vh - 210px);
    padding-top: 30px;
    padding-bottom: 30px;
    
}

/*home page */
.home-search-bar {
    background-color: #9bc1f9;
    padding-top: 30px;
    padding-bottom: 30px;
}

.home-page-image-overlay {
    display: inline-block;
    padding-top: 170px;
    color: #fff;
}

.home-page-image-overlay h3 {
    font-size: 2.1rem;
    font-weight: 900;
}
.home-page-image-overlay p {
    font-size: 1.2rem;
}
.home-page-image-overlay p {
    font-size: 1.4rem;
}

.s-text-bar {
    font-size: 1.8rem;
    color: white;
    font-weight: 900;
}

.overlay-shadow {
    padding: 14px;
    background-color: rgba(128, 128, 128, 0.5); 
}

.wu {
    color: #fff;
    text-decoration: underline;
    
}
.wu:hover {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}



/*video*/
.video-background.large-video{
    width: 100vw;
}

/* profile top header */

.initials-circle {
  width: 40px;
  height: 40px;
  background-color: #9bc1f9; /* Choose any color */
  color: #123a5d;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%; /* Makes it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  text-transform: uppercase;
}

.initials-circle:hover {
    background-color: #a73a43;
    color: #fff;
}

.welcome-name {
    display:inline-block;
    
    font-weight: 900;
    color: #fff;
}

.profile-image {
    width: 100px;         /* or any fixed size */
    height: 100px;
    border-radius: 50%;   /* makes it a circle */
    border: 1px solid #000;  /* 1px solid black border */
    object-fit: cover;    /* ensures the image fills the circle properly */
}

.profile-image-small {
     width: 60px;         /* or any fixed size */
    height: 60px;
    border-radius: 50%;   /* makes it a circle */
    border: 1px solid #000;  /* 1px solid black border */
    object-fit: cover;    /* ensures the image fills the circle properly */ 
}

/* home page */

.home-practice-drill-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.home-practice-drill {
    height: 620px;
    width: 100%;
    
}

/* product display cards */
.card.display {
    padding: 30px;
}

.card-image-container {
    width:100%;
   
}

.card.display h3 {
    color: #a73a43;
    font-family: roboto;
    font-weight: 700;
    font-size: 1.6rem;
}

.card.display .price {
    color: #000;
    font-weight: 700;
    font-size: 1rem;
}      


    
/* product page */

.product-image-sm-container {
   
}

.product-image-sm {
    padding-bottom: 8px;
    object-fit: cover; 
    
}

.product-image-sm {
    width: 76px;
    height: 76px;
}

.product-image-lg-container {
    width: 100%;
    height: 500px;
    vertical-align: top;
}

.product-image-lg {
    object-fit: cover !important; 
    width: 100%; 
    height: 500px;
}

.product-profile-image {
    object-fit: cover !important;
    width: 100%;
    height: 160px;
    float: left;
    
}
.product-profile-name {
    padding-top: 10px;
}

.product-desciption {
    margin-top: 80px;
}
.product-profile-default {
  width: 60px;
  height: 60px;
  background-color: #9bc1f9; /* Choose any color */
  color: #123a5d;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%; /* Makes it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  text-transform: uppercase;
}
.product.fa-solid.fa-user {
    font-size: 30px;
}

.product.fa-heart {
    color: #a73a43;
    font-size: 16px;
    padding-right: 4px;
}

.product.fa-medal {
    color: #a73a43;
    font-size: 16px;
    padding-right: 4px;
}

.product.fa-youtube {
    color: #a73a43;
    font-size: 16px;
    padding-right: 4px;
}

.product-price {
    padding: 10px 0;
    font-size: 2rem;
    font-weight: 900;
    color: #123a5d;
}

h2.product-title{
    color: #a73a43;
    font-weight: 900;
    font-size: 3.4rem;
}
.preview-share-container {
    padding-top: 10px;
}

#product-tabs .tabs-title{
    width: 50%;
}

#product-tabs  .tabs-title > a {
     font-size: 1.5rem;
    color: #9f9f9f;
}

#product-tabs .tabs-title > a:focus, #product-tabs .tabs-title > a[aria-selected=true] {
    background: transparent;
    margin-bottom:-4px;
    border-bottom: solid 4px #9bc1f9!important;
    color: #333333;
}

#product-tabs .tabs-title {
    background: transparent;
    color: #9f9f9f!important;
    border-bottom: solid 4px #f4f4f4;
}

#product-tabs .tabs-title > a:hover {
    background: transparent;
    color: #333333;
    cursor: pointer;
}

#product-tabs, #product-tabs-content {
    border: none;
    border-top: 0;
    background: transparent;
    color: #0a0a0a;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#product-tabs-content {
    border-top: solid 1px #cfcfcf;
}

.preview-image-container {
    display: block;
    width: 80%;
    margin: auto auto;
    padding: 16px;
}
.preview-image-container img {
    width: 100%;
    height: auto;
}

.spec-title {
    display: inline-block;
    width: 30%;
    padding-bottom: 8px;
 }
.spec-desc {
    display: inline-block;
    width: 70%;
    padding-bottom: 8px;
}
.spec-title span {
    color: #999999;
    font-size: 1.3rem;
    font-weight: 700;
}
.spec-desc span{
   color: #333333;
    font-size: 1.1rem;
    font-weight: 500;
}

.inc-title {
    display: inline-block;
    width: 40%;
    padding-bottom: 8px;
 }
.inc-desc {
    display: inline-block;
    width: 60%;
    padding-bottom: 8px;
}
.inc-title span {
    color: #999999;
    font-size: 1.3rem;
    font-weight: 700;
}
.inc-desc span{
   color: #333333;
    font-size: 1.1rem;
    font-weight: 500;
}

.spec-row {
    display: flex;
    width: 100%;
    height: 40px;
}
/* star rating */
 /* Ratings widget */
        .rate [type="radio"] + label {
         margin-left: 0;
         margin-right: 0;
         display: block; /* Or inline, or whatever layout you want */
       }
 
    .rate {
        display: inline-block;
        border: 0;
        color: #ccc!important;
    }
    .rate label {
         color: #ccc;
    }
    /* Hide radio */
    .rate > input {
        display: none;
    }
    /* Order correctly by floating highest to the right */
    .rate > label {
        float: right;
    }
    
    
    
    /* The star of the show */
    .rate > label:before {
        display: inline-block;
        font-size: 2rem;
        padding: .3rem .2rem;
        margin: 0;
        cursor: pointer;
        font-family: "Font Awesome 6 Free";
        content: "\f005"; /* full star */
    }
    .show-rating > label:before {
        display: inline-block;
        font-size: 1rem;
        padding: .15rem .1rem;
        margin: 0;
        cursor: pointer;
        font-family: "Font Awesome 6 Free";
        content: "\f005"; /* full star */
    }

    /* Half star trick */
    .rate .half:before {
        content: "\f089"; /* half star no outline */
        position: absolute;
        padding-right: 0;
    }
    /* Click + hover color */
            .rate input:checked ~ label, /* color current and previous stars on checked */
            .rate label:hover, .rate label:hover ~ label { color: #fcb03f;  } /* color previous stars on hover */

            /* Hover highlights */
            .rate input:checked + label:hover, .rate input:checked ~ label:hover, /* highlight current and previous stars */
            .rate input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
            .rate label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #fcb03f;  } 


    #rating-number {
       display:inline-block;
       float: left;
       width: 8%;
       margin-left: 6px;
    }   
    #display-rating-stars {
        display: inline-block;
        float: left;
        width: 90%;
        margin-top: -4px;
    }
 
    
/* cart */
.cart-ur-links {
    padding-top: 6px;
}

/* credit card */
.card-input  {
    width: 100%;
    font-size: 1.3rem;
    box-sizing: border-box;
    border: #ddd solid 1px;
    color:555;
    padding: 8px;
    height: 20px;
    border-radius: 6px;
    margin-bottom: 30px;
    height: 40px;
    background-color: #ffffff;
}
    
/* footer */

.footer.grid-container {
    padding-top: 30px;
    
}

.footer {
  background-color: #33ccff;
  color: #fff;
}

.footer a {
  color: #fff;
  transition: color 0.3s;
}

.footer a:hover {
  color: #fff;
}

.footer .menu a {
  font-weight: 500;
}

.footer i {
  font-size: 1.5rem;
}
.all-rights-reserved {
    padding-top: 40px;
    padding-bottom:10px;
}

.footer .social-icons .fa-brands {
    color: #123a5d;
    font-size: 1.8rem;
}

.footer .social-icons a {
    margin-left: 0px;
    padding-left: 8px;
    padding-right: 6px;
}

/* masonry */


.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
}

@media screen and (min-width: 25em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

@media screen and (min-width: 37.5em) {
  .masonry-css {
    -webkit-column-count: 1;
            column-count: 1;
  }
}

@media screen and (min-width: 50em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

@media screen and (min-width: 68.75em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

.masonry-css-item {
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1rem;
}




@media screen and (max-width: 39.9375em) {
    .product-image-sm-container {
        display: inline-block;
        width: 74px;
        height: 74px;
    }
    .product-image-lg {
        height: 300px;
    }
}