.alert-item {
  margin: 0;
}
.alert {
  border-radius: 0;
}
.toolbar-tray-open .site-header .fixedmenu {
  top: 80px !important;
}
.toolbar-tray-open .site-header .transparent-bg {
  top: 80px !important;
}
.toolbar-oriented .toolbar-bar {
  z-index: 9999;
}
.toolbar-menu .toolbar-icon-admin-toolbar-tools-help:before {
  box-sizing: content-box;
  background-image: url(../images/drupal-9-logo.svg);
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 2px;
  margin-left: 4px;
}
.site-header .navbar {
  z-index: 101;
}



/* Vivek's changes start - Responsive font sizes for navbar items */

.site-header .navbar-nav .nav-link {
  font-size: 0.875rem; /* 14px - mobile first */
  
}

#sidemenu_toggle{
  position: 30px;
}
#block-xtrax-header-navigation-links{
  display: none;
}



@media screen and (min-width: 768px) {   /* Tablet and up */
  .site-header .navbar-nav .nav-link {
    /*font-size: 1rem; /* 16px - tablet */
    font-size: 1.125rem;
  }

  #sidemenu_toggle{
  position: absolute;
  }

  #block-xtrax-header-navigation-links{
    display: block;
  }

  
  #block-xtrax-slidervideo{
    width: 100%;
  }

}
@media screen and (min-width: 1024px) {  /* Desktop and up */
  .site-header .navbar-nav .nav-link {
    /*font-size: 1.125rem; /* 18px - desktop */
    font-size: 1.5rem;
  }
  
  #sidemenu_toggle{
  position: absolute;
  }
  
  #block-xtrax-header-navigation-links{
    display: block;
  }
  
  #block-xtrax-slidervideo{
    width: 100%;
  }

}

/* 
To make sure in mobile view the image retains it's aspect ratio
*/

.hero > img {
  max-width: 100%; /* Ensures the image scales down within its container */
  height: auto;    /* Automatically calculates the height to maintain the aspect ratio */
  display: block;  /* Optional: removes extra space below the image if it is an inline element */
}

.site-header .navbar .container {
  height: 60;
  margin-left: 20px;
  margin-right: 20px;
}

.site-header .navbar-brand img {
  width: 300px;
  height: 60px; 
}


.site-header .navbar-brand .logo-default {
  /* original values coming from style.css
  width: 90px;
  height: 113.63px; */

  /* this below made the height of the .site-header larger again 
  width: 180px;
  aspect-ratio: 90 / 113.63; */

  /* so lets try keeping the height fixed */
  height: 60px;
  width: auto;
}

/* the below make the mobile view weird */
/* current width and hight is 477.750 X 76 *, lets increase the width to 600 */
/*
#block-xtrax-main-navigation-custom {
  
  width: 600px;
  height: auto;
}
*/
/* commenting out after moving it into the side menu */
/* Adding rounded corners to #block-xtrax-main-navigation-custom */

/**
#block-xtrax-main-navigation-custom {
  background-color: rgba(59, 130, 246, 0.4); /* Color with 60% opacity [11] 
  border-radius: 15px; /* Adjust radius for corner roundness [4] 
  padding: 20px; /* Optional: space inside the box 
  width: 600px; /* Optional: set width 
}
**/


.site-header .navbar{
  background-color: rgba(0, 0, 0, 0.6);
}

#header{
  background-color: rgba(0, 0, 0, 0.6);
}

.site-header .navbar .navbar-expand-lg .padding-nav .static-nav.fixedmenu {
  background-color: rgba(0, 0, 0, 0.6)
}

.sidemenu_btn{
  /*background-color: rgba(112, 20, 135, 0.6); */
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0px; /* Adjust radius for corner roundness [4] */
  padding: 0px; /* Optional: space inside the box */
  width: 200px; /* Optional: set width */
}


#site-footer{
  background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%);
  color: rgba(255, 255, 255, 1);
}

.site-header .navbar .container .navbar-brand{
  /*background-color: rgba(112, 20, 135, 0.6); */
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px; /* Adjust radius for corner roundness [4] */
  padding: 3px; /* Optional: space inside the box */
  width: 260px; /* Optional: set width */
}

@media screen and (min-width: 768px) {   /* Tablet and up */
  .site-header .navbar .container .navbar-brand {
    /*font-size: 1rem; /* 16px - tablet */
    /*background-color: rgba(112, 20, 135, 0.6); */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px; /* Adjust radius for corner roundness [4] */
    padding: 5px; /* Optional: space inside the box */
    width: 260px; /* Optional: set width */
  }
}
@media screen and (min-width: 1024px) {  /* Desktop and up */
  .site-header .navbar .container .navbar-brand{
    /*font-size: 1.125rem; /* 18px - desktop */
    /*background-color: rgba(112, 20, 135, 0.6); */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 15px; /* Adjust radius for corner roundness [4] */
    padding: 10px; /* Optional: space inside the box */
    width: 260px; /* Optional: set width */
  }
}
/* Hiding the main banner on all pages */

#main-banner-page {
  display: none;
} 

/* To list the links horizontally in menu placed in the header area */
/* By region */
#block-xtrax-header-navigation-links > ul{
  display: flex;
  gap: 40px;
}


#block-xtrax-account-menu,
#block-xtrax-header-navigation-links{
  /*background-color: rgba(112, 20, 135, 0.6); */
  color: rgba(255, 255, 255, 0.6);
  /*font-size: 1.5em; Didn't like the bigger size*/
}


#block-xtrax-userlogin > ul{
  /*background-color: rgba(112, 20, 135, 0.6); */
  color: rgba(255, 255, 255, 0.6);
  /*font-size: 1.5em; Didn't like the bigger size*/
}


#block-xtrax-slidervideo > p{
margin: auto
}


/* We can't hide it, as it removes that dynamic effect where the top bar appears on scroll down 
#main-banner-page {
  display: none;
} */

/* The javascript code for this dynamic behaviour is in functions.js file. Following is that code
let headerHeight = $("header").outerHeight();
let navbar = $("nav.navbar");
if (navbar.not('.fixed-bottom').hasClass("static-nav")) {
    $window.scroll(function () {
        let $scroll = $window.scrollTop();
        let $navbar = $(".static-nav");
        let nextSection = $(".section-nav-smooth");
        if ($scroll > 250) {
            $navbar.addClass("fixedmenu");
            nextSection.css("margin-top", headerHeight);
        } else {
            $navbar.removeClass("fixedmenu");
            nextSection.css("margin-top", 0);
        }
        if ($scroll > 125) {
            $('.header-with-topbar nav').addClass('mt-0');
        } else {
            $('.header-with-topbar nav').removeClass('mt-0');
        }
    });
    $(function () {
        if ($window.scrollTop() >= $(window).height()) {
            $(".static-nav").addClass('fixedmenu');
        }
    })
}

Scroll Trigger: When you scroll more than 250 pixels, it adds the fixedmenu class to .static-nav
Compensation: It adds margin-top to .section-nav-smooth equal to the header height to prevent content jump
Dependency: It requires the element with class section-nav-smooth to exist

When you hide #main-banner-page, you lose the 250px scroll distance needed to trigger the sticky header effect.


*/


/* Reduce the "padding" in the footer */

#site-footer {
  padding-top: 2.5rem;
}

/* Color the box where it shows the login user name and password on the page when we navigate to /user/login page */
.widget.logincontainer {
  background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%) !important;
}

/* Give our overall page the background image */
/* Make the white background on the login page transparent so that it shows the background image. */

#sign-in {
  background: #f6f7f80d;
}

/* Currently it has two columns, one column shows the login block and another column shows another image, since we have the background image remove the column for hte image to avoid too many images. */
.login-image {
  display: none;
}

body {
  background-image: url("/themes/custom/xtrax/images/banner1-1.jpg");
}

/* On the login box, make the background of the id and password text field as white */

#edit-name,
#edit-pass,
#edit-mail,
#edit-company-name {
  background-color: #fff;
}

.description {
 color: greenyellow;

}

#block-xtrax-primary-local-tasks,
.user-pass,
.logincontainer {
  color: rgba(255, 255, 255, 1) !important;
}

#block-xtrax-primary-local-tasks > ul > li:nth-child(1) > a {
  display: none;
}

/* Following code (the CSS styles for html, body, canvas, main-wrapper etc below) is to keep the footer always at bottom, otherwise if the content is smaller then the footer shifts up */

/* Make the body a flex container */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Make the main content area grow to fill available space */
.vivek-shift-footer-to-bottom
{
  flex: 1;
}

/* Footer stays at bottom */
footer {
  flex-shrink: 0;
}



.pmp-product-page {
    background: #f4f4f900;
    background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%);
    padding: 40px 20px;
}

.pmp-product-page .product-card {
    max-width: 1100px;
    margin: auto;
    background: #ffffff;
    background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 40px;
}

.pmp-product-page h1 {
    text-align: center;
    color: #2c1f88;
    margin-bottom: 5px;
    font-size: 2rem;
}

.pmp-product-page .subtitle {
    text-align: center;
    color: #fff !important;
    margin-bottom: 40px;
    font-size: 12px;
}

.pmp-product-page .section {
    margin-bottom: 40px;
}

.pmp-product-page .section h2 {
    border-left: 5px solid #1f3c88;
    padding-left: 12px;
    color: #2c1f88;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.pmp-product-page ul {
    padding-left: 20px;
    line-height: 1.7;
    color: #fff;
}

/* Pricing */
.pmp-product-page .pricing-box {
    background: #1f3c88;
    color: white;
    border-radius: 12px;
    padding: 35px;
    text-align: center;
    margin: 40px 0;
}

.pmp-product-page .price {
    font-size: 48px;
    font-weight: bold;
}

.pmp-product-page .old-price {
    text-decoration: line-through;
    opacity: 0.7;
}

.pmp-product-page .badge {
    background: #ffcc00;
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

/* Testimonials */
.pmp-product-page .testimonials {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.pmp-product-page .testimonial {
    flex: 1;
    min-width: 280px;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* CTA */
.pmp-product-page svg {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.pmp-product-page svg:hover {
    transform: scale(1.08);
}

.pmp-product-page .buy-button {
    display: inline-block;
    background: linear-gradient(90deg, #ffcc00, #ffaa00);
    color: #000;
    font-size: 22px;
    font-weight: bold;
    padding: 18px 50px;
    border-radius: 15px;
    text-decoration: none;
    transition: 0.2s ease;
}

.pmp-product-page .buy-button:hover {
    transform: scale(1.05);
}

/* Two-column layout */
.pmp-product-page .content-pricing-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
}

.pmp-product-page .left-column {
    flex: 2;
}

.pmp-product-page .right-column {
    flex: 1;
}

/* Make pricing box sticky (conversion boost) */
.pmp-product-page .right-column .pricing-box {
    position: sticky;
    top: 100px;
}

/* Improve pricing width */
.pmp-product-page .pricing-box {
    width: 100%;
    border-radius: 12px;
    padding: 35px;
}

/* Responsive */
@media (max-width: 900px) {
    .pmp-product-page .content-pricing-wrapper {
        flex-direction: column;
    }

    .pmp-product-page .right-column .pricing-box {
        position: relative;
        top: 0;
        margin-top: 20px;
    }
}


/* Vivek's changes end */





.mt-3dot75em {
  margin-top: 3.75em;
}
#block-tabs ul {
  display: table;
}
#block-tabs ul > li {
  display: table-cell;
  padding: 7px;
}
.links-comment-wrap {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
.links-comment a{
  margin-left: 7px;
}
#shop .profile_bg {
  position: relative;
}
#shop .links-comment-wrap {
  right: 25px;
}
#our-shop .form-item-quantity-0-value {
  display: none !important;
}
.page-cart-rv form table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}
.page-cart-rv form table thead tr th {
  border: 1px solid #e5e5e5;
  border-right: none;
  padding: 10px 15px;
  background-color: #f6f6f6;
  color: #464b50;
  vertical-align: top;
  font-size: 14px;
  font-weight: 600;
}
.page-cart-rv form table td {
  padding: 10px 15px;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-right: none;
}
td[headers="view-edit-quantity-table-column"] {
  overflow: hidden;
  position: relative;
  width: 130px;
}
td[headers="view-remove-button-table-column"] {
  text-align: center;
}
.page-cart-rv form table td:last-child {
  border-right: 1px solid #e5e5e5;
}
td[headers="view-remove-button-table-column"] input[type=submit]{
  background-color: #000;
  color: #fff;
  border: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
td[headers="view-remove-button-table-column"] input[type=submit]:hover{
  background-color: #888;
}
.page-cart-rv form .form-actions input[type=submit]{
  background-color: #000;
  text-transform: uppercase;
  border: 1px solid #000;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  color: #fff;
  padding: 10px;
}
.page-cart-rv form .form-actions input[type=submit]:hover{
  color: #000;
  background-color: transparent;
}
.page-search .search-form input[type=submit] {
  margin-top: 15px;
}
.page-search .container > h2 {
  margin-bottom: 25px;
}
@media (min-width: 768px) {
  .indented {
    margin-left: 20px;
  }
}