/*20260522 - Moved the meet-artix.css into the current directory from the custom module folder
  since we are using the styles defined in that file in more than one module, so it makes sense 
  to keep it in the common custom.css file instead of keeping it in the module specific css file.
*/

/*20260522 -  Removed temporarily 
@import "./meet-artix.css";
*/

.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 */

:root {
  --header-bg: rgba(0, 0, 0, 0);
  /*--header-logo-bg: rgba(255, 255, 255, 0.5); */
  --header-logo-bg: rgba(255, 255, 255, 0);
}

.vivek_footer_attributes {
  height: 185px;
  flex: 1;  /* Allow the footer to grow and fill the remaining space */
}

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

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


/* Constrain the video block and its contents on mobile */
#block-artix-slidervideo {
  width: 100%;
  max-width: 100%;
  overflow: hidden;   /* prevents any child from bleeding out */
}

/* Constrain video/iframe inside the block */
#block-artix-slidervideo video,
#block-artix-slidervideo iframe,
#block-artix-slidervideo embed,
#block-artix-slidervideo > p {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: auto;
}

/* Prevents iOS auto-zoom on input focus */
@media screen and (max-width: 767px) {
  input,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 20260521 - In the scrolled mode, the side-menu icons becomes grayed out, 
   to keep that as white color lines addiing following code. 
   We are using the 'not' condition to make sure that in the non-scrolled mode the icons are not grayed out, 
   as in the non-scrolled mode we want the header to be transparent and if we make the icons white
    then they will not be visible in the non-scrolled mode.

   We picked these selectors by inspecting the side menu icons in the scrolled mode and found that
   they have a common parent with class 'sidemenu_btn' and the icons are span elements inside that, 
   so we are targeting those span elements which do not have the class 'gradient-bg' as that class is 
   for the background of the side menu and we want to keep that as it is.  
 */

.fixedmenu .sidemenu_btn>span:not(.gradient-bg) {
  background: #fff !important;
}

.gradient-bg-vivek {
  background: #fff !important;
}

/* 20260503 - Trying to check how to make the header transparent in smaller screens. 
   For desktop sizes we were able to make it transparent with --header-bg 
 */
@media screen and (max-width: 767px) {
  .transparent-bg:not(.fixedmenu) {
    background: var(--header-bg);
    padding: 0;
  }
}

/* === TABLET AND UP === */
@media screen and (min-width: 768px) {
  .site-header .navbar-nav .nav-link {
    font-size: 1.125rem;
  }

  #sidemenu_toggle{
  position: absolute;
  }

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

  #block-artix-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-artix-header-navigation-links{
    display: block;
  }
  #block-artix-slidervideo{
    width: 100%;
  }
}

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

.hero > img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* 
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;
}



.navbar.fixedmenu .navbar-brand {
  
  /* 20260504 - Commenting out the below code as it was making the logo streched in the logo-scrolled mode.
  width: 300px;
  height: 60px; 
  */

  /* This code is from the non-scrolled mode above, so that the logo looks same in both modes */
  height: 40px;
  width: auto;
  /*background-color: var(--header-logo-bg);*/
  background-color: #00b3ff00;
  /*border-radius: 40px;*/

}


.navbar.fixedmenu .navbar-brand img {
  
  /* 20260504 - Commenting out the below code as it was making the logo streched in the logo-scrolled mode.
  width: 300px;
  height: 60px; 
  */

  /* This code is from the non-scrolled mode above, so that the logo looks same in both modes */
  height: 40px;
  width: auto;
  
}


.fixedmenu {
    box-shadow: var(--header-bg); 
}





.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: 100px;*/
  height: 100px;
  width: auto;
  background-color: var(--header-logo-bg);
  /*border-radius: 40px; */
}

.hero {
  margin-top: 120px;
  font-size: 1.2rem;
}

.hero-text {
  margin-top: 40px;
  font-size: 1.2rem;
}

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

/**
#block-artix-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 
}
**/

/* 20260506 - Added the 'not' condition below, as now we are saying that when the header is 
   rendered after scrollling down then we do need some backgrdound even though the initial landing page the header background 
   is transparent 
*/

.site-header .navbar:not(.fixedmenu) {
  background-color: var(--header-bg);
}

.site-header .navbar.fixedmenu {
  background-color: #00b3ff00;
}

#header{
  background-color: var(--header-bg);
}

.site-header .navbar .navbar-expand-lg .padding-nav .static-nav.fixedmenu {
  background-color: var(--header-bg)
}

.sidemenu_btn{
  /*background-color: rgba(112, 20, 135, 0.6); */
  background-color: var(--header-bg);
  border-radius: 0px; /* Adjust radius for corner roundness [4] */
  padding: 0px; /* Optional: space inside the box */
  width: 25px; /* 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: var(--header-bg);
  border-radius: 5px; /* Adjust radius for corner roundness [4] */
  padding: 3px; /* Optional: space inside the box */
  width: 30px; /* Optional: set width */
}



/* 20260530 - Adding the multiple versions of htis code below to render smaller logo on mobile devices */
/* 20260530 - Start */

/* Mobile First Approach i.e. if not qualified by any media dimentions */
.site-header .navbar-brand .logo-default {
  height: 50px;
  width: auto;
  background-color: var(--header-logo-bg);
  /*border-radius: 40px; */
}
/* 20260530 - End */

@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: var(--header-bg);
    border-radius: 10px; /* Adjust radius for corner roundness [4] */
    padding: 5px; /* Optional: space inside the box */
    width: 260px; /* Optional: set width */
  }
/* 20260530 - Adding the multiple versions of htis code below to render smaller logo on mobile devices */
/* 20260530 - Start */

  .site-header .navbar-brand .logo-default {
  height: 70px;
  width: auto;
  background-color: var(--header-logo-bg);

  /* 20260530 - End */
}
}
@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: var(--header-bg);
    border-radius: 15px; /* Adjust radius for corner roundness [4] */
    padding: 10px; /* Optional: space inside the box */
    width: 260px; /* Optional: set width */
  }

  /* 20260530 - Adding the multiple versions of htis code below to render smaller logo on mobile devices */
  /* 20260530 - Start */

    .site-header .navbar-brand .logo-default {
    height: 100px;
    width: auto;
    background-color: var(--header-logo-bg);

    /* 20260530 - End */
  }
}

/* Hiding the main banner on all pages */
/* 20260530 - Start - Making following changes to avoid break in scrolling when the top navbar banner is reidsplayed on scrolling */

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

#main-banner-page {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding: 0 !important;
}

/* 20260530 - End */




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


#block-artix-account-menu,
#block-artix-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-artix-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-artix-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;
}

/* Add following class to change the background of block with buttons so that buttons becomes more prominent*/
.widget.logincontainer.block-background-with-buttons{
  background-image: linear-gradient(to right, #5192e1a6 0%, #23ced5 51%, #5192e1 100%) !important;
  color: rgba(255, 255, 255, 1);
}


/* 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/artix/images/counter-bg.jpg");
}
*/

/* 20260504 (Start) - Following code we are trying to make the background image fixed so that it doesn;t scroll when we scroll the page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  
  /* Preference 2 */
  background: url("/themes/custom/artix/images/bg-gallery-header.jpg") center/cover no-repeat;
  /* Preference 1 */
  /*background: url("/themes/custom/artix/images/counter-bg.jpg") center/cover no-repeat; */
  /*background: url("/themes/custom/artix/images/banner-light1-1.jpg") center/cover no-repeat;*/
  z-index: -1;
}
/* 20260504 (End) */

/* 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-artix-primary-local-tasks,
.user-pass,
.logincontainer {
  color: rgba(255, 255, 255, 1) !important;
}

#block-artix-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;
    }
}

/* This is to color the message when a password reset email is sent then show message in different color 
   than white to distinguish from other elements on the block. 
*/

.messages.messages--status {
  color: #adff2f;
}

/*  Added this style to hide the "log in" link from the side menu, since we already have a "Login" button
*/

#block-artix-account-menu li:has(a[href="/user/login"]) {
  display: none;
}


/* Sidebar login block intro text */
/*
#block-artix-userlogin .login-intro,
.side-menu .login-intro {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
}

*?


/* 20260408 - Side-menu css start */

/* Commented out the below code as it did not work */
/* 20260408 - Added the following code to style the error message in situaiotn if a user attempts to log in via the sidebar and fails, the sidebar 
// will remain open and display the error message(s) above the login form inputs. See custom.js for the javascript to keep 
// side-emnu displayed on errors
*/

/* Sidebar login error messages */
/*
.sidebar-login-errors {
  margin-bottom: 16px;
}

.sidebar-login-errors .messages {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}

.sidebar-login-errors .messages--error {
  background-color: #c0392b;
  border: 1px solid #a93226;
}

.sidebar-login-errors .messages--warning {
  background-color: #e67e22;
  border: 1px solid #ca6f1e;
}

.sidebar-login-errors .messages ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.sidebar-login-errors .messages li {
  margin: 0;
}

*/
/* 20260408 - added the following css after commenting out */

.sidebar-login-errors {
  margin-bottom: 16px;
  padding: 10px 14px;
  background-color: #2b5cc075;
  border-radius: 4px;
}

.sidebar-error-message {
  color: #fff;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* 20260408 - Side-menu css end */

/* 20260409 - The following code is to style the messages on screen where CV is uploaded and there is account already present for that email etc. */
.messages--warning {
  background-color: #2b5cc075;
  color: #fff; 
  width: 57%;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;  
  margin-bottom: 20px;
}
/*
#edit-field-cv-first-name,
#edit-field-cv-last-name,
#edit-field-cv-middle-initial,
#edit-field-cv-suffix,
#edit-field-cv-contact-email,
#edit-field-cv-current-company,
#edit-field-cv-company-address,
#edit-field-cv-bachelors,
#edit-field-cv-masters,
#edit-field-cv-beyond-masters,
#edit-field-cv-certifications,
#edit-field-cv-experience,
#edit-field-cv-special-interests,
#edit-field-cv-patents {
  width: 57%;
  
}  

#edit-personal,
#edit-contact {
  width: 57%;
  padding-top: 20px;
}
*/

.js-form-item-field-cv-first-name,
.js-form-item-field-cv-last-name,
.js-form-item-field-cv-middle-initial,
.js-form-item-field-cv-suffix,
.js-form-item-field-cv-dob,
.js-form-item-field-cv-contact-email,
.js-form-item-field-cv-contact-number,
.js-form-item-field-cv-current-company,
.js-form-item-field-cv-company-address,
.js-form-item-field-cv-bachelors,
.js-form-item-field-cv-masters,
.js-form-item-field-cv-beyond-masters,
.js-form-item-field-cv-certifications,
.js-form-item-field-cv-experience,
.js-form-item-field-cv-special-interests,
.js-form-item-field-cv-patents {
  width: 57%;
  padding-bottom: 20px;
  color: aliceblue;
}

#cv-extractor-artix-upload-form,
#edit-cv-file--label,
#edit-photo--label {width: 57%;
  padding-top: 20px;
  color: aliceblue;
}

.cv-upload-submit {
  padding-top: 20px;
}

#edit-personal,
#edit-contact {
  width: 100%;
  padding-top: 15px;
}

#edit-employment,
#edit-education,
#edit-professional,
#edit-other {
  width: 100%;
  padding-top: 15px;
}

#edit-field-cv-company-address,
#edit-field-cv-bachelors,
#edit-field-cv-masters,
#edit-field-cv-beyond-masters,
#edit-field-cv-certifications,
#edit-field-cv-experience,
#edit-field-cv-special-interests,
#edit-field-cv-patents {
  width: 100%;
  padding-top: 15px;
}

.cv-section-title
{
  font-size: 15px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 30px;
  color: cornflowerblue;
}


/* 20260409 - Start - The following code is to style the landing page elements. We ar3 constructing our landing page with module 'artix_landing_page' */
.hero {
  /*background: linear-gradient(135deg, #2c7a7b, #68d391); */
  color: white;
  padding: 50px 20px;
  text-align: center;
}

.section {
  padding: 40px 20px;
  max-width: 1100px;
  margin: auto;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.2rem;
  color: white;
}

.center-text {
  text-align: center;
  max-width: 700px;
  margin: auto;
  color: white;
  font-size: 1.2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  margin: 10px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

.btn-primary {
  background: white;
  color: #2c7a7b;
}


.btn-primary, .btn-primary:active {
  display: inline-block;
  padding: 12px 28px;
  background-color: #24cdd500 !important;
  color: #79c0b9 !important;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}


.btn-outline {
  border: 1px solid white;
  color: white;
}



.btn:hover {
  border: 1px solid white;
  color: #25a3f0;
}

/* 20260409 - End - The following code is to style the landing page elements. We ar3 constructing our landing page with module 'artix_landing_page' */


/* 20260505 - Start - Styling the sidebar & Cards to look different from what we see. */
/* Looks like .gradient-bg is overriding hiding the .side-menu, so we added .gradient-bg below to make our changes take effect */
.side-menu {
  background-color: rgba(112, 20, 135, 0.6);
  color: rgba(255, 255, 255, 0.6);
  width: 20%;
}

.side-menu .navbar-nav .nav-link {
  font-size: large !important;
}

.side-menu .sideNavPages .nav-link {
  font-size: small !important;
}
.gradient-bg {
  background-color: rgba(112, 20, 135, 0.6) !important;
  /* 20260530 */
  /*background:  rgba(205, 136, 235, 0.6) !important; */
  background: #007bffdb !important; 

  color: rgba(255, 255, 255, 0.6);
  width: 20%;
  height: 80%;
}


.card {
  background: #fefefe7d;
  color: #1d3379
}

.center-text {
  color: #1d3379; 
}

.section-title {
  color: #24cdd5;
}

/* 20260505 - End - Styling the sidebar to look different from what we see. */

/* 20260514 - Start - Added following to add a background image to the website, which is dynamic and responds to mouse movement. */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;       /* sits behind all content */
  pointer-events: none;
}

/* 20260514 - End */


/* 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;
  }
}

/* 20260523 - Added the following code to over the bootstrap default for the alert messages, 
   as currently the alert messages are not very visible with the default bootstrap styles, 
   so we are adding our custom styles to make them more visible and prominent. */
.alert-success {
  background-color: #d4edda00;
  color: #ffc107;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 4px;
}