@font-face {
    font-family: 'BPG Square';
    src: url('../fonts/bpg-square-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/bpg-square-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/bpg-square-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/bpg-square-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/bpg-square-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/bpg-square-webfont.svg#bpg_squareregular') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'BPG LE Studio 02';
    src: url('../fonts/bpg-le-studio-02-webfont.eot'); /* IE9 Compat Modes */
    src: url('../fonts/bpg-le-studio-02-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/bpg-le-studio-02-webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/bpg-le-studio-02-webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/bpg-le-studio-02-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/bpg-le-studio-02-webfont.svg#bpg_le_studio_02regular') format('svg'); /* Legacy iOS */
}
@font-face{font-family:'BPG LE Studio 02';src:url(../fonts/bpg-le-studio-02-webfont.eot);src:url(../fonts/bpg-le-studio-02-webfont.eot?#iefix) format('embedded-opentype'),url(../fonts/bpg-le-studio-02-webfont.woff2) format('woff2'),url(../fonts/bpg-le-studio-02-webfont.woff) format('woff'),url(../fonts/bpg-le-studio-02-webfont.ttf) format('truetype'),url(../fonts/bpg-le-studio-02-webfont.svg#bpg_le_studio_02regular) format('svg')}


h1:lang(ka), h2:lang(ka), h3:lang(ka), h4:lang(ka), h5:lang(ka), h6:lang(ka) {
  font-family: "BPG Square", sans-serif !important;
}
h1:lang(ka) *, h2:lang(ka) *, h3:lang(ka) *, h4:lang(ka) *, h5:lang(ka) *, h6:lang(ka) * {
  font-family: "BPG Square", sans-serif !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
   font-family: "BPG LE Studio 02", sans-serif !important;
   /*font-size: 12pt; */
}
.sp-megamenu-parent :lang(ka) {
   font-family: "BPG LE Studio 02", sans-serif !important;
font-size: 14px;
font-weight: 700;
}
.sp-megamenu-parent {
    bottom: -5px !important;
}
.sp-megamenu-parent>li.active>a {
    font-weight: 700 !important;
}
#offcanvas-toggler .burger-icon {
    margin-left: 20px;
}
/* Container framework and forced height */
.video-bg-hero {
    position: relative; 
    width: 100%; 
    height: 520px; 
    overflow: hidden; 
    background-color: #000000;
}

/* Forces video to fill frame completely without distortion */
.video-bg-media {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    object-fit: cover; 
    transform: translate(-50%, -50%); 
    z-index: 1;
}

/* Your custom 15% light overlay layer */
.video-bg-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.15); 
    z-index: 2;
}

/* --- ADJUSTED POSITIONING: LOWER DOWN IN THE CONTAINER --- */
.video-bg-content {
    position: absolute; 
    z-index: 3; 
    bottom: 20%; /* Anchors text 10% from the very bottom edge */
    left: 10%; 
    color: #ffffff; 
    text-align: left; 
    width: 80%;
    max-width: 800px; 
    height: 180px; 
}

/* --- TYPOGRAPHY, SIZES, AND SHADOW STYLES --- */

/* Appends text shadow to all text elements for high legibility */
.text-slide {
 font-family: "BPG Square", sans-serif !important;}
.text-slide h1,
.text-slide p,
.text-slide u {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    text-align: left;
}

/* Forced h1 sizing updated to 28px */
.text-slide h1 {
    font-size: 36px !important;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

/* Forced p sizing updated to 22px and left shift */
.text-slide p {
    font-size: 24px !important;
    margin-left: -30px; 
    display: block;
    line-height: 1.5;
}

/* Forced u sizing updated to 22px */
.text-slide ul {
    font-size: 24px !important;
}

/* --- ANIMATION STYLES (PURE FADE-IN) --- */

/* Base style for all text slides */
.text-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; 
    pointer-events: none;
}

/* Active style when visible */
.text-slide.active {
    opacity: 1;
    pointer-events: auto;
}
#sp-header .container, 
#sp-header .container-xl, 
#sp-header .container-xxl {
    position: relative;
bottom: 2px !important; 
    
 background-image: linear-gradient(
        to bottom,
        #d92323 0px,  #d92323 1px,
        transparent 1px, transparent 2px,
        #d92323 2px,  #d92323 3px,
        transparent 3px, transparent 4px,
        #d92323 4px,  #d92323 6px
    );
    
    /* 
       VERTICAL SHIFT: 
       "100%" means the very bottom. 
       "- 8px" pulls the graphic 8 pixels upward away from that bottom edge.
    */
    background-position: calc(0% + 83px) calc(100% - 6px);
    
    background-size: calc(100% - 80px) 8px; 
    background-repeat: no-repeat;
}
/* ==========================================================================
   CSS ONLY: Forced Centering for Rotator Text Captions
   ========================================================================== */

/* Forces the caption box to center text vertically and horizontally */
#sidebarAutoRotator .carousel-item .d-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 62px !important; /* Preserves your locked height */
}

/* Strips out hidden template padding/margins on the text tag causing misalignments */
#sidebarAutoRotator .carousel-item .d-flex strong {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    width: 100% !important;
    line-height: 1.3 !important; /* Ensures clean line spacing if names wrap into two lines */
}
/* Base styles and container setup for product page*/
/* Isolated Page Wrapper to shield the rest of your site */
.product-page-section {
  background-color: #f7f7f7;
  font-family: sans-serif;
  padding: 40px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Restrict the inner content panel width */
.product-panel {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.product-panel {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Main Section Title */
.panel-title {
  font-size: 2rem;
  color: #333333;
  margin-bottom: 50px;
}

/* 5-Column Responsive Grid Layout */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: start;
}

/* Responsive adjustment for tablets/phones */
@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
  }
}
@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual Product Column */
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Red Title Text for Products */
.product-name {
  font-size: 1.15rem;
  color: #cc0000;
  margin-bottom: 25px;
  font-weight: bold;
  height: 44px; /* Keeps hex alignment even with 2-line text */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Hexagon Container and Shadow Effect */
.hexagon-wrapper {
  position: relative;
  width: 160px;
  height: 185px;
  margin-bottom: 25px;
  /* Filter drop-shadow applies correctly to the clipped edge */
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.25)); 
}

/* The Masked Hexagon Frame */
.hexagon {
  width: 100%;
  height: 100%;
  background-color: #ddd;
  /* Creates a vertical hexagon geometry */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}

/* Image behavior inside the hexagon mask */
.hexagon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Subtle interactive hover effect */
.product-item:hover .hexagon img {
  transform: scale(1.08);
}

/* Bottom Text Area */
.product-details {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cc0000;
}

.product-details p {
  margin: 4px 0;
}

/* Bolded bottom line */
.product-details .highlight {
  font-weight: bold;
  margin-top: 8px;
}
/* Individual Product Column with Entrance Animation */
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Animation properties */
  opacity: 0;
  animation: slideDownFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Staggered entry delays for each column (left to right) */
.product-item:nth-child(1) { animation-delay: 0.1s; }
.product-item:nth-child(2) { animation-delay: 0.2s; }
.product-item:nth-child(3) { animation-delay: 0.3s; }
.product-item:nth-child(4) { animation-delay: 0.4s; }
.product-item:nth-child(5) { animation-delay: 0.5s; }

/* The Keyframe Animation */
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-40px); /* Starts 40px higher */
  }
  to {
    opacity: 1;
    transform: translateY(0);      /* Settles into normal position */
  }
}

/* Keep your existing subtle image hover effect intact */
.product-item:hover .hexagon img {
  transform: scale(1.08);
}
/* Bottom Text Area */
.product-details {
  /* 1. Apply BPG Square Font (with standard sans-serif backups) */
  font-family: "BPG Square", "BPG Square Gothic", sans-serif;
  
  font-size: 0.85rem;
  line-height: 1.5;
  color: #cc0000;
  
  /* Flexbox settings to keep the bottom line aligned */
  display: flex;
  flex-direction: column;
  min-height: 90px; 
  width: 100%;
  box-sizing: border-box;
}
/* Force images to stay transparent until they are fully loaded */
.hexagon img:not([src]), 
.hexagon img[src=""] {
  opacity: 0;
}

.hexagon img {
  /* Ensure a smooth fade-in directly over the background */
  transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Fix the slide layout anchor */
.swiper-slide {
    position: relative !important;
    display: block !important;
}

/* Slim, clean bottom overlay bar container */
.swiper-slide .camera_caption, 
.swiper-slide [class*="caption"] {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    
    /* Give it a slightly comfortable height for small text */
    height: 38px !important; 
    max-height: 38px !important; 
    min-height: 38px !important;
    
    /* Semi-transparent overlay style */
    background: rgba(0, 0, 0, 0.6) !important; 
    z-index: 10 !important;
    box-sizing: border-box !important;
    
    /* Flex layout forcefully centers text vertically */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Left aligned, change to center if preferred */
    padding: 0 15px !important; /* Side padding only */
}

/* Clear default margins and align text inside the bar */
.swiper-slide h3,
.swiper-slide .camera_caption h3 {
    font-size: 14px !important; /* Perfectly fits the 38px height bar */
    line-height: 1 !important;  /* Prevents line spacing from pushing text down */
    margin: 0 !important;       /* Removes theme defaults pushing text out of bounds */
    padding: 0 !important;
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
/* Apply the shadow directly to the slide container holding your background image */
.swiper-slide {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px !important; /* Rounds the corners of your slide background */
    overflow: hidden !important;   /* Clips the background/caption within the corners */
    position: relative !important;
}

/* Add a safety padding buffer to the slider containers so the shadow doesn't clip */
.swiper, 
.swiper-container {
    padding-bottom: 15px !important; 
    padding-top: 5px !important;
    overflow: visible !important;   
}

/* Prevent the slider rail from cutting off the side shadows on transition */
.swiper-wrapper {
    overflow: visible !important;
}
.logo-slider .sp-module-title {margin-left: 30px !important;}
/* Force the container to stack items , პარტნოირების სტატია */
.mediabox-single-column {
    display: flex !important;
    flex-direction: column !important; /* Forces one column stack */
    gap: 20px !important;              /* Spacing distance between rows */
    width: 100% !important;
    max-width: 400px !important;       /* Limits thumbnail size so they don't blow up too wide */
    margin: 0 auto !important;         /* Centers the entire column on the webpage */
    box-sizing: border-box !important;
}

/* Force each item to take up full available width of the column */
.mediabox-single-column .gallery-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Make images scale smoothly within the column */
.mediabox-single-column .gallery-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;     /* Smooth image corners */
    transition: transform 0.2s ease-in-out !important;
}

/* Hover style to indicate clickability */
.mediabox-single-column .gallery-card img:hover {
    transform: scale(1.01) !important;
    filter: brightness(95%) !important;
    cursor: pointer !important;
}
#centered {
    float:left;
        margin-top: 10px;
    margin-right:10px;
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
/* Force any map iframe generated inside a table cell to fill 100% width ავტოგასამართი სადგურები */
table td iframe,
table td .embed-google-map,
table td [id*="google_map"] {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Ensure the table cell expands naturally to allocate the remaining layout space */
table td:last-child {
    width: 80% !important; /* Forces the right map column to claim the leftover space */
}
/* Remove H2 header and form legend */
/* .com-contact.contact h2, */
.com-contact.contact legend, 
.com-contact__form legend { 
    display: none !important; 
}
/* --- Joomla Form Spacer Visibility Rule --- */

/* 1. Target and completely hide the jform_spacer label notice */
#jform_spacer-lbl,
label[id*="jform_spacer"],
div:has(> #jform_spacer-lbl) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Lock your form left with 80% maximum width and a left margin */
.com-contact.contact form,
.com-contact__form form,
#contact-form {
    max-width: 80% !important;
    width: 100% !important;
    margin-left: 30px !important;  /* Your custom left indentation */
    margin-right: auto !important; /* Pulls form back to the left, not centered */
}
@media (min-width: 768px) {
  /* 1. Turn the fieldset into a grid layout */
  #contact-form fieldset {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 0;
  }

  /* 2. Force all other fields to take up the full width */
  #contact-form .control-group {
    grid-column: span 2;
  }

  /* 3. Force Name and Email to sit side-by-side (half width each) */
  #contact-form .control-group:has(#jform_contact_name),
  #contact-form .control-group:has(#jform_contact_email) {
    grid-column: span 1;
  }
  /* Force a compact size for the contact message field */
#contact-form textarea#jform_contact_message {
    height: 90px !important;    /* Tightens vertical footprint */
    min-height: 70px !important;/* Prevents accidental template distortion */
    rows: 3 !important;         /* Tells modern browsers to clamp size */
}
#sp-top-bar { background: linear-gradient(90deg, #dc2626 0%, #991b1b 60%, #450a0a 100%) !important; color: #fef2f2 !important; }
#sp-footer { background: linear-gradient(90deg, #dc2626 0%, #991b1b 60%, #450a0a 100%) !important; color: #fef2f2 !important; }
/* Nudge the top1 module slightly to the right */
#sp-top1 .sp-module {
    margin-left: 80px !important; /* Increase this pixel number to slide it further right */
    display: inline-block;
}
/* Remove gray background from the active language list item */
div.mod-languages ul li.lang-active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Also strip background from the link inside it if needed */
div.mod-languages ul li.lang-active a,
div.mod-languages ul li.lang-active img {
    background: transparent !important;
    background-color: transparent !important;
}