styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* @media (min-width: 640px) { */
     /* All even numbered elements in a grid view of grid-cols-3 when in small screen (The second element on each line when the min-width of the screen is greater or equals to 640px)*/
    /* .productItemContainer > div:nth-child(3n + 2):hover {
        margin-left: calc(var(--containerHeight) - 500px);
    } */
    /* All third numbered elements in a grid view of grid-cols-3 when in small screen (The second element on each line when the min-width of the screen is greater or equals to 640px) */
    /* .product:nth-child(3n + 3):hover {
        right: 30px;
    }
}

@media (min-width: 1024px) {
    .product:nth-child(4n + 4):hover {
        right: 30px;
    }
} */


/* Adding custom utilities */
@layer utilities {
    
    .widthTransition {
        transition: width 4s linear 3s;
    }
    /* Setting width explicitly */
    .explicitWidthSM {
        width: 100%;
    }
    .explicitWidthLG {
        width: 100%;
    }
}

:root {
    --errorRed: #ef4444;
}

.removableHTMLStyle {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

body{
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
}

@media (max-width: 639px) {
    .transTop {
        transform: translateY(-120%);
        opacity: 0;
    }
    .transTopNormal {
        transform: translateY(0);
        opacity: 1;
    }
}


@media (min-width: 640px) {
    /* Applying transitions to the dropDown */
    .transRight {
        opacity: 0;
        transform: translateX(120%);
    }
    .transNormal {
        opacity: 1;
        transform: translateX(0);
        right: 0;
    }
}

/* Styling the hero section */
.hero {
    min-height: max(450px, 68%);
}

.swiper {
    --swiper-navigation-color: #7EB693;
}
.swiper-pagination-bullet-active {
    background-color: #7EB693 !important;
}
@media (max-width: 450px) {
    .swiper-button-next,.swiper-button-prev  {
        display: none !important;
    } 
}

@media (min-width: 640px) {
    .hero {
        min-height: min(492px, 75%);
    }
}

/* Adding box-shadows to the productItemContainer */
.productItemContainer > div {
    box-shadow: 1px 1px 4px #d4d4d4;
}

.viewBtn {
    box-shadow: 1px 1px 4px #a4a4a4;   
}


/* The transitions applied to the extraHero Div */
.extraHeroOne {
    opacity: 0;
    transform: translateX(-50%);
}

.extraHeroTwo {
    opacity: 0;
    transform: translateX(50%);
}

.transitions {
    transition: all 300ms linear 100ms;
}
.fasterTransition {
    transition: all 100ms linear;
}
.veryFastTransition {
    transition: all 1ms linear;
}
.delayedTransition {
    transition: all 450ms linear 00ms;
}
.fadingTransition {
    transition: all 1s linear;
}
.slowerTransition {
    transition: all 200ms linear;
}
.startTransition {
    transition: all 300ms linear;
}
.verySlowTransition {
    transition: all 2s linear 100ms;
}
.debugTransition {
    transition: all 2s linear;
}
/* Adding an opacity class */
.opacity {
    opacity: 0;
}
/* Stylings to apply a clipping effect */
.clip-to-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
} 
.clippedText {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
} 
.extraHeroVisible {
    opacity: 1;
    transform: translateX(0);
}

/* The fruit image transition styles */
.fruitImage {
    opacity: 0;
    transform: translateY(-20%);
}
.infoAboutUs {
    opacity: 0;
    transform: translateY(10%);
}
.aboutVisible {
    opacity: 1;
    transform: translateY(0);
}

/* The productItemContainer children */
.productItemContainer > div:nth-child(4n + 1),
.productItemContainer > div:nth-child(4n + 2),
.productItemContainer > div:nth-child(4n + 3),
.productItemContainer > div:nth-child(4n + 4) {
    opacity: 0;
    transform: translateX(-20%); 
}

.productItemContainer > div.visibleProduct {
    opacity: 1;
    transform: translateX(0);
}

.gallery.visibleProduct {
    opacity: 1;
    transform: translateX(0);
}

/* The offer menu children transitions */
.offerMenu > div {
    opacity: 0;
    transform: translateX(-20%); 
}

.offerMenu > div.visibleProduct {
    opacity: 1;
    transform: translateX(0);
}

/* The gallery children transitions */
.gallery {
    opacity: 0;
    transform: translateX(-20%); 
}

.gallery > div.visibleProduct {
    opacity: 1;
    transform: translateX(0);
}

/* The news items transitions */
.newsText {
    opacity: 0;
    transform: translateY(10%);
}

/* Remove scroll from the number element */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* boxshadow */
.shadow {
    box-shadow: 1px 1px 4px #d4d4d4;
}

/* Hide the display */
@media (max-width: 325px) {
    .hidePlacardText {
        display: none;
    }
    .negativeMargin {
        margin-bottom: -110px;
    }
    .reduceMT {
        margin-top: 2rem;
    }
}


/* The styling  */
.list-outside ::marker {
    margin-left: 20px;
}
.product:not(.hover) .dataCard {
    display: block !important;
    /* background-color: #ef4444; */
}
/* The intl-telephone input plugin styles */
.iti { 
    width: 100%; 
}

.iti__arrow { border: none; }

.iti__globe { background-image: url("./images/intl-Tel-Input/globe.png"); }
.iti__flag { background-image: url("./images/intl-Tel-Input/flags.png"); }

@media (min-resolution: 2x) {
  .iti__globe { background-image: url("./images/intl-Tel-Input/globe@2x.png"); }
  .iti__flag { background-image: url("./images/intl-Tel-Input/flags@2x.png"); }
}
.border-right-t{
    /* t for thick */
    border-right-width: 1.7px;
}
.border-right-n{
    /* n for narrow */
    border-right-width: 1px;
}

/* Cart shadow */
.cartShadow-sm {
    box-shadow: 0px 0px 8px 4px #d4d4d4;
}
.cartShadow-md {
    box-shadow: 0px 0px 8px 8px #c4c4c4;
}