#primary {
   padding-bottom: 0;
}

.container.page-404 {
   padding: 150px 0 150px 0;
}

.header ul.menu li.menu-contact a i {
   /* display:flex;
   justify-content: center;
   align-items: baseline; */
   color: var(--color-primary);
}

/* 
 * Menu logo
 *
 * ============================= */

.menu-bar .logo svg {
   width: 220px;
}


@media only screen and (max-width:400px) {
   .menu-bar .logo svg {
      width: 180px;
   }

}







/* 
 * Home page
 *
 * ============================= */
/* section.section-hero {
   margin-top: 120px;
   height: 500px;
} */

.hero-panel-right {
   background-color: yellow;
   grid-column: 2 / span 5;
}

.hero-panel-left {
   background-color: blue;
   grid-column: 7 / span 5;
}


/* 
 * Footer
 *
 * ============================= */

footer {
   position: relative;
   background-color: #222928;
   background-color: var(--color-logo);
   color: var(--color-white);
   list-style: none;

   font-size: 14px;
   font-weight: 400;
   margin-top: 0;
}

footer a {
   color: rgba(var(--color-white-rba), 0.7);
}

.footer-bottom,
.footer-main {
   padding: 40px 120px 80px 120px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   position: relative;
   gap: 20px;
}

.footer-main {
   /* margin-top: 28px; */
}




.footer-left {
   max-width: 50%;
}

.footer-logo-box {

   position: relative;
   width: 200px;
   height: auto;
   padding: 0 0 38px 0;
   max-width: 100%;
}

.footer-logo-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}



.footer-bottom {
   padding: 10px 120px;
   background-color: var(--color-true-black);
}



ul.footer-slogan {

   list-style: none;
   font-size: 18px;
   font-weight: 500;
   line-height: 160%;
   /* 28.8px */
   letter-spacing: 1.26px;
}

.footer-socials {
   margin-top: 48px;
}

.footer-socials.small-screen {
   display: none;
}

.footer-socials a {
   font-size: 28px;
}

.footer-company-details {
   /* padding-top:34px; */
}

.footer-company-details p {
   color: var(--color-secondary);
   font-size: 20px;
   font-weight: 700;
   line-height: 160%;
   /* 32px */
   letter-spacing: 1.6px;
}

.footer-company-details ul {
   list-style: none;
   font-size: 18px;

   font-weight: 500;
   line-height: 160%;
   letter-spacing: 0.54px;
}

.footer-company-details ul li {
   margin-bottom: 0.8rem;
}

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

.contact-details .icon {
   display: inline-block;
   width: 20px;
   margin-right: 6px;
}

.contact-details i {
   color: var(--color-grey-60);


}

.footer-bottom p,
.footer-bottom ul {
   margin: 0;
}

.footer-bottom a {
   text-decoration: none;
}

.footer-bottom ul {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   list-style: none;

}

@media only screen and (max-width:930px) {
   .footer-main {
      padding: 40px 60px 80px 60px;
   }

   .footer-bottom {
      padding: 10px 60px;
   }

}

@media only screen and (max-width:780px) {

   .footer-main {
      flex-direction: column;
   }

   .footer-left {
      width: 100%;
      max-width: 100%;
   }

   .footer-right {
      margin-top: 18px;
   }

   .footer-socials.small-screen {
      display: block;
   }

   .footer-socials.large-screen {
      display: none;
   }

}

@media only screen and (max-width:650px) {
   .footer-bottom {
      padding: 10px 30px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }

   .footer-bottom nav {
      width: 100%;
   }

   .footer-bottom nav li {
      /* min-width: 150px; */
      text-align: center;
   }
}

@media only screen and (max-width:366px) {

   ul.footer-slogan,
   .footer-company-details ul {
      font-size: 16px;
   }

}

@media only screen and (max-width:460px) {
   .footer-main {
      padding: 40px 30px 60px 30px;
   }

   .footer-bottom {
      padding: 10px 30px;
   }
}

@media only screen and (max-width:390px) {
   .footer-main {
      padding: 40px 20px 60px 20px;
   }

   .footer-bottom {
      padding: 10px 20px;
   }
}

/* 
 * Footer Modal
 *
 * ============================= */
.global-modal {
   display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
   align-items: center;
   justify-content: center;
}

.global-modal.active-modal {
   display: flex !important;
}

.global-modal-content {
   background: var(--color-grey-00);
   padding: 2rem 2.5rem;
   border-radius: 1.5rem;
   max-width: 90vw;
   max-height: 80vh;
   overflow-y: auto;
   /* box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); */
   box-shadow: var(--box-shadow);
   position: relative;
   animation: modalIn 0.2s;
}

.global-modal-content h2 {
   color: var(--color-background-dark-darker);
}

#global-modal-inner {
   margin: 42px 0 20px 0;
}

@keyframes modalIn {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

button.global-modal-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   font-size: 2.5rem;
   color: var(--color-background-dark-darker);
   cursor: pointer;
   line-height: 1;
}

button.global-modal-close:hover {
   background-color: var(--color-background-dark-darker);
   color: var(--color-white);
}

/* Forms  */

.wpcf7-list-item-label {
   font-weight: 300;
}

@media only screen and (max-width:600px) {
   .wpcf7-list-item-label {
      font-size: 16px;
   }
}


/* 
 * Section Hero
 *
 * ============================= */


section.section-hero {
   position: relative;
   height: auto;
   min-height: 400px;
   /* background-color: yellow; */
   /* border-bottom: 4px solid var(--color-secondary); */

}

.home section.section-hero {
   /* margin-top: 232px; */
   padding-top: 160px;
   padding-bottom: 80px;

   /* background-color: rgba(var(--color-primary-rba), 0.1); */
   background-color: var(--color-true-white);;
}

/* @media only screen and (max-width: 780px) {{} */

.hero-text-box {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 28px;
   padding: 12px 40px 60px 180px;
   z-index: 110;
}

.pre-tag-line {
   position: relative;
   color: var(--color-grey-30);
   /* font-family: Outfit; */
   font-size: 26px;
   font-weight: 900;
   line-height: 130%;
   letter-spacing: 0.52px;
   text-transform: uppercase;

}

.pre-tag-line-before {
   position: absolute;
   top: -7px;
   left: -70px;
   width: 70px;
   display: flex;
   gap: 8px;
   align-items: baseline;
}

.pre-tag-line span.before-one {
   height: 100%;
   margin-top: 10px;
   color: var(--color-grey-30);
   font-size: 14px;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: 1.68px;
   text-transform: uppercase;
}

.pre-tag-line span.before-two {
   height: 100%;
   color: var(--color-primary);
   font-size: 46px;
   font-style: normal;
   font-weight: 900;
   line-height: 130%;
   letter-spacing: 0.92px;
   text-transform: uppercase;
}

/* .pre-tag-line:before {
   content:'<span>op</span><span>1</span>';
} */



.pre-tag-line:before {}

h1.tag-line {
   color: var(--color-black);
   font-size: 36px;
   font-weight: 900;
   line-height: 130%;
   letter-spacing: 0.72px;
   text-transform: uppercase;
   margin-bottom: 0;

}

.tag-line span.animated {
   /* color: var(--color-primary); */
   color: var(--color-secondary);
}


.after-tag-line {
   color: #161414;
   font-size: 21px;
   font-weight: 400;
   line-height: 160%;
   letter-spacing: 0.42px;
}


.hero-image-pane {
   max-height: auto;
   position: relative;
}

.hero-image-box {
   width: 62%;
   height: auto;
   overflow: visible;
   z-index: 100;
   position: relative;
}

.hero-image-box svg {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
}


.hero-image-box img {
   width: 100%;
   height: auto;
   object-fit: cover;
   -webkit-clip-path: url(#clipshape);
   clip-path: url(#clipshape);
}


@keyframes rotate-hero-svg {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

.hero-image-box svg {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   transform: scale(1.5) translateX(-5%);
   transform-origin: center center;
}

#clipshape {
   width: 100%;
   height: auto;
   transform-origin: center center;
   animation: rotate-hero-svg 40s linear infinite;
}

#clipshape path {
   transform: scale(0.63);
   transform-origin: center center;
}

@media only screen and (max-width: 1200px) {
   .hero-text-box {
      padding: 120px 40px 60px 140px;
   }
}

@media only screen and (max-width: 1100px) {
   .hero-image-box {

      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
   }

}

@media only screen and (max-width: 1075px) {
   .hero-text-box {
      padding: 120px 40px 60px 105px;
   }

}

@media only screen and (max-width: 960px) {
   .section-hero.surf-grid {
      grid-template-columns: 1fr !important;

   }

   .section-hero .surf-left-pane,
   .section-hero .surf-right-pane {
      grid-column: 1 / -1 !important;

   }

   .section-hero .surf-left-pane {
      order: 2;
      margin-top: -176px;
      padding: 120px 60px 60px 60px;
   }


   .section-hero .surf-right-pane {
      order: 1;
      display: flex;
      width: 100%;
      justify-content: center;
   }

   .section-hero .hero-image-box {
      padding: 0 10%;
   }

}

@media only screen and (max-width: 760px) {
   .section-hero .hero-image-box {
      padding: 0 5%;
   }

}

@media only screen and (max-width: 670px) {
   .hero-text-box {
      padding: 120px 40px 60px 80px;
   }
}

@media only screen and (max-width: 450px) {

      .section-hero .surf-left-pane {

            padding: 120px 40px 60px 40px;
         }

   .hero-text-box {
      padding: 112px 20px 60px 80px;
      gap: 26px;
   }

   .section-hero .surf-left-pane {
      margin-top: -102px;
   }

   .pre-tag-line {
      font-size: 1.6rem;
   }

   .pre-tag-line span.before-two {
      font-size: 3.2rem;
   }

   h1.tag-line {
      font-size: 26px;
   }

   .after-tag-line {
      font-size: 18px;
   }


}

/* 
 * Section Proposition
 *
 * ============================= */


 /* .container.container-proposition {
   background-color: rgba(var(--color-primary-rba), 0.2);
 } */

section.section-proposition {
   padding-top: 80px;
   padding-bottom: 140px;
   position: relative;
   /* gap:4rem; */
   background-color: rgba(var(--color-primary-rba), 0.1);

}

.proposition-item {
   margin-bottom: 32px;
   position: relative;
}

.proposition-item-base-content {
   display: flex;
   width: 100%;
   position: relative
}

.proposition-item-base-content.item-even {
   flex-direction: row-reverse;
}

.base-content-icon-box {
   width: 30%;
   position: relative;
}
.item-even .base-content-icon-box {
display: flex;
   justify-content: flex-end;
}
.base-content-icon-box i {
   position: relative;
   font-size: 250px;
   font-size: 180px;
   color: var(--color-primary);
   color: rgba(var(--color-primary-rba), 0.8);
   border-radius: var(--border-radius);

}


.base-content-text-box {
   padding: 32px 12px 32px 12px;
   width: 50%;
   position: absolute;
   left: 8%;
   top: 9%;
   background: rgba(255, 255, 255, 0.3);
}



.base-content-text-box.item-even {
   /* left: 29%; */
   left: 42%;
}

.item-even .proposition-item-intro {
   flex-direction: row-reverse;
}

.base-content-text-box.item-even .proposition-item-title,
.base-content-text-box.item-even .proposition-item-intro {
   text-align: right;
}




.read-more-box {
   display: flex;
   width: 100%;

}


.open-slidedout {
   align-self: flex-end;
   margin-bottom: 2.5rem;
}

.open-slidedout i {
   font-size: 32px;
   transform: rotate(90deg);
   transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.open-slidedout:hover i {
   font-size: 36px;
}

.open-slidedout i.rotated {
   transform: rotate(-90deg);
}

.proposition-item-slideout {
   position: relative;
   /* display: none; */
   z-index: 10;
   background-color: rgba(var(--color-secondary-rba), 0.8);
   color: var(--color-white);
   width: 60%;
   padding: 32px;
   margin-top: 58px;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   left: 8%;
}

.proposition-item-slideout.item-even {
   left: 19%;
}

@media only screen and (max-width: 1200px) {
   .base-content-text-box {
      /* padding: 32px 12px 32px 12px; */
      width: 80%;
   }

   .base-content-text-box.item-even {
      left: 0%;
   }

   .proposition-item {
      margin-bottom: 66px;
   }
}

@media only screen and (max-width: 760px) {
      .item-uneven .base-content-icon-box i {
            left: -28px;
         }

   .proposition-item {
      height: 300px;
      margin-bottom: 24px;
   }

   .base-content-text-box {
      /* padding: 32px 12px 32px 12px; */
      width: 100%;
   }

   .base-content-text-box {
      left: 0;
   }

   .proposition-item-slideout {
      width: 90%;
      margin-top: 116px;
      background-color: rgba(var(--color-secondary-rba), 0.9);
   }
}

@media only screen and (max-width: 496px) {



   .proposition-item-slideout {
      margin-top: 136px;
   }
}

@media only screen and (max-width: 432px) {
   .proposition-item-slideout {

      margin-top: 216px;
      width: 100%;

   }
}

/* 
 * Section About
 *
 * ============================= */

section.section-about {
   /* margin-top: 80px; */
   position: relative;
   padding: 80px 0;
   background-color: var(--color-white);
   background-color: rgba(var(--color-secondary-rba), 0.2);
  

}

section.section-about i {
   position: absolute;
   top: 0;
   font-size: 500px;
   color: rgba(var(--color-secondary-rba), 0.6);
   left: 70%;

}

.about-text-pannel.surf-left-pane {
   grid-row: 2;
}

.about-image-panel.surf-right-pane {
   grid-row: 2;
}


.about-photo-swiper {
   width: 100%;
   height: 450px;
   overflow: hidden;
   box-shadow: var(--box-shadow);
   x
}

.about-image-box {
   /* position: absolute;
   top:0; */
   height: 100%;
   height: 450px;
   width: 100%;


}

.about-image-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}



@media only screen and (max-width: 960px) {

   .section-about .surf-container {
      /* grid-template-columns: 1fr!important; */
   }

   .about-image-panel.surf-right-pane {
      grid-row: 3;
      grid-column: 1 / -1;
      /* display: none; */
   }

   .about-text-pannel.surf-left-pane {
      grid-row: 2;
      grid-column: 1 / -1;

   }

}

@media only screen and (max-width: 760px) {
   section.section-about i {
      top: 0%;
      font-size: 600px;
      color: rgba(var(--color-secondary-rba), 0.3);
      left: 40%;
   }
}

/* 
 * Section Credentials
 *
 * ============================= */

section.section-credentials {

   padding: 80px 0;
   background-color: rgba(var(--color-secondary-rba), 0.1);
   background-color: var(--color-white);
}


.swiper {
   /* width: 600px; */

   height: 400px;
   position: relative;
   padding: 10px 4px;
}

.swiper-button-next,
.swiper-button-prev {
   cursor: pointer;
   color: var(--color-primary);
}

.credentials-card {
   position: relative;
   width: 100%;
   height: 100%;
   box-shadow: var(--box-shadow);
   background-color: var(--color-true-white);

}

.credentials-body {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 5;
   /* background-color: rgba(255, 255, 255, 0.8); */
   /* background-color: rgb(var(--color-secondary-rba), 0.5); */
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 80px 28px 40px 40px;
   gap: 18px;

}

.credentials-title-box {
   display: flex;
   flex-direction: column;
   gap: 0;

}

.credentials-year {
   color: var(--color-grey-70);
   font-weight: 600;
}

.credentials-institution i,
.credentials-year i {
   padding-right: 8px;

}

.credentials-title {
   margin-bottom: 0;
}

.credentials-institution {
   font-style: italic;
   font-weight: 300;
   font-size: 16px;
}

.credential-image-box {
   /* position: absolute;
   width: 100%;
   height: 100%;
   top: 0; */
   position: absolute;
   width: auto;
   height: 108px;
   max-height: 108px;
   top: 5px;
   right: 11px;

}

.credential-image-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* 
 * Section Credentials
 *
 * ============================= */

section.section-contact {

   padding: 80px 0;
   /* background-color: rgba(var(--color-primary-rba), 0.3); */
   background-color: rgba(var(--color-secondary-rba), 0.2);
   /* background-color: var(--color-secondary); */
}

.about-form {
   grid-column: 7 / -1 !important;
}

.contact-section-body {
   margin-top: 60px;
   border-right: 8px solid var(--color-secondary);
}

.contact-section-body .surf-left-pane {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 0 40px 0 0;
   grid-column: 1 / span 4 !important;
   flex-direction: column;
   gap: 24px;

}

.contact-section-body .surf-left-pane p {
   font-size: 20px;
   text-align: center;
   line-height: 1.8;

}

.contact-section-body .surf-right-pane {
   grid-column: 5 / span 6 !important;
}

.contact-section-body .surf-left-pane i {
   font-size: 320px;
   color: rgba(var(--color-secondary-rba), 0.6);
   /* color: rgba(var(--color-primary-rba), 0.8); */
}

/* 
 .section-contact ul {
   list-style: none;
 }

 .section-contact ul li {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 18px;  
 } */

form p {
   margin-bottom: 0.5rem;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
   /* color: var(--color-true-white); */
   height: 38px;
   padding: 6px 10px;
   background-color: rgba(var(--color-secondary-rba), 0.2);
   background-color: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(var(--color-secondary-rba), 0.2);
   ;
   border-radius: var(--border-radius);
   box-shadow: none;
   box-sizing: border-box;
   display: inline-block;
   width: 100%;
   max-width: 100%;
}

@media only screen and (max-width: 860px) {

   .contact-section-body .surf-left-pane {
      /* padding: 0 40px 0 0; */

      grid-column: 1 / -1 !important;
      grid-row: 4;
      align-items: flex-end;
      margin-top: 32px;

   }

   .contact-section-body .surf-right-pane {
      grid-column: 1 / -1 !important;
      grid-row: 3;
   }

   input[type="date"],
   input[type="email"],
   input[type="number"],
   input[type="search"],
   input[type="text"],
   input[type="tel"],
   input[type="url"],
   input[type="password"],
   textarea,
   select {

      width: 90%;
      max-width: 90%;
   }
}

@media only screen and (max-width: 460px) {
   .contact-section-body .surf-left-pane i {
      font-size: 200px;

   }

}