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

@font-face {
    font-family: 'Raleway';
    src: url('fonts/static/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
    /* Matches the specified font weight (900) */
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/static/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    /* Matches the specified font weight (500 for medium) */
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway_thin';
    src: url('fonts/static/Raleway-Thin.ttf') format('truetype');
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway_regular';
    src: url('fonts/static/Raleway-Regular.ttf') format('truetype');
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Extra Black font.ttf') format('truetype');
    font-weight: bold;
}

/* Reset some default margin and padding */
body {
    font-family: 'raleway', sans-serif;

    /* Use the same font name as defined in @font-face */
}

h1,
h2,
p,
ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* Style the navigation bar */
.navbar ul {
    width: 86%;
    height: 180.92px;

    display: flex;
    margin-top: 3.5%;
    margin-left: 7.3%;
    margin-right: 7.3%;
    /* line-height : 75px;*/
    justify-content: space-between;
    align-items: center;

}

.navbar ul li {
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
    /* Add relative positioning */
}


/* Add a pseudo-element for the water shape border */


/* Style the navigation links */
.navbar ul li a {
    text-decoration: none;
    color: #03538B;
    /* font: normal normal medium 20px/24px 'Raleway', sans-serif;*/
    font: normal normal 500 24px/29px Raleway;
    letter-spacing: 0px;
    opacity: 1;
    position: relative;
    padding: 10px;
}

.navbar ul li a:hover {

    font: normal normal 900 24px/29px Raleway;

}


.navbar ul .logo {
    width: 142px;
    max-width: 100%;
    height: auto;
    /* Maintain the aspect ratio */
    display: block;
    /* Center horizontally */

}

.navbar ul .logo img {
    max-width: 100%;
    /* Ensure the image doesn't exceed the width of the li */


}

.logo-in-title {
    display: flex;
    align-items: center;

}

.logo-item .logo-image {
    width: 8rem;
    height: 5rem;
    position: absolute;
    left: -10%;
    z-index: 1;
    top: -35%;
    visibility: hidden;
    opacity: 1;
    transform: scale(0.8);
    /* Initial smaller scale */
    transition: opacity 0.3s, transform 0.3s;
    /* Add transitions for opacity and scale */
}

.logo-item {
    padding: 10px;
    /* Add padding to create a fixed area for the logo images */
}

.logo-link {
    display: flex;
    align-items: center;
    padding: 10px;
    /* Set a fixed size for the logo links */
}

/* Set the visibility of .large1 to visible when .logo-link is hovered */
.logo-item .logo-link:hover .large1 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.logo-item .logo-link:hover .large2 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);

}

.logo-item .logo-link:hover .large3 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.logo-item .logo-link:hover .large4 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.logo-item .logo-link:hover .large5 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.logo-item .logo-link:hover .large6 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.logo-item .logo-link:hover .large7 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}


.large1 {
    width: 13rem !important;
    left: -6% !important;
}

.large2 {
    width: 16rem !important;
    left: -2% !important;

}

.large3 {
    width: 7em !important;
}

.large4 {
    left: -11% !important;
}

.large6 {
    left: 0% !important;
}

.large7 {
    left: -4% !important;
}

.large5 {
    left: -11% !important;

}





/* Style the logo */
.navbar ul .logo {

    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

/* Style the social media icons */
/* Style the social media icons container */
.social-icons {
    position: relative;
    display: flex;
    align-items: center;

}

.social-icons a {
    background: #FFB71B 0% 0% no-repeat padding-box;
    width: 24px;
    height: 24px;
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    /* Add margin to create space between icons */
    transition: background 0.3s;
    /* Add a smooth background color transition */
}

.social-icons a:hover {
    background: #00538B;
    /* Change the background color on hover */
}

/* Style the icon itself */
.social-icons a i {
    font-size: 14px;
    color: #fff
        /* Adjust the size of the icon as needed */
}



/* Add responsive styles for smaller screens */
.hamburger {
    display: none;

    /* Initially hide the hamburger icon */
}

.slideshow {
    width: 68%;
    height: 981px !important;
    transform: matrix(1, 0, 0, 1, 0, 0);
    background: transparent url(../image/Background.png) 69% 40% no-repeat padding-box;
    background-size: 100% 86%;
    background-position-x: calc(69% + 104px);

    opacity: 1;
    height: 100vh;
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    position: relative;

}

.carousel {
    width: 50rem;
    height: 50rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    transition: rotate 1s;
}

.slide {
    width: 14rem;
    position: absolute;
    -webkit-transition-duration: 1.2s;
    -webkit-animation-name: rotate;
    transition: 0.5s ease;
    /* Add a transition for left property */
}

.slide.active {
    left: 0;
}


.slide.active img {
    transform: scale(3);
    transition: transform 0.5s 0.5s;

}


.slide.active .leaves {
    transform: scale(1.5);

    margin-top: -100%;
    margin-left: -168%;
}


.cheese {


    margin-left: 39%;
}

.overlapping-image {
    position: absolute;
    /* Position absolute to control stacking */
    z-index: 2;
    /* Set a higher z-index value */
    /* You can adjust the top and left properties to position the overlapping image as needed */
    top: 0;
    left: 0;
}

.slide:nth-child(1) {
    left: 10rem;
    top: 10rem
}

.slide:nth-child(2) {
    bottom: 40rem;
    left: 30rem;

}

.slide:nth-child(3) {
    right: -10rem;
    top: 19%;

}

.slide:nth-child(4) {
    top: 30rem;
    left: 40rem;

}


.slide img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    transform: scale(1);


}

.controlsSlide {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 2%;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

}

.prev-button,
.next-button {
    padding: 10px;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Optionally, style the buttons as you like */
.prev-button {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.next-button {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}




.theStory {
    width: 31%;
    height: 981px !important;
    text-align: left;

}

.theStory .title {

    font: normal normal 900 76px/69px Raleway;
    letter-spacing: 0px;

    text-transform: uppercase;
    margin-top: 9%;
    margin-left: 17.3%;
}

.theStory .content {
    text-align: left;
    font: normal normal 500 21px/29px Raleway;
    letter-spacing: -0.53px;
    color: #000000;
    margin-left: 17.3%;
    margin-top: 11%;
    text-align: justify;
}

.viewProd {
    display: inline-block;
    background: transparent url(../image/Buttonsnormal.png) 0% 0% no-repeat padding-box;
    width: 251px;
    height: 82px;
    margin-left: 26%;
    margin-top: 12%;


    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.5s;
}

.viewProd:hover {
    width: 251px;
    height: 82px;
    display: inline-block;
    background: transparent url('../image/Buttons.png') 0% 0% no-repeat padding-box;
    padding: 10px 20px;
    text-decoration: none;


}

.container {

    width: 100%;
}

.slider-wrapper {
    position: relative;
}

.slider-wrapper .slide-button {
    position: absolute;
    top: 50%;
    outline: none;
    border: none;
    height: 50px;
    width: 50px;
    z-index: 5;
    color: #fff;
    display: flex;
    cursor: pointer;
    font-size: 2.2rem;
    background: #000;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translateY(-50%);
}

.slider-wrapper .slide-button:hover {
    background: #404040;
}

.slider-wrapper .slide-button#prev-slide {
    left: -25px;
    display: none;
}

.slider-wrapper .slide-button#next-slide {
    right: -25px;
}

.slider-wrapper .image-list {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 18px;
    font-size: 0;
    list-style: none;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.slider-wrapper .image-list::-webkit-scrollbar {
    display: none;
}

.slider-wrapper .image-list .image-item {
    width: 325px;
    height: 400px;
    object-fit: cover;
}

.container .image-list li img {
    transition: all 0.3s ease;
}

.container .image-list li .content_slider,
.container .image-list li .title_slider {
    /* Your existing styles */
    transition: visibility 0s, opacity 0.3s;
    /* Add a transition for visibility and opacity */
    opacity: 0;
    transform: translateX(-100%);
    /* Start off-screen to the left */
}

.container .image-list li:hover .content_slider,
.container .image-list li:hover .title_slider {
    visibility: visible !important;
    opacity: 1;
    transform: translateX(0);
    /* Slide in from the left */
    transition: visibility 0s, opacity 0.3s, transform 0.5s;
    /* Add a transition for the new transform property */
}


.container .image-list li:nth-child(9) img {
    width: 100%;
    height: 100%;
    transform: matrix(0.86, 0.52, -0.52, 0.86, 0, 0);
    mix-blend-mode: luminosity;
    /* margin-left: -41%; */
    /* margin-top: -2%; */
    opacity: 0.7;
    position: absolute;

}

.container .image-list li:nth-child(9) {
    position: relative;

    overflow: hidden;
    background: #FAAB24;
}

.container .image-list li:nth-child(9):hover img {
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    /* margin-top: 32%; */
    mix-blend-mode: unset;
    opacity: 1;
    top: 28%;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(9):hover {
    position: relative;

}

.container .image-list li:nth-child(9) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 11%;
    left: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(9) .title_slider {
    position: absolute;
    left: 9%;
    top: 5%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 46px/93px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(9):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(9):hover .title_slider {
    visibility: visible;
}


.container .image-list li:nth-child(8) img {
    width: 100%;
    height: 100%;
    transform: matrix(0.93, -0.36, 0.36, 0.93, 0, 0);
    mix-blend-mode: luminosity;
    margin-left: -6%;
    margin-top: -2%;
    opacity: 0.7;
    position: absolute;

}

.container .image-list li:nth-child(8) {
    position: relative;

    overflow: hidden;
    background: #ABB610;
}

.container .image-list li:nth-child(8):hover img {
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    /* margin-top: 32%; */
    mix-blend-mode: unset;
    opacity: 1;
    top: 35%;
    left: 6%;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(8):hover {
    position: relative;

}

.container .image-list li:nth-child(8) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 11%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(8) .title_slider {
    position: absolute;
    left: 28%;
    top: 5%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 46px/93px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(8):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(8):hover .title_slider {
    visibility: visible;
}


.container .image-list li:nth-child(7) img {
    width: 100%;
    height: 100%;
    transform: matrix(1.3, -0.70, 0.70, 1.3, 0, 0);
    mix-blend-mode: luminosity;
    opacity: 0.7;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(7) {
    position: relative;

    overflow: hidden;
    background: #E1251B;
}

.container .image-list li:nth-child(7):hover img {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    left: 0%;
    top: 11%;
    /* bottom: -10px; */
    mix-blend-mode: unset;
    opacity: 1;

}

.container .image-list li:nth-child(7):hover {
    position: relative;

}

.container .image-list li:nth-child(7):hover .title_slider {
    visibility: visible;
}

.container .image-list li:nth-child(7) .title_slider {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font: normal normal 900 64px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(7) .content_slider {
    text-align: center;
    font: normal normal 900 64px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 29%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(7):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(6) img {
    width: 100%;
    height: 100%;
    transform: matrix(0.93, -0.37, 0.37, 0.93, 0, 0);
    mix-blend-mode: luminosity;
    /* margin-left: -84%; */
    /* margin-top: -2%; */
    opacity: 0.7;

}

.container .image-list li:nth-child(6) {
    position: relative;

    overflow: hidden;
    background: #FAAB24;
}

.container .image-list li:nth-child(6) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 16%;
    left: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(6) .title_slider {
    position: absolute;
    top: 4%;
    left: 6%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 48px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(6):hover img {
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    
    margin-top: 39%;
    mix-blend-mode: unset;
    opacity: 1;

}

.container .image-list li:nth-child(6):hover {
    position: relative;

}

.container .image-list li:nth-child(6):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(5) img {
    width: 100%;
    height: 100%;
    transform: matrix(1.3, -0.70, 0.70, 1.3, 0, 0);
    mix-blend-mode: luminosity;
    opacity: 0.7;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(5) {
    position: relative;
    width: 439px;
    height: 558px;
    overflow: hidden;
    background: #FAAB24;
}

.container .image-list li:nth-child(5):hover img {
    width: 609px;
    height: 624px;
    transform: matrix(1, 0, 0, 1, 0, 0);

    top: 5%;
    bottom: -10px;
    mix-blend-mode: unset;
    opacity: 1;
    margin-top: 28%;
    margin-left: -10%;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(5):hover {
    position: relative;

}

.container .image-list li:nth-child(5):hover .title_slider {
    visibility: visible;
}

.container .image-list li:nth-child(5) .title_slider {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font: normal normal 900 64px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(5) .content_slider {
    text-align: center;
    font: normal normal 900 64px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 29%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(5):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(4) img {
    width: 136%;
    height: 181%;
    transform: matrix(0.93, -0.36, 0.36, 0.93, 0, 0);
    mix-blend-mode: luminosity;
    margin-left: -29%;
    margin-top: -37%;
    opacity: 0.7;


}

.container .image-list li:nth-child(4) {
    position: relative;
    width: 439px;
    height: 558px;
    overflow: hidden;
    background: #E1251B;
}

.container .image-list li:nth-child(4) .content_slider {
    text-align: center;
    font: normal normal 900 87px/213px Raleway;
    letter-spacing: -4.35px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 29%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(4) .title_slider {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font: normal normal 900 64px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(4):hover img {
    width: 463px;
    height: 758px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    margin-left: -5%;
    margin-top: 0%;
    mix-blend-mode: unset;
    opacity: 1;

}

.container .image-list li:nth-child(4):hover {
    position: relative;

}

.container .image-list li:nth-child(4):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(4):hover .title_slider {
    visibility: visible;
}

.container .image-list li:nth-child(3) img {
    width: 100%;
    height: 100%;
    transform: matrix(0.93, -0.37, 0.37, 0.93, 0, 0);
    mix-blend-mode: luminosity;
    /* margin-left: -84%; */
    /* margin-top: -30%; */
    opacity: 0.7;


}

.container .image-list li:nth-child(3) {
    position: relative;
    width: 439px;
    height: 558px;
    overflow: hidden;
    background: #ABB610;
}

.container .image-list li:nth-child(3):hover img {
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    /* margin-left: -57%; */
    margin-top: 44%;
    mix-blend-mode: unset;
    opacity: 1;

}

.container .image-list li:nth-child(3):hover {
    position: relative;

}

.container .image-list li:nth-child(3) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 16%;
    left: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(3) .title_slider {
    position: absolute;
    top: 4%;
    left: 6%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 48px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(3):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(3):hover .title_slider {
    visibility: visible;
}

.container .image-list li:nth-child(2) img {
    width: 439px;
    height: 527px;
    transform: matrix(0.98, 0.21, -0.21, 0.98, 0, 0);
    mix-blend-mode: luminosity;
    margin-left: -1%;
    margin-top: 3%;
    opacity: 0.7;


}

.container .image-list li:nth-child(2) {
    position: relative;
    width: 439px;
    height: 558px;
    overflow: hidden;
    background: #E1251B;
}

.container .image-list li:nth-child(2):hover img {
    width: 100%;
    height: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    margin-top: 43%;
    mix-blend-mode: unset;
    opacity: 1;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(2):hover {
    position: relative;

}

.container .image-list li:nth-child(2) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 16%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(2) .title_slider {
    position: absolute;
    left: 26%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 48px/130px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(2):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(2):hover .title_slider {
    visibility: visible;
}

.container .image-list li:nth-child(1) img {
    width: 100%;
    height: 100%;
    transform: matrix(0.93, -0.36, 0.36, 0.93, 0, 0);
    mix-blend-mode: luminosity;
    /* margin-left: -6%; */
    /* margin-top: -13%; */
    opacity: 0.7;

}

.container .image-list li:nth-child(1) {
    position: relative;
    width: 439px;
    height: 558px;
    overflow: hidden;
    background: #FAAB24;
}

.container .image-list li:nth-child(1):hover img {
    width: 510px;
    height: 530px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    margin-top: 45%;
    mix-blend-mode: unset;
    opacity: 1;
    /* Change the opacity of the image */

}

.container .image-list li:nth-child(1):hover {
    position: relative;

}

.container .image-list li:nth-child(1) .content_slider {
    width: 384px;
    height: 56px;
    text-align: center;
    font: normal normal 900 99px/200px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    position: absolute;
    top: 16%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    visibility: hidden;
}

.container .image-list li:nth-child(1) .title_slider {
    position: absolute;
    left: 3%;
    top: 5%;
    /* transform: translate(-50%, -50%); */
    text-align: center;
    font: normal normal 900 46px/93px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    visibility: hidden;

}

.container .image-list li:nth-child(1):hover .content_slider {
    visibility: visible;
}

.container .image-list li:nth-child(1):hover .title_slider {
    visibility: visible;
}

.prev-button {
    order: 1;
    /* Ensure the "Previous" button is on the left */
}

.next-button {
    order: 2;
    /* Ensure the "Next" button is on the right */
}

.container_recipt {
    display: flex;
    margin-top: -1%;
    align-items: center;
    justify-content: center;
}

.slider {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 680px;
    background-color: white;
    overflow: hidden;
}

.slider__slides {
    width: 100%;
    padding-top: 34%;
}

.slider__slide {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
    top: 0;
    left: 0;
    width: 100%;
    height: 680px;
    background-color: lemonchiffon;
    transition: 1s;
    opacity: 0;
}





.slider__slide.active {
    opacity: 1;
}

.slider__slide img {
    width: 100%;
    height: 680px;
    position: relative;
}

.slider__slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
    z-index: 1;
    pointer-events: none;
}

.slider__nav-button {
    position: absolute;
    height: 70px;
    width: 70px;
    background-color: #333;
    opacity: .8;
    cursor: pointer;
}

.slider__slide img::before {
    content: "";
    /* Create a pseudo-element for the overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00000000 0%, #000000 100%);
    z-index: 1;
    /* Place the overlay above the image */
    pointer-events: none;
    /* Prevent the overlay from blocking interactions with the image */
}


/* Style the text elements */
.slider__slide .title_recipt,
.slider__slide .content_recipt,
.slider__slide a {
    position: absolute;
    z-index: 2;
    /* Set a higher z-index for the text elements to place them above the overlay */
}

#nav-button--prev {
    border-radius: 50%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

#nav-button--next {
    border-radius: 50%;
    background-color: #ffffff;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}

#nav-button--prev::after,
#nav-button--next::after {
    content: "";
    position: absolute;
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    width: 6%;
    height: 6%;
}

#nav-button--next::after {
    top: 50%;
    right: 50%;
    transform: translate(25%, -50%) rotate(-45deg);
    border-color: black;
}

#nav-button--prev::after {
    top: 50%;
    right: 50%;
    transform: translate(75%, -50%) rotate(135deg);

}

.slider__nav {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.slider__navlink {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px #fff solid;
    background-color: #333;
    opacity: 1;
    margin: 0 10px 0 10px;
    cursor: pointer;
}

.slider__navlink.active {
    background-color: #fff;
    border: 1px #333 solid;
}

.slider__slide .title_recipt {
    position: absolute;
    font: normal normal normal 38px/240px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    top: 10%;
    left: 10%;
}


.slider__slide .content_recipt {
    position: absolute;
    text-align: left;
    font: normal normal 900 85px/70px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    left: 10%;
    top: 34%;
}

.slider__slide a {
    position: absolute;
    display: flex;
    justify-content: center;
    /* Horizontally center the text */
    align-items: center;
    /* Vertically center the text */
    width: 251px;
    height: 82px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.5s;
    font: normal normal bold 19px/39px Futura;
    letter-spacing: -0.47px;
    color: #03538B;
    text-transform: uppercase;
    text-decoration: none;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    top: 62%;
    left: 10%;
}

.companies {
    height: 680px;
    width: 100%;
    display: flex;
    align-items: center;
}

.perla_company {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0%;
    margin-left: 10%;
}

.text-container {
    display: flex;
    align-items: center;
    margin-right: 5%
}

.perla_company p {
    color: #FAAB24;
    text-align: left;
    font: normal normal 900 38px/69px Raleway;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.perla_company p span {
    color: #03538B;
}

.perla_company .vertical-line {
    width: 2px;
    /* Set the width to create a vertical line */
    height: 81px;
    /* Set the height of the line */
    background-color: #03538B;
    /* Choose the color you prefer for the line */

}

.perla_company img {
    width: 205px;
    height: 118px;
    display: flex;
    align-items: center;
    margin-left: 5%
}

.perla_company .get_direction {
    width: 251px;
    height: 82px;
    font: normal normal 900 18px/69px Raleway;
    letter-spacing: 0px;
    color: #00538B;
    background-color: #daecf8;
    text-transform: uppercase;
    border-radius: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    /* Horizontally center the text */
    align-items: center;
    margin-left: 30%;
    -webkit-transition: background 2s;
    /* For Safari 3.0 to 6.0 */
    transition: background 2s;
    /* For modern browsers */
}

.perla_company .get_direction:hover {
    /* UI Properties */
    background: transparent linear-gradient(0deg, #00538B 0%, #0D76BC 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px;
    color: #ffffff;

}

.container_companies {
    margin-top: -17%;
}

.slider-wrapper_companies {
    position: relative;
}



.slider-wrapper_companies .image-list_companies {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 18px;
    font-size: 0;
    list-style: none;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 181px;
}



.slider-wrapper_companies .image-list_companies .image-item_companies {
    width: 325px;
    height: 400px;
    object-fit: cover;

}

.container_companies .image-list_companies li {
    position: relative;
    width: auto;
    height: 123px;


}

.container_companies .image-list_companies li img {
    margin-left: 20%;


}

.container_companies .image-list_companies li:nth-child(1) img {
    width: 241px;
    height: 90px;
    opacity: 1;
    margin-right: 13%;
    /* Change the opacity of the image */
}

.container_companies .image-list_companies li:nth-child(2) img {
    width: 299px;
    height: 90px;
    opacity: 1;
    margin-left: 20%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.container_companies .image-list_companies li:nth-child(3) img {
    width: 242px;
    height: 76px;
    opacity: 1;
    margin-left: 34%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.container_companies .image-list_companies li:nth-child(4) img {
    width: 101px;
    height: 119px;
    opacity: 1;
    margin-left: 95%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.container_companies .image-list_companies li:nth-child(5) img {
    width: 209px;
    height: 79px;
    opacity: 1;
    margin-left: 70%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.container_companies .image-list_companies li:nth-child(6) img {
    width: 125px;
    height: 122px;
    opacity: 1;
    margin-left: 144%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.container_companies .image-list_companies li:nth-child(7) img {
    width: 321px;
    height: 123px;
    opacity: 1;
    margin-left: 72%;
    margin-right: 13%;
    /* Change the opacity of the image */

}

.slider-wrapper_companies .image-list_companies::-webkit-scrollbar {
    display: none;
}

.DNFI {
    width: 100%;
    height: 822px;
    background-image: url(../image/DNFI_background.png);
    background-size: 100% 100%;

}

.DNFI img {
    width: 100%;
    height: 822px;
    position: relative;
}

.DNFI_description {
    position: absolute;
    left: 54%;
    margin-top: 81px;

}

.DNFI .DFNI_Paragraph {
    width: 90%;
    text-align: left;
    font: normal normal normal 19px/25px Raleway_thin;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-top: 4%;
    text-align: justify;

}

.DNFI p span:nth-child(1) {
    display: block;
    font: normal normal normal 26px/45px Raleway_regular;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.DNFI p .factory {

    text-align: left;
    font: normal normal 900 53px/45px Raleway;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.DNFI .DFNI_Paragraph br {
    display: block;
    /* makes it have a width */
    content: "";
    /* clears default height */
    margin-top: 2%;
    /* change this to whatever height you want it */
}


.partners {

    height: 432px;
    display: flex;
    align-items: center;

}



.partners .div_partners .text-container {

    text-align: left;
    font: normal normal 900 50px/55px Raleway;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #FFB71B;
    margin-top: -6%;
    margin-left: 10%;
}

.partners .div_partners .text-container span {
    color: #00538B;
}





.div_partners {
    height: 205px;
    overflow-x: hidden;
    position: relative;
    align-items: center;
    justify-items: center;
    display: flex;
    align-items: center;
}


.container_partners {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    /* This centers the div horizontally */
    overflow-x: auto;
    /* Enable horizontal scrolling when content exceeds screen width */
}

.slider-wrapper_partners {
    position: relative;
}



.slider-wrapper_partners .image-list_partners {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 18px;
    font-size: 0;
    list-style: none;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;


}



.slider-wrapper_partners .image-list_partners .image-item_partners {

    object-fit: cover;

}

.container_partners .image-list_partners li {
    position: relative;
    width: auto;
    height: 164px;

}

.container_partners .image-list_partners li img {

    height: 149px;

}


.container_partners .image-list_partners li:nth-child(2) img {

    margin-left: 20%
        /* Change the opacity of the image */

}

.container_partners .image-list_partners li:nth-child(3) img {
    margin-left: 60%
        /* Change the opacity of the image */

}

.container_partners .image-list_partners li:nth-child(4) img {

    margin-left: 187%;
    /* Change the opacity of the image */

}

.container_partners .image-list_partners li:nth-child(5) img {
    margin-left: 64%;

    /* Change the opacity of the image */

}

.container_partners .image-list_partners li:nth-child(6) img {
    margin-left: 151%;
    /* Change the opacity of the image */

}

.container_partners .image-list_partners li:nth-child(7) img {
    margin-left: 176%;
    /* Change the opacity of the image */

}

.slider-wrapper_partners .image-list_partners::-webkit-scrollbar {
    display: none;
}

/* Style for the "Next" button */
#slider-right-button::after {
    content: "";
    position: absolute;
    left: 17%;
    top: 91%;
    transform: translate(25%, -50%) rotate(41deg);
    border-color: #03538B;
    border-style: solid;
    border-width: 2px 2px 0 0;
    width: 6px;
    height: 7px;
}

/* Style for the "Previous" button (you can customize this as needed) */
#slider-left-button::after {
    content: "";
    position: absolute;
    top: 50%;

    transform: translate(25%, -50%) rotate(-138deg);
    border-color: #03538B;
    border-style: solid;
    border-width: 2px 2px 0 0;
    width: 6px;
    height: 7px;
    left: 12%;
    top: 91%;
}

.maps {
    width: 100%;
    height: 549px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background-image: url(../image/Backgroundmaps@2x.png);
    background-size: 100% 100%;
}

.maps img:nth-child(1) {
    position: absolute;
    
    height: 112px;
    top: 54%;
    left: 57.5%;
}

.maps img:nth-child(2) {
    position: absolute;
    top: 59%;
    left: 59%;
}

.perla_maps {
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 5%;

}

.text-container-maps {

    position: relative;
    /* Reset the position */
    z-index: 1;
    /* Bring the <p> elements above the images */
}

.text-container-maps p {
    margin: 0;
    /* Remove the default margin */
    padding: 0;
    /* Remove padding, if any */
    line-height: 1.5;
}

.perla_maps p:nth-child(1) {
    color: #FAAB24;
    text-align: left;
    font: normal normal 900 38px/69px Raleway;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.perla_maps p:nth-child(2) {
    text-align: left;
    font: normal normal normal 24px/25px Raleway_thin;
    letter-spacing: 0.4px;
    color: #FFFFFF;
    margin-bottom: 5%;
}

.perla_maps p:nth-child(3) {
    text-align: left;
    font: normal normal medium 25px/40px Raleway;
    letter-spacing: -0.63px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.perla_maps p:nth-child(4) {
    font: normal normal 900 40px/40px Raleway;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.perla_maps p:nth-child(1) span {
    color: #ffffff;
}





.perla_maps .get_direction_maps {
    position: relative;
    z-index: 1;

    font: normal normal 900 18px/69px Raleway;
    letter-spacing: 0px;
    color: #00538B;
    background-color: #daecf8;
    text-transform: uppercase;
    border-radius: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 17%;
    width: 20%;
    height: 82px;
    -webkit-transition: background 2s;
    transition: background 2s;
}

.perla_maps .get_direction_maps:hover {
    /* UI Properties */
    background: transparent linear-gradient(0deg, #00538B 0%, #0D76BC 100%) 0% 0% no-repeat padding-box;
    border-radius: 20px;
    color: #ffffff;

}

@media screen and (max-width: 640px) {
    .slider__nav-button {
        height: 23px;
        width: 23px;
    }

    .slider__navlink {
        height: 12px;
        width: 12px;
    }
}

/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
    .slider-wrapper .slide-button {
        display: none !important;
    }

    .slider-wrapper .image-list {
        gap: 10px;
        margin-bottom: 15px;
        scroll-snap-type: x mandatory;
    }

    .slider-wrapper .image-list .image-item {
        width: 280px;
        height: 380px;
    }

    .slider-scrollbar .scrollbar-thumb {
        width: 20%;
    }


}

@media (max-width:1727px) {
    .navbar ul li a {

        font: normal normal 500 18px/20px Raleway;
    }

    .large1 {
        width: 9rem !important;
        left: -12% !important;
        top: -28% !important;
    }

    .large2 {
        width: 11rem !important;
        left: -7% !important;
        top: -28% !important;
    }

    .large7 {
        left: -7% !important;
        top: -28% !important;
        width: 5rem !important;
    }

    .large4 {
        left: -11% !important;
        top: -28% !important;
        width: 5rem !important;
    }

    .large5 {
        left: -10% !important;
        top: -28% !important;
        width: 5rem !important;
    }

    .large6 {
        left: -3% !important;
        top: -28% !important;
        width: 5rem !important;
    }

    .large3 {
        width: 6rem !important;
        top: -28% !important;
        left: -1% !important;
    }

    .navbar ul li a:hover {
        font: normal normal 900 14px/12px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }

}

@media (max-width:1511px) {
    .maps img:nth-child(1) {
       
        height: 69px;
        top: 60.5%;
        left: 57.5%;
    }
    .perla_maps .get_direction_maps {
        margin-right: 2%;
       
        font: normal normal 900 18px/69px Raleway;
        
        margin-left: 17%;
        width: 53%;
        height: 82px;
       
        transition: background 2s;
    }
    .DNFI p span:nth-child(1) {

        font: normal normal normal 20px/45px Raleway_regular;
    }

    .DNFI .DFNI_Paragraph {
        font: normal normal normal 16px/25px Raleway_thin;
        line-height: 1.44;
    }

    .DNFI img {

        height: 483px;
    }

    .DNFI p span:nth-child(1) {
        margin-bottom: 0rem;
        font: normal normal normal 15px/45px Raleway_regular;
    }

    .DNFI p .factory {

        font: normal normal 900 25px/45px Raleway;
    }

    .DNFI_description {
        margin-top: 5%;
        left: 50%;

    }

    .slider {

        height: 472px;
    }

    .perla_company {

        margin-top: 0%;
        margin-left: 2%;
    }

    .perla_company p {

        font: normal normal 900 21px/69px Raleway;
    }

    .slider-wrapper_companies .image-list_companies {

        margin-left: 2%;
    }

    .perla_company img {
        width: 121px;
        height: 66px;
    }

    .companies {
        height: 261px;
    }

    .container_companies {
        margin-top: 0%;
    }

    .perla_company .get_direction {

        margin-left: 16%;
    }

    .slider__slide img {
        height: 483px;
    }

    .slider__slide::before {
        height: 100%;
    }

    .slider__slide .title_recipt {
        font: normal normal normal 32px/240px Raleway;
        top: 5%;
    }

    .slider__slide {
        height: 469px;
    }

    .slider__slide .content_recipt {
        font: normal normal 900 44px/70px Raleway;
        top: 39%;
    }

    .slider__slide a {
        top: 73%;
        width: 221px;
        height: 61px;
        font: normal normal bold 14px/39px Futura;
    }

    #nav-button--prev,
    #nav-button--next {
        top: 35%;
        right: 5%;

    }

    .slider__nav-button {

        height: 40px;
        width: 40px;
    }

    .container .image-list li {
        width: 223px !important;
        height: 268px !important;
    }

    .container .image-list li:nth-child(1) .title_slider {
        left: 10%;
        top: 1%;
        font: normal normal 900 20px/93px Raleway;
    }

    .container .image-list li:nth-child(1) .content_slider {

        font: normal normal 900 47px/200px Raleway;
        top: 5%;
        left: 50%;
    }

    .container .image-list li:nth-child(1):hover img {
        width: 267px;
        height: 346px;
    }

    .container .image-list li:nth-child(2) img {
        width: 231px;
        height: 293px;
    }

    .container .image-list li:nth-child(2) .title_slider {
        font: normal normal 900 25px/130px Raleway;
    }

    .container .image-list li:nth-child(2) .content_slider {

        font: normal normal 900 50px/200px Raleway;

        top: 9%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 391px;
        height: 321px;
    }

    .container .image-list li:nth-child(3) .title_slider {

        top: -5%;
        left: 6%;

        font: normal normal 900 24px/130px Raleway;
    }

    .container .image-list li:nth-child(3) .content_slider {

        font: normal normal 900 46px/200px Raleway;
        top: 5%;
        left: 49%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 299px;
        height: 321px;

        margin-left: -41%;
        margin-top: 39%;
    }

    .container .image-list li:nth-child(4):hover img {
        width: 254px;
        height: 386px;

        margin-left: -9%;
    }

    .container .image-list li:nth-child(4) .title_slider {

        font: normal normal 900 41px/130px Raleway;
    }

    .container .image-list li:nth-child(4) .content_slider {

        font: normal normal 900 45px/213px Raleway;
        letter-spacing: -0.35px;

        top: 31%;
        left: 50%;
    }

    .container .image-list li:nth-child(5):hover img {
        width: 301px;
        height: 404px;
    }

    .container .image-list li:nth-child(5) .content_slider {

        font: normal normal 900 31px/130px Raleway;
    }

    .container .image-list li:nth-child(5) .title_slider {

        font: normal normal 900 40px/130px Raleway;
    }

    .container .image-list li:nth-child(6):hover img {
        width: 100%;
        height: 100%;
    }

    .container .image-list li:nth-child(6) .content_slider {

        font: normal normal 900 43px/200px Raleway;

        top: -10%;
        left: 52%;
    }

    .container .image-list li:nth-child(6) .title_slider {

        top: 6%;
        left: 8%;
        /* transform: translate(-50%, -50%); */

        font: normal normal 900 42px/130px Raleway;
    }

    .container .image-list li:nth-child(7):hover img {
        top: 32%;
    }

    .container .image-list li:nth-child(7) .content_slider {

        font: normal normal 900 44px/130px Raleway;
    }

    .container .image-list li:nth-child(7) .title_slider {

        top: 16%;

        font: normal normal 900 42px/130px Raleway;
    }

    .container .image-list li:nth-child(8) img {
        width: 100%;
        height: 100%;
    }

    .container .image-list li:nth-child(8):hover img {
        width: 100%;
    height: 100%;
    top: 35%;
    }

    .container .image-list li:nth-child(8) .title_slider {

        left: 3%;
        top: -1%;
        font: normal normal 900 26px/93px Raleway;
    }

    .container .image-list li:nth-child(8) .content_slider {

        font: normal normal 900 47px/200px Raleway;

        top: 1%;
        left: 51%;
    }

    .container .image-list li:nth-child(9) .title_slider {

        left: 0%;
        top: -2%;
        font: normal normal 900 29px/93px Raleway;
    }

    .container .image-list li:nth-child(9) .content_slider {

        font: normal normal 900 44px/200px Raleway;
        top: 2%;
        left: 51%;
    }

    .container .image-list li:nth-child(9):hover img {
        top: 35%;
    }

    .navbar ul {

        height: 160.92px;
    }

    .navbar ul li a {

        font: normal normal 500 14px/24px Raleway;
        padding: 0px;
    }

    .navbar ul .logo {
        width: 110px;
    }


    .large1 {
        width: 9rem !important;
        left: -22% !important;
        top: -120% !important;
    }

    .large2 {
        width: 11rem !important;
        left: -16% !important;
        top: -120% !important;
    }

    .large7 {
        left: -29% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large4 {
        left: -32% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large5 {
        left: -24% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large6 {
        left: -15% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large3 {
        width: 6rem !important;
        top: -120% !important;
        left: -9% !important;
    }

    .navbar ul li a:hover {
        font: normal normal 900 14px/12px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }

    .theStory .title {
        font: normal normal 900 51px/69px Raleway;
    }

    .theStory {
        width: 39%;
        height: 605px !important;
    }

    .theStory .content {

        font: normal normal normal 18px/29px Raleway;
    }

    .slideshow {
        width: 60%;
    }

    .slide.active img {
        transform: scale(2);
    }

    .viewProd {
        background-size: 50%;
        width: 100%;
        margin-top: 4%;
    }

    .slide img {
        width: 80%;
    }

    .slide.active img {
        transform: scale(1.7);

    }

    .carousel {
        width: 40rem;
        height: 40rem;

    }

    .controlsSlide {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 2%;
        right: 0;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }

    .slideshow {

        width: 60%;
        height: 556px !important;
        background: transparent url(../image/Background.png) 39% 0% no-repeat padding-box;
        background-size: 105% 85%;
        background-position-x: calc(60% + 32px);
        background-position-y: 22px;
    }

    .prev-button img,
    .next-button img {
        width: 50%;
    }

    .slide img {
        width: 59%;
    }

    .controls {

        width: 55%;
        top: 59%;
        left: 42%;
    }

    .prev-button,
    .next-button {
        z-index: 999;
    }

    .controls img {
        width: 50%;
    }

    .slide.active .leaves {
        transform: scale(1);

        margin-left: -158%;
    }

    .slide:nth-child(1) {
        left: 9rem;
        top: 17rem;

    }

    .slide:nth-child(2) {
        bottom: 25rem;
        left: 20rem;
    }

    .slide:nth-child(3) {
        right: 0rem;
        top: 30%;
    }

    .slide:nth-child(4) {
        top: 23rem;
        left: 19rem;
    }

}


@media (max-width : 1077px) {


    .navbar ul li a {

        font: normal normal 500 12px/16px Raleway;

    }

    .large1 {
        width: 7rem !important;
        left: -14% !important;
        top: -120% !important;
    }

    .large2 {
        width: 9rem !important;
        left: -16% !important;
        top: -120% !important;
    }

    .large7 {
        left: -36% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large4 {
        left: -46% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large5 {
        left: -36% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large6 {
        left: -33% !important;
        top: -120% !important;
        width: 5rem !important;
    }

    .large3 {
        width: 5rem !important;
        top: -120% !important;
        left: -13% !important;
    }

    .navbar ul li a:hover {
        font: normal normal 900 12px/12px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }

}

@media (max-width : 996px) {
    .navbar ul li a {

        font: normal normal 500 11px/14px Raleway;

    }

    .large1 {
        width: 7rem !important;
        height: 3rem;
        left: -24% !important;
        top: -110% !important;
    }

    .large2 {
        width: 8rem !important;
        left: -10% !important;
        top: -110% !important;
    }

    .large7 {
        left: -23% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large4 {
        left: -32% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large5 {
        left: -32% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large6 {
        left: -21% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large3 {

        top: -110% !important;
        width: 5rem !important;
        left: -16% !important;
    }

    .navbar ul li a:hover {
        font: normal normal 900 11px/14px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }
}

@media (max-width:914px) {

    .container .image-list li {
        width: 223px !important;
        height: 268px !important;
    }

    .container .image-list li:nth-child(1) .title_slider {
        left: 10%;
        top: 1%;
        font: normal normal 900 20px/93px Raleway;
    }

    .container .image-list li:nth-child(1) .content_slider {

        font: normal normal 900 47px/200px Raleway;
        top: 5%;
        left: 50%;
    }

    .container .image-list li:nth-child(1):hover img {
        width: 267px;
        height: 346px;
    }

    .container .image-list li:nth-child(2) img {
        width: 231px;
        height: 293px;
    }

    .container .image-list li:nth-child(2) .title_slider {
        font: normal normal 900 25px/130px Raleway;
    }

    .container .image-list li:nth-child(2) .content_slider {

        font: normal normal 900 50px/200px Raleway;

        top: 9%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 391px;
        height: 321px;
    }

    .container .image-list li:nth-child(3) .title_slider {

        top: -5%;
        left: 6%;

        font: normal normal 900 24px/130px Raleway;
    }

    .container .image-list li:nth-child(3) .content_slider {

        font: normal normal 900 46px/200px Raleway;
        top: 5%;
        left: 49%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 299px;
        height: 321px;

        margin-left: -41%;
        margin-top: 39%;
    }

    .container .image-list li:nth-child(4):hover img {
        width: 254px;
        height: 386px;

        margin-left: -9%;
    }

    .container .image-list li:nth-child(4) .title_slider {

        font: normal normal 900 41px/130px Raleway;
    }

    .container .image-list li:nth-child(4) .content_slider {

        font: normal normal 900 45px/213px Raleway;
        letter-spacing: -0.35px;

        top: 31%;
        left: 50%;
    }

    .container .image-list li:nth-child(5):hover img {
        width: 301px;
        height: 404px;
    }

    .container .image-list li:nth-child(5) .content_slider {

        font: normal normal 900 31px/130px Raleway;
    }

    .container .image-list li:nth-child(5) .title_slider {

        font: normal normal 900 40px/130px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }

    .large1 {
        width: 5rem !important;
        height: 3rem;
        left: -14% !important;
        top: -110% !important;
    }

    .large2 {
        width: 7rem !important;
        left: -16% !important;
        top: -110% !important;
    }

    .large7 {
        left: -39% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large4 {
        left: -61% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large5 {
        left: -43% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large6 {
        left: -38% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large3 {

        top: -110% !important;
        width: 4rem !important;
        left: -15% !important;
    }

    .navbar ul li a {

        font: normal normal 500 9px/12px Raleway;

    }

    .navbar ul li a:hover {
        font: normal normal 900 9px/12px Raleway;
    }

    .viewProd {
        width: 50%;
        background-size: 100%;
        height: 89px;
        margin-left: 12%;
        margin-top: 6%;
    }

    .viewProd:hover {
        width: 50%;
        height: 82px;
        display: inline-block;
        background: transparent url(../image/Buttons.png) 0% 0% no-repeat padding-box;
        background-size: 100%;
        padding: 0px 0px;
    }

    .theStory .title {
        font: normal normal 900 42px/69px Raleway;
        margin-top: 1%;
    }

    .theStory .content {
        font: normal normal normal 14px/29px Raleway;
    }
}

@media (max-width : 833px) {
    .navbar ul li a {

        font: normal normal 500 8px/12px Raleway;

    }

    .navbar ul li a:hover {
        font: normal normal 900 8px/12px Raleway;
    }

    .logo-item .logo-image {

        height: 3rem !important;
    }

    .large1 {
        width: 5rem !important;
        height: 3rem;
        left: -24% !important;
        top: -110% !important;
    }

    .large2 {
        width: 7rem !important;
        left: -26% !important;
        top: -110% !important;
    }

    .large7 {
        left: -49% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large4 {
        left: -71% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large5 {
        left: -53% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large6 {
        left: -48% !important;
        top: -110% !important;
        width: 4rem !important;
    }

    .large3 {

        top: -110% !important;
        width: 4rem !important;
        left: -25% !important;
    }

    .viewProd {
        width: 50%;
        background-size: 100%;
        height: 89px;
        margin-left: 12%;
        margin-top: 6%;
    }

    .viewProd:hover {
        width: 50%;
        height: 82px;
        display: inline-block;
        background: transparent url(../image/Buttons.png) 0% 0% no-repeat padding-box;
        background-size: 100%;
        padding: 0px 0px;
    }

    .slide.active img {
        transform: scale(1.7);
    }

    .prev-button img,
    .next-button img {
        width: 50%;
    }

    .theStory .title {
        font: normal normal 900 42px/69px Raleway;
        margin-top: 1%;
    }

    .theStory .content {
        font: normal normal normal 14px/29px Raleway;
    }
}

/* Add responsiveness for tablet and mobile */
@media (max-width: 768px) {
    .maps {

        height: 290px
    }

    .maps img:nth-child(1) {
        left: 58.5%;
        height: 18px;
        top: 68%;
    }

    .perla_maps p:nth-child(1) {
        font: normal normal 900 16px/69px Raleway;
    }

    .partners {
        height: 271px;
    }

    .partners .div_partners .text-container {
        line-height: 2;
        font: normal normal 900 20px/55px Raleway;

        margin-top: 0%;
    }

    .perla_maps p:nth-child(2) {
        font: normal normal normal 10px/25px Raleway_thin;
        margin-bottom: 5%;
    }

    .perla_maps p:nth-child(4) {
        font: normal normal 900 20px/40px Raleway;
        letter-spacing: 1px;
    }

    .container_partners .image-list_partners li img {
        height: 86px;
    }

    .perla_maps .get_direction_maps {

        font: normal normal 900 12px/69px Raleway;
        letter-spacing: 0px;

        margin-left: 5%;
        margin-right: 2%;
        width: 68%;
        height: 46px;
    }

  


.container_partners .image-list_partners li {

    height: 88px;
}

.slider-wrapper_partners .image-list_partners {

    margin-bottom: 0px;
}

.slider {

    height: 271px;
}

.slider__slide {
    height: 260px;
}

.slider__slide::before {
    height: 100%;
}

.slider__slide img {

    height: 257px;
}

#nav-button--prev::after,
#nav-button--next::after {

    border-width: 0 2px 2px 0;
}



.slider__slide .content_recipt {
    font: normal normal 900 18px/70px Raleway;
    left: 10%;
    top: 38%;
    line-height: 1.5;
}

.slider__slide a {

    width: 123px;
    height: 40px;

    font: normal normal bold 11px/39px Futura;
    top: 71%;
}

.slider__slide .title_recipt {
    font: normal normal normal 19px/240px Raleway;

    top: -16%;
}

.slider__nav-button {
    height: 23px;
    width: 23px;
}

#nav-button--prev,
#nav-button--next {
    top: 50%;
}

.viewProd {
    width: 50%;
    background-size: 100%;
    height: 89px;
    margin-left: 12%;
    margin-top: 6%;
}

.viewProd:hover {
    width: 50%;
    height: 82px;
    display: inline-block;
    background: transparent url(../image/Buttons.png) 0% 0% no-repeat padding-box;
    background-size: 100%;
    padding: 0px 0px;
}

.slide.active img {
    transform: scale(1.3);
}

.prev-button img,
.next-button img {
    width: 50%;
}

.companies {
    height: 139px;
}

.perla_company .vertical-line {
    height: 45px;
}

.perla_company p {

    font: normal normal 900 15px/69px Raleway;
}

.container_companies {
    margin-top: 0%;
}

.slider-wrapper_companies .image-list_companies {

    margin-left: 2%;
}

.container_companies .image-list_companies li {

    height: 83px;
}

.container_companies .image-list_companies li img {
    margin-left: 0%;
}

.container_companies .image-list_companies li:nth-child(1) img {
    width: 153px;
    height: 63px;

    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(2) img {
    width: 158px;
    height: 56px;

    margin-left: 5%;
    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(3) img {
    width: 161px;
    height: 53px;

    margin-left: 3%;
    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(4) img {
    width: 61px;
    height: 73px;
    opacity: 1;
    margin-left: 22%;
    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(5) img {
    width: 122px;
    height: 47px;
    margin-left: 21%;
    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(6) img {
    width: 48px;
    height: 63px;
    margin-left: 79%;
    margin-right: 0%;
}

.container_companies .image-list_companies li:nth-child(7) img {
    width: 190px;
    height: 74px;

    margin-left: 22%;
    margin-right: 0%;
}

.perla_company {
    margin-top: 0%;
}

.perla_company img {
    width: 75px;
    height: 47px;
}

.perla_company .get_direction {
    width: 110px;
    height: 41px;
    font: normal normal 900 7px/69px Raleway;
    margin-left: 12%;
}

.DNFI img {
    width: 100%;
    height: 351px;
    position: relative;
}

.DNFI p span:nth-child(1) {
    margin-top: -4%;
    margin-bottom: -2.5em;
    font: normal normal normal 10px/45px Raleway_regular;
}

.DNFI {
    height: 333px;
}

.DNFI p .factory {

    font: normal normal 900 23px/45px Raleway;
}

.DNFI .DFNI_Paragraph {
    font: normal normal normal 8px/25px Raleway_thin;
    line-height: 1.2;
    margin-top: -4%;
}

.DNFI p .factory {
    font: normal normal 900 13px/45px Raleway;
}

.DNFI_description {
    left: 49%;
}

.theStory .title {
    font: normal normal 900 40px/69px Raleway;
    margin-top: 1%;
}

.theStory .content {
    font: normal normal normal 12px/29px Raleway;
}

.navbar ul .hamburger-container {
    display: block;
    text-align: center;
    order: 2;
    /* Move the logo to the top for mobile */
}

.navbar ul li a {
    font-size: 24px;
    /* Adjust the font size for smaller screens */
}

.logo-container {
    order: 2;
    /* Move the logo to the top for mobile */
}


.navbar ul li {
    display: none;
    /* Hide links for mobile */
}

.hamburger {
    display: block;
    /* Display the hamburger icon for mobile */
}

.toggled-menu {
    display: none;
    /* Initially hide the toggled menu icon */
}

/* Show links when the hamburger icon is clicked */
.navbar ul.show {
    position: absolute;
    flex-direction: column;
    background-color: white;
    width: 100%;
    height: auto;
    z-index: 1;
    margin-top: 0%;
    transition: opacity 0.5s ease-in-out;
    margin-left: 0%;
}

.navbar ul.show li {
    display: block;
    padding: 20px 0;
}

.navbar ul img {
    max-width: 142px;
    /* Ensure the image doesn't exceed the width of the li */
    height: auto;

    /* Maintain the aspect ratio */

}

.navbar ul .logo img {
    max-width: 142px;
    position: absolute;
    /* Adjust the logo size for smaller screens */
}

.navbar ul {
    flex-direction: row;
    height: 66.92px;

    /* Add any other styles needed for the PC version */
}

.navbar ul .hamburger-container {
    display: block;
    text-align: center;
    order: 2;
    /* Move the logo to the top for mobile */
}

.navbar ul li a {
    font-size: 24px
        /* Adjust the font size for smaller screens */
}

.logo-container {
    order: 2;
    /* Move the logo to the top for mobile */
}


.navbar ul li {
    display: none;
    /* Hide links for mobile */
}

.hamburger {
    display: block;
    /* Display the hamburger icon for mobile */
    font-size: 24px;
}

.toggled-menu {
    display: none;
    /* Initially hide the toggled menu icon */
}

/* Show links when the hamburger icon is clicked */
.navbar ul.show {
    flex-direction: column;
    transition: opacity 0.5s ease-in-out;
}

.navbar ul.show li {
    display: block;
    padding: 20px 0;
}

.slideshow {
    height: 384px !important;
}

.slide.active img {
    transform: scale(1.7);
}

.slide img {
    width: 48%;
}

.slideshow {
    height: 373px !important;
    background: transparent url(../image/Background.png) 0% 0% no-repeat padding-box;
    background-size: 105% 100%;
    background-position-x: calc(60% + 23px);
    background-position-y: 0px;
    width: 100%;
    margin-bottom: 2%;
}

.slide {
    width: 14rem;
}

.slide:nth-child(1) {
    left: 7rem;
    top: 19rem;
}

.slide.active .leaves {
    transform: scale(1);
    /* margin-top: -46%; */
    margin-left: -84%;
}

.slide:nth-child(2) {
    bottom: 23rem;
    left: 20rem;
}

.slide:nth-child(3) {
    right: 0rem;
    top: 40%;
}

.slide:nth-child(4) {
    top: 22.5rem;
    left: 20rem;
}

.cheese {
    width: 27%;
}

.prev-button,
.next-button {
    z-index: 1;
}

.controlsSlide {
    left: 0%;
    right: 0;
    z-index: 1;
    padding: 0 0px;
   
}

.viewProd {
    width: 31%;
    height: 80px;
    /* margin-left: 12%; */
    margin-top: 3%;
    margin-left: 0%;
}

.theStory {
    text-align: center;
    width: 100%;
    height: 338px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.theStory .title p {
    display: inline;
    margin-right: 5px;
}

.theStory .title {
    margin-left: 0%;
    text-align: center;
    /* Center the content horizontally */
}

.theStory .content {
    width: 90%;
    margin-left: 1%;
    margin-top: 4%;
    display: inline-block;
    /* Make the content div inline-block */
    text-align: justify;

}

.container .image-list li {
    width: 223px !important;
    height: 268px !important;
}

.container .image-list li:nth-child(1) .title_slider {
    left: 10%;
    top: 1%;
    font: normal normal 900 20px/93px Raleway;
}

.container .image-list li:nth-child(1) .content_slider {

    font: normal normal 900 47px/200px Raleway;
    top: 5%;
    left: 50%;
}

.container .image-list li:nth-child(1):hover img {
    width: 267px;
    height: 346px;
}

.container .image-list li:nth-child(2) img {
    width: 231px;
    height: 293px;
}

.container .image-list li:nth-child(2) .title_slider {
    font: normal normal 900 25px/130px Raleway;
}

.container .image-list li:nth-child(2) .content_slider {

    font: normal normal 900 50px/200px Raleway;

    top: 9%;
}

.container .image-list li:nth-child(3):hover img {
    width: 391px;
    height: 321px;
}

.container .image-list li:nth-child(3) .title_slider {

    top: -5%;
    left: 6%;

    font: normal normal 900 24px/130px Raleway;
}

.container .image-list li:nth-child(3) .content_slider {

    font: normal normal 900 46px/200px Raleway;
    top: 5%;
    left: 49%;
}

.container .image-list li:nth-child(3):hover img {
    width: 299px;
    height: 321px;

    margin-left: -41%;
    margin-top: 39%;
}

.container .image-list li:nth-child(4):hover img {
    width: 254px;
    height: 386px;

    margin-left: -9%;
}

.container .image-list li:nth-child(4) .title_slider {

    font: normal normal 900 41px/130px Raleway;
}

.container .image-list li:nth-child(4) .content_slider {

    font: normal normal 900 45px/213px Raleway;
    letter-spacing: -0.35px;

    top: 31%;
    left: 50%;
}

.container .image-list li:nth-child(5):hover img {
    width: 301px;
    height: 404px;
}

.container .image-list li:nth-child(5) .content_slider {

    font: normal normal 900 31px/130px Raleway;
}

.container .image-list li:nth-child(5) .title_slider {

    font: normal normal 900 40px/130px Raleway;
}




}

@media (max-width: 687px) {
    .theStory .title {
        font: normal normal 900 28px/30px Raleway;
        margin-top: 1%;
    }

    .theStory .title p {
        margin-bottom: 1%;

    }
}

@media (max-width: 520px) {
    .navbar ul li a {
        font-size: 15px
            /* Adjust the font size for smaller screens */
        ;
    }

    .navbar ul {
        height: 141.92px;
    }

    .navbar ul.show {
        margin-left: 0%;
        z-index: 2;
    }

    .theStory .title {
        font: normal normal 900 20px/30px Raleway;
        margin-top: 0%;
    }

    .theStory .content p {
        line-height: 1.5;
    }

    .slideshow {
        height: 384px !important;
    }

    .slide.active img {
        transform: scale(1.5);
    }

    .slide img {
        width: 48%;
    }

    .slideshow {
        height: 363px !important;
        background: transparent url(../image/Background.png) 0% 0% no-repeat padding-box;
        background-size: 126% 86%;
        background-position-x: calc(60% + 37px);
        background-position-y: 0px;
        width: 100%;
        margin-bottom: 2%;
    }

    .slide {
        width: 14rem;
    }

    .slide:nth-child(1) {
        left: 10rem;
        top: 17rem;
    }

    .slide.active .leaves {
        transform: scale(1);
        /* margin-top: -46%; */
        margin-left: -84%;
    }

    .slide:nth-child(2) {
        bottom: 21rem;
        left: 17rem;
    }

    .slide:nth-child(3) {
        right: 2rem;
        top: 37%;
    }

    .slide:nth-child(4) {
        top: 22.5rem;
        left: 20rem;
    }

    .cheese {
        width: 27%;
        position: inherit;
        transform: scale(0.8) !important;
        z-index: -99;
    }

    .prev-button,
    .next-button {
        z-index: 1;
    }

    .controlsSlide {
        left: 0%;
        right: 0;
        z-index: 1;
        padding: 0 0px;
        
    }

    .viewProd {
        width: 37%;
        height: 80px;
        /* margin-left: 12%; */
        margin-top: 3%;
        margin-left: 0%;
    }

    .theStory {
        text-align: center;
        width: 100%;
        height: 322px !important;
    }

    .theStory .title p {
        display: inline;
        margin-right: 5px;
    }

    .theStory .title {
        margin-left: 0%;
        text-align: center;
        /* Center the content horizontally */
    }

    .theStory .content {
        width: 90%;
        margin-left: 1%;
        margin-top: 4%;
        display: inline-block;
        /* Make the content div inline-block */
        text-align: justify;

    }

    .container .image-list li {
        width: 223px !important;
        height: 268px !important;
    }

    .container .image-list li:nth-child(1) .title_slider {
        left: 10%;
        top: 1%;
        font: normal normal 900 20px/93px Raleway;
    }

    .container .image-list li:nth-child(1) .content_slider {

        font: normal normal 900 47px/200px Raleway;
        top: 5%;
        left: 50%;
    }

    .container .image-list li:nth-child(1):hover img {
        width: 267px;
        height: 346px;
    }

    .container .image-list li:nth-child(2) img {
        width: 231px;
        height: 293px;
    }

    .container .image-list li:nth-child(2) .title_slider {
        font: normal normal 900 25px/130px Raleway;
    }

    .container .image-list li:nth-child(2) .content_slider {

        font: normal normal 900 50px/200px Raleway;

        top: 9%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 391px;
        height: 321px;
    }

    .container .image-list li:nth-child(3) .title_slider {

        top: -5%;
        left: 6%;

        font: normal normal 900 24px/130px Raleway;
    }

    .container .image-list li:nth-child(3) .content_slider {

        font: normal normal 900 46px/200px Raleway;
        top: 5%;
        left: 49%;
    }

    .container .image-list li:nth-child(3):hover img {
        width: 299px;
        height: 321px;

        margin-left: -41%;
        margin-top: 39%;
    }

    .container .image-list li:nth-child(4):hover img {
        width: 254px;
        height: 386px;

        margin-left: -9%;
    }

    .container .image-list li:nth-child(4) .title_slider {

        font: normal normal 900 41px/130px Raleway;
    }

    .container .image-list li:nth-child(4) .content_slider {

        font: normal normal 900 45px/213px Raleway;
        letter-spacing: -0.35px;

        top: 31%;
        left: 50%;
    }

    .container .image-list li:nth-child(5):hover img {
        width: 301px;
        height: 404px;
    }

    .container .image-list li:nth-child(5) .content_slider {

        font: normal normal 900 31px/130px Raleway;
    }

    .container .image-list li:nth-child(5) .title_slider {

        font: normal normal 900 40px/130px Raleway;
    }
}

@media (max-width : 450px) {
    .controlsSlide {

        padding: 0 0px;
      
    }
}