@font-face {
     font-family: 'Gilroy-Bold';
     src: url('public/fonts/Gilroy-Bold.woff2') format('woff2'), url('public/fonts/Gilroy-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-Heavy';
     src: url('public/fonts/Gilroy-Heavy.woff2') format('woff2'), url('public/fonts/Gilroy-Heavy.woff2') format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy_Light';
     src: url('public/fonts/Gilroy-Light.woff2') format('woff2'), url('public/fonts/Gilroy-Light.woff2') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-Medium';
     src: url('public/fonts/Gilroy-Medium.woff2') format('woff2'), url('public/fonts/Gilroy-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-Regular';
     src: url('public/fonts/Gilroy-Regular.woff2') format('woff2'), url('public/fonts/Gilroy-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-ExtraBold';
     src: url('public/fonts/Gilroy-ExtraBold.woff2') format('woff2'), url('public/fonts/Gilroy-ExtraBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-Thin';
     src: url('public/fonts/Gilroy-Thin.woff2') format('woff2'), url('public/fonts/Gilroy-Thin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
}

@font-face {
     font-family: 'Gilroy-ultralight';
     src: url('public/fonts/Gilroy-UltraLight.woff2') format('woff2'), url('public/fonts/Gilroy-UltraLight.woff') format('woff');
     font-weight: 200;
     font-style: normal;
     font-display: swap;
}

* {
     font-family: 'Gilroy-Regular';
}

body {
     font-family: 'Gilroy-Regular';
     font-weight: 400;
     font-size: 16px;
     line-height: 1.3;
     color: #000;
     overflow-x: hidden;
}

a {
     transition: all 0.5s ease-in-out;
}

a,
a:hover,
a:focus {
     text-decoration: none;
}

a:hover,
a:focus {
     color: #F85F1C;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     color: #000;
     line-height: 1.3;
}

h1 {
     font-family: 'Gilroy-Bold';
     font-size: 74px;
     color: #fff;
     font-weight: 700;
     line-height: 1.2;
     letter-spacing: 0;
     margin-bottom: 0;
}

h2 {
     font-family: 'Gilroy-Bold';
     font-weight: bold;
     font-size: 60px;
     line-height: 1.3;
}

h3 {
     font-family: 'Gilroy-Bold';
     font-weight: bold;
     font-size: 50px;
}

h4 {
     font-family: 'Gilroy-Medium';
     font-weight: 500;
     font-size: 36px;
     line-height: 1.3;
}

h5 {
     font-family: 'Gilroy-Bold';
     font-weight: bold;
     font-size: 30px;
     line-height: 1.3;
}

h6 {
     font-family: 'Gilroy-Medium';
     font-size: 24px;
     line-height: 1.3;
}

p {
     font-family: 'Gilroy-Medium';
     font-weight: 500;
     font-size: 28px;
     color: #555555;
     line-height: 1.3;
}

header .navbar-brand {
     padding: 0;
     margin: 0;
}

.navbar-main {
     text-align: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
}

.nav-menu {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     margin: 0 auto;
     text-align: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;
     justify-content: space-around;
}

a.nav-link {
     color: #fff;
     text-decoration: none;
     font-size: 1.5rem;
     -webkit-transition: 0.5s;
     transition: 0.5s;
}

.nav-link:focus,
.nav-link:hover {
     color: #F85F1C;
}

.nav-menu>li {
     list-style: none;
     padding: 0;
     margin-right: 3rem;
}

.navbar-nav .dropdown-menu li {
     margin-bottom: 10px;
}

.navbar-nav .dropdown-menu li:last-child {
     margin-bottom: 0;
}

.navbar-nav .dropdown-menu {
     padding: 0.8rem 0;
}

.nav-menu li:last-child {
     margin-right: 0;
}

.nav-menu li a.nav-link {
     padding: 0;
}

.navbar .dropdown-item:hover {
     background-color: #070D24;
     color: #fff;
}

header {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 9;
     width: 100%;
}

nav.navbar {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     justify-content: space-between;
     margin: 0;
     padding: 65px 100px;
     text-align: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

ul {
     margin-bottom: 0;
     padding: 0;
}

.main-banner {
     height: 100vh;
     background-color: #070D24;
     display: flex;
     align-items: flex-end;
     padding: 0 110px 120px 110px;
     position: relative;
     overflow: hidden;
     z-index: 1;
}

.main-banner:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     background: rgba(7, 13, 36, 0.6);
}

.chemical-animated {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: auto !important;
     object-fit: cover;
     z-index: -1;
}

.chemical-excellence-span {
     color: #fff;
     text-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.25);
     font-size: 100px;
     font-family: 'Gilroy-Bold';
     letter-spacing: 8px;
}

.chemical-excellence-second {
     text-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.25);
     font-size: 100px;
     /* font-family: Michroma; */
     font-family: 'Gilroy-Bold';
     letter-spacing: 8px;
     font-size: 118px;
     -webkit-text-stroke: 2px #fff;
     text-stroke: 2px #000;
}

.chemical-excellence .Distribted {
     margin-top: 10px;
}

.Distribted span {
     color: #FFF;
     text-align: center;
     text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     font-size: 58px;
     font-family: 'Gilroy-Bold';
     font-weight: 500;
     line-height: 1.3;
     letter-spacing: 4.64px;
}

.Distribted p {
     width: 70%;
     color: #F9F9F9;
     line-height: 1.5;
     margin: 15px 0 0;
}

.globally-trust {
     flex-direction: column;
     align-items: flex-end;
}

.globally-trust p {
     width: 67%;
     text-align: right;
     padding-bottom: 60px;
     flex-direction: column;
     align-items: flex-end;
}

.reliable-section {
     padding: 105px 106px;
     position: relative;
     background-color: #fff;
}

.reliable-rebust {
     align-items: flex-end;
     flex-direction: column;
}

.reliable-rebust h2 {
     width: 50%;
     padding-bottom: 15px;
     color: #000000;
     font-family: 'Gilroy-Bold';
     font-weight: 400;
     letter-spacing: 0em;
     flex-direction: column;
     align-items: flex-end;
     text-align: right;
}

.chemical-excellence {
     width: 100%;
}

.take-a-guided-tour-of-our-products {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 15px;
}

.guide-tour .tour-button {
     padding: 15px 15px 15px 45px;
     border-radius: 56px;
     border: 2px solid var(--white, #FFF);
     display: inline-flex;
     align-items: center;
}

.guide-tour .tour-button .b-text {
     color: #FFF;
     font-size: 24px;
     font-family: 'Gilroy-Medium';
}

.tour-button .arrow-right {
     width: 58px;
     min-width: 58px;
     height: 58px;
     line-height: 58px;
     border-radius: 50%;
     background: #fff;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 20px;
}

.empowering-distribution-seamlessly {
     color: #131323;
     text-align: center;
     font-size: 60px;
     font-family: Gilroy-Bold;
     letter-spacing: -1.8px;
     padding-top: 180px;
     align-items: center;
     margin: auto;
}

.oc-is-a-multi-product-specialty-chemical-distribution-company-adding-value-with-distribution-globally-with-strategic-sourcing-partnership-from-best-principals-we-have-made-foray-into-different-industries-with-robust-precision-while-continuing-to-consolidate-leadership-in-our-chemical-product-spectrum {
     color: #131323;
     text-align: center;
     font: 400 30px/44px;
     font-family: 'Gilroy-Medium, sans-serif';
     width: 1138px;
     color: #131323;
     text-align: center;
     font-size: 30px;
     font-family: Gilroy-Medium;
     line-height: 44px;
     letter-spacing: -0.6px;
     margin: auto;
}

.group-99 {
     height: 100vh;
     position: relative;
}

.centered-text {
     width: 105%;
     position: absolute;
     top: 67%;
}

.centered-text span {
     width: 531px;
     left: 0px;
     top: 531px;
     writing-mode: vertical-rl;
     transform: rotate(-180deg);
     position: absolute;
     transform: rotate(-90deg);
     transform-origin: 0 0;
     color: #131323;
     font-size: 60px;
     font-family: Gilroy-Bold;
     font-weight: 400;
     word-wrap: break-word;
}

.logo {
     color: #fff;
     font-size: 1.5rem;
     font-weight: bold;
}

.hamburger {
     display: none;
}

.bar,
.fa-times {
     width: 1.5rem;
     height: 3px;
     display: block;
     color: #fff;
     padding: 0;
     margin: 6px;
     -webkit-transition: 0.5s;
     transition: 0.5s;
     background-color: #fff;
}

.bar:nth-child(1) {
     width: 100%;
}

.bar:nth-child(2) {
     width: 200%;
}

.bar:nth-child(3) {
     width: 300%;
}

.loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader.loading-stop {
     display: none;
}

.page-index .distribution-link {
     display: none;
}


/* .video-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: -1;
   overflow: hidden;
}

.video-container video {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
   background-repeat: no-repeat;
} */

.chemical-excellence-span {
     color: #fff;
     font-size: 100px;
     font-family: 'Gilroy-Bold';
     letter-spacing: 8px;
}

.chemical-excellence-second {
     font-size: 100px;
     font-family: 'Gilroy-Bold';
     letter-spacing: 8px;
     -webkit-text-stroke: 2px #fff;
}

.Distribted span {
     color: #FFF;
     text-align: center;
     font-size: 48px;
     font-family: 'Gilroy-Bold';
     font-weight: 500;
     letter-spacing: 4.64px;
}

.chemical-excellence {
     width: 100%;
     position: relative;
     z-index: 99;
}

.empowering-distribution-seamlessly {
     color: #131323;
     text-align: center;
     font-size: 60px;
     font-family: 'Gilroy-Bold';
     letter-spacing: -1.8px;
     padding-top: 180px;
     align-items: center;
     margin: auto;
}

.oc-is-a-multi-product-specialty-chemical-distribution-company-adding-value-with-distribution-globally-with-strategic-sourcing-partnership-from-best-principals-we-have-made-foray-into-different-industries-with-robust-precision-while-continuing-to-consolidate-leadership-in-our-chemical-product-spectrum {
     color: #131323;
     text-align: center;
     font: 400 30px/44px;
     font-family: 'Gilroy-Medium, sans-serif';
     width: 1138px;
     color: #131323;
     text-align: center;
     font-size: 30px;
     font-family: 'Gilroy-Medium';
     letter-spacing: -0.6px;
     margin: auto;
}

.group-99 {
     height: 100vh;
     position: relative;
}

.centered-text {
     width: 105%;
     position: absolute;
     top: 67%;
     writing-mode: vertical-rl;
     transform: rotate(-180deg);
}

.centered-text span {
     color: #131323;
     text-align: center;
     font-size: 36px;
     font-family: 'Gilroy-Bold';
}

.row-section {
     position: absolute;
     left: 15%;
     top: 55%;
     bottom: auto;
}

.number-box strong {
     color: #121223;
     font-size: 115px;
     font-family: 'Gilroy-Bold';
}

.column-box.container-fluid {
     padding-left: 390px;
}

.center-text {
     position: absolute;
     bottom: 0;
     writing-mode: vertical-rl;
     transform: rotate(-180deg);
     left: 0;
     height: 370px;
}

.center-text span {
     color: #131323;
     text-align: center;
     font-size: 36px;
     font-family: Gilroy-Bold;
}

.first-row-number {
     margin-bottom: 10%;
}

.numberbox-one {
     width: 100%;
     display: block;
     text-align: center;
}

.numberbox-one .n-text {
     font-size: 30px;
     font-weight: 600;
     font-family: 'Gilroy-Medium';
     text-align: center;
}

.numberbox-one h2 {
     font-size: 115px;
     font-family: 'Gilroy-Bold';
}

.numberbox-one sub {
     font-size: 30px;
     font-family: 'Gilroy-Bold';
}

.number-second-box {
     display: flex;
     justify-content: center;
     margin-top: 7%;
}

.row-section {
     position: absolute;
     left: 15%;
     top: 55%;
     bottom: auto;
}

.number-box strong {
     color: #121223;
     font-size: 115px;
     font-family: Gilroy-Bold;
}

.column-box.container-fluid {
     padding-left: 390px;
}

.center-box {
     width: 20.33%;
     margin: 15px 15px;
     flex: 20.33%;
}

.empowring-text h2 {
     width: 45%;
     color: #131323;
     text-align: right;
     font-size: 60px;
     font-family: 'Gilroy-Bold';
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}

.group-110 {
     padding: 150px 0;
}

.our-success .box {
     width: 346px;
     min-width: 346px;
     height: 346px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 100px;
}

.empowring-text p {
     width: 50%;
     margin: auto;
     color: #131323;
     text-align: center;
     font-size: 30px;
     font-family: Gilroy-Medium;
     font-style: normal;
     font-weight: 400;
     line-height: 44px;
     letter-spacing: -0.6px;
}

.our-success .box h3 {
     color: #ffffff;
     text-align: center;
     font: 400 30px "Gilroy-ExtraBold", sans-serif;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     top: 50%;
     margin: 0;
     width: 100%;
     display: block;
     line-height: 1.5;
     z-index: 9;
}

.our-success,
.personal-care-tabs {
     background-color: #070D24;
     color: #fff;
     padding: 150px 100px 50px;
     position: relative;
     z-index: 1;
}

.personal-care-tabs {
     padding: 150px 100px 150px;
}

.request-quote-wrapper {
     padding: 150px 100px 150px;
}

.our-success .box h3::after {
     background: rgba(248, 95, 28, 0.4);
     border-radius: 50%;
     opacity: 0.8999999761581421;
     width: 145.68px;
     height: 145.68px;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     top: 50%;
     filter: blur(37.5px);
     content: '';
     z-index: -1;
}

.our-success .box::after {
     content: '';
     border-radius: 50%;
     border-style: dashed;
     border-color: #ffffff;
     border-width: 1px;
     opacity: 0.4000000059604645;
     width: 230.67px;
     height: 230.67px;
     position: absolute;
     /* left: 50%;
     transform: translate(-50%, -50%);
     top: 50%; */
     left: 0;
     right: 0;
     display: block;
     margin: 0 auto;
     -webkit-animation: spin-reverse 10s linear infinite;
     -moz-animation: spin-reverse 10s linear infinite;
     animation: spin-reverse 10s linear infinite;
}

.our-success .box::before {
     border-radius: 50%;
     border-style: dashed;
     border-color: #ffffff;
     border-width: 1px;
     opacity: 0.30000001192092896;
     width: 346px;
     height: 346px;
     position: absolute;
     left: 0;
     content: '';
     top: 0;
     -webkit-animation: spin 15s linear infinite;
     -moz-animation: spin 15s linear infinite;
     animation: spin 15s linear infinite;
}

.container.counter-container {
     margin-right: 0;
     margin-left: auto;
}

.main-title {
     margin-bottom: 75px;
}

.main-title .title {
     margin-bottom: 30px;
}

.main-title.dark p,
.main-title.dark .title {
     color: #F9F9F9;
}

section.client-section {
     padding: 150px 85px;
}

.list-logo-img li {
     list-style-type: none;
     width: 20%;
}

.list-logo-img li img {
     width: 100%;
}

ul.list-logo-img.d-flex {
     padding-left: 0px;
}

.leader-icon {
     margin-top: 40px;
}

.leader-icon .list-logo-img {
     display: flex;
     flex-wrap: wrap;
}

.leader-name.second-sec {
     margin-top: 100px;
}

.leader-name h3 {
     font-size: 40px;
}

.serving-sector {
     background: #121223;
     padding: 150px 85px 0;
     overflow: hidden;
}

.serving-box {
     padding: 0 15px;
     border-radius: 10px;
     margin-bottom: 30px;
}

.serving-box .serv-category {
     color: #fff;
     position: absolute;
     bottom: 45px;
     right: 45px;
}

.serving-box img {
     width: 100%;
     border-radius: 10px;
     height: 100%;
     object-fit: cover;
}

.serving-items {
     display: flex;
     width: 100%;
}

.serving-box {
     cursor: pointer;
     min-height: 524px;
     height: 524px;
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     transition: all 0.6s ease;
}

.serving-items .serving-box.big {
     width: 70%;
}

.serving-items .serving-box.small {
     width: 30%;
}

.serving-items .serving-box img {
     width: 100%;
}


/* .serving-items.small-hover .serving-box {
     transition: all 0.6s ease;
} */

.serving-items.small-hover .serving-box.small {
     width: 70%;
}

.serving-items.small-hover .serving-box.big {
     width: 30%;
}

.serving-items.big-hover .serving-box.big {
     width: 70%;
}

.serving-items.big-hover .serving-box.small {
     width: 30%;
}


/* 
.serving-items.small-hover .serving-box.big img {
     object-position: 88% 100%;
} */


/*.serving-box.big:hover{
     width: 30%;
}*/


/*.serving-box.big:hover ~ .serving-box.small{
    width: 70%;
}*/


/*.serving-box:has(+ .small:hover) img{
     object-position: 88% 100%; 
}*/

.serving-sector .serv-slider-main {
     height: 100vh;
}

.serving-slider-wrapper {
     position: relative;
}

.serving-slider-wrapper .slide-text h4 {
     margin-bottom: 25px;
}

.serving-slider-wrapper .slide-text p {
     color: #f9f9f9;
     line-height: 1.5;
}

.serving-slider-wrapper .slide_item {
     display: block;
     width: 100%;
     position: absolute;
     left: 0;
     right: 0;
     transition: transform 1.2s;
}

.serving-slider-wrapper .slide_item .slide-img img {
     width: 335px;
     border-radius: 40px;
}

.serving-slider-wrapper .slide_item .slide-img {
     width: 335px;
     border-radius: 40px;
     transition: transform 1.2s;
     position: relative;
}

.serving-slider-wrapper .slide_item .slide-img:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     border-radius: 40px;
}

.serving-slider-wrapper .slide_item:first-child .slide-img:before {
     content: none;
}


/* .serving-slider-wrapper .slide_item .slide-img img {
     width: 100%;
} */

.serving-slider-wrapper .slide_item:first-child .slide-img img {
     opacity: 1;
}

.serving-slider-wrapper .slide_item:first-child .slide-img {
     transform: rotate(20deg) translateX(0px) !important;
}

.serving-slider-wrapper .slide_item[data-position="2"] .slide-img {
     transform: rotate(20deg) translate(5%, -5%);
}

.serving-slider-wrapper .slide_item[data-position="3"] .slide-img {
     transform: rotate(20deg) translate(10%, -10%);
}

.serving-slider-wrapper .slide_item[data-position="4"] .slide-img {
     transform: rotate(20deg) translate(15%, -15%);
}

.serving-slider-wrapper .slide_item[data-position="5"] .slide-img {
     transform: rotate(20deg) translate(20%, -20%);
}

.serving-slider-wrapper .slide_item .slide-space {
     padding-left: 100px;
}

.serving-slider-wrapper .slide_item:first-child {
     z-index: 10 !important;
}

.serving-slider-wrapper .slide_item[data-position="2"] {
     z-index: 9;
}

.serving-slider-wrapper .slide_item[data-position="3"] {
     z-index: 8;
}

.serving-slider-wrapper .slide_item[data-position="4"] {
     z-index: 7;
}

.serving-slider-wrapper .slide_item[data-position="4"] {
     z-index: 6;
}

.serving-slider-wrapper .slide-content {
     padding: 0;
     overflow: hidden;
     height: 100%;
}

.slider-title {
     position: absolute;
     top: 28%;
}

.serving-slider-wrapper .slide_item .slide-content .s-desc {
     position: absolute;
     width: 45%;
     visibility: hidden;
     padding-top: 140px;
}

.serving-slider-wrapper .slide_item:first-child .slide-content .s-desc {
     visibility: visible;
     -webkit-animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     /* animation: text-clip 0.5s 0s cubic-bezier(0.5, 0, 0.1, 1) both; */
}

#serv-dots {
     position: absolute;
     z-index: 12;
     cursor: default;
     top: 50%;
     transform: translateY(-50%);
     right: 0;
     display: flex;
     flex-direction: column;
     gap: 30px;
}

#serv-dots li,
.cv-slider .swiper-pagination-bullet {
     display: inline-block;
     width: 30px;
     height: 30px;
     background: transparent;
     border: 2px solid #f9f9f9;
     border-radius: 50%;
     position: relative;
}

#serv-dots li:before,
.cv-slider .swiper-pagination-bullet:before {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     right: 0;
     width: 6px;
     height: 6px;
     display: block;
     border-radius: 50%;
     background: #F9F9F9;
     filter: blur(2px);
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.cv-slider .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
     border-color: rgba(18, 18, 35, 1);
     opacity: 1;
     margin-bottom: 25px;
}

.cv-slider .swiper-pagination-bullet:last-child {
     margin-bottom: 0;
}

.cv-slider .swiper-pagination-bullet:before {
     background: rgba(18, 18, 35, 1);
}

#serv-dots li:hover {
     cursor: pointer;
}

#serv-dots li:hover:before,
.cv-slider .swiper-pagination-bullet:hover:before,
#serv-dots li.active:before,
.cv-slider .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
     opacity: 1;
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
     right: auto;
     left: 0;
}

.bg_globe {
     width: 100%;
     height: 891px;
     z-index: 1;
     position: relative;
     background-image: url('public/images/global_network.png');
     background-size: cover;
     background-position: center;
}

.bg_globe::after {
     content: '';
     position: absolute;
     background-color: rgba(0, 0, 0, 0.5);
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     z-index: -1;
}

.content_globe {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 80%;
     margin: 0 auto;
     height: 100%;
}

span.text_add {
     font-family: 'Gilroy-Bold';
     text-align: center;
     display: block;
}

.sub_content_globe {
     display: flex;
     flex-direction: column;
     text-align: center;
     width: 71%;
}

p.middle_space {
     margin-bottom: 30px;
     margin-top: 20px;
}

.bg_globe p {
     color: #f9f9f9;
}

.map-wrapper .m-desc {
     margin-top: 30px;
}

.map-wrapper {
     padding: 150px 85px;
}

.creating_bonds_sec.container {
     padding: 150px 0;
}

.both_content {
     margin: auto;
     text-align: center;
}

.bonds_content {
     width: 74%;
     text-align: center;
     margin: auto;
     margin-top: 27px;
     margin-bottom: 60px;
}

.get_btn {
     font-family: 'Gilroy-Bold';
     font-weight: 400;
     font-size: 24px;
     border-radius: 41px;
     background: #121223;
     color: #fff;
     border: 1px solid #121223;
     padding: 20px 42px;
     display: inline-block;
}

a.get_btn:hover,
.get_btn:focus {
     color: #fff;
     border-color: #121223;
}

.scroll-arrow-down {
     position: absolute;
     bottom: 12%;
     left: 50%;
     transform: translateX(-50%);
     width: 57px;
     height: 57px;
     border: 2px solid rgba(18, 18, 35, .85);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 99;
}


/*****************About Us***************/

.text-bold {
     font-weight: bold;
}

.m-b {
     margin-bottom: 0;
}

.main-wrapper {
     position: relative;
     padding: 220px 0 150px;
}

.bg-blue {
     background: #121223;
}

img.lagacy_img {
     width: 60%;
     height: 568px;
     border-radius: 20px;
}

.legacy_section.container-fluid {
     margin: auto;
     text-align: center;
}

.title_lagacy {
     width: 35%;
     text-align: center;
     margin-bottom: 15px;
}

.between-space {
     margin-top: 20px;
     margin-bottom: 70px;
     padding: 0 24%;
     font-size: 34px;
}

p.middle_space {
     margin-bottom: 30px;
     margin-top: 20px;
}

.profile_section.container-fluid {
     padding: 130px 30px;
}

.name_director {
     text-align: end;
     margin-top: 20px;
}

.name_director p {
     color: #131313;
}

p.space_profile {
     margin-top: 40px;
     margin-bottom: 30px;
}

.director_img {
     text-align: center;
}

.content_profile.new_p {
     width: 100%;
}

.vision_mission_sec.container-fluid {
     background: #121223;
     padding: 150px 100px;
}

img.vision_img {
     width: 100%;
     mix-blend-mode: overlay;
}

.img_eye {
     margin-left: auto;
     width: 60%;
}

.img_eye.fill_circle::before {
     top: 40px;
}

.fill_circle {
     position: relative;
}

.fill_circle::before {
     position: absolute;
     content: '';
     border-radius: 200px;
     opacity: 0.4;
     background: #F85F1C;
     filter: blur(50px);
     width: 200px;
     height: 200px;
     top: 71px;
}

.vision_part {
     width: 92%;
}

.img_mission {
     width: 60%;
}

.mission_part {
     text-align: end;
}

.both_space {
     margin-top: 150px;
}

h2.before_space {
     margin-bottom: 25px;
}

.our_leaders_sec.container-fluid {
     padding: 150px 100px;
}

.w_space {
     width: 40%;
}

.card-1 {
     padding-top: 75px;
     text-align: center;
}

.card-1 .img_leader.img-02 {
     opacity: 0;
     position: absolute;
     transition: all 0.5s ease;
}

.card-1 .img_leader.img-01 {
     backface-visibility: hidden;
     transition: all 0.5s ease-in-out;
}


/* .our_leaders_sec .card-1:hover .img-02 {
     opacity: 1;
}

.our_leaders_sec .card-1:hover .img-01 {
     opacity: 0;
} */

.rectangle {
     position: relative;
     height: 480px;
     border-radius: 24px;
     background: linear-gradient(180deg, #DFC5AA 0%, #E7A158 100%);
     text-align: center;
}

.img_leader {
     margin-top: 0;
     width: 90%;
     position: absolute;
     bottom: 0px;
     left: 50%;
     transform: translateX(-50%);
}

.core_team .img_leader {
     width: 80%;
}

.over_flow {
     overflow: hidden;
}

.leaders_name {
     margin-top: 30px;
}

.core_team .team-1.two .img_leader {
     bottom: -5px;
}

.core_team .team-1.three .img_leader {
     bottom: -14px;
}

.row.direction {
     justify-content: end;
}

.core_team {
     padding-top: 100px;
}

.core_team .content_leaders {
     margin-bottom: 75px;
}

.core_team .rectangle {
     height: 465px;
}

.core_team .leaders_name {
     text-align: center;
}

.core_img {
     width: 100%;
     border-radius: 24px;
}

.team_1 {
     text-align: center;
     padding-top: 50px;
}

.main-wrapper {
     height: 100vh;
     z-index: 1;
}

.main-wrapper:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     background-size: cover;
     background-position: center center;
     width: 100%;
     height: 100%;
     transition: transform 1s cubic-bezier(.19, 1, .22, 1);
     transform: translateY(100%);
     will-change: transform;
     z-index: -1;
}

.main-wrapper.mainBannerLoaded:before {
     transform: translateY(0);
}

.main-wrapper.about-bg:before {
     background: #121223 url('public/images/about-us-bg.png') center no-repeat;
}

.main-wrapper.product-bg:before {
     background: #121223 url('public/images/product-bg.png') center no-repeat;
}

.main-wrapper.personal-bg:before {
     background: #121223 url('public/images/personal-care-bg.png') center no-repeat;
}

.main-wrapper.pro-details {
     height: 70vh;
}

.main-wrapper .legacy_section {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     flex-direction: column;
     height: 100%;
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.main-wrapper.mainBannerLoaded .legacy_section {
     opacity: 1;
     transition-delay: 0.3s;
}

.core_values_slider {
     height: 100vh;
     padding: 150px 100px 150px;
}

.core_sec {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     padding: 0;
}

.cv-slider {
     height: 60vh;
}

.synergy_content {
     text-align: end;
}

.space_synergy {
     margin-bottom: 25px;
}

.row.align_space {
     padding-top: 0;
     align-items: center;
}

.img_values {
     width: 40%;
     text-align: center;
     margin: auto;
}


/* img.values_img {
     width: 100%;
} */

.sparsh_gif_part {
     align-items: center;
     display: flex;
     justify-content: center;
}

img.image_sparsh {
     position: absolute;
     width: 200px;
}

.gif_sparsh {
     width: 50%;
}

img.values_img {
     width: 80%;
}


/* personal-care */

.title_lagacy.add-title {
     justify-content: center;
     text-align: center;
     width: 65%;
     margin: 0 auto 35px;
}

.discription_lagacy.add-lagacy {
     justify-content: center;
     margin: auto;
     width: 65%;
}

.between-space.add-disc {
     padding: 0;
}

.life-at-oc.container-fluid {
     padding: 140px 0px;
}

.routing_space {
     margin-bottom: 30px;
}

.profile_section.container-fluid {
     padding: 150px 90px;
}

.full-img {
     position: relative;
     background-image: url('public/images/personal_care.png');
     background-position: center;
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 250px 100px;
     z-index: 1;
}

.full-img::after {
     position: absolute;
     content: '';
     top: 0;
     left: 0;
     right: 0;
     background-image: url('public/images/personal_care.png');
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: -1;
}

.peronal_care_sec .routing_space {
     margin-bottom: 20px;
}

p.space_profile {
     margin-top: 30px;
     margin-bottom: 30px;
}

.director_img {
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

.director_img video {
     width: 80%;
     height: 100%;
}

.director_img.about_img .profile_img {
     position: absolute;
     width: 77%;
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.profile_section.scrolled .director_img.about_img .profile_img {
     opacity: 1;
     transition-delay: 1.2s;
}

.content_profile {
     width: 90%;
}

.care-routine-heading.text-center {
     margin: auto;
     text-align: center;
     width: 66%;
}


/**********footer************/

footer.container-fluid.footer-wrapper {
     padding-left: 0;
     padding-right: 00;
}

.inner-footer.bg-blue {
     padding: 75px 100px 21px 100px;
}

.card-text {
     width: 58%;
     color: #F9F9F9;
     font-family: 'Gilroy-Medium';
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     padding: 0 0 50px;
}

.logo-img {
     width: 100%;
}

.quick-link-list {
     padding-top: 0;
}

footer .logo-img {
     width: 80%;
}

a.manufacturing-button {
     padding: 26px 35px;
     background-color: #fff;
     border-radius: 54px;
     color: #121223;
     font-family: 'Gilroy-Bold';
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     display: inline-block;
}

.address {
     padding-left: 0;
}

.address li {
     color: #F9F9F9;
     font-family: 'Gilroy-Medium';
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     list-style-type: none;
}

.quick-link-list {
     list-style-type: none;
     margin: 0;
     padding: 0
}

.quick-link-list li {
     color: #F9F9F9;
     font-family: Gilroy-Medium;
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding-bottom: 10px;
}

.bottom-left,
.copyright-inner {
     display: flex;
     gap: 30px;
}

.bottom-left li {
     color: #fff;
     list-style-type: none;
}

.social-links-tag {
     display: flex;
     justify-content: flex-end;
}

.social-links-tag li {
     padding-right: 35px;
}

.social-links-tag li:last-child {
     padding-right: 0;
}

p.company-address {
     font-size: 18px;
}

.heading {
     color: #fff;
     color: #F9F9F9;
     font-family: Gilroy-Bold;
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 15px;
}

footer p {
     color: #f9f9f9;
}

footer .address {
     margin-bottom: 20px;
}

.f-bottom-line {
     border-top: 1px solid rgba(249, 249, 249, 0.35);
     padding-top: 30px;
}

.js-scroll.scrolled .fadeInUp {
     -webkit-animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
     animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

footer .bottom-left a,
.quick-link-list a {
     color: #fafafa;
}

.quick-link-list a:hover {
     color: #F85F1C;
}


/*********Personal Care****************/

.personal-care-category {
     display: flex;
     flex-direction: column;
     gap: 30px;
     text-align: left;
}

.personal-care-category .cat-item {
     color: rgba(255, 255, 255, 0.7);
     font-size: 26px;
     letter-spacing: 0.03em;
     padding: 0;
     position: relative;
     background: transparent;
     border: none;
     display: inline-block;
     text-align: left;
     transition: all 0.5s ease-in;
}

.personal-care-category .cat-item.is-checked {
     font-family: 'Gilroy-Medium';
     font-weight: 500;
     font-size: 40px;
     color: #fff;
}

.personal-care-category .cat-item:focus {
     border: none;
}

.p-tabs-wrapper {
     width: 100%;
}

.personal-care-category .cat-item:hover {
     color: #fff;
}

.personal-care-tabs .grid {
     display: flex;
}

.personal-care-tabs .product-item {
     padding: 0 13px;
     width: 50%;
}

.personal-care-tabs .product-item a:hover {
     cursor: auto;
}

.personal-care-tabs .product-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     border: 1px solid rgba(249, 249, 249, 0.4);
     padding: 25px 30px 25px 60px;
     margin-bottom: 20px;
     border-radius: 60px;
     box-shadow: 0px 4px 10px 0px rgba(249, 249, 249, 0.15);
}

.personal-care-tabs .product-box .p-text {
     color: #fff;
     margin-bottom: 0;
}

.personal-care-tabs .product-box .P-desc {
     font-family: 'Gilroy-Medium';
     font-weight: 500;
     font-size: 20px;
     letter-spacing: 0.02em;
     margin-top: 5px;
     margin-bottom: 0;
     color: #fff;
}

.personal-care-tabs .product-box img {
     width: 12%;
     opacity: 0.6;
}

.main-wrapper.terms .title_lagacy.add-title {
     width: 100%;
}

.main-wrapper.terms {
     height: 60vh;
}

.terms-wrapper {
     padding: 150px 0;
}

.personal-care-category .cat-item .active-circle {
     position: absolute;
     left: -11%;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 2px solid rgba(248, 95, 28, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: -1;
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.personal-care-category .cat-item.is-checked .active-circle {
     opacity: 1;
}

.personal-care-category .cat-item .active-circle:after {
     content: '';
     width: 20px;
     height: 20px;
     background: rgba(248, 95, 28, 0.4);
     display: block;
     border-radius: 50%;
     filter: blur(3px);
}

.personal-care-tabs.product-tabs {
     padding: 150px 100px 150px;
}

.product-tabs .main-title .title {
     margin-bottom: 20px;
}

.product-tabs .search-inner {
     margin-bottom: 100px;
}

.product-tabs.personal-care-tabs .search-inner {
     margin-bottom: 150px;
}

.product-item .p-text::after {
     display: block;
     clear: both;
     content: "";
}

.pro-select-box {
     width: 60%;
}

.sticky-element {
     transition: all 0.25s ease-in-out;
}

.quote-btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 15px;
     border: 1px solid rgba(249, 249, 249, 0.4);
     padding: 15px 30px;
     border-radius: 60px;
     box-shadow: 0px 4px 10px 0px rgba(249, 249, 249, 0.15);
}

.quote-btn .btn-text {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0;
}

.product-form {
     gap: 30px;
}

.main-title.form-title {
     margin-bottom: 40px;
}


/******* Select 2*********/

.product-form .quote-btn {
     border-radius: 30px;
     padding: 10px 30px;
     font-size: 22px;
     background: transparent !important;
}

.search-box .quicksearch,
.pro-select-box .select2-container--default .select2-selection--single {
     background: transparent;
     border: 1px solid rgba(249, 249, 249, 0.4);
     padding: 20px 30px 15px 80px;
     border-radius: 30px;
     box-shadow: 0px 4px 10px 0px rgba(249, 249, 249, 0.15);
     width: 100%;
     color: #fff !important;
}

.modal-header .btn-close:focus {
     box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: #fff transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     border-color: transparent transparent #fff transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #fff !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
     border-bottom-width: 0 !important;
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
}

.select2-dropdown {
     background-color: #121223 !important;
     border-color: rgba(249, 249, 249, 0.4) !important;
     color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
     background-color: #fff !important;
     color: #121223 !important;
}

.select2-container--default .select2-results__option--selectable {
     margin-bottom: 10px;
}

.select2-container--open .select2-dropdown--below {
     border-top: none !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
     padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
     background: transparent;
     border-radius: 5px;
     color: #f9f9f9;
     padding: 8px !important;
}

.select2-container--default .select2-results>.select2-results__options {
     padding: 10px 0 0;
}

.select2-container {
     width: 100%!important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
     outline: #fff !important;
}

.pro-select-box .select2-container--default .select2-selection--single {
     padding: 15px 20px 15px 20px;
     height: 57px;
}

.pro-select-box .select2-container--default .select2-selection--single .select2-selection__arrow {
     top: 50%;
     transform: translateY(-50%);
     right: 2.5%;
}

.search-box .quicksearch::placeholder {
     color: #fff !important;
}

.search-box .quicksearch::placeholder {
     font-size: 24px;
     font-family: 'Gilroy-Medium';
     letter-spacing: 0.02em;
     color: rgba(255, 255, 255, 0.7);
}

.search-box .search-icon {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 30px;
}

.request-form label,
.request-form .form-control::placeholder {
     font-family: 'Gilroy-Medium';
     font-size: 20px;
     letter-spacing: 0.05;
}

.request-form label {
     color: rgba(18, 18, 35, 1);
     text-transform: none;
     margin-bottom: 25px;
}

.request-form .form-control::placeholder {
     color: rgba(18, 18, 35, 0.25);
}

.request-form .form-control {
     border: none;
     border-bottom: 1px solid rgba(18, 18, 35, 1);
     padding: 0 0 15px 0;
     border-radius: 0;
}

.request-form .form-control:focus {
     border: none;
     box-shadow: none;
     border-bottom: 1px solid rgba(18, 18, 35, 1);
}

.request-form .form-group {
     margin-bottom: 35px;
}

.request-form .form-group:last-child {
     margin-bottom: 0;
}

.together-is-better .request-form .form-group {
     margin-bottom: 55px;
}


/***** contact-us page ******/

.together-is-better.container-fluid {
     padding: 220px 100px 55px;
     background: #121223;
}

.get_btn.bg-white {
     color: #121223;
}

.request-form .form-control.new_one {
     border-bottom: 1px solid rgb(255, 255, 255);
     padding: 0 0 15px 0;
     border-radius: 0;
     background: transparent;
     border-right: none;
     border-left: none;
     caret-color: #fff;
     color: #fff
}

.form-control.new_one::placeholder {
     color: rgba(249, 249, 249, 0.25);
}

.img_contactus {
     width: 100%;
}

#contact-form {
     padding-right: 80px;
}

.modal-body {
     padding: 3rem 1.5rem;
}

.modal-header {
     padding: 1rem 1.5rem;
}

.request-form label {
     margin-bottom: 10px;
}

.product-form .quote-btn:focus-visible {
     outline: transparent;
}

.product-detail-wrapper {
     padding: 150px 100px 150px;
}

.pro-label {
     display: flex;
     align-items: center;
     gap: 30px;
     margin-bottom: 15px;
}

.pro-label .label {
     font-family: 'Gilroy_Light';
     font-size: 27px;
     font-weight: 300;
     letter-spacing: 0.02em;
}

.pro-label .value,
.pro-label .label {
     color: #fff;
}

.pro-sec-right {
     padding-left: 60px;
}

.pro-specification-table {
     margin-top: 100px;
}

.product-detail-wrapper .main-title .title {
     margin-bottom: 15px;
}

.product-detail-wrapper .pro-desc {
     font-size: 20px;
}

.pro-specification-table table tr {
     border-color: rgba(249, 249, 249, 0.4);
}

.pro-specification-table .table>:not(caption)>*>* {
     padding: 1rem 1rem;
}

.pro-specification-table .table>thead {
     background: #fff;
}

.pro-specification-table .table>thead th {
     color: #121223;
     font-size: 20px;
}

.pro-specification-table .table-bordered>:not(caption)>*>* {
     color: #f9f9f9;
}

.product-detail-wrapper .get_btn {
     background: #fff;
     border-color: #fff;
     color: #121223;
}

.pro-details .title_lagacy.add-title {
     width: 100%;
}

.page-terms-conditions header,
.page-privacy-policy header {
     position: static;
}

.page-terms-conditions header nav.navbar,
.page-privacy-policy header nav.navbar {
     background: #070D24;
     padding: 25px 100px;
}

.terms-wrapper strong {
     color: #000;
}

.correct-ic {
     margin: 0 auto 20px;
     width: 15%;
}

.button-block {
     display: flex;
     align-items: center;
     position: relative;
}

.submit-loader {
     width: 32px;
     height: 32px;
     clear: both;
     display: inline-block;
     margin-left: 32px;
     border-radius: 50%;
     border-top: 16px rgba(18, 18, 35, 0.75) solid;
     border-left: 16px rgba(18, 18, 35, 0.25) solid;
     border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
     border-right: 16px rgba(18, 18, 35, 0.25) solid;
     -webkit-animation: spSlices 1s infinite linear;
     animation: spSlices 1s infinite linear;
}

.together-is-better .submit-loader {
     -webkit-animation: spSlicesWhite 1s infinite linear;
     animation: spSlicesWhite 1s infinite linear;
}


/*************Animation************/

@keyframes text-clip {
     from {
          clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
     }
     to {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     }
}

@-webkit-keyframes fadeInUp {
     0% {
          opacity: 0;
          -webkit-transform: translate3d(0, 80%, 0);
          transform: translate3d(0, 80%, 0)
     }
     to {
          opacity: 1;
          -webkit-transform: translateZ(0);
          transform: translateZ(0)
     }
}

@keyframes fadeInUp {
     0% {
          opacity: 0;
          -webkit-transform: translate3d(0, 80%, 0);
          transform: translate3d(0, 80%, 0)
     }
     to {
          opacity: 1;
          -webkit-transform: translateZ(0);
          transform: translateZ(0)
     }
}

@-moz-keyframes spin {
     100% {
          -moz-transform: rotate(360deg);
     }
}

@-webkit-keyframes spin {
     100% {
          -webkit-transform: rotate(360deg);
     }
}

@keyframes spin {
     100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
     }
}

@-moz-keyframes spin-reverse {
     100% {
          -moz-transform: rotate(-360deg);
     }
}

@-webkit-keyframes spin-reverse {
     100% {
          -webkit-transform: rotate(-360deg);
     }
}

@keyframes spin-reverse {
     100% {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
     }
}

@-webkit-keyframes spSlices {
     0% {
          border-top: 16px rgba(18, 18, 35, 0.75) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     25% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.75) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     50% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.75) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     75% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.75) solid;
     }
     100% {
          border-top: 16px rgba(18, 18, 35, 0.75) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
}

@keyframes spSlices {
     0% {
          border-top: 16px rgba(18, 18, 35, 0.75) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     25% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.75) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     50% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.75) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
     75% {
          border-top: 16px rgba(18, 18, 35, 0.25) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.75) solid;
     }
     100% {
          border-top: 16px rgba(18, 18, 35, 0.75) solid;
          border-right: 16px rgba(18, 18, 35, 0.25) solid;
          border-bottom: 16px rgba(18, 18, 35, 0.25) solid;
          border-left: 16px rgba(18, 18, 35, 0.25) solid;
     }
}

@-webkit-keyframes spSlicesWhite {
     0% {
          border-top: 16px rgba(255, 255, 255, 0.75) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     25% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.75) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     50% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.75) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     75% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.75) solid;
     }
     100% {
          border-top: 16px rgba(255, 255, 255, 0.75) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
}

@keyframes spSlicesWhite {
     0% {
          border-top: 16px rgba(255, 255, 255, 0.75) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     25% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.75) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     50% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.75) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
     75% {
          border-top: 16px rgba(255, 255, 255, 0.45) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.75) solid;
     }
     100% {
          border-top: 16px rgba(255, 255, 255, 0.75) solid;
          border-right: 16px rgba(255, 255, 255, 0.45) solid;
          border-bottom: 16px rgba(255, 255, 255, 0.45) solid;
          border-left: 16px rgba(255, 255, 255, 0.45) solid;
     }
}

.close {
     position: absolute;
     top: 10px;
     z-index: 9999;
     right: 18px;
}

.errorbox-position {
     z-index: 10;
     position: absolute;
     width: 100%;
}