:root{
    --font-global: 'Luxe';
    --font-alt: 'Luxe', sans-serif;
    --font-serif: 'Quicksilver';
    --color-main-theme:#0b243a;
    --color-theme-sec:#dab870;
    --color-dark-1: #010101;
    --color-dark-2: #171717;
    --color-dark-3: #272727;
    --color-dark-3a: #333;
    --color-dark-4: #555;
    --color-gray-1: #757575;
    --color-gray-2: #888;
    --color-gray-3: #999;
    --color-gray-light-1: #f1f1f1;
    --color-gray-light-2: #f7f7f7;
    --color-gray-light-3: #e5e5e5;
    --color-gray-light-4: #d5d5d5;
    --color-gray-light-5: #ccc;
    --color-gray-light-9: #fff;
    --color-gray-light-6: #bbb;
    --color-secondary-1: #fbe3a1;
    --gradient-primary-1: linear-gradient( 90deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-primary-1-a: linear-gradient( 90deg, var(--color-primary-4) 25%, var(--color-primary-3) 40%, var(--color-primary-2) 60%, var(--color-primary-1) 75%);
    --gradient-primary-1-b: linear-gradient( 45deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-primary-1-c: linear-gradient( 0deg, var(--color-primary-4) 0%, var(--color-primary-3) 33%, var(--color-primary-2) 67%, var(--color-primary-1) 100%);
    --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
    --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
    --gradient-dark-alpha-1: linear-gradient( 90deg, var(--color-dark-1) 40%, transparent 87%);
    --gradient-dark-alpha-2: linear-gradient( 90deg, transparent 13%, var(--color-dark-1) 60%);
    --gradient-primary-alpha-1: linear-gradient( 90deg, var(--color-primary-1) 40%, transparent 87%);
    --gradient-primary-alpha-2: linear-gradient( 90deg, transparent 13%, var(--color-primary-1) 60%);
    --border-radius-default: 4px;
    --border-radius-large: 30px;
    --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05),0px 1px 1px 0px rgba(0, 0, 0, 0.03),0px 3px 5px 0px rgba(0, 0, 0, 0.03);
    --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08),0px 1px 1px 0px rgba(0, 0, 0, 0.06),0px 3px 5px 0px rgba(0, 0, 0, 0.06);
    --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
    --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);


}
/* @font-face {
    font-family: 'Luxe';
    src: url('Luxe/LuxeUno-Regular.ttf') format('truetype'),

} */
@font-face {
    font-family: 'Duplet';
    src: url('Duplet-Regular.otf') format('truetype'),
    
}
@font-face {
    font-family: 'Quicksilver';
    src: url('Quicksilver/Quicksilver-400.otf') format('truetype'),

}
body{
    font-family: 'Duplet';
    padding: 0;
    margin: 0;
    
}
h1{
    font-family: 'Quicksilver';
    color: var(--color-theme-sec);
    font-size: 80px;
    text-align: center;
}
h2{
    font-family: 'Quicksilver';
    font-size: 55px;
    color: var(--color-main-theme);
}
h3{
    font-size: 25px;
}
p{
    font-size: 18px;
    font-weight: 300;
    color: #616161;
    letter-spacing: 1px;
}
.bg-video-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* Important for positioning the ::before overlay */
    z-index: 1;
}

/* --- ADDED OVERLAY STYLES --- */
.bg-video-wrapper::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Choose your overlay color and transparency (e.g., dark, 50% opacity) */
    background-color: rgb(11 36 58 / 80%);

    /* Ensure the overlay sits above the video but below any other content */
    z-index: 2;
}
/* -------------------------- */

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The video needs to be below the overlay */
    z-index: 1;
}
.navbar{
    z-index: 99;
}

.contact_btn{
    background-color: var(--color-main-theme);
    color: var(--color-theme-sec);
    padding: 10px 15px;
    font-size: 18px;
    text-decoration: none;
    line-height: normal;
    border-radius: 10px;
}
.nav-link{
    font-size: 18px;
}
.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    gap: 20px;
}
.home-content{
    z-index: 999;
    display: flex;
    justify-content: center;
    margin: auto;
    align-items: center;
    position: relative;
    height: 90vh;
    text-align: center;
    flex-direction: column;
    color: #fff;
    max-width: 1000px;
}
.home-content h1{
    padding-bottom: 20px;
}

.about-section{
   padding: 100px 0;
   margin-top: 100px;
}
.about-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px;
    align-items: center;
}
.about-s-img img{
    width: 80%;

}
.image-with-lines-container {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    display: inline-block; /* Allows the container to wrap content and respond to text-align */
    /* Optional: Add some padding if you want space between the image and the lines */
    padding: 0 20px; /* Example padding */
}

.image-with-lines-container::before,
.image-with-lines-container::after {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    height: 2px; /* Thickness of the line */
    width: 50px; /* Length of the line - adjust as needed */
    background-color: #0d1e37; /* The color of your lines (example: from Simonza branding) */
    /* background-color: #E6E6E6; (If you prefer a lighter grey) */
}

.image-with-lines-container::before {
    left: 0; /* Position the left line */
}

.image-with-lines-container::after {
    right: 0; /* Position the right line */
}

/* Optional: Basic image styling */
.image-with-lines-container img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
}
/* Container for all icon blocks if they are in a row themselves */
.icons-section {
    display: flex;
    justify-content: center; /* Center the entire row of icon blocks */
    gap: 80px; /* Gap between different icon blocks */
    margin: 40px 0; /* Some margin for the section */
}

/* Individual Icon Block Styling */
.icon-block {
    display: flex; /* Use flexbox for line-icon-line arrangement */
    align-items: center; /* Vertically align items in the middle */
    gap: 15px; /* This sets the 50px gap between the line and the icon */
    padding-bottom: 35px;
    /* Optional: If icon blocks should stack on small screens */
    flex-direction: row; /* Default: lines and icon in a row */
    /* On smaller screens, you might want to switch to column: */
    /* @media (max-width: 768px) { flex-direction: column; } */
}

/* Line Styling */
.icon-line {
    width: 150px; /* Length of the line - adjust as needed */
    height: 2px; /* Thickness of the line */
    background-color: var(--color-theme-sec); /* Same color as before */
    /* Ensure lines don't shrink on small screens if they have content */
    flex-shrink: 0;
}

/* Icon Image Styling */
.icon-block .actual-icon {
    display: block; /* Remove extra space below image */
    max-width: 80px; /* Example size for your icons */
    height: auto;
    /* You can adjust max-width/height to control icon size */
    /* flex-shrink: 0; */ /* Prevent icon from shrinking if space is tight */
}

/* If you want the icon to be larger, adjust max-width for .actual-icon */

/* From Uiverse.io by alexmaracinaru */
.cta {
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  padding-top: 15px;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 700;
  padding-right: 15px;
  /* text-transform: uppercase; */
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.phylosopy{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px;
    align-items: baseline;
    padding-top: 80px;
    text-align: center;
}
.phylo-sec h3{
    font-weight: 600;
    padding: 20px 0 0px;
}
.phylo-sec img{
    padding: 20px 20px;
    border-radius: 50%;

}
.collection-heading{
    text-align: center;
}
.collection-heading .icon-block{

    justify-content: center;
}
.collection{
    padding: 100px 0;
    background-color: #e6e6e6;
}
.collection-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    padding-top: 25px;

}
.collec-det img{
    width: 100%;
    /* border-radius: 20px; */
    margin-bottom: 15px;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    height: 35vh;
    object-fit: cover;
}
.collec-det {
    background: #ffffff;
    padding: 10px;
    /* border-radius: 20px; */
}
.collec-det:hover{
  transform: scale(1.2);
  transition: all 1s ease-in-out;
}
.produuct-sec{
    padding: 100px 0;
}
/* swiper slider */

.module {
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-auto-rows: min-content;
  grid-template-areas:
    "header scrollNavigation"
    "content content";
  gap: 1rem;
  max-width: 100%;
  background: #fff;
  /* box-shadow:0px 8px 15px 0 rgba(0,0,0,.1) */
}

.module-title {
  display: flex;
  flex-direction: column;
  grid-area: header;
  gap: 0.5rem;
  justify-content: center;
}

.module-title span {
  color: #444;
  font-weight: 500;
}

.module-pagination {
  grid-area: scrollNavigation;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  position: relative;
}
.module-pagination .swiper-button-next,
.module-pagination .swiper-button-prev {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
      background-color: #0b243a;
    color: #ffffff;
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.2rem;
  border: 1px solid transparent;
  border-radius: 2rem;
  padding: 0rem;
    width: 45px;
    height: 45px;
  touch-action: manipulation;
  margin-top: 0;
  transition: color 0.2s ease-out, border-color 0.2s ease-out,
    border-radius 0.2s ease-out, background-color 0.2s ease-out,
    box-shadow 0.2s ease-out, transform 0.2s ease-out,
    text-decoration 0.2s ease-out;
}
.module-pagination .swiper-button-next:hover,
.module-pagination .swiper-button-prev:hover {
  color: #fff;
  background-color:var(--color-theme-sec);
}
.module-pagination .swiper-button-next:after,
.module-pagination .swiper-button-prev:after {
  font-size: 17px;
}

.module-swiper {
  grid-area: content;
  position: relative;
}

.swiper {
  width: 100%;
  min-width: 0;
}
.swiper-scrollbar {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  margin-top: 0.45rem;
  height: 8px !important;
}

.swiper-slide {
  /* background: #ccc; */
  /* border-radius: 1rem; */
  overflow: hidden;
  height: auto;
}
.swiper-slide .img {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0px;
}
.mySwipers .swiper-slide .img {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0px;
}
.swiper-slide .img a {
  width: 100%;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid #00000030;
  padding: 10px;
    /* border-radius: 20px; */
}
.mySwipers .swiper-slide .img a {
  width: 100%;
  background-color: transparent;
  text-decoration: none;
  border: none;
    border-radius: 0px;
    padding: 0px;
}
.uls a{
  
  text-decoration: none;
  color: #fff;
  flex-direction: column;
  font-size: 18px;
}
.uls{
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-direction: column;
    padding-left: 0px;
}
.swiper-slide > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.swiper-slide .collections {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: unset;
  width: 100%;
    height:auto;
  overflow: hidden;
  transition: all 0.6s;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}
.mySwipers .swiper-slide:hover .collections {
  scale: 1.1;
}
/* .swiper-slide:hover .collections {
  scale: 1.1;
} */
.swiper-slide .collections img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* min-height: 100px;
  max-height: 100px; */
  height: 40vh;
  border-radius: 20px;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
}
.swiper-slide .content a {
  color: #000;
  text-decoration: none;
}
.swiper-slide .content a:hover {
  text-decoration: none;
}
.swiper-slide .content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #000;
  background-color: #fff;
}
.swiper-slide .content .heading {
  position: relative;
}
.swiper-slide .content .heading h3 {
  margin: 0;
}
.swiper-slide .content .heading h3 span {
  display: block;
  font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}
.swiper-slide .content .articles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.swiper-slide .content .articles .article {
  background: rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
  transition: background 250ms ease;
  font-weight: 500;
}
.swiper-slide .content .articles .article:hover {
  background: rgba(0, 0, 0, 0.2);
}
.swiper-slide .content .articles .article p {
  margin: 0;
  padding: 0;
}
.swiper-slide .content .see-more {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.swiper-slide .content .see-more p {
  margin: 0;
  padding: 0;
}
.collections img{
    /* border-radius: 20px; */
}
/* [data-theme="lilac"] {
  background: #c8beeb;
}

[data-theme="sand"] {
  background: #d9cdbd;
}

[data-theme="green"] {
  background: #c2e4bf;
}

[data-theme="light-blue"] {
  background: #bdd2f1;
} */
.knlowloege{
  background-color: var(--color-main-theme);
    padding: 100px 0 ;
    color: #fff;
}

.knlowledge-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 50px;
  text-align: center;
  padding-top: 50px;
}
.knlowledge-grid p{
  color: #ffffff9c;
}
.knlowloege h2{
  text-align: center;
  color: #fff;
}

.knlowledge-grid .icon-line {
    width: 50px;
    height: 2px;
    background-color: var(--color-theme-sec);
    flex-shrink: 0;
}
.knlowledge-grid img{
  width: 100px;
  padding-bottom: 20px;
}

.global{
    border: 1px solid #86878852;
    padding: 35px 25px;
    transition: all 1s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
        align-items: center;



}
.global:hover{
  transform: scale(1.05);
  transition: all 1s ease-in-out;
}
.cataloguee{
  border: 1px solid #86878852;
  transition: all 1s ease-in-out;
    padding: 35px 25px;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}
.cataloguee:hover{
  transform: scale(1.05);
  transition: all 1s ease-in-out;
}
.evennts{
border: 1px solid #86878852;
  transition: all 1s ease-in-out;
    padding: 35px 25px;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
        align-items: center;

}
.evennts:hover{
  transform: scale(1.05);
  transition: all 1s ease-in-out;
}
.knlowledge-grid .hover-underline-animation{
    color: var(--color-theme-sec);
}
.knlowledge-grid .hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-theme-sec);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.knlowledge-grid #arrow-horizontal{
    color: var(--color-theme-sec);

}
.sub-headi{
  text-align: center;
    margin-bottom: 5px;
    color: #dab970;
}
.knlowloege .icon-block{
    justify-content: center;
}
.export-d {
    text-align: center;
}
.export-d .icon-block{
    justify-content: center;
}

.export-d .icon-line {
    width: 50px;
    height: 2px;
    background-color: var(--color-theme-sec);
    flex-shrink: 0;
}
.export{
    background-color: var(--color-main-theme);
    padding: 100px 0 0;
    color: #fff;
}
.export-d p{
    max-width: 1000px;
    margin: auto;
    padding-bottom: 20px;
    color: #fff;
}
.export-sec{
    padding-top: 100px;
}
.export-d .hover-underline-animation{
    color: var(--color-theme-sec);
}
.export-d .hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-theme-sec);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.export-d #arrow-horizontal{
    color: var(--color-theme-sec);

}
.export-d h2{

  color: #fff;

}
.phone p{
  margin-bottom: 0;
}
.address p{
  margin-bottom: 0;

}
.home-content p{
  color: #fff;
}
.catalogue-sec{
    padding: 100px 0;
    background-color: #e6e6e6;
}
.catalogues{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 100px;
    align-items: center;
}
.cataloguess-data p{
    padding-bottom: 25px;
}
.cataloguess-img img{
    width: 100%;
}
.footer{
    background-color: var(--color-main-theme);
    padding:250px 0 20px
}
.footer-data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.footer-data p{
    color: #fff;
    margin-bottom: 0;
}
.footer-data a{
    color: var(--color-main-theme);
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 30px;
        width: fit-content;
}
.contact-forms{
    padding: 20px;
    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.con-h {
    text-align: center;

}
.con-h .icon-block{
    justify-content: center;
}
.con-h .icon-line {
    width: 80px;
    height: 2px;
    background-color: var(--color-theme-sec);
    flex-shrink: 0;
}
.contact-detail{
    background-color: var(--color-main-theme);
    padding: 40px;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.email h5{
    color:var(--color-theme-sec)
}
.phone h5{
    color:var(--color-theme-sec)
}
.address h5{
    color:var(--color-theme-sec)

}
.email p{
    color: #fff;
    margin-bottom: 0;
}
.contact-detail a{
    color: #fff;
    text-decoration: none;
}
.contactttt{
    position: relative;
    top: 150px;
}
/* --- Global Setup for Icons --- */
/* You need to include Font Awesome in your HTML <head> for the icons to work:
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
*/

/* --- Form Wrapper and Base Styles --- */
.contact-form {

    margin: 0px 0px 0 30px;
    border-radius: 10px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden; /* Ensures the shadow is contained within the border-radius */
}

/* --- Input Field Styling (The "Inset Look") --- */
.input-group input,
.input-group textarea {
    width: 100%;
    padding: 15px 50px 15px 20px; /* Padding for text, and space for the icon */
    font-size: 16px;
    border: none;
    outline: none;
    color: #333; /* Dark text */
    background-color: #f2f2f2; /* Light gray background */
    border-radius: 6px;

    transition: box-shadow 0.3s ease;
}

.input-group input:focus,
.input-group textarea:focus {
    /* Slightly more defined inset on focus */
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* --- Textarea Specific Styling --- */
.input-group.textarea-group {
    margin-bottom: 30px; /* More space below the message box */
}
.input-group textarea {
    /* Reset padding for textarea since it has no icon */
    padding: 15px 20px;
    resize: none; /* Prevents user from resizing the textarea */
}

/* --- Icon Positioning --- */
.input-group .icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999; /* Light gray icon color */
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
}

/* --- Submit Button Styling --- */
.submit-button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* White text */

    /* Dark blue/black background from the Simonza header */
    background-color: #0d1e37;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); */
}

.submit-button:hover {
    background-color: var(--color-theme-sec); /* Slightly lighter dark color on hover */
    transform: translateY(-1px); /* Subtle lift effect */
    /* box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); */
}

/* --- Placeholder text color (to match the light gray look) --- */
::placeholder {
    color: #b0b0b0;
    opacity: 1; /* Firefox default is lower opacity */
}

.our-gall{
    padding: 100px 0 0;
    background-color: #e6e6e6;
    height: 52vh;
}
.gall-head{
    text-align: end;
}
.gall-head .icon-block{
    justify-content: end;
}
.gallary .module{
    display: flex;
    justify-content: space-between;
    background: transparent;
}
.cform{
    padding-top: 100px;
}
  .tag img{
        z-index: 9999;
    position: absolute;
    bottom: 20px;
    width: 250px;
    right: 20px;
  }
  .footer-tag img{
        width: 150px;
    margin: auto;
    display: block;
    padding-bottom: 30px;
  }

  .footer-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
    align-items: self-start;
    padding: 50px 0;

  }
  .footer-grid h3{
    color: #fff;
    padding-bottom: 10px;
  }
  .footer-cop-social{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
  }
  .copy-tagline p{
    margin-bottom: 0;
    color: #fff;
  }
  .footer-social a{
    color: #fff;
    font-size: 18px;
    background-color: transparent;
    text-decoration: none;

  }
   .footer-social{
    flex-direction: column;
    text-decoration: none;
    display: flex;
    gap: 10px;
   }
  .footer-menu{
    padding-left: 75px;
  }
  .copy-tagline a{
    text-decoration: none;
    color: #fff;
  }
header{position: absolute;top:0;width: 100%;box-shadow: 0 0 10px #00000036;z-index: 9999;background: #fff;}
header.fixed{position:fixed;top:0;}
nav{display:flex;align-items:center;justify-content:space-between;padding: 10px 0;}
.logo{font-size:40px;text-transform:uppercase;font-weight: 900;color: #fff;}
.logo a{color:#333;text-decoration:none;font-weight:700;}
.nav-wrap ul{padding:0;}
.nav-wrap ul.top_nav {
    display: block;
    margin: 0;
}
.nav-wrap ul li{list-style:none;display:inline-block;position: relative;}
.nav-wrap ul li a{color: var(--color-main-theme);text-decoration:none;font-size:18px;padding: 10px 5px;position:relative;display:inline-block;}
.nav-wrap ul.sub-nav {display: none;}
@media screen and (min-width: 919px){
  .nav-wrap ul.sub-nav {display: none;width: 220px;color: #fff;right: 0;padding: 0px 0px;margin: 0px;position: absolute;left: 0px;-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);}
  .nav-wrap ul.sub-nav ul.sub-nav{left: 100%;top: 0;z-index: 1;}
  .nav-wrap li:hover > ul.sub-nav, .nav-wrap ul.sub-nav li{display: block;}
  .nav-wrap ul.sub-nav li a{padding: 12px;color: var(--color-main-theme);display: block;margin: 0;background: #fff;}
  .nav-wrap ul.sub-nav ul.sub-nav li a{padding-right: 25px;}
  .nav-wrap ul.sub-nav li:hover > a {opacity: 0.8}
  .nav-wrap li:hover > ul{display:block;-moz-animation:fadeInUp .3s ease-in;-webkit-animation:fadeInUp .3s ease-in;animation:fadeInUp .3s ease-in;}
  .nav-wrap > ul > li:not(:last-child){margin-right: 15px;}
  .nav-wrap ul ul li:hover > ul{display:block;-moz-animation:fadeInRight .3s ease-in;-webkit-animation:fadeInRight .3s ease-in;animation:fadeInRight .3s ease-in;}
  .nav-wrap ul li.has-submenu:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";font-size:16px;color:var(--color-main-theme);padding-right: 5px;}
  .nav-wrap ul ul li.has-submenu:after{color: #333;transform: rotate(-90deg);position: absolute;right: 8px;top: 50%;padding: 0;margin-top: -7px;}
  .nav-wrap ul li.submenu-active > ul.sub-nav{display:none!important;}
  .nav-wrap ul li.submenu-active:hover > ul.sub-nav{display:block!important;}
  /*Hover Effect*/
  .nav-wrap > ul > li:before{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:#fff;transform-origin:bottom right;transition:transform 0.4s cubic-bezier(0.86,0,0.07,1);}
  .nav-wrap > ul > li.active:before,
  .nav-wrap > ul > li:hover:before{  transform: scaleX(1);transform-origin: bottom left;}
  /*Hover Effect*/
}
 

/*Res Button*/
.nav-button {height: 27px;width: 36px;margin-left: 30px;display: none}
.nav-button a{height: 27px;width: 36px;display: inline-block;cursor: pointer;}
.nav-button span,
.nav-button span:before,
.nav-button span:after{cursor:pointer;border-radius: 50px;height:5px;width:35px;background: var(--color-main-theme);position:absolute;display:block;content:'';transition:all 300ms ease-in-out;}
.nav-button span{margin: 10px 0 0 0;}
.nav-button span:before{top: -10px;}
.nav-button span:after{top: 10px;}

@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}


/*leftnav*/
.leftnav{width:300px;margin:0;display:inline-block;top:120px;position:absolute;left:10px;}
ul.leftnav-listing{display:inline-block;padding:20px 0;width:58px;border:3px solid #fff;border-radius:40px;}
ul.leftnav-listing.leftnav-fixed{position:fixed;top:120px;max-width:300px;}
ul.leftnav-listing li{display:block;border-radius:50%;/* overflow:hidden; */text-align:center;max-width:25px;margin:0 auto 20px auto;font-size:0;position:relative;}
ul.leftnav-listing li:last-child{margin-bottom:0;}
ul.leftnav-listing li a{padding:7px;display:inline-block;font-size:16px;color:#fff;border-radius:50%;overflow:hidden;border:2px solid #fff;}
ul.leftnav-listing li.is_visiable_section a{background:#fff}
ul.leftnav-listing li:not(:last-child):after{content:'';height:100%;position:absolute;background: #fff; left:50%;z-index:0;bottom:-100%;width:2px;margin-left:-1px;}

/*Demo Extra css*/
footer {height: 150px;display: flex;justify-content: center;align-items: center;}
.vh{height: 100vh;background: #010a43;display: flex;align-items: center;font-size: 5vw;color: #ffff;justify-content: center;text-transform: uppercase;}
.vh.aqua{background: #9f50dc;}
.vh.pink{background: #A80874;}
.vh.yellow{background: #ffc400}
.vh span {font-family: 'Roboto', sans-serif;letter-spacing: 0.02em; -webkit-text-stroke-color: #fff;
  -webkit-text-stroke-width: 0.02em;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  transition: background-size .5s cubic-bezier(0.67, 0.01, 0.15, 0.98);background-image: linear-gradient(135deg, #fff 0%, #fff 50%, transparent 50.1%);
  background-size: 0% 100%;}
.vh span:hover {background-size: 220% 100%;}

/*Res Button*/
@media screen and (max-width: 919px){
  .nav-button{display: block;}
  .show_menu #nav-toggle span:after {transform: translate3d(0, -10px, 0) rotate(-91deg);}
  .show_menu #nav-toggle span {transform: translate3d(0, 0px, 0) rotate(45deg);}
  .show_menu #nav-toggle span:before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; }
}

@media screen and (max-width: 919px){
   .nav-wrap ul.top_nav{display: none;position: absolute;left: 0;right: 0;top: 100%;background: #051124;height: calc(100vh - 85px);overflow-y: scroll;}
   .nav-wrap > ul li{width: 100%;border-top: 1px solid #374760;position: relative;}
   .nav-wrap > ul > li:last-child{border-bottom: 1px solid #374760;}
   .nav-wrap > ul > li a{width: 100%;margin: 0;font-size: 20px;width: 100%;display: block;padding: 20px 6% 21px 6%;color: #fff;}
   ul li span.down-arrow {position: absolute;height: 64px;width: 50px;top: 0;right: 0;z-index: 2;cursor: pointer;user-select: none;}
   .nav-wrap ul li a:not(:only-child){width: auto;display: inline-block;}
   .nav-wrap > ul li.has-submenu:before{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";left:inherit;right: 34px;font-size:16px;margin-top:-7px;position:absolute;top: 33px;color: #fff;}
   .nav-wrap ul ul a{padding-left: 9%;}
}


@media only screen and (max-width: 767px) {

.export-sec img{
  width: 100%;
}
.home-content {
    height: 70vh;
    padding-top: 100px;
}
.icon-line {
    width: 100px;
    height: 2px;
    background-color: var(--color-theme-sec);
    flex-shrink: 0;
}
  .footer-grid{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 15px;
    align-items: self-start;
    padding: 50px 0;

  }
.bg-video-wrapper {
    position: absolute;
    width: 100%;
    height: 85%;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.about-s-img img {
    width: 100%;
    margin: auto;
    display: block;
    padding-top: 100px;
}
.uls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}
.footer-data {
    flex-direction: column;
    gap: 24px;
    text-align: left;
    align-items: start;
}
.footer {
    background-color: var(--color-main-theme);
    padding: 150px 0 20px;
}
.tag img {
    z-index: 9999;
    position: absolute;
    bottom: 20px;
    width: 150px;
    right: 20px;
}
.footer-tag img {
    width: 200px;
    margin: auto;
    display: block;
    padding-bottom: 30px;
}   
.logo-footer{
  padding: 15px 0;

}
.logo-footer p{
  padding-top: 15px;
}
h1 {
    font-size: 30px !important;
}
.contact-forms {
    grid-template-columns: 1fr;
    gap: 25px;
}
.contact-form {
    margin: 0px 0px 0 0px;
    border-radius: 10px;
}
.swiper-slide > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: #fff; */
}
.mySwiper .swiper-slide .img {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: auto;
    background: #fff;
            /* border: 2px solid #afadad; */
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.footer-menu {
    padding-left: 0px;
}
.navbar-brand img{
  width: 150px;
}
.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
    padding-bottom: 50px;
    text-align: left;
}
.navbar-nav {
    flex-direction: column !important;
    gap: 0px !important;
    flex-wrap: wrap !important;
}
.logo img{
  width: 175px;
}
.about-section {
    padding: 100px 0;
    margin-top: 0px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

.export-sec img{
  width: 100%;
}
  .contact-forms {
    grid-template-columns: 1fr;
    gap: 50px;
}
 .footer-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    align-items: self-start;
    padding: 50px 0;

  }
.contactttt {
    position: relative;
    top: 0px;
}
.footer {
    background-color: var(--color-main-theme);
    padding: 100px 0 20px;
}
.cform {
    padding-top: 100px;
    padding-bottom: 50px;
}
.about-s-img img {
    width: 80%;
    margin: auto;
    display: block;
    padding-top: 100px;
}
.contact-form {
    margin: 0px 0px 0 0px;
    border-radius: 10px;
}
.navbar-nav {
    flex-direction: column !important;
        gap: 15px !important;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
}
.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
    padding-bottom: 50px;
}
.about-section {
    padding: 100px 0;
    margin-top: 0px;
}
}




/*  */

/* animation */
:root {
	--animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	--animation-duration: 1s;
  }
  
  @-webkit-keyframes slideInUp {
	0% {
	  opacity: 0;
	  transform: translateY(25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes slideInUp {
	0% {
	  opacity: 0;
	  transform: translateY(25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes slideInDown {
	0% {
	  opacity: 0;
	  transform: translateY(-25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes slideInDown {
	0% {
	  opacity: 0;
	  transform: translateY(-25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes slideInleft {
	0% {
	  opacity: 0;
	  transform: translateX(25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes slideInleft {
	0% {
	  opacity: 0;
	  transform: translateX(25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes slideInRight {
	0% {
	  opacity: 0;
	  transform: translateX(-25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes slideInRight {
	0% {
	  opacity: 0;
	  transform: translateX(-25%);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes fadeIn {
	0% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 1;
	}
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes zoomIn {
	0% {
	  opacity: 0;
	  transform: scale(0.75);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes zoomIn {
	0% {
	  opacity: 0;
	  transform: scale(0.75);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes zoomReverseIn {
	0% {
	  opacity: 0;
	  transform: scale(1.25);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes zoomReverseIn {
	0% {
	  opacity: 0;
	  transform: scale(1.25);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @-webkit-keyframes flipInY {
	0% {
	  opacity: 0;
	  transform: perspective(90vw) rotateY(67.5deg);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  @keyframes flipInY {
	0% {
	  opacity: 0;
	  transform: perspective(90vw) rotateY(67.5deg);
	}
  
	100% {
	  opacity: 1;
	  transform: none;
	}
  }
  
  [data-animation] {
	opacity: 0;
	-webkit-animation-timing-function: var(--animation-timing-function);
	animation-timing-function: var(--animation-timing-function);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: var(--animation-duration);
	animation-duration: var(--animation-duration);
	will-change: transform, opacity;
  }
  
  .animations-disabled,
  .animations-disabled [data-animation] {
	-webkit-animation: none !important;
	animation: none !important;
	opacity: 1 !important;
  }
  
  .slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp;
  }
  
  .slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
  }
  
  .slideInLeft {
	-webkit-animation-name: slideInleft;
	animation-name: slideInleft;
  }
  
  .slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
  }
  
  .fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
  }
  
  .zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
  }
  
  .zoomReverseIn {
	-webkit-animation-name: zoomReverseIn;
	animation-name: zoomReverseIn;
  }
  
  .flipInY {
	-webkit-animation-name: flipInY;
	animation-name: flipInY;
  }
  
  .flipOutY {
	-webkit-animation-name: flipInY;
	animation-name: flipInY;
	animation-direction: reverse;
  }

.parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
    height: 80vh;
}
.parent div{
    DISPLAY: flex;
    ALIGN-ITEMS: end;
    JUSTIFY-CONTENT: END;
    color: #fff;
    font-size: 22px;
    padding: 0px 20px 15px;
}
.div1 {
    grid-column: span 2 / span 2;
    grid-row: span 4 / span 4;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/AGATHA%20BLACK.jpg);
    background-size: cover;
    background-position: center;
}

.div2 {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    background-size: cover;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/ARMOUR.jpg);
    background-position: center;
    background-size: cover;

}

.div3 {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 5;
    background-size: cover;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/IMPACT%20STATUARIO.jpg);
    background-position: center;
    background-size: cover;

}

.div4 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 5;
    background-size: cover;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/WHITE-RUMBLE.jpg);
    background-position: center;
    background-size: cover;

}

.div5 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
    background-size: cover;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/matt/INFINITY%20DOVE.jpg);
    background-position: center;
    background-size: cover;

}

.div6 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 3;
    background-size: cover;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://new.simonzatile.com/images/view/glossy/BOSTON%20BEIGE.jpg);
    background-position: center;
    background-size: cover;

}
        

.parent .cta {
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  padding-top: 15px;
  color: #fff;
}

.parent .cta span {
  padding-bottom: 7px;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 700;
  padding-right: 15px;
  color: #fff;

  /* text-transform: uppercase; */
}

.parent .cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
  color: #fff;

}

.parent .cta:hover svg {
  transform: translateX(0);
}

.parent .cta:active svg {
  transform: scale(0.9);
}

.parent .hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
  color: #fff;

}

.parent .hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  background-color: #fff;
}

.parent .cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.uls a:hover{
  color: var(--color-theme-sec);
  transition: all .5s ease-in-out;
}

.animated-link {
  /* Basic Text Styles */
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px; /* Space between text and border */
  position: relative;
  display: inline-block; /* Essential for containing the ::after element */
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0%; 
  transform: translateX(0%); 
    height: 2px; /* Border thickness */
  width: 0px; /* **Initial 20px width** */
  background-color: var(--color-theme-sec); /* Border color */
  
  /* Animation/Transition Settings */
  transition: width 0.3s ease-out; /* Smooth animation over 0.3 seconds */
}

.animated-link:hover::after {
 
  width: 100%; 
  color: var(--color-theme-sec);
}
.animated-link:hover {
 
  color: var(--color-theme-sec);
}
#site-header {
    /* Set the position to fixed */
    position: fixed; 
    left: 0;
    right: 0;
    width: 100%; 
    z-index: 1000; 
    background-color: #ffffff; /* Use your header's background color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    
    /* ⬅️ Add a transition for smooth reveal/hide */
    transition: top 0.3s ease-in-out; 
}

/* This class will be added by JavaScript to show the header */
#site-header.header-visible {
    top: 0; /* ⬅️ Bring the header back into view */
}

.collectionsa {
    /* Set the container to a specific size if needed,
       and make it a relative positioning context */
    position: relative;
    overflow: hidden; /* Ensures images are clipped if they overflow */
    height: 35vh;
}

.collectionsa img {
    /* Style both images to ensure they fit the container */
    width: 100%;
    height: 100%;
    position: absolute; /* Stack the images */
    top: 0;
    left: 0;
    transition: opacity 0.3s ease; /* Optional: adds a smooth fade effect */
    object-fit: cover;
    transition: all .5s ease-in-out;

}

/* 1. By default, hide the image that is meant to show on hover */
.collectionsa .hover-image {
    opacity: 0;
}

/* 2. By default, show the tile image */
.collectionsa .default-image {
    opacity: 1;
}

/* 3. When the container is hovered: */
.collectionsa:hover .default-image {
    /* Hide the tile image */
    opacity: 0;
    transition: all .5s ease-in-out;

}

.collectionsa:hover .hover-image {
    /* Show the view image */
    opacity: 1;
    transition: all .5s ease-in-out;
}


/*  */

.sec-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;
	height: 3px;
	background: #000;
}
.sec-title h2 {
	font-size: 60px;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: var(--blue);
}
.sec-title p {
	font-size: 18px;
	line-height: 28px;
}
.testimonial-area {
	background: var(--blue);
	position: relative;
	z-index: 2;
	padding: 100px 0;
}
.testimonial-area .owl-carousel {
	overflow: hidden;
	padding: 0 20px;
	margin: 0px -40px;
	padding-right: 40px;
}
.testimonial-area .owl-stage-outer {
	padding: 30px 50px;
	margin-left: -34px;
	width: calc(100% + 100px);
}
/* .testimonial-area img {
	filter: invert(1);
} */
.single-testimonial {
	border: 2px solid var(--color-main-theme);
	text-align: center;
	border-radius: 45px;
	position: relative;
	z-index: 2;
}
.single-testimonial p {
	font-size: 18px;
	line-height: 24px;
	padding: 50px;
	padding-bottom: 30px;
	position: relative;
	z-index: 3;
}
.single-testimonial::before {
	content: "";
	position: absolute;
	left: -35px;
	top: -35px;
	background: url(https://cdn-icons-png.flaticon.com/512/4338/4338294.png)
		no-repeat var(--color-gray-light-9);
	background-size: 60%;
	width: 126px;
	height: 100px;
	transform: rotate(180deg);
	background-position: 34px 15px;
}
.single-testimonial::after {
	content: "";
	position: absolute;
	right: -35px;
	bottom: -34px;
	background: url(https://cdn-icons-png.flaticon.com/512/4338/4338294.png)
		no-repeat var(--color-gray-light-9);
	background-size: 60%;
	width: 126px;
	height: 100px;
	background-position: 34px 19px;
}
.round {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
.round-1::before {
	content: "";
	position: absolute;
	left: 88px;
	top: -7px;
	width: 50px;
	height: 7px;
	/* background: #fff; */
	border-radius: 30px;
}
.round-1::after {
	content: "";
	position: absolute;
	left: -7px;
	top: 62px;
	width: 7px;
	height: 50px;
	/* background: #fff; */
	border-radius: 30px;
}
.round-2::before {
	content: "";
	position: absolute;
	right: 87px;
	bottom: -7px;
	width: 50px;
	height: 7px;
	/* background: #fff; */
	border-radius: 30px;
	z-index: 1;
}
.round-2::after {
	content: "";
	position: absolute;
	right: -7px;
	bottom: 62px;
	width: 7px;
	height: 50px;
	/* background: #fff; */
	border-radius: 30px;
	z-index: 1;
}
.client-video {
	padding-right: 15px;
}
.client-info {
	position: relative;
	z-index: 3;
}
.client-info a {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
	font-size: 22px;
}
.client-info {
	display: flex;
	align-items: center;
	justify-content:center;
	text-align: left;
	padding: 0px 50px 50px;
}
.client-info h6 {
	color: #000;
	font-weight: 500;
	font-size: 24px;
}
.client-info span {
	display: inline-block;
	color: #000;
	font-size: 12px;
}
.sec-title.white-title h2 {
	color: var(--color-main-theme);
}
.owl-dots button {
	background: var(--color-main-theme) !important;
	width: 10px;
	height: 10px;
	border-radius: 26px;
	margin: 0 5px;
	transition: 0.3s;
}
.owl-dots {
	text-align: center;
	margin-top: 50px;
}
.owl-dots button.active {
	width: 30px;
}

.testimonial-area .icon-block{
  justify-content: center;
}
.testimonial-area h2{
  text-align: center;
}


/*  */


.count{
  font-size: 55px;
  font-weight: bold;
}
.counter-wrapper{
  position: relative;
}
.counter-wrapper:after{
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.5);
}
.counter-inner{
  position:relative;
  z-index:2;
}
.count-icon{
  font-size: 48px;
}
.count{
  color: var(--color-main-theme);
}
.caounter-gr{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 25px;
}
.countr-grid h6{
  font-size: 22px;
  color: #000;
  padding-bottom: 15px;
}
.countr-grid {
    border: 1px solid #0b243a;
    border-radius: 20px;
}
.menu-left a{
  padding: 0px 10px;
}


@media only screen and (max-width: 767px) {
.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
.why-choose-sim {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
}
.second-choose {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
}
.number-sec {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 50px;
    align-items: center;
}
.eco-sec {
    padding: 0 20px;
    display: flex;
    gap: 50px;
    align-items: center;
    flex-direction: column;
}
.knlowledge-grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 50px;
    text-align: center;
    padding-top: 50px;
}
.items-cou {
    width: 100%;
}
.counter-team {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 25px;
    align-items: center;
    border-bottom: 2px solid #e9e9e9;
    padding-bottom: 10px;
}
.sec-two-avt {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 25px;
    padding-top: 10px;
}
.caounter-gr {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 25px;
}
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.knlowledge-grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 10px;
}
.why-choose-sim {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
.number-sec {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.counter-img img {
    width: 80%;
    margin: auto;
    display: block;
}
.eco-sec {
    padding: 0 20px;
    display: flex;
    gap: 50px;
    align-items: center;
    flex-direction: column;
}
.img-top-right {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.img-bottom-left {
    width: 50%;
    height: 350px;
    bottom: -180px;
    right: 0;
    z-index: 3;
    border-radius: 10px;
}
.grid-container {
    grid-template-columns: repeat(2,1fr);
}
.event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding-bottom: 50px;
}
.export-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
}
.world-map-placeholder img{
  width: 100%;
}
.universal-market-section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
    align-items: flex-start;
}
.heading-flex {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
}
.certificate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding-top: 50px;
}
.result-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
}
.conta {
    display: grid;
    grid-template-columns: repeat();
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    position: relative;
    top: 60px;
    gap: 20px;
}
}