javaneh/assets/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: "Iransans";
    src: url("/public/fonts/IRANSansWebFaNum.woff2");
}
html {
    overflow-x: hidden !important;
}
body {
    direction: rtl;
    font-family: "Iransans";
    background-color: #faf6f9;
    max-width: 100vw;
    overflow-x: hidden !important;
}
.animate {
    -webkit-animation: spin 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    animation: spin 0.3s linear infinite;
}
.line2 {
    stroke: black;
}
.header {
    background-image: url("/public/images/headerImg.jpg");

    width: 100%;
    background-repeat: no-repeat;

    background-size: cover;
}
@media (min-width: 1024px) {
    .header {
        background-position: center;
    }
}
.test {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #faf6f9 70%);
    width: 100%;
    height: 150px;
    margin-top: -130px;
}
.fade {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%);
    width: 100%;
    height: 150px;
    margin-top: -130px;
}

.imgWrap {
    position: relative;
    margin: 0% auto;
    padding-bottom: 39%;
}
.ourStory {
    background-image: url("/public/images/aboutBg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 155%;
    background-position-y: -10vw;
}
@media (max-width: 768px) {
    .carousel__pagination-item button::after {
        width: 14vw !important;
        height: 1vw !important;
        padding: 0px !important;
        margin: 0px 0.1vw !important;
        border-radius: 10vw;
    }
    .carousel__pagination {
        margin-top: 26.5vw !important;
        margin-bottom: 21vw !important;
    }
    .ourStory {
        background-image: url("/public/images/aboutBg.jpg");
        background-repeat: no-repeat;
        background-size: 180% 155%;
        background-position-x: -35vw;
    }
    .imgWrap {
        padding-bottom: 5vw !important;
    }
    .imgWrap > div {
        position: absolute;
        top: 0;
        width: 44% !important;
        height: 58vw !important;
        float: left;
        background-image: url("/public/images/aboutBg.jpg");
        background-size: auto 190%;
        object-fit: cover;
        background-position: center;
        justify-content: center;
        justify-items: center;
        margin-top: 5vw !important;

        /* background-repeat: no-repeat; */
    }
    .imgWrap .two {
        left: -22% !important;
        background-position: 18% 50%;
    }
    .imgWrap .three {
        left: 26% !important;
        background-position: 50% 50%;
    }
    .imgWrap .four {
        left: 74% !important;
        background-position: 85% 50%;
    }
}
.imgWrap > div {
    position: absolute;
    top: 0;
    width: 23%;
    height: 92%;
    float: left;
    background-image: url("/public/images/aboutBg.jpg");
    background-size: auto 190%;
    object-fit: cover;
    background-position: center;
    justify-content: center;
    justify-items: center;
    margin-top: 5vw;
    /* background-repeat: no-repeat; */
}

.imgWrap > div > div {
    height: 99.7%;
    width: 99.3%;
    border-color: white;
}
.imgWrap .one {
    left: -11.5%;
    background-position: -13% 50%;
}
.imgWrap .two {
    left: 13.5%;
    background-position: 18% 50%;
}
.imgWrap .three {
    left: 38.5%;
    background-position: 50% 50%;
}
.imgWrap .four {
    left: 63.5%;
    background-position: 85% 50%;
}
.imgWrap .five {
    left: 89.5%;
    background-position: 111% 50%;
}
.imgWrap .left {
    left: 0;
    background-position: 3% 0;
}
.imgWrap .center {
    left: 34.83%;
    background-position: -97% 0;
}
.imgWrap .right {
    left: 69.66%;
    background-position: -197% 0;
}
.imgWrap > div:before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 10%;
    height: 100%;
    background: inherit;
    transform-origin: 100% 50%;
    transform: rotateY(-90deg);
}

.imgWrap .left:before {
    background-position: 0% 0;
}
.imgWrap .center:before {
    background-position: -1001.3% 0;
}
.imgWrap .right:before {
    background-position: -2001.4% 0;
}

.contact {
    background-image: url("/public/images/aboutBg.jpg");
    background-image: url("/public/images/aboutBg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 185%;
    background-position-y: -16vw;
}

.slide1 {
    background-image: url("/public/images/slider.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
/* 
*/
.mediagallery {
    background-size: cover;
    background-image: url("/public/images/gallery2.jpg") !important;
} 
.test-1{
    background-size: cover;
    background-image: url("/public/images/products/1.jpg") !important;
}
.test-2{
    background-size: cover;
    background-image: url("/public/images/products/2.jpg") !important;
} 
.test-3{
    background-size: cover;
    background-image: url("/public/images/products/3.jpg") !important;
} 
.test-4{
    background-size: cover;
    background-image: url("/public/images/products/4.jpg") !important;
} 
.test-5{
    background-size: cover;
    background-image: url("/public/images/products/5.jpg") !important;
} 
.test-6{
    background-size: cover;
    background-image: url("/public/images/products/6.jpg") !important;
} 
.test-7{
    background-size: cover;
    background-image: url("/public/images/products/7.jpg") !important;
} 
.test-8{
    background-size: cover;
    background-image: url("/public/images/products/8.jpg") !important;
}
.test-0{
    background-size: cover;
    background-image: url("/public/images/products/9.jpg") !important;
}
.carousel__pagination-item button::after {
    width: 5.365vw;
    height: 0.25vw;
    padding: 0px !important;
    margin: 0px 0.1vw !important;
    border-radius: 10vw;
}

:root {
    --vc-clr-primary: #a62186 !important;
    --vc-clr-secondary: #e5e5e5 !important;
    --vc-clr-white: #ffffff;
}
.carousel__slide{
    padding-right: 4vw !important;
    display: flex;
    justify-content: end !important;
}
.carousel__viewport {
    height: 100% !important;
    width: 100% !important;
    text-align: end;
    position: relative !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carousel__pagination {
    margin-top: 10.5vw !important;
}