/* -------------------------------------------------- */
/* GLOBAL */

@font-face {
    font-family: 'kumeshian';
    src: url('/public/fonts/IRANSansX-Regular.woff2') format('woff2');
        /* , url('path/to/font.woff') format('woff'); */
}

@font-face {
    font-family: 'kumeshian-bold';
    src: url('/public/fonts/IRANSansX-Bold.woff2') format('woff2');
}

:root {
    --page-nav-border-color: #d2d1f7; /* rgb(192, 192, 192); */
}

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: 'kumeshian', sans-serif;
    direction: rtl;
}

.container {
    max-width: 1280px;
    /* border: solid 5px red; */
    background-color: #080808;
    margin: auto;
}

h1, h2, h3, h4 {
    font-family: 'kumeshian-bold', 'kumeshian', sans-serif;
}

header {
    direction: ltr;
}

header > section.topbar {
    background-color: rgb(90, 80, 200);
}


/* -------------------------------------------------- */

.splide__slide img {
    width: 100%;
    /* height: auto; */
    height: 100%;
    object-fit: contain;
}

.splide__slide {
    opacity: 0.6;
  }

  .splide__slide.is-active {
    opacity: 1;
  }

/* -------------------------------------------------- */
/* GENERAL and DEFAULT */
main {
    background-color: white;
    padding: 20px;
}

/* main  h2, main  h1 {
    padding: 10px;
    /* background-color: #605ea8;
    background-color: rgb(90, 80, 200);
    color: #ffffff;
} */

/* -------------------------------------------------- */
/* MOST PAGES */
div.breadcrumb {
    display: flex;
}

div.breadcrumb span{
    padding: 0px 12px;
}




/* -------------------------------------------------- */
/* HOME PAGE */
header.showcase {
    position: relative;
}

header.showcase section.topbar {
    background-color: rgba(90, 80, 200, 0.6);
}




/* -------------------------------------------------- */
footer {
    /* direction: rtl; */
    background-color: rgb(44, 44, 44);
    color: white;
    padding: 2em 5em;
    /* height: 200px; */
}
footer div.link {
    display: flex;
    flex-direction: row;
    gap: 50px;
}
/* -------------------------------------------------- */

footer section {
    display: flex;
    flex-direction: column;
}



/* -------------------------------------------------- */
/* tables of specifications */
tr:nth-child(even), thead th {
    background-color: #ffffff; /* Lighter color */
}
tr:nth-child(odd) {
    background-color: #d9e2f3; /* Darker color */
}
table {
    border-top: 1px solid #00008B;
}
th, td {
    padding: 10px 20px;
    border-bottom: 1px solid #00008B;
}

/* -------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}




.bgCont {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.background {
    max-width: 70%;

    position: relative;
    /* height: 500px; */
    /* top: -50px;
    bottom: 200px; */
    overflow: hidden;
    text-align: center;
}


.imgbg {
    /* position: absolute; */
    /* clip: rect(0px, 000px, 1000px, 1110px); */

    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */

    object-fit: cover;
    width: 100%;
    height: 100%;
}


.sccontent {
    position: absolute;
    /* border: solid 2px blue; */
    left: 0px;
    top: 0px;
    color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}


.topbar {
    /* display: flex;
    flex-direction: row; */
    display: grid;
    grid-template-columns: 300px 150px auto;
    align-items: center;
    /* background-color: rgba(128, 128, 128, 0.2); */
    /* background-color: rgba(90, 80, 200, 0.6); */
}

.topbar div {
    display: flex;
    justify-content: space-between;
}
.topbar div a{
    display: flex;
}

.topbar a svg {
    stroke: white;
    fill: white;
}

.logo {
    /* margin-left: 20px; */
    margin: 18px 20px;
    display: flex;
}

.logo img {
    height: 32px;
}

/* -------------------------------------------------- */
/* .menu {
    display: grid;
    place-items: center;
    gap: 10px;
} */


/* .menu {
    display: flex;
    justify-content: center;
    width: 100%;
} */

/* -------------------------------------------------- */
/* the menu */

.menu {
    direction: rtl;
    z-index: 10;
    color: white;
}

.menu > ul {
    display: flex;
    /* flex-direction: row-reverse; */
    flex-direction: row;
    gap: 30px;
    margin: 0px 30px;

    /* width: 100%; */
    height: 100%;
    justify-items: center;
    align-items: center;
    font-size: larger;
}

.menu ul {
    padding: 0;
}

.menu li {
    display: flex;
    height: auto;
    position: relative;
}

.menu li a{
    padding: 10px;
}

.menu > ul > li:hover {
    border-radius: 10px;
    background: linear-gradient(145deg, #9b99ff, #8381e6);
    box-shadow:  5px 5px 15px #605ea8,
                 -4px -4px 15px #c2c0ff;
}

nav ul li:hover > ul {
    display: flex;
}

.menu ul ul {
    display: none;
    flex-direction: column;
    justify-items: start;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #eee;
    /* background-color: linear-gradient(145deg, #adadad, #ffffff); */
    color: #000;
    /* background-color: rgb(72, 64, 156); */
    /* border: 1px solid #ddd; */
    /* border-radius: 10px; */
    /* box-shadow:  5px 5px 15px #605ea8,
        -4px -4px 15px #c2c0ff; */
}

.menu ul ul li a{
    padding: 12px 25px;
}

.menu li:hover {
    /* background: linear-gradient(145deg, #9b99ff, #8381e6); */

    /* border-radius: 10px; */
    /* background-color: linear-gradient(145deg, #adadad, #2d2c57); */
    background-color: #525188;
    color: #eee;
}

/* Add these styles to keep menu items on one line */
nav ul li a {
    white-space: nowrap; /* Prevent text from wrapping */
    display: inline-block; /* Display items on the same line */
}


.menu ul ul ul {
    right: 100%;
    top: 0;

}

/* ------------------ */

.featureproduct {
    /* position: relative; */
    height: 100%;
}

.titleHolder {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.prodTitleGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prodTitle {
    font-size: 6em;

}

.prodSubTitle {
    font-size: 1.5em;
}

.prodDesc {
    width: 60%;
}

.prodImg {
    /* display: flex;
    margin: auto;
    padding: 0; */
    position: absolute;
    left: 65%;
    top: 55%;
    transform: translate(-50%, -50%);
    /* display: inline-block; */

    width: 400px;
    /* height: 400px; */

    /* -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); */
}


/* .prodImg::before {
    content: url(image.jpg);
} */

/* -------------------------------------------------- */

.inform {

    background-color: rgb(90, 80, 200);
    color: white;
    padding: 2em 5em;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.informTitle {
    font-size: 3em;
}


/* -------------------------------------------------- */

.products {
    background-color: white;

    padding: 2em 5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.productTitle {
    font-size: 40px;
}

.prodList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

.prodList a {
    color: black;
    flex: 1 0 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    /* background: linear-gradient(145deg, #9b99ff, #8381e6); */
    box-shadow:  5px 5px 15px #605ea8,
                 -4px -4px 15px #c2c0ff;
    padding: 30px;
    align-items: center;
}

.prodList a:hover {
    background: linear-gradient(145deg, #9b99ff, #8381e6);
    color: white;
}

.prodList div h3 {
    /* align-items: center; */
}
.prodList a img {
    /* object-fit: contain; */
}