html {
}

.anchor-target {
    scroll-margin-top: 110px;
    scroll-behavior: smooth;
}

:root {
  --theme-main-color: #007BFF ;
}

/*---Media Queries --*/
@media (max-width: 992px) {



}
@media (max-width: 768px) {

  
}
@media (max-width: 576px) {
  

}


/* FIELD READONLY */
.bg-dark-brown {    background-color: #bcbcbc;  }

/* Navigation SVG */

.navbar-nav .nav-link{
    display:flex;
    align-items:center;
    gap:8px;
    transition:.25s ease;
}

.menu-svg{
    width:18px;
    height:18px;
    object-fit:contain;
    flex-shrink:0;
    transition:.25s ease;
}

.navbar-nav .nav-link:hover .menu-svg{
    transform:scale(1.1);
}

@media (max-width:768px){

    .menu-svg{
        width:20px;
        height:20px;
    }

}

/* Navbar */

.linkColor         {  color:var(--theme-main-color) !important;  }                  /* equals to rgb(0,123,255) */
.lesspaddingleft   {  padding-left: 0rem !important; }                              /* shifts navbar toggler icon to the left in mobile devices */
.navbar_custom     {  background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }  /* opaque background + separator for sticky navbar */
.nav-item a:active {  background-color: skyblue !important; text-decoration: none;}
.nav-item a:hover  {  background-color: skyblue !important; text-decoration: none;}

/* Floating Top Products Button */
.top-products-tab {
    position: fixed;
    right: 0;
    top: 110px;
    z-index: 1019;
    background-color: #dc3545;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 20px 12px;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
    text-decoration: none;
    transition: background-color .25s ease;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
}
.top-products-tab:hover {
    background-color: #b02a37;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 576px) {
    .top-products-tab {
        top: 70px;
    }
}

/* Carousel - make the image fully responsive (img-fluid not used)*/
.carousel-inner img {  width:  100%; height: 100%; margin: auto; } 

/* Distance of Carousel Controls from the bottom   of the carousel */
.carousel-control-prev,
.carousel-control-next{  bottom: 10%; }

/*---Firefox Bug Fix --*/

.carousel-item {  transition: -webkit-transform 0.5s ease; transition: transform 0.5s ease; transition: transform 0.5s ease, -webkit-transform 0.5s ease; -webkit-backface-visibility: visible; backface-visibility: visible; }    

ul                 {   list-style-type: none; }

/* Jumbotron */
.jumbotron         { padding-top: 1rem; padding-right: 0rem;  padding-bottom: 0.5rem; padding-left: 0rem;  width:100%; background-color: #e9ecef; margin-bottom: 2rem; }
.jumbotron_text    { color:var(--theme-main-color)!important; font-weight: 600; }   /* fonts -> lighter , normal,       bold,  bolder,  */
                                                                     /*                    400,          700,            */
                                                                     /*          100-300,        500-600,       800,900  */
                                                                     
/* Horizontal Divider */
hr.thicker {  border: 0;   border-top: 2px solid var(--theme-main-color); }

h6.line { display: flex; flex-direction: row; }
h6.line:before, 
h6.line:after{ content: ""; flex: 1 1;  border-bottom: 3px solid var(--theme-main-color); margin: auto; }                                                           


/* Remove Input field up/down arrows for input number type */

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}                                         /* Firefox           */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}    /* Chrome  & Safari  */

                                                                                              /* IE - Not  needed  */


/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] { padding: 1.5rem; }

/* Counter Padding */
.counterpadding { padding-top: 0.375rem !important;  padding-right: 0.75rem !important; padding-bottom: 0.375rem !important;  padding-left: 0.75rem !important;  }  /*  */

.must_fill_not   { display:none !important;  } /* Dont remove */

.custom-width { width: fit-content; }

/* Top Products - List with custom * bullet — all lines aligned */
/* - em — relative to the parent's font-size (or own font-size for font-size property). Compounds with nesting.                                                                                                                             
   - rem — relative to the root <html> element's font-size. Always consistent no matter how deep. */
.list-hanging li {
    padding-left: 0.8em;
}
.list-hanging li::before {
    content: "*";
    float: left;
    width: 0.8em;
    margin-left: -1.5em;
}

/* Contact Us Button — blue default, red hover */
.btn-contactus {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
.btn-contactus:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}


/* Notes */

/* 1.
Inline styles added to an element (e.g., style="font-weight:bold") 
always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

*/

/* 2. Bootstrap 4 Display Tiers or “BreakPoints”…

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap 4

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

*/

/* ============================================================
   SCROLL REVEAL — IntersectionObserver fade-up animations
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }
.reveal-delay-7 { transition-delay: 700ms; }
.reveal-delay-8 { transition-delay: 800ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}