:root {
    --primary-color: rgba(238, 62, 51, 1);
    --bs-primary: var(--primary-color);
  }

@font-face {
    font-family: 'Bold';
    src: url('/Fonts/vag-rounded/VAGRoundedStd-Bold.ttf');
}

@font-face {
    font-family: 'Black';
    src: url('/Fonts/vag-rounded/VAGRoundedStd-Black.ttf');
}

@font-face {
    font-family: 'Light';
    src: url('/Fonts/vag-rounded/VAGRoundedStd-Light.ttf');
}

@font-face {
    font-family: 'Thin';
    src: url('/Fonts/vag-rounded/VAGRoundedStd-Thin.ttf');
}

@font-face {
    font-family: 'Hurme-bold';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-Bold.ttf');
}

@font-face {
    font-family: 'Hurme-light';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-Light.ttf');
}

@font-face {
    font-family: 'Hurme-thin';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-Thin.ttf');
}

@font-face {
    font-family: 'Hurme-regular';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-Regular.ttf');
}

@font-face {
    font-family: 'Hurme-semibold';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-SemiBold.ttf');
}

@font-face {
    font-family: 'Hurme-semibold-oblique';
    src: url('/Fonts/hurme-geometric-sans-no.1/HurmeGeometricSans1-SemiBoldObl.ttf');
}

@keyframes rebound {
    0% {
      -webkit-transform: translate3d(0, 0px, 0);
      transform: translate3d(0, 0, 0);
    }
  
    40% {
      -webkit-transform: translate3d(0, -6px, 0);
      transform: translate3d(0, -6px, 0);
    }
  
    80% {
      -webkit-transform: translate3d(0, 0px, 0);
      transform: translate3d(0, 0px, 0);
    }
  
    90% {
      -webkit-transform: translate3d(0, -2px, 0);
      transform: translate3d(0, -2px, 0);
    }
  
    100% {
      -webkit-transform: translate3d(0, 0px, 0);
      transform: translate3d(0, 0, 0);
    }
  }

/*reset.css*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    /* max-width: 100%; */
}

/* section {
    max-width: 100%;
} */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    overflow-x: hidden;
}

nav .division-2 {
    margin: 2px;
}

.dropdown li a {
    display: flex;
    justify-content: center;
}

.plans a {
    text-decoration: none;
}

.foot-top-left-text a {
    text-decoration: none;
    color: #fff;
}

.plans a:hover {
    color: #3F7FBE;
}

.plans ul {
    padding-left: 0px;
}

.contact-us ul {
    padding-left: 0px;
}

.contact-us a {
    text-decoration: none;
}

blockquote, q {
    quotes: none;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    writing-mode: vertical-rl;
    transform: rotate(270deg);
    /* font-size: 18px; */
    border: none;
    outline: none;
    /* background-color: red; */
    /* color: white; */
    cursor: pointer;
    /* padding: 15px;
    border-radius: 4px; */
  }
  
  /* #myBtn:hover {
    background-color: #555;
  } */

input[type="text"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"] {
    outline: none;
    font-family: 'Hurme-regular';
    font-size: 14px;
    color: #fff;
}

textarea {
    outline: none;
    font-family: 'Hurme-regular';
    font-size: 16px;
    color: #fff;
}

.p-0-6 {
    padding: 0.68rem;
}

.navigation a:hover {
    color: rgb(231, 122, 49);
}

.afd-button {
    opacity: 1;
    background-image: linear-gradient(94deg, rgba(238, 62, 51, 1) 0%, rgba(231, 122, 49, 1) 100%);
}

.text-white {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Bold";
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

html {
    scroll-behavior: smooth;
}

.foot-bottom a {
    text-decoration: none;
    color: black;
}

.foot-bottom a:hover {
    color: rgb(231, 122, 49);
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
  }
  
  /* Dropdown styles */
  .dropdown .dropdown-menu {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    transition: opacity 0.9s ease, visibility 0.9s ease;
  }
  
  /* Show the dropdown on hover */
  .nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

.univers-divers-list {
    list-style-image: url('/images/portail/univers-divers-check.png');
    padding-left: 20px;
}

.univers-pates-list {
    list-style-image: url('/images/portail/univer-pates-check.png');
    padding-left: 20px;
}

.univers-bvs-list {
    list-style-image: url('/images/portail/univers-bvs-check.png');
    padding-left: 20px;
}

.section-1 {
    /* background-image: linear-gradient(to top, rgb(42, 65, 81) 10%, rgb(112, 135, 171) 55%); */
    margin-top: 100px;
}

.section-1-bottom {
    margin-top: -150px;
    padding-inline: 70px;
    padding-bottom: 10px;
    padding-top: 20px;
    z-index: 200;
    position: relative;
    display: block;
    background: linear-gradient(to top, rgb(42, 65, 81) 10%, rgb(112, 135, 171) 55%);
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* .section-1-bottom {
    margin-top: 20px;
    padding-inline: 70px;
    padding-bottom: 100px;
} */

.super-big-text {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Black";
    font-size: 150px;
    font-weight: 900;
    letter-spacing: 6,26px;
    text-align: left;
    line-height: 113px;
    text-transform: uppercase;
}

.text-regular-white {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-semibold";
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    text-align: left;
    line-height: 28px;
}

.text-small-white {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-regular";
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 28px;
}

.text-regular-dark {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Bold";
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0,06px;
    text-align: left;
    line-height: 34px;
}

.nav-item .option {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Bold";
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.banner-univer-logo {
    margin-left: -45px;
}

.banner-univer-title {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Bold";
    font-size: 50px;
    font-weight: 900;
    letter-spacing: 6,26px;
    text-align: left;
    text-transform: uppercase;
}

.banner-univer-detail {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Light";
    font-size: 15px;
    font-weight: 300;
    font-style: Light;
    letter-spacing: 0,13px;
    text-align: center;
}

.section-1-bottom-left {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-1-bottom-left p {
    margin-bottom: 0px;
}

.read-more {
    border-top: 1px solid rgba(176, 175, 175, 0.5);
}

.inter-section {
    background-image: url('/images/portail/bg-tatoo.png');
    background-size: 700px 700px;
    background-position: left;
    background-repeat: no-repeat, no-repeat;
    padding-bottom: 350px;
    padding-top: 100px;
    padding-inline: 350px;
}

.inter-section-title {
    opacity: 1;
    color: rgba(27, 70, 110, 1);
    font-family: "Black";
    font-size: 45px;
    font-weight: 900;
    font-style: Black;
    text-align: center;
    line-height: normal;
}

.inter-section-text {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Hurme-regular";
    font-size: 14px;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0,05px;
    text-align: center;
    line-height: normal;
}

.univers-pates {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url('/images/portail/cereal-growing-field.png');
    padding-inline: 200px;
    padding-top: 200px;
    padding-bottom: 200px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: ellipse(90% 74% at 50% 75%);
    margin-top: -180px;
}

.univers-divers {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url('/images/portail/cereal-growing-field\ copy.png');
    padding-left: 200px;
    padding-right: 100px;
    padding-top: 135px;
    padding-bottom: 135px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.univers-bvs {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url('/images/portail/sorrells-wine-cellar.jpg.png');
    padding-inline: 200px;
    padding-top: 100px;
    padding-bottom: 220px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: -200px;
    clip-path: ellipse(1250px 700px at 50% 14%);
}

.sky-blue {
    width: 39%;
    background-color: rgb(228, 238, 247);
    padding-top: 700px;
}

.afd-card-1 {
    border-radius: 10px;
    width: 22rem;
}

.afd-card-2 {
    border-radius: 10px;
    width: 22rem;
}

.card-number-2 {
    opacity: 1;
    color: rgba(255, 255, 255, 0);
    font-family: "Hurme-bold";
    font-size: 60px;
    font-weight: 900;
    font-style: Black;
    letter-spacing: 0px;
    text-align: left;
    line-height: 45px;
    margin-bottom: -35px;
    position: relative;
    z-index: 1;
    color: transparent; /* Rendre le texte transparent */
    -webkit-text-stroke: 1px white; /* Ajouter une bordure noire de 1px autour des lettres */
}

.card-number-1 {
    opacity: 1;
    color: rgba(255, 255, 255, 0);
    font-family: "Hurme-bold";
    font-size: 60px;
    font-weight: 900;
    font-style: Black;
    letter-spacing: 0px;
    text-align: left;
    line-height: 45px;
    margin-top: -75px;
    color: transparent; /* Rendre le texte transparent */
    -webkit-text-stroke: 1px white; /* Ajouter une bordure noire de 1px autour des lettres */
}

.card-date {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-bold";
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: left;
    line-height: 28px;
}

.card-container {
    display: flex;
    margin-top: -401px;
}

.detail-card {
    height: 50%;
}

.card-image {
    height: 50%;
}

.detail-card-left {
    background-image: linear-gradient(to top, rgb(27, 70, 110) 0%, rgb(35, 118, 175) 100%);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.detail-card-right {
    background-image: linear-gradient(to top, rgb(27, 70, 110) 0%, rgb(35, 118, 175) 100%);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.card-img-top{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.detail-card-title {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-bold";
    font-size: 35px;
    font-weight: 700;
    text-align: left;
    line-height: 46px;
}

.card-image {
    width: 100%;
}

.explore {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Hurme-semibold";
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.univers-border-text {
    opacity: 1;
    color: rgba(255, 255, 255, 0);
    font-family: "Black";
    font-size: 60px;
    font-weight: 900;
    font-style: Black;
    letter-spacing: 3px;
    text-align: left;
    line-height: 45px;
    color: transparent; /* Rendre le texte transparent */
    -webkit-text-stroke: 1px white; /* Ajouter une bordure noire de 1px autour des lettres */
}

.univers-white-text {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Black";
    font-size: 40px;
    font-weight: 900;
    text-align: left;
    line-height: 75px;
}

.section-4 {
    padding-inline: 200px;
    padding-top: 200px;
    padding-bottom: 100px;
}

.section-5 {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-inline: 200px;
}

.join-us {
    background-color: rgb(27, 70, 110);
    padding-inline: 100px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.join-us-title {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Bold";
    font-size: 36px;
    font-weight: 700;
}

.get-in-touch {
    background-color: rgb(228, 238, 247);
    padding-left: 70px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.get-in-touch-form {
    background-color: rgb(27, 70, 110);
    width: 40%;
    margin-top: -380px;
    margin-left: -40px;
}

.get-in-touch-form input[type="text"] {
    background-color: rgb(61, 112, 159);
    width: 100%;
    height: 50px;
  }

  .get-in-touch-form input[type="text"]:focus {
    border: none;
    background-color: rgb(61, 112, 159);
  }

  textarea {
    background-color: rgb(61, 112, 159);
    width: 100%;
    height: 100px;
  }

  textarea:focus {
    border: none;
    background-color: rgb(61, 112, 159);
  }

  .foot-top-container {
    /* display: grid;
    justify-content: center; */
    padding-inline: 100px;
  }

  .foot-top {
    display: flex;
    /* width: 85%; */
  }

  .foot-top-left {
    width: 50%;
    display: flex;
    background-color: rgb(27, 70, 110);
    padding-inline: 80px;
    padding-top: 80px;
    /* box-shadow: -5px -5px 25px rgba(0, 0, 0, 0.1); */
  }

  .foot-top-right {
    width: 50%;
    padding-left: 80px;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
  }

  .foot-top-left-text {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-regular";
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: left;
    line-height: 28px;
  }

  .foot-top-right-content {
    display: flex;
    padding-top: 80px;
    padding-right: 80px;
  }

  .email-newsletter {
    padding-bottom: 70px;
    padding-inline: 55px;
  } 

  .email-newsletter input {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .newsletter {
    opacity: 1;
    color: rgba(27, 70, 110, 1);
    font-family: "Bold";
    font-size: 23px;
    font-weight: 700;
    text-align: left;
  }

  .orange-band {
    background-color: rgb(238, 62, 51);
    height: 3px;
  }

  .footer-navigation {
    /* width: 85%; */
  }

  .foot-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(151, 151, 151, 0.1);
  }

  .foot-bottom-container {
    padding-inline: 150px;
    padding-bottom: 110px;
    padding-top: 40px;
  }

  .foot-text-container {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  .option {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Bold";
    font-size: 14px;
    font-weight: 700;
    text-align: left;
  }

  .text-bold-big {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Black";
    font-size: 75px;
    font-weight: 900;
    font-style: Black;
    text-align: left;
    line-height: 90px;
    text-transform: uppercase;
  }

  .circle-white {
    background-color: #fff;
    display: flex;
    justify-content: center;
    clip-path: circle(40%);
    padding: 65px;
    margin-bottom: -200px;
    margin-left: 275px;
    width: fit-content;
}

.circle-white-2 {
    background-color: #fff;
    display: flex;
    justify-content: center;
    clip-path: circle(45%);
    padding: 10%;
    margin-bottom: -40%;
    width: fit-content;
    margin-left: -3%;
}

  .circle-white-3 {
    background-color: #fff;
    display: flex;
    justify-content: center;
    clip-path: circle(37%);
    padding: 75px;
    margin-bottom: -235px;
    margin-left: 250px;
    width: fit-content;
  }

  .circle-white-title {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Bold";
    font-size: 45px;
    font-weight: 900;
    line-height: 5px;
    text-transform: uppercase;
  }

  .circle-white-text {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Light";
    font-size: 14px;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0,05px;
    text-align: center;
    line-height: normal;
}

  .find-out-more {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url("/images/portail/africa-food-distribution.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    padding: 30%;
    display: flex;
    justify-content: center;
    clip-path: circle(46%);
    /* transition: opacity 0.5s ease, background-image 3s ease, background-size 0.5s ease; */
  }

  .find-out-more:hover {
    /* background-image: url('/images/portail/africa-food-distribution.png');
    opacity: 0.9; */
    transition: transform 0.6s ease-out, opacity 0.5s ease-out;
    transform: translate(-1%, 1%)  scale(1.1);
  }

  .find-out-more-2 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy 2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 29%;
    display: flex;
    justify-content: center;
    clip-path: circle(45%);
    transition: opacity 0.5s ease, background-image 0.5s ease, background-size 0.5s ease;
}

.find-out-more-2:hover {
    /* background-image: url('/images/portail/africa-food-distribution.png');
    opacity: 0.9; */
    transition: transform 0.6s ease-out, opacity 0.5s ease-out;
    transform: translate(-1%, 1%)  scale(1.1);
  }

  .find-out-more-3 {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30%;
    display: flex;
    justify-content: center;
    clip-path: circle(46%);
    transition: opacity 0.5s ease, background-image 0.5s ease, background-size 0.5s ease;
}

.find-out-more-3:hover {
    /* background-image: url('/images/portail/africa-food-distribution.png');
    opacity: 0.9; */
    transition: transform 0.6s ease-out, opacity 0.5s ease-out;
    transform: translate(-1%, 1%)  scale(1.1);
  }

.find-out-more a {
    text-decoration: none;
}
.find-out-more-2 a {
    text-decoration: none;
}

.find-out-more-3 a {
    text-decoration: none;
}

.afd-button:hover {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translate(-1%, 1%)  scale(1.1);
}

  .text-card {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Hurme-regular";
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 20px;
}

.oval {
    width: 550px;
}

.footer-navigation-elements {
    display: flex;
    justify-content: end;
    align-items: center;
}

.get-in-touch-form-container {
    width: 95%;
}

.join-us .afd-button {
    width: fit-content;
}

input::placeholder {
    opacity: 1;
    color: rgba(232, 232, 232, 1);
    font-family: "Hurme-regular";
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

textarea::placeholder {
    opacity: 1;
    color: rgba(232, 232, 232, 1);
    font-family: "Hurme-regular";
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.oval-bvs {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/portail/Oval-bvs.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px;
}

.oval-divers {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/portail/Oval-divers.png);
    background-size: contain; /*contain*/
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px;
}

.oval-pates {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/images/portail/Oval-pates.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px;
    /* clip-path: circle(40%); */
}

.sky-blue-bottom {
    padding-left: 49%;
}

.banner-title {
    margin-top: -80px;
    margin-right: -200px;
    padding-left: 37%;
    z-index: 1;
    position: relative;
}

.legacy-text {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Hurme-regular";
    font-size: 14px;
    font-weight: 400;
    font-style: Regular;
    letter-spacing: 0, 05px;
    line-height: normal;
}

.blog-categories-list {
    list-style: none;
    padding-left: 0px;
}

.blog-widget-title {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "Hurme-semibold";
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.blog-widget-3 .content h6 {
    font-size: 16px;
    font-family: 'Hurme-semibold';
}

.blog-details-title {
    font-size: 40px;
    /* color: #787878; */
    font-family: 'Hurme-semibold';
}

.layout-left p {
    font-family: 'Hurme-regular';
    color: #787878;
}

.quote-text {
    font-family: 'Hurme-semibold-oblique';
    font-size: 18px;
}

.blog-head {
    position: relative;
    margin-top: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to top, rgba(27, 70, 110, 0.5), rgba(27, 70, 110, 0.5) 40%), url('/images/blog/content-black-man-posing-with-laptop.jpg');
}

.blog-content .post-meta {
    font-size: 14px;
    color: #787878;
    font-family: 'Hurme-regular';
}

.blog-content .blog-title {
    font-family: "Hurme-semibold";
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.blog-content .blog-link {
    font-family: 'Hurme-semibold';
}

.sign-in-div .afd-button {
    text-decoration: none;
}

.join-us a {
    text-decoration: none;
}

.card {
    transition: 1.7s;
}
/* .card:not(:last-child) {
    padding-right: 10px;
} */
/* .card:hover img {
    scale: 1.1;
} */

.card img{
    height: 100%;
    transition: .7s;
    border-radius: inherit;
}

.card:hover {
    scale: 1.02;
    cursor: pointer;
}

.display-option .row-tablinks {
    cursor: pointer;
}

/* .section-1, 
.section-2, 
.section-3, 
.section-4, 
.section-5, 
.section-6, 
.section-1-univers-bvs, 
.section-1-univers-divers, 
.section-1-univers-pates, 
.section-univers-products, 
.inter-section-univers {
    overflow-x: hidden;
    max-width: 100%;
} */
section:not(.univers) {
    overflow-x: hidden;
    max-width: 100%;
}
/* [class^="section-"]:not(.univers),
.inter-section-univers {
    overflow-x: hidden;
    max-width: 100%;
} */

.network img:hover {
    animation: rebound 0.5s;
}

@keyframes bouncer-1 {
    0%, 100% {
      transform: translateY(0);
      animation-timing-function: ease-in-out;
    }

    25% {
        transform: translateY(-10px); 
      animation-timing-function: ease-out;
    }
    
    50% {
      transform: translateY(0px);
      animation-timing-function: ease-out;
    }

    75% {
        transform: translateY(10px);
      animation-timing-function: ease-out;
    }

    /* 0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
      50% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }
      100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    } */
}
  
  .afd-card-1 {
    display: inline-block;
    animation: bouncer-1 2.5s infinite; /* Applique l'animation bounce à l'élément */
  }

  @keyframes bouncer-2 {
    0%, 100% {
      transform: translateY(0); 
      animation-timing-function: ease-in-out;
    }

    25% {
        transform: translateY(10px); 
      animation-timing-function: ease-out;
    }
    
    50% {
      transform: translateY(0px);
      animation-timing-function: ease-out;
    }

    75% {
        transform: translateY(-10px); 
      animation-timing-function: ease-out;
    }

    /* 0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }
      50% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
      }
      100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    } */
}

  .afd-card-2 {
    display: inline-block;
    animation: bouncer-2 2.5s infinite; /* Applique l'animation bounce à l'élément */
    /* animation-delay: 0.5s; */
  }

  /* Style pour le loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(27, 70, 110);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .loader-bvs {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url('/images/portail/sorrells-wine-cellar.jpg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .loader-divers {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url('/images/portail/cereal-growing-field\ copy.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .loader-pates {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url('/images/loading-pates.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Animation du spinner */
  .spinner {
    width: 50px;
    height: 50px;
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-top: 8px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  /* Animation de rotation */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }  
  

@media (max-width : 767.98px) {

    .foot-top-left {
        width: 50%;
        display: flex;
        background-color: rgb(27, 70, 110);
        padding-inline: 80px;
        padding-top: 80px;
        flex-direction: column;
    }

    .banner-title {
        margin-top: -80px;
        margin-right: -200px;
        padding-left: 20px;
        z-index: 1;
        position: relative;
        width: 100%;
    }

    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 60px;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 90px;
        text-transform: uppercase;
    }

    .sky-blue {
        width: 100%;
        background-color: rgb(228, 238, 247);
        padding-top: 150px;
    }

    .sky-blue-bottom {
        padding-left: 130px;
    }
    
    .card-container {
        display: flex;
        justify-content: center;
        margin-top: 0px;
    }

    .oval {
        width: 350px;
    }

    .section-4 {
        padding: 20px;
    }

    .section-5 {
        padding: 20px;
    }

    .join-us {
        background-color: rgb(27, 70, 110);
        padding-inline: 20px;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .foot-top-left {
        width: 100%;
        display: flex;
        background-color: rgb(27, 70, 110);
        padding-inline: 40px;
        padding-top: 20px;
    }

    .foot-top-right {
        width: 100%;
        padding-left: 40px;
        box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
    }

    .foot-top {
        display: block;
        width: 100%;
    }

    .foot-bottom-container {
        padding-inline: 10px;
        padding-bottom: 20px;
        padding-top: 10px;
    }

    .foot-bottom {
        display: block;
        border-top: 1px solid rgba(151, 151, 151, 0.1);
    }

    .section-1-bottom {
        padding-inline: 10px;
        padding-bottom: 0px;
        margin-top: -200px;
        width: 90%;
    }

    .inter-section {
        background-image: url("/images/portail/bg-tatoo.png");
        /* background-size: 700px 700px; */
        background-position: left;
        background-repeat: no-repeat, no-repeat;
        padding-bottom: 150px;
        padding-top: 100px;
        padding-inline: 50px;
    }

    .univers-divers {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url("/images/portail/cereal-growing-field copy.png");
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 50px;
        padding-bottom: 50px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .univers-pates {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url(/images/portail/cereal-growing-field.png);
        padding-inline: 20px;
        padding-top: 100px;
        padding-bottom: 70px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: ellipse(90% 74% at 50% 75%);
        margin-top: -150px;
    }

    .find-out-more {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url(/images/portail/africa-food-distribution.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        padding: 28%;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-pates {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-pates.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .find-out-more-2 {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy 2.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        padding: 25%;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-divers {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-divers.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .find-out-more-3 {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        padding: 29%;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-bvs {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-bvs.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
        padding: 10%;
        margin-bottom: -27%;
        margin-left: 50%;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(37%);
        padding: 10%;
        margin-bottom: -30%;
        margin-left: 5%;
        width: fit-content;
    }

    .univers-bvs {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
        padding-inline: 20px;
        padding-top: 50px;
        padding-bottom: 220px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: -200px;
        clip-path: ellipse(90% 75% at 50% 20%);
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
        padding: 10%;
        margin-bottom: -27%;
        margin-left: 50%;
        width: fit-content;
    }

    .footer-navigation {
        width: 100%;
        padding-inline: 130px;
    }

    .footer-navigation-elements {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .banner-univer-detail {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Light";
        font-size: 12px;
        font-weight: 300;
        font-style: Light;
        letter-spacing: 0, 13px;
        text-align: center;
    }

    .banner-univer-title {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Bold";
        font-size: 40px;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
    }

    .get-in-touch-form {
        background-color: rgb(27, 70, 110);
        width: 100%;
        margin-top: 0px;
    }

    .get-in-touch {
        background-color: rgb(228, 238, 247);
        padding-left: 65px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .get-in-touch-form-container {
        width: 100%;
    }

    .join-us .afd-button {
        width: fit-content;
    }

    .foot-top-container {
        padding-inline: 0px;
    }

    .logos-univers {
        max-width: 550px;
    }
}

@media (min-width: 1500px) and (max-width: 1600px) {
    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(42%);
        padding: 10%;
        margin-bottom: -40%;
        width: fit-content;
        margin-left: 0%;
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -35%;
        margin-left: 50%;
        width: fit-content;
    }

    .banner-title {
        margin-top: -80px;
        margin-right: -200px;
        padding-left: 8%;
        z-index: 1;
        position: relative;
    }
}

@media (min-width: 1400px) and (max-width: 1500px) {
    .univers-pates {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url(/images/portail/cereal-growing-field.png);
        padding-inline: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: ellipse(90% 75% at 50% 75%);
        margin-top: -180px;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(42%);
        padding: 10%;
        margin-bottom: -40%;
        width: fit-content;
        margin-left: 0%;
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -35%;
        margin-left: 50%;
        width: fit-content;
    }

.univers-divers {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url("/images/portail/cereal-growing-field copy.png");
    padding-inline: 100px;
    padding-top: 50px;
    padding-bottom: 145px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.univers-bvs {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
    padding-inline: 100px;
    padding-top: 100px;
    padding-bottom: 220px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: -200px;
    clip-path: ellipse(90% 75% at 50% 20%);
}
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .foot-top-container {
        padding-inline: 5px;
    }

    .find-out-more {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url(/images/portail/africa-food-distribution.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-pates {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-pates.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .find-out-more-2 {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy 2.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-divers {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-divers.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .find-out-more-3 {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url('/images/portail/africa-food-distribution copy.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
    }

    .oval-bvs {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(/images/portail/Oval-bvs.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 45px;
    }

    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(43%);
        padding: 35px;
        margin-bottom: -150px;
        margin-left: 205px;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(43%);
        padding: 35px;
        margin-bottom: -110px;
        margin-left: -50px;
        width: fit-content;
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(35%);
        padding: 85px;
        margin-bottom: -195px;
        margin-left: 165px;
        width: fit-content;
    }

    .sky-blue {
        width: 100%;
        background-color: rgb(228, 238, 247);
        padding-top: 300px;
    }

    .oval {
        width: 350px;
    }

    .section-4 {
        padding: 20px;
    }

    .section-5 {
        padding-inline: 20px;
        padding-top: 140px;
        padding-bottom: 20px;
    }

    .join-us {
        background-color: rgb(27, 70, 110);
        padding-inline: 20px;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .foot-top-left {
        width: 100%;
        display: flex;
        background-color: rgb(27, 70, 110);
        padding-inline: 40px;
        padding-top: 20px;
    }

    .foot-top-right {
        width: 100%;
        padding-left: 40px;
        box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
    }

    .foot-top {
        display: block;
        width: 100%;
    }

    .foot-bottom-container {
        padding-inline: 10px;
        padding-bottom: 20px;
        padding-top: 10px;
    }

    .foot-bottom {
        display: block;
        border-top: 1px solid rgba(151, 151, 151, 0.1);
    }

    .section-1-bottom {
        padding-inline: 20px;
        width: 80%;
    }

    .inter-section {
        background-image: url("/images/portail/bg-tatoo.png");
        /* background-size: 700px 700px; */
        background-position: left;
        background-repeat: no-repeat, no-repeat;
        padding-bottom: 150px;
        padding-top: 100px;
        padding-inline: 50px;
    }

    .univers-divers {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url("/images/portail/cereal-growing-field copy.png");
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 50px;
        padding-bottom: 50px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .univers-pates {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url(/images/portail/cereal-growing-field.png);
        padding-inline: 20px;
        padding-top: 100px;
        padding-bottom: 70px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: ellipse(90% 74% at 50% 75%);
        margin-top: -150px;
    }

    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(43%);
        padding: 8%;
        margin-bottom: -35%;
        margin-left: 55%;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 8%;
        margin-bottom: -35%;
        margin-left: -5%;
        width: fit-content;
    }

    .banner-title {
        margin-top: -80px;
        margin-right: -200px;
        padding-left: 14%;
        z-index: 1;
        position: relative;
    }

    .univers-bvs {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
        padding-inline: 20px;
        padding-top: 50px;
        padding-bottom: 220px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: -200px;
        clip-path: ellipse(90% 75% at 50% 20%);
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 8%;
        margin-bottom: -25%;
        margin-left: 40%;
        width: fit-content;
    }

    .sky-blue-bottom {
        padding-left: 150px;
    }

    .footer-navigation {
        width: 100%;
        padding-inline: 30px;
    }

    .footer-navigation-elements {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .banner-univer-detail {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Light";
        font-size: 12px;
        font-weight: 300;
        font-style: Light;
        letter-spacing: 0, 13px;
        text-align: center;
    }

    .banner-univer-title {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Bold";
        font-size: 40px;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
    }

    .get-in-touch {
        background-color: rgb(228, 238, 247);
        padding-left: 65px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .get-in-touch-form-container {
        width: 100%;
    }

    .join-us .afd-button {
        width: fit-content;
    }

    .card-container {
        display: flex;
        margin-top: 0px;
    }

    .get-in-touch-form {
        background-color: rgb(27, 70, 110);
        width: 40%;
        margin-top: -310px;
        margin-left: -40px;
        width: 45%;
    }

    .foot-top-container {
        padding-inline: 10px;
    }
}

@media (min-width : 768.1px) and (max-width : 875px) {
    .banner-title {
        padding-left: 5%;
    }
}

@media (min-width: 400px) and (max-width: 499.98px) {
    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(43%);
        padding: 9%;
        margin-bottom: -35%;
        margin-left: 55%;
        width: fit-content;
    }

    .footer-navigation {
        width: 100%;
        padding-inline: 30px;
    }
}

@media (max-width: 399.98px) {
    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(43%);
        padding: 9%;
        margin-bottom: -40%;
        margin-left: 50%;
        width: fit-content;
    }
    .footer-navigation {
        width: 100%;
        padding-inline: 30px;
    }
}

@media (min-width: 500px) and (max-width: 659.98px) {

    .footer-navigation {
        width: 100%;
        padding-inline: 30px;
    }
}

@media (min-width: 359.98px) and (max-width: 499.98px) {

    .footer-navigation {
        width: 100%;
        padding-inline: 30px;
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
        padding: 10%;
        padding-inline: 10%;
        margin-bottom: -30%;
        margin-left: 40%;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(40%);
        padding: 10%;
        margin-bottom: -35%;
        margin-left: -4%;
        width: fit-content;
    }

    .sky-blue {
        width: 100%;
        background-color: rgb(228, 238, 247);
        padding-top: 170px;
    }

    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 57px;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 90px;
        text-transform: uppercase;
    }

.super-big-text {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
    font-family: "Black";
    font-size: 170px;
    font-weight: 900;
    letter-spacing: 6, 26px;
    text-align: left;
    line-height: 113px;
    text-transform: uppercase;
    margin-top: 30px;
}

    .banner-title {
        margin-top: -80px;
        margin-right: -200px;
        padding-left: 10px;
        z-index: 1;
        position: relative;
        width: 100%;
    }

    .find-out-more-3 .text-regular-white {
        font-size: 14px;
    }
}

@media (min-width: 1140px) and (max-width: 1399.98px) {
    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -35%;
        margin-left: 51%;
        width: fit-content;
    }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 75px;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 100px;
        text-transform: uppercase;
    }
}

@media (min-width: 1100px) and (max-width: 1199.98px) {
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 80px;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 110px;
        text-transform: uppercase;
    }
}

@media (min-width: 1200px) and (max-width: 1399.97px) {
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 87px;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 110px;
        text-transform: uppercase;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {

    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        /* font-size: 95px; */
        font-weight: 900;
        font-style: Black;
        text-align: left;
        /* line-height: 110px; */
        text-transform: uppercase;
    }

    .banner-title {
        padding-left: 80px;
    }

    .section-4 {
        padding-inline: 200px;
        padding-top: 200px;
        padding-bottom: 100px;
    }
    
    .section-5 {
        padding-bottom: 100px;
        padding-inline: 100px;
    }
    
    .foot-bottom-container {
        padding-inline: 40px;
        padding-bottom: 50px;
        padding-top: 40px;
    }
    
    .inter-section {
        background-image: url(/images/portail/bg-tatoo.png);
        background-size: 700px 700px;
        background-position: left;
        background-repeat: no-repeat, no-repeat;
        padding-bottom: 200px;
        padding-top: 100px;
        padding-inline: 250px;
    }

     .find-out-more-2, .find-out-more-3 {
        padding: 28%;
    }

    /* .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 8%;
        margin-bottom: -39%;
        margin-left: 43%;
        width: fit-content;
    } */

    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(44%);
        padding: 10%;
        margin-bottom: -36%;
        margin-left: 53%;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -40%;
        width: fit-content;
        margin-left: 3%;
    }

    .sky-blue {
        width: 39%;
        background-color: rgb(228, 238, 247);
        padding-top: 600px;
    }

    .find-out-more {
        /* background-image: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 40%), url(/images/portail/africa-food-distribution.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1; */
        padding: 28%;
        /* display: flex;
        justify-content: center;
        clip-path: circle(38%); */
    }
    
    .univers-pates {
        background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url(/images/portail/cereal-growing-field.png);
        padding-inline: 50px;
        padding-top: 100px;
        padding-bottom: 100px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: ellipse(87% 75% at 50% 75%);
        margin-top: -180px;
    }

.univers-divers {
    background-image: linear-gradient(to top, rgba(14, 48, 79, 0.5), rgba(14, 48, 79, 0.5) 40%), url("/images/portail/cereal-growing-field copy.png");
    padding-inline: 50px;
    padding-top: 50px;
    padding-bottom: 145px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.univers-bvs {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
    padding-inline: 50px;
    padding-top: 100px;
    padding-bottom: 220px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: -200px;
    clip-path: ellipse(90% 75% at 50% 20%);
}
}

@media (min-width: 1800px) and (max-width: 1999.98px){
    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -30%;
        margin-left: 50%;
        width: fit-content;
    }

    .card {
        height: 500px;
    }
}

@media (min-width: 1800px) {
    .section-1-bottom-left {
        padding-inline: 20%;
    }
}

@media (min-width: 1400px) and (max-width: 1529.98px){
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 150%;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 120%;
        text-transform: uppercase;
    }
}

@media (min-width: 1530px) and (max-width: 1729.98px){
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 160%;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 120%;
        text-transform: uppercase;
    }
}

@media (min-width: 1730px) and (max-width: 1999.98px){
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 170%;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 120%;
        text-transform: uppercase;
    }

    .afd-card-1 {
        border-radius: 10px;
        width: 23rem;
    }
    
    .afd-card-2 {
        border-radius: 10px;
        width: 23rem;
    }
}

@media (min-width: 1400px) and (max-width: 1999.98px){
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        /* font-size: 700%; */
        font-weight: 900;
        font-style: Black;
        text-align: left;
        /* line-height: 120%; */
        text-transform: uppercase;
    }

    .banner-title {
        padding-left: 20%;
    }

    .super-big-text {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 1000%;
        font-weight: 900;
        letter-spacing: 6, 26px;
        text-align: left;
        line-height: 113px;
        text-transform: uppercase;
    }

    .univers-bvs {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
        padding-inline: 200px;
        padding-top: 100px;
        padding-bottom: 220px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: -200px;
        clip-path: ellipse(90% 75% at 50% 20%);
    }

    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -32%;
        margin-left: 50%;
        width: fit-content;
    }
}

@media (min-width: 2000px) {
    .text-bold-big {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 180%;
        font-weight: 900;
        font-style: Black;
        text-align: left;
        line-height: 120%;
        text-transform: uppercase;
    }

    .banner-title {
        margin-top: -80px;
        margin-right: -200px;
        padding-left: 10%;
        z-index: 1;
        position: relative;
    }

    .super-big-text {
        opacity: 1;
        color: rgba(255, 255, 255, 1);
        font-family: "Black";
        font-size: 1300%;
        font-weight: 900;
        letter-spacing: 6, 26px;
        text-align: left;
        line-height: 113px;
        text-transform: uppercase;
        margin-bottom: 50px;
    }

    .univers-bvs {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 40%), url(/images/portail/sorrells-wine-cellar.jpg.png);
        padding-inline: 200px;
        padding-top: 100px;
        padding-bottom: 220px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: -300px;
        clip-path: ellipse(90% 75% at 50% 20%);
    }

    .section-1-bottom {
        margin-top: -150px;
        padding-inline: 70px;
        padding-bottom: 10px;
        padding-top: 20px;
        z-index: 200;
        position: relative;
        display: block;
        background: linear-gradient(to top, rgb(42, 65, 81) 10%, rgb(112, 135, 171) 55%);
        width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }

    .afd-card-1 {
        border-radius: 10px;
        width: 24rem;
    }
    
    .afd-card-2 {
        border-radius: 10px;
        width: 24rem;
    }
}

@media (min-width: 2000px)  {
    .circle-white-3 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -30%;
        margin-left: 58%;
        width: fit-content;
    }

    .circle-white {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -30%;
        margin-left: 58%;
        width: fit-content;
    }

    .circle-white-2 {
        background-color: #fff;
        display: flex;
        justify-content: center;
        clip-path: circle(45%);
        padding: 10%;
        margin-bottom: -30%;
        width: fit-content;
        margin-left: 5%;
    }
}

@media (min-width: 938px) and (max-width: 1199.98px) {
    .section-1-bottom {
        margin-top: -150px;
        padding-inline: 25px;
        padding-bottom: 10px;
        padding-top: 20px;
        z-index: 200;
        position: relative;
        display: block;
        background: linear-gradient(to top, rgb(42, 65, 81) 10%, rgb(112, 135, 171) 55%);
        width: 940px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 769px) and (max-width: 937.98px) {
    .section-1-bottom {
        margin-top: -150px;
        padding-inline: 25px;
        padding-bottom: 10px;
        padding-top: 20px;
        z-index: 200;
        position: relative;
        display: block;
        background: linear-gradient(to top, rgb(42, 65, 81) 10%, rgb(112, 135, 171) 55%);
        width: 780px;
        margin-left: auto;
        margin-right: auto;
    }
}