@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');

@media (min-width: 1780px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1700px;
    }
}

html {
    scroll-behavior: smooth;
}

/*missing alt attribute*/
img:not([alt]){
    outline: 5px dashed rgb(255, 0, 242);
    outline-offset: 5px;
  }
  
  /*empty alt attribute*/
  img[alt=""]{
    outline: 5px solid rgb(0, 81, 255);
    outline-offset: 15px;
  }

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--main-color);
}
::-webkit-scrollbar-track {
    background: #b3b1b1;
}

:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
}

:root {
    --main-color: #49C1B8;
    --active-color: #3fb9d2;
    --bs-body-font-size: 1.125rem;
    --blue-color: #073781;
    --yellow-color: #ffe717;
    --black-color: #171717;
}

.vh100 {
    height: 100vh;
}

.start-here {
    /* padding-top: 15%;
    height: 100vh; */
    background: radial-gradient(#ffffff, #49C1B8);
    animation: gradiant 4s ease 1;
}

.main-start {
    margin: auto;
    padding-top: 10%;
    height: 100vh;
    /* background: url(../images/white.png) no-repeat;
    background-position: 1% 96%;
    background-size: 7%; */
}

@keyframes gradiant {
    0% {
       background-size: 0%;
    }
    50% {

      background-size: 100%;
    } 
    100% {
      background-size: 0%;
    }
 }

.main-start > img,
.main-start a {
    transition: transform .3s ease;
}

.main-start > a:hover {
    transform: scale(1.125);
    /* border-radius: 50%;
    padding: 123px 39.5px;
    box-shadow: 0 0 0 100vmax var(--main-color); */
}

.logo-ico {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 150px;
    height: 150px;
    display: flex;
}

.main-start h1 {
    font-size: 92px;
    margin-top: 50px;
}

.main-start svg {
    color: #171717;
}

.main-start svg:hover {
    border-radius: 50%;
    color: var(--main-color);
    background: white;
    box-shadow: 0 0 0 100vmax var(--main-color);
    box-shadow: 0 0 0 7px var(--main-color);
    animation: go-left 1.5s linear infinite;
}

@keyframes go-left {
    0%, 100% {
        margin-right: 0;
    }
    50% {
        margin-right: 25px;
    }
}

.text-yellow {
    color: var(--yellow-color);
}

.bg-main {
    background: var(--main-color);
}

.text-main {
    color: var(--main-color);
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-color: var(--main-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--main-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--active-color);
    --bs-btn-active-border-color: var(--active-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

section {
    position: relative;
    display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
}

body {
    direction: rtl;
    font-family: 'Heebo', sans-serif;
    /* animation: fade .2s ease both; */
}

body.modal-on {
    overflow: hidden;
}

@keyframes fade {
	from {opacity: 0;}
	to { opacity: 1; }
}

header img {
    max-width: 200px;
}

header .nav-link {
    color: var(--bs-dark)
}

header .nav-link:focus, header  .nav-link:hover {
    color: #fff;
    background: var(--main-color);
}

.show-msg {
    position: sticky;
    top: 20px;
    margin-right: 20px;
    z-index: -1;
    display: none;
}

.show-msg-show {
    display: block;
}

.show-msg-hide {
    display: none;
}

.show-msg, .show-msg > .hover-link {
    animation: fade-in auto linear both;
    animation-timeline: scroll();
    animation-range: 0% 100px;
}

.hover-link strong {
    transition: all 0.3s ease;
}

@supports (animation-timeline: view()) {
    @keyframes fade-in {
      from { opacity: 0 }
      to   { opacity: 1; z-index: 1; }
    }
}

.show-msg .hover-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    background: var(--main-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    align-items: center;
    text-align: center;
    font-size: 24px;
    line-height: 1.3;
    padding: 20px 15px 10px;
}

.hover-link {
    position: relative;
    text-decoration: none;
}

.hover-link::before {  
    transform: scaleX(0);
    transform-origin: center right;
    border-radius: 50%;
}

.hover-link:hover::before {
    transform: scaleX(1);
    transform-origin: center right;
    border-radius: 50%;
    box-shadow: 0 0 0 7px var(--yellow-color);
}

.hover-link::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: var(--blue-color);
    z-index: -1;
    transition: transform .3s ease;
}

.hover-link:hover .bi-gift {
    color: var(--yellow-color);
    transform: scale(1.125);
}

.hover-link:hover strong {
    color: white;
}

.btt {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    text-align: center;
    text-decoration: unset !important;
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.btt span {
    display: none;
    text-decoration: unset;
}

.btt:hover {
    background-color: #dddddd;
}

.btt:hover span {
    font-size: 18px;
    margin-top: -95px;
    display: flex;
    font-style: normal;
    line-height: 1;
    justify-content: center;
    text-decoration: unset;
}

a[aria-hidden="true"] {
    transform: scale(0);
}

.btt .bi-rocket {   
    font-size: 36px;
    color: var(--main-color);
}

.btt .bi-rocket:hover {
    color: var(--blue-color);
}

.is-activeMenu {
    overflow: hidden;
}

.siteNavToggle {
    position: relative;
    width: 2em;
    height: 1.3em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
}

.siteNavToggle:hover::before, .siteNavToggle:hover::after, .siteNavToggle:hover .siteNavToggle__bar {
    background-color: var(--main-color);
}

.siteNavToggle::before, .siteNavToggle::after {
    content: "";
    height: 3px;
    width: 100%;
    background-color: var(--black-color);
    transition: transform 0.15s ease;
}

.siteNavToggle__bar {
    width: 100%;
    height: 3px;
    background-color: var(--black-color);
    display: block;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.siteNavToggle.is-active {
    justify-content: center;
    z-index: 200;
}

.siteNavToggle.is-active .siteNavToggle__bar {
    opacity: 0;
    transform: translateX(-100%);
}

.siteNavToggle.is-active::before, .siteNavToggle.is-active::after {
    position: absolute;
    transform-origin: 50% 50%;
    margin-top: -1px;
    background-color: white;
}

.siteNavToggle.is-active::before {
    transform: rotate(45deg);
    top: 50%;
}

.siteNavToggle.is-active::after {
    transform: rotate(-45deg);
    top: 50%;
}

.siteNavToggle.is-active:hover::before, .siteNavToggle.is-active:hover::after {
    background-color: var(--black-color);
}

.siteNavToggle:hover .siteMenu__inner {
    will-change: transform;
}
  
.siteMenu {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    display: none;
    perspective: 1000px;
    background-color: transparent;
}

.is-activeMenu .siteMenu {
    z-index: 100;
    display: block;
}

.siteMenu__inner {
    width: 100%;
    height: 100%;
    transform: rotateX(20deg);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    background-color: var(--main-color);
    pointer-events: none;
    /* background: var(--main-color) url('../images/bg.png') repeat 0 0; 
    animation: 15s linear 0s normal none infinite animate;*/
}

.siteMenu__inner:hover {
    background-image: linear-gradient(229deg, #49c1b8 0%, #387bb9 100%);
}

.siteMenu__inner .siteMenu__textLink:hover {
    pointer-events: auto;
}


@keyframes animate {
	from {background-position:0 0;}
	to {background-position: -500px 200px;}
}

.siteMenu__text {
    display: flex;
    font-size: 52px;
    font-weight: 300;
    margin: auto;
    padding: 0px 9%;
    flex-wrap: wrap;
    gap: 0%;
    pointer-events: auto;
}

.siteMenu__textLink > img {
    margin-left: 10px;
    width: 60px;
}

.siteMenu__textLink {
    text-decoration: none;
    transition: all 0.3s ease-out;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #dddddd 0%, #ffffff 50%, #073781 50%, #14386e 100%);
    background-size: 200% 100%;
    white-space: nowrap;
    flex: 1;
    padding: 20px 0;
}

.siteMenu__textLink:hover {
    background-position: 100%;
    position: relative;
    font-weight: 400;
    letter-spacing: -1px;
}

.siteMenu__textLink:hover img {
    transform: scale(1.05);
}

.siteMenu__textLink:hover:after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0 0 0 10px #cdff65;
    height: 360px;
}

.siteMenu__textLink:nth-child(1):hover:after {
    content: url(../images/arcdb.jpg);
    left: 10%;
    top: 100%;
}

.siteMenu__textLink:nth-child(2):hover:after {
    content: url(../images/calendar.jpg);
    left: 19%;
    top: 100%;
}

.siteMenu__textLink:nth-child(3):hover:after {
    content: url(../images/arcdb-b2b.jpg);
    top: 100px;
    left: 14%;
}

.siteMenu__textLink:nth-child(4):hover:after {
    content: url(../images/home-tv.jpg);
    left: -30%;
}

.siteMenu__textLink:nth-child(5):hover:after {
    content: url(../images/arcdbbiz.jpg);
    left: 107%;
}

.siteMenu__textLink:nth-child(6):hover:after {
    content: url(../images/מבזק-שיתופי-פעולה-ועסקאות.jpg);
    left: -65%;
    top: -70%;
}

.siteMenu__textLink:nth-child(7):hover:after {
    content: url(../images/פודקאסט-משלכם-בהתאמה-אישית.jpg);
    left: 107%;
    top: -70%;
}

.siteMenu__textLink:nth-child(8):hover:after {
    content: url(../images/התפתחות-מקצועית.jpg);
    left: -40%;
    top: -130%;
}

.siteMenu__textLink:nth-child(9):hover:after {
    content: url(../images/מעצבים-שיפוץ.jpg);
    left: 107%;
    top: -130%;
}

.is-activeMenu .siteMenu__inner {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
    pointer-events: none;
    visibility: visible;
}

header {
    padding: .8rem 1.5rem;
    /* z-index: 100;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); */
}

header h1 {
    font-size: 52px;
    font-weight: 300;
}

header h1 > strong {    
    color: var(--main-color);
    font-weight: 500;
}

.sales {
    position: relative;
}


video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.video-wrapper {
    width: 100%;
    height: 100vh;
    min-height: 1080px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.one {
    color: white;
    padding: 80px 1em;
    height: 100%;
    min-height: 110vh;
    background: var(--main-color);
    background-image: linear-gradient(90deg,#49c1b8d1 10%,#32b3a9 48%,#073781 98%);
    justify-content: flex-start;
}

.one::before {
    content: '';
    position: absolute;
    right: 40px;
    top: 40px;
    width: 150px;
    height: 150px;
    background: url(../images/חותם-האמינות-של-דן-אנד-ברדסטריט.png) no-repeat;
    background-size: auto;
}

.one-sti, .pin-it-up {
    position: sticky;
    top: 0;
}

.one h2, .two h2, .third h2, .forth h2, .fifth h2, .sixth h2, .seventh h2, .eleventh h2 {
    font-size: 72px;
    font-weight: 400;
    letter-spacing: 2px;
}

.one .slogans {
    position: relative;
    width: 100%;
    height: 100%;
}

.one .slogans p a {
    text-decoration: unset;
    color: unset;
}

.one .slogans p {
    inline-size: 17vw;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--main-color);
    background: white;
    font-size: 42px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    padding: 20px;
    text-align: center;
    margin: 0;
    box-shadow: 0 0 0 10px;
    border: 2px dashed var(--blue-color);
    transition: all 0.3s ease;
    position: absolute;
}

.one .slogans p:nth-child(1) {
    inline-size: 17vw;
    font-size: 44px;
    transform: rotateZ(6deg);
    font-weight: 500;
    top: 7vh;
    right: 12%;
}

.one .slogans p:nth-child(2) {
    inline-size: 15vw;
    font-size: 36px;
    transform: rotateZ(-6deg);
    top: 36vh;
    left: 6%;
    box-shadow: 0 0 0 10px #c8ecea;
    color: var(--blue-color);
    border: 2px dashed var(--main-color);
    background-image: url(../images/ICON-300x300.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
}

.one .slogans p:nth-child(3) {
    inline-size: 11vw;
    font-size: 26px;
    transform: rotateZ(-3deg);
    top: 47vh;
    left: 63%;
    color: var(--blue-color);
    box-shadow: 0 0 0 10px var(--main-color);
    background-image: url(../images/ICON-300x300.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
}

.one .slogans p:nth-child(4) {
    inline-size: 14vw;
    font-size: 32px;
    font-weight: 600;
    transform: rotateZ(4deg);
    top: 9vh;
    left: 22%;
    padding-top: 35px;
    box-shadow: 0 0 0 10px #92dad4;
    background-image: url(../images/ICON-300x300.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
}

.one .slogans p:nth-child(5) {
    inline-size: 12vw;
    font-size: 24px;
    transform: rotateZ(0deg);
    top: 8vh;
    right: 39%;
    padding-top: 35px;
    color: var(--blue-color);
    box-shadow: 0 0 0 10px var(--main-color);
}

.one .slogans p:nth-child(6) {
    inline-size: 15vw;
    font-size: 34px;
    transform: rotateZ(0deg);
    font-weight: 300;
    top: 42vh;
    right: 50%;
    padding-top: 45px;
}

.one .slogans p:nth-child(7) {
    inline-size: 8vw;
    font-size: 42px;
    transform: unset;
    font-weight: 400;
    top: 50vh;
    right: 4%;
    color: #fff;
    background: var(--main-color);
}

.one .slogans p:hover {
    transform: scale(1.125) rotateZ(0);
    background: var(--main-color);
    color: #fff;
}

.one .slogans p:nth-child(7):hover {
    color: var(--main-color);
    background:#fff;
}

.bg-animation {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    pointer-events: none;
}

.logos{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.logos li{
    position: absolute;
    display: block;
    list-style: none;
    background: url(../images/white.png) no-repeat;
    opacity: .5;
    background-size: contain;
    animation: animate-logos 25s linear infinite;
    bottom: -250px;
}

.logos li:nth-child(1){
    left: 25%;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}


.logos li:nth-child(2){
    left: 5%;
    width: 220px;
    height: 220px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.logos li:nth-child(3){
    left: 80%;
    width: 120px;
    height: 120px;
    animation-delay: 4s;
}

.logos li:nth-child(4){
    left: 40%;
    width: 160px;
    height: 160px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.logos li:nth-child(5){
    left: 65%;
    width: 70px;
    height: 70px;
    animation-delay: 0s;
}

@keyframes animate-logos {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: .5;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}

.scroll-text {
    overflow-x: hidden;
    scrollbar-width: none;
    width: 100%;
  }
  
.scroll-text p {
    font-size: 62px;
    font-weight: 300;
    background: #ffffffa2;
    color: transparent;
    background-size: contain;
    background-clip: text;
    -webkit-background-clip: text;
    pointer-events: none;
}

.scroll-text p:nth-child(1) {
    animation: scrolling-ltr 25s infinite linear;
    font-size: 92px;
}

.scroll-text p:nth-child(2) {
    animation: scrolling-rtl 20s infinite linear;
    color: #ffffffb6;
}

.scroll-text p:nth-child(3) {
    animation: scrolling-ltr 15s infinite linear;
    font-size: 72px;
    color: #ffffffe3;
}

.scroll-text p:nth-child(4) {
    animation: scrolling-rtl 25s infinite linear;
    font-size: 64px;
    color: #ffffffa6;
}

.scroll-text p:nth-child(5) {
    animation: scrolling-ltr 20s infinite linear;
    font-size: 44px;
    color: #ffffffd0;
}

.scroll-text p:nth-child(6) {
    animation: scrolling-rtl 15s infinite linear;
    font-size: 70px;
}

@keyframes scrolling-rtl {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}
  
@keyframes scrolling-ltr {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}
  
/* .two, .three {
    padding: 1em;
    height: 100vh;
} */

body.main-page section.two {
    padding: 60px 0 40px;
    /* background: #e9fffd; */
    justify-content: unset;
}

.two h3 {
    color: var(--main-color);
    font-size: 52px;
    font-weight: 400;
    transition: all 0.3s ease;
}

/* .two h2:hover,
.two h2:hover + p {
    color: white;
    background: var(--main-color);
    padding-right: 15px;
    cursor: default;
} */

.two p {
    font-size: 28px;
    /* padding-left: 10%; */
}

.pl20 {
    padding-left: 10%;
}

.pl10 {
    padding-left: 5%;
}

.pr20 {
    padding-right: 5%;
}

.two .container {
    padding: 15px 7.5%;
}

.two .iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.two .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body.main-page section.third {
    padding: 60px 0 40px;
    color: white;
    background: var(--main-color);
}

.third .deals-link {
    position: absolute;
    right: 3%;
    top: 40%;
    height: 33vh;
    display: flex;
    flex-direction: column;
    transform: rotate(345deg);
    will-change: transform;
    transition: all 0.3s ease;
    animation: move 2.5s linear infinite;
}

.third .deals-link h3 {
    color: white;
    transform: rotate(-345deg);
    display: block;
    margin: 10px 140px 0 0;
    width: 230px;
    text-align: center;
    transition: all 0.3s ease;
}

.third .deals-link:hover {
    text-decoration: unset;
    height: 36vh;
}

.third .deals-link:hover h3 {
    font-size: 30px;
    color: var(--main-color);
    background: white;
    padding: 10px;
    border-radius: 20px;
    width: 250px;
}

.iframe-frame {
    margin-top: 40px;
    --tw-shadow: 0 20px 50px rgb(0 0 0 / 20%);
    --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    border-radius: 20px;
}

.iframe-frame > div {
    padding: 25px;
    background: #c8ecea;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.iframe-frame > div h4 {
    font-size: 42px;
    padding-bottom: 15px;
    line-height: 1;
    font-weight: 400;
    margin: auto;
    text-align: center;
    color: #fff;
    background: #3a9a93;
    width: calc(100% + 50px);
    margin: -30px -25px 22px;
    padding: 20px 0 15px;
    border-radius: 20px 20px 0 0;
    transition: all 0.3s ease;
}

.iframe-frame:hover > div {
    background: white;
}

.iframe-frame:hover > div h4 {
    background: #4d9fd3;
}

.ball {
    --delay:0s;
    --size:0.4;
    --speed: 20s;
    aspect-ratio: 1;
    width: calc( 150% * var(--size) );
    background: linear-gradient(259.53deg, #a4e0dc 6.53%, #49C1B8 95.34%);
    /* background: linear-gradient(185deg, #49c1b894 6.53%, #49C1B8 95.34%); */
    filter: blur(10vw);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: loop var(--speed) infinite linear;
    animation-delay: var(--delay);
    transform-origin: 50% 50%;
    opacity: 0.75;
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.three .content, .tenth, .twelve {
    justify-content: space-evenly;
    height: 100%;
    z-index: 2;
    padding: 60px 0 40px;
}

.content h1 {
    font-size: 112px;
}
  
.content h2 {
    font-size: 52px;
}
  
.content h3 {
    font-size: 24px;
    margin-top: 10px;
}
  
.content h4 {
    font-size: 42px;
    padding: 20px 15%;
    white-space: break-spaces;
}
  
.content h5 {
    font-size: 32px;
}

/* .three, .four {
    height: 100%;
    min-height: 110vh;
    padding: 60px 0 0;
} */

.three, .tenth, .twelve {
    display: flex;
    justify-content: center;
}

.three .content .row, .tenth .row {
    padding: 0 100px;
}

.three img, .tenth img {
    border-radius: 50%;
    border: 7px solid #fff;
}

.three .col,
.tenth .col,
.two .col-md-4 {
    transition: transform .3s ease;
}

.three .col:hover,
.tenth .col:hover,
.two .col-md-4:hover {
    transform: scale(1.125);
}

.tenth h1, .twelve h1 {
    font-size: 112px;
}

.tenth h2 {
    font-size: 52px;
}

.glow-container {
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
}

.tenth .glow-container {
    z-index: -1;
}

@keyframes loop {
    0% {
        transform: translate3D(0%, 51%, 0) rotate(0deg);
    }
    5% {
        transform: translate3D(8%, 31%, 0) rotate(18deg);
    }
    10% {
        transform: translate3D(22%, 13%, 0) rotate(36deg);
    }
    15% {
        transform: translate3D(40%, 2%, 0) rotate(54deg);
    }
    20% {
        transform: translate3D(46%, 21%, 0) rotate(72deg);
    }
    25% {
        transform: translate3D(50%, 47%, 0) rotate(90deg);
    }
    30% {
        transform: translate3D(53%, 80%, 0) rotate(108deg);
    }
    35% {
        transform: translate3D(59%, 98%, 0) rotate(125deg);
    }
    40% {
        transform: translate3D(84%, 89%, 0) rotate(144deg);
    }
    45% {
        transform: translate3D(92%, 68%, 0) rotate(162deg);
    }
    50% {
        transform: translate3D(99%, 47%, 0) rotate(180deg);
    }
    55% {
        transform: translate3D(97%, 21%, 0) rotate(198deg);
    }
    60% {
        transform: translate3D(80%, 7%, 0) rotate(216deg);
    }
    65% {
        transform: translate3D(68%, 25%, 0) rotate(234deg);
    }
    70% {
        transform: translate3D(59%, 41%, 0) rotate(251deg);
    }
    75% {
        transform: translate3D(50%, 63%, 0) rotate(270deg);
    }
    80% {
        transform: translate3D(38%, 78%, 0) rotate(288deg);
    }
    85% {
        transform: translate3D(21%, 92%, 0) rotate(306deg);
    }
    90% {
        transform: translate3D(3%, 79%, 0) rotate(324deg);
    }
    100% {
        transform: translate3D(0%, 51%, 0) rotate(360deg);
    }
}

/* #home-tab-pane {
    margin-bottom: 30px;
} */

.arcdb-calendar .tab-content>.tab-pane:last-child {
    min-width: calc(13.7vw * 7 - 2px);
}

.arcdb-calendar header .btn-primary {
    font-size: 24px;
}

.arcdb-calendar header .btn-primary i::before {
    vertical-align: middle;
}

.calendar-head .col {
    color: white;
    background: var(--blue-color);
    border: 1px solid var(--bs-gray-700);
}

.calendar-head strong {
    font-weight: 500;
}

.calendar-head .col,
.calendar-day .col {
    font-size: 20px;
    font-weight: 400;
    border: 1px solid var(--bs-gray-300);
    padding: 7px 10px;
    text-align: center;
    min-width: 16.38vw;
    border-top: unset;
}

.calendar-head .col:not(:last-child),
.calendar-day .col:not(:last-child) {
    border-left: unset;
}

.calendar-day .col {
    border-top: unset;
    text-align: right;
    min-height: 13.5vh;
    max-width: 163px;
    position: relative;
}

.calendar-day .col .name {
    padding: 4px;
    font-size: 18px;
    line-height: 1.3;
    border-radius: 6px;
    margin-top: 10px;
    background: #c8ecea;
    box-shadow: 0 0 0 1px #5cc0b8;
    /* margin-right: 33px; */
}

.calendar-day .col .date {
    /* position: absolute;
    top: 0;
    right: 0; */
    line-height: 34px;
    color: white;
    background: var(--main-color);
    width: 34px;
    height: 34px;
    text-align: center;
}

.calendar-day .col.day-event .name {
    max-width: 70%;
}

.calendar-day .col.day-event img {
    position: absolute;
    left: 0;
    top: 10px;
}

.calendar-day .col-weekend.day-event img {
    filter: saturate(0.5);
}

.calendar-day .col-weekend.day-event img,
.calendar-day .day-event.empty-event img {
    left: 10px;
}

.calendar-day .col.day-event.identity img {
    left: 10px;
}

.calendar-day .col .name:hover {
    color: white;
    background: var(--main-color);
    box-shadow: 0 0 0 1px var(--blue-color);
}

.calendar-day .col.two-day-event .name {
    line-height: 1;
    font-size: 18px;
}

.calendar-day .col .name.t-overflow {
    display: flex;
    align-items: center;
}

.calendar-day .col .name.t-overflow p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
}

.calendar-day .col-weekend {
    background: #edf9f8;
    max-width: 7vw;
    min-width: 7vw;
}

.calendar-day .col.two-day-event .name span {
    margin-right: 15px;
    padding: 2px 4px;
    color: #ffef33;
    background: var(--blue-color);
    display: inline-block;
    border-radius: 4px;
}

.calendar-day .col.close-event .name span {
    margin-right: 15px;
    padding: 2px 4px;
    color: var(--blue-color);
    /* border: 1px solid var(--blue-color); */
    background: #ffef33;
    display: inline-block;
    border-radius: 4px;
    font-size: 18px;
    white-space: nowrap;
}

.disabled {
    color: var(--bs-gray-500);
    background: var(--bs-gray-200);
    pointer-events: none;
}

.calendar-day .col-half-h {
    max-height: 7vh;
    min-height: 70px;
}

.calendar-head .col-weekend {
    background: #338781;
    max-width: 7vw;
    min-width: 7vw;
}

.calendar-day .col.disabled .date {
    
    background: #bbb;
}

.calendar-day .col.col-weekend .date {
    color: unset;
    background: #c8ecea;
}

.day-view {
    text-align: right;
    border: unset;
    max-width: calc(13.7vw * 7 - 2px);
    width: 100%;
    color: white;
    background: var(--blue-color);
    padding: 25px;
    display: flex;
    font-size: 36px;
    flex-wrap: wrap;
    font-weight: 300;
    align-items: baseline;
}

.day-view.weekend {
    background: #338781;
}

.arcdb-calendar .nav-tabs {
    margin: auto;
    justify-content: space-between;
    align-items: end;
    min-width: calc(13.7vw * 7 - 2px);
}

.arcdb-calendar .nav-tabs .nav-link {
    border: unset;
    font-size: 22px;
    color: var(--yellow-color);
    background: var(--blue-color);
}

.arcdb-calendar .nav-tabs .nav-link:not(.active) {
    font-size: 20px;
    color: white;
    background: var(--main-color);
    padding: 6px 16px;
}

.day {
    width: 50px;
    text-align: center;
    font-weight: 400;
    align-self: center;
    background: var(--main-color);
}

.day-view.weekend .day {
    pointer-events: none;
    color: #171717;
    background: #c8ecea;
}

.day-view.empty-day {
    pointer-events: none;
    background: #1b3680c9;
}

.day.collapsed {
    color: var(--blue-color);
    background: white;
}

.day.collapsed:hover {
    color: white;
    background: var(--main-color);
}

.day-view .name {
    /* padding-right: 50px; */
    color: #ffef33;
    font-size: 64px;
    line-height: 1;
}

.day-view .description {
    padding-right: 50px;
    min-width: 250px;
}

.modal-head .description span {
    margin-right: 15px;
    padding: 0 10px;
    color: #ffef33;
    background: var(--blue-color);
    border-radius: 4px;
}

.right-side {
    padding: 40px 105px;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.day-view .host {
    font-size: 42px;
}

.day-view .host,
.modal-dialog-arcdb .modal-content-arcdb .text .host {
    font-size: 30px;
    align-self: center;
}

.modal-dialog-arcdb .modal-content-arcdb .text .host {
    max-width: 763px;
    width: 100%;
    display: flex;
    align-items: center;
}

.modal-dialog-arcdb .modal-content-arcdb .text .host > div {
    display: flex;
    flex-direction: column;
}

.day-view .host strong,
.modal-dialog-arcdb .modal-content-arcdb .text .host strong {
    color: var(--main-color);
    font-size: 42px;
}

.modal-dialog-arcdb .modal-content-arcdb .text .host strong {
    font-size: 50px;
}

@property --a {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@property --i {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

.day-view .host > img,
.modal-dialog-arcdb .modal-content-arcdb .text .host > img {
    margin-left: 30px;
    --r: 35px;
    /* control the small circles radius and the main size */
    --f: 1.2;
    /* control the scale factor, between 1.2 and 2 you get nice result */
    --c: var(--main-color);
    width: calc(var(--r)*(1 + 1/tan(180deg/15)));
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    --_m:
      radial-gradient(var(--c) calc(72% - var(--r)/2 - var(--i,0px)),#0000 0),
      radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.0666666667 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.0666666667 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.1333333333 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.1333333333 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.2 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.2 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.2666666667 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.2666666667 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.3333333333 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.3333333333 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.4 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.4 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.4666666667 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.4666666667 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.5333333333 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.5333333333 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.6 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.6 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.6666666667 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.6666666667 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.7333333333 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.7333333333 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.8 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.8 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.8666666667 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.8666666667 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*0.9333333333 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*0.9333333333 + var(--a,0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, #0000 72%) no-repeat calc(50% + (50% - var(--i,0px))*cos(360deg*1 + var(--a,0deg))) calc(50% + (50% - var(--i,0px))*sin(360deg*1 + var(--a,0deg)))/var(--r) var(--r);
    -webkit-mask: linear-gradient(#000 0 0) top/100% 50% no-repeat, var(--_m);
    background: var(--_m);
    --_a: rotate linear infinite;
    animation: var(--_a) 10s, var(--_a) 16s reverse;
    animation-composition: add;
    cursor: pointer;
    transition: --i 0.4s, scale 0.4s;
}

  
.day-view img:hover,
.modal-dialog-arcdb .modal-content-arcdb .text .host img:hover {
    --i: calc(var(--r)/var(--f));
    scale: calc((1.5 + 1/tan(180deg/15))/(1 - 2/var(--f) + 1/tan(180deg/15)));
    animation-play-state: running, paused;
    object-position: center;
}

.modal-dialog-arcdb .modal-content-arcdb .text .host > img {
    --r: 60px;
}

@keyframes rotate {
    to {
        --a:360deg;
    }
}

/* .hours, .address {
    width: 100%;
} */

.day-view .hours {
    color: white;
    background: var(--main-color);
    padding: 15px;
    display: flex;
    flex-direction: column;
    font-size: 36px;
}

.day-view .hours div > span {
    min-width: 150px;
    margin-right: 10px;
    display: inline-block;
}

.day-view .hours div:nth-child(2) > strong {
    color: #ffef33;
}

.day-view .collapse.show,
.collapsing {
    display: flex;
    width: 100%;
}

.inner-video iframe {
    width: 790px;
    height: 487px;
    padding-top: 40px;
}

.open-modal {
    cursor: pointer;
}

/* MODAL –––––––––– */
.modal-arcdb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.35s ease-in;
}

.modal-arcdb.is-visible {
    visibility: visible;
    opacity: 1;
}

.modal-dialog-arcdb {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
    cursor: default;
    background: #dbeef3;
    background: #c8ecea;
}

.modal-dialog-arcdb .modal-content-arcdb {
    width: 100%;
    height: 100%;
    padding: 15px;
    padding-top: 39px;
}

.modal-head {
    display: flex;
    font-size: 36px;
    flex-wrap: wrap;
    font-weight: 300;
    padding: 0 70px;
    align-items: baseline;
    justify-content: center;
    max-width: 99%;
}

.modal-head .day {
    font-weight: 400;
    align-self: center;
    width: auto;
    text-align: right;
    font-size: 28px;
    margin-right: 60px;
    padding-right: 10px;
    min-width: 95%;
    color: #fff;
    background-image: linear-gradient(90deg, #ccebea 85%, #073781 85%, #073781 100%);
    line-height: 50px;
    margin-bottom: 20px;
    
    min-width: unset;
    margin: 0;
    margin-right: 20px;
    padding: 0 10px;
    background: var(--blue-color);
}

.modal-head .name {
    color: var(--blue-color);
    font-size: 52px;
    line-height: 1;
    font-weight: 400;
    margin: auto;
}

#modal18 .modal-head .day {
    min-width: unset;
    padding: 0 10px;
    margin: auto;
    margin-top: 0;
    background: var(--blue-color);
}

#modal18 .modal-head .name {
    margin-right: 21.4%;
    margin-left: 16%;
}

#modal18 .modal-head .description {
    margin-left: 25px;
}

.modal-head .description {
    /* padding-right: 12%;
    margin-right: 13%; */
    background: #fff797;
    padding: 0 10px;
    border-radius: 8px;
}

.modal-dialog-arcdb .modal-content-arcdb > * {
    flex: 1;
    margin: 0;
}

.modal-dialog-arcdb .modal-content-arcdb .text {
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 18px;
}

.inner-video iframe,
.modal-dialog-arcdb .modal-content-arcdb .text iframe {
    border-radius: 8px;
}

.modal-dialog-arcdb .close-modal-arcdb {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 2rem;
    border: unset;
    width: 50px;
    height: 50px;
    color: white;
    background: var(--main-color);
}

.modal-dialog-arcdb .close-modal-arcdb:hover {
    background: var(--blue-color);
}

.modal-dialog-arcdb .hours {
    color: white;
    background: var(--main-color);
    font-size: 36px;
    padding: 25px;
    display: flex;
    max-width: 90.5%;
    justify-content: center;
    margin: auto;
    border-radius: 8px;
    margin-top: 40px;
    gap: 50px;
    font-weight: 300;
}

.modal-dialog-arcdb .hours div > span {
    margin-right: 10px;
    margin-left: 5px;
    display: inline-block;
}

.modal-dialog-arcdb .hours div:nth-child(2) > strong {
    color: #ffef33;
}

.image-gallery {
    margin: 10px auto 0;
    display: table;
}

.primary,
.thumbnails {
    display: table-cell;
}

.primary {
    width: 585px;
    width: 424px;
    height: 635px;
    display: block;
    /* margin: 0 55px; */
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    border: 3px solid var(--blue-color);
    box-shadow: 0px 0px 37px 7px #fff797;
    box-shadow: 0px 0px 37px 7px var(--main-color);
    transition: all 0.3s ease;
}

.thumbnail:hover .thumbnail-image, .selected .thumbnail-image {
    border-radius: 50%;
    border: 3px solid var(--blue-color);
    box-shadow: 0px 0px 19px 7px var(--main-color);
    opacity: 1;
}

.thumbnail-image {
    width: 115px;
    height: 115px;
    margin: 0 0 15px 14px;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    opacity: .4;
}

.thumbnails-left .thumbnail-image{
    margin: 0 14px 15px 0;
}

.thumbnails .thumbnail:last-child .thumbnail-image {
    margin-bottom: 0;
}

/* --1 row - 5 images-- */
.image-gallery .thumbnails:nth-child(1) .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/women/w-1.jpg')
}

.image-gallery .thumbnails:nth-child(1) .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/men/m-1.jpg')
}

.image-gallery .thumbnails:nth-child(1) .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/women/w-2.jpg')
}

.image-gallery .thumbnails:nth-child(1) .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/men/m-2.jpg')
}

.image-gallery .thumbnails:nth-child(1) .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-1.jpg')
}

/* --2 row - 5 images-- */
.image-gallery .thumbnails:nth-child(2) .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/men/m-3.jpg')
}

.image-gallery .thumbnails:nth-child(2) .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/women/w-3.jpg')
}

.image-gallery .thumbnails:nth-child(2) .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/men/m-4.jpg')
}

.image-gallery .thumbnails:nth-child(2) .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/women/w-4.jpg')
}

.image-gallery .thumbnails:nth-child(2) .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-2.jpg')
}

/* --3 row - 5 images-- */
.image-gallery .thumbnails:nth-child(3) .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/women/w-5.jpg')
}

.image-gallery .thumbnails:nth-child(3) .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/men/m-5.jpg')
}

.image-gallery .thumbnails:nth-child(3) .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/women/w-6.jpg')
}

.image-gallery .thumbnails:nth-child(3) .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/men/m-6.jpg')
}

.image-gallery .thumbnails:nth-child(3) .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-3.jpg')
}

/* --4 row - 5 images-- */
.image-gallery .thumbnails:nth-child(4) .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/men/m-7.jpg')
}

.image-gallery .thumbnails:nth-child(4) .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/women/w-7.jpg')
}

.image-gallery .thumbnails:nth-child(4) .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/men/m-8.jpg')
}

.image-gallery .thumbnails:nth-child(4) .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/women/w-8.jpg')
}

.image-gallery .thumbnails:nth-child(4) .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-4.jpg')
}

/* --5 row - 5 images-- */
.image-gallery .thumbnails:nth-child(5) .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/women/w-9.jpg')
}

.image-gallery .thumbnails:nth-child(5) .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/men/m-9.jpg')
}

.image-gallery .thumbnails:nth-child(5) .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/women/w-10.jpg')
}

.image-gallery .thumbnails:nth-child(5) .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/men/m-10.jpg')
}

.image-gallery .thumbnails:nth-child(5) .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-5.jpg')
}

/* thumbnails-left --1 row - 5 images-- */
.image-gallery .thumbnails-left1 .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/men/m-11.jpg')
}

.image-gallery .thumbnails-left1 .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/women/w-11.jpg')
}

.image-gallery .thumbnails-left1 .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/men/m-12.jpg')
}

.image-gallery .thumbnails-left1 .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/women/w-12.jpg')
}

.image-gallery .thumbnails-left1 .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-6.jpg')
}

/* thumbnails-left --2 row - 5 images-- */
.image-gallery .thumbnails-left2 .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/men/m-13.jpg')
}

.image-gallery .thumbnails-left2 .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/women/w-13.jpg')
}

.image-gallery .thumbnails-left2 .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/men/m-14.jpg')
}

.image-gallery .thumbnails-left2 .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/women/w-14.jpg')
}

.image-gallery .thumbnails-left2 .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-7.jpg')
}

/* thumbnails-left --3 row - 5 images-- */
.image-gallery .thumbnails-left3 .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/women/w-15.jpg')
}

.image-gallery .thumbnails-left3 .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/men/m-15.jpg')
}

.image-gallery .thumbnails-left3 .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/women/w-16.jpg')
}

.image-gallery .thumbnails-left3 .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/men/m-16.jpg')
}

.image-gallery .thumbnails-left3 .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-8.jpg')
}

/* thumbnails-left --4 row - 5 images-- */
.image-gallery .thumbnails-left4 .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/men/m-17.jpg')
}

.image-gallery .thumbnails-left4 .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/women/w-17.jpg')
}

.image-gallery .thumbnails-left4 .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/men/m-18.jpg')
}

.image-gallery .thumbnails-left4 .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/women/w-18.jpg')
}

.image-gallery .thumbnails-left4 .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-9.jpg')
}

/* thumbnails-left --5 row - 5 images-- */
.image-gallery .thumbnails-left5 .thumbnail:nth-child(1) .thumbnail-image {
    background-image: url('../images/shots/women/w-19.jpg')
}

.image-gallery .thumbnails-left5 .thumbnail:nth-child(2) .thumbnail-image {
    background-image: url('../images/shots/men/m-19.jpg')
}

.image-gallery .thumbnails-left5 .thumbnail:nth-child(3) .thumbnail-image {
    background-image: url('../images/shots/women/w-20.jpg')
}

.image-gallery .thumbnails-left5 .thumbnail:nth-child(4) .thumbnail-image {
    background-image: url('../images/shots/men/m-20.jpg')
}

.image-gallery .thumbnails-left5 .thumbnail:nth-child(5) .thumbnail-image {
    background-image: url('../images/shots/gr-10.jpg')
}

.four {
    padding: 40px 0 0;
    justify-content: flex-start;
    background: var(--main-color);
    background-image: url(../images/logo_big.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}

body.main-page .four .video-wrapper {
    height: 300px;
    min-height: unset;
}

/*.four .content {
     height: 90%;
    padding: 40px 0; 
    gap: 10px;
}*/

.four .content h1 {
    font-size: 125px;
}

.five h2,
.six h2,
.seven h2 {
    margin-top: 20px;
    font-size: 72px;
    font-weight: 300;
}

.customers {
    margin: 15px 0 0;
    /* max-height: 710px;
    overflow: hidden;
    overflow-y: auto; */
}

.customers .filter {
    transition: all 0.3s ease;
}

.customers:hover .filter * {
    opacity: .65;
}

.customers:hover .filter:hover *:hover {
    opacity: 1;
}

.customers .filter:hover {
    transform: scale(1.125);
    box-shadow: 0 0 0 4px #4d9fd3;
}

.filter img {
    max-width: 250px;
    transition: all 0.3s ease;
}

.customers::-webkit-scrollbar {
    height: 10px;
}

.customers > .flex-wrap {
    margin: 20px 0;
}

.five .btn-primary {
    font-size: 24px;
    font-weight: 400;
    width: 250px;
}

.five .btn-primary:nth-child(even) {
    width: 370px;
}

.modal {
    background: #c8ecea;
    background: var(--main-color);
    background-image: url(../images/logo_big.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}

.modal-content {
    padding: 25px;
    background: var(--main-color);
    background: #c8ecea;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.modal-content iframe {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal.show .modal-dialog {
    transform: translate(0, 12%);
    --tw-shadow: 0 20px 50px rgb(0 0 0 / 20%);
    --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    border-radius: 20px;
    min-height: auto;
}

.modal .close-modal-arcdb {
    position: absolute;
    top: 35px;
    right: 31px;
    font-size: 2rem;
    border: 1px solid var(--blue-color);
    width: 50px;
    height: 50px;
    color: white;
    background: var(--main-color);
    background: var(--blue-color);
}

.modal .close-modal-arcdb:hover {
    border: 1px solid white;
    background: transparent;
}

.modal-content h2 {
    font-size: 42px;
    padding-bottom: 15px;
    line-height: 1;
    font-weight: 400;
    margin: auto;
    text-align: center;
    color: #fff;
    background: #3a9a93;
    width: calc(100% + 50px);
    margin: -30px -25px 22px;
    padding: 20px 0 15px;
    border-radius: 20px 20px 0 0;
    transition: all 0.3s ease;
}

.modal.show .modal-dialog:hover .modal-content {
    background: white;
}

.modal.show .modal-dialog:hover .modal-content h2 {
    background: #4d9fd3;
}

/* Main Page */
/* body.main-page .sticky-container {
    direction: ltr;
}

body.main-page .sticky-container > div,
body.main-page .sticky-container > main section * {
    direction: rtl;
} */

body.main-page .vertical-section {
    height: 100vh;
}

body.main-page .video-wrapper {
    height: calc(100% - 114px);
    min-height: unset;
}

body.main-page main {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* position: sticky;
    top:0; */
}

body.main-page section {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* body.main-page section:nth-child(even) {
    background-color: white;
} */

body.main-page .two h1,
body.main-page .six h1,
body.main-page .seven h1 {
    font-size: 100px;
}

body.main-page .two .row {
    max-width: 80%;
}

body.main-page section.one,
body.main-page .five section {
    justify-content: flex-start;
    width: 100%;
    min-width: unset;
}

body.main-page .vertical-section.four {
    height: auto;
}

.five {
    padding: 60px 0 40px;
}

body.main-page .six section:nth-child(odd) {
    color: white;
    background: var(--main-color);
}

body.main-page .six h1 {
    font-size: 90px;
}

.six h2 {
    margin: 0 0 20px;
}

.six a img, .forth a img {
    border-radius: 12px;
    box-shadow: 0 0 0 7px white;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.six a img:nth-child(odd), .forth a img:nth-child(odd) {
    box-shadow: 0 0 0 7px var(--main-color);
}

.six a img:hover, .forth a img:hover {
    /* border-radius: 0;
    box-shadow: unset; */
    box-shadow: rgb(34 34 34 / 31%) 0 5px 15px 0;
    transform: translateY(15px) scale(1.125);
    border: 2px solid var(--active-color);
}

.six img.arrow {
    position: absolute;
    left: -75px;
    bottom: -25px;
    width: 500px;
    height: 500px;
}

.six img.star,
.six img.mic,
.forth img.mic,
.fifth img.mic {
    position: absolute;
    right: 10%;
    top: 49%;
    transition: all 0.3s ease;
}

.forth img.star {
    position: absolute;
    left: 10%;
    top: 49%;
    transition: all 0.3s ease;
}

.forth img.star2 {
    position: absolute;
    right: 6%;
    top: 39%;
    transition: all 0.3s ease;
}

.six img.mic, .forth img.mic, .fifth img.mic {
    right: 9%;
    transform: rotate(312deg);
}

.six img.mic:hover, .forth img.mic:hover, .fifth img.mic:hover {
    transform: rotate(329deg) scale(1.125);
}

.six img.star:hover, .forth img.star:hover, .forth img.star2:hover {
    transform: rotate(5deg) scale(1.125);
}

.six img.springboard, .forth img.springboard, .sixth img.springboard {
    position: absolute;
    left: 4%;
    top: 38%;
    transition: all 0.3s ease;
}

.six img.arcdb-logo, .forth img.arcdb-logo, .sixth img.arcdb-logo  {
    position: absolute;
    inset: 44% 10% 0 0;
    transition: all 0.3s ease;
}

.six img.springboard:hover, .six img.arcdb-logo, .forth img.arcdb-logo, .sixth img.springboard:hover, .sixth img.arcdb-logo {
    transform: translateX(10px) scale(1.125);
}

.six img.method, .forth img.method, .seventh img.method {
    position: absolute;
    inset: 44% 8% auto auto;
    transition: all 0.3s ease;
}

.six img.method:hover, .forth img.method:hover, .seventh img.method:hover {
    transform: rotate(9deg) scale(1.125);
}

.six img.bulb, .forth img.bulb, .seventh img.bulb {
    position: absolute;
    inset: 44% auto auto 9%;
    transition: all 0.3s ease;
}

.six img.bulb:hover, .forth img.bulb:hover, .seventh img.bulb:hover {
    transform: rotate(-9deg) scale(1.125);
}

.podcast {
    position: absolute;
    border-radius: 50%;
    inline-size: 15%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    left: 5%;
    bottom: 25%;
    transform: rotate(-7deg);
    transition: all 0.3s ease;
}

.podcast:hover {
    transform: scale(1.125) rotateZ(0);
    box-shadow: 0 0 0 7px var(--main-color);
    background-color: var(--blue-color);
    background-image: url(../images/podcast.png);
    background-repeat: no-repeat;
    background-position: center 40px;
    background-size: contain;
    color: transparent
}

.seven {
    padding: 40px 0;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, var(--main-color) 67%, var(--main-color) 100%);
}

.seven h2 {
    margin-top: 20px;
    font-size: 48px;
}

.seven .row {
    margin-top: 8%;
    gap: 120px;
}

.seven img {
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--main-color);
    transition: all 0.3s ease;
}

.seven img:hover {
    /* border-radius: 0;
    box-shadow: unset; */
    transform: translateY(15px) scale(1.125);
    box-shadow: rgb(34 34 34 / 31%) 0 5px 15px 0;
    border: 2px solid var(--active-color);
}

.deals {
    background-color: transparent;
    background-image: linear-gradient(156deg, #49C1B8 0%, #FFFFFF 100%);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 40px;
    width: 100%;
    position: relative;
}

.deals svg {
    transform: rotate(345deg);
    height: 24vh;
    will-change: transform;
    animation: move 2.5s linear infinite;
}

@keyframes move {
    0%, 100% {
        transform: rotate(345deg) translateX(0) translateY(0);
    }
    50% {
        transform: rotate(345deg) translateX(-15px) translateY(-15px);
    }
}

.deals-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-attachment: scroll;
    background-image: url(../images/ico-big.png);
    background-position: 91vw 21vh;
    background-repeat: no-repeat;
    background-size: 12% auto;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.deals-container {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.col-r, .col-l {
    position: relative;
    min-height: 1px;
    display: flex;
    width: 20%;
}

.col-l {
    width: 80%;
    flex-direction: column;
}

.deals h3 {
    font-size: 98px;
    font-weight: 300;
    color: #000;
    text-decoration: none;
}

.deals h4 {
    font-size: 42px;
    font-weight: 700;
    color: #000;
    padding: unset;
}

.deals a {
    text-decoration: unset;
}

.eight, .nine, .ninth {
    padding: 40px 0;
    background: white;
    display: flex;
    justify-content: center;
}

.eight h1, .nine h1, .ninth h1 {
    font-size: 72px;
    color: var(--main-color);
}

.nine h1, .ninth h1 {
    color: white;
}

.eight h2, .nine h2, .ninth h2 {
    margin: 20px 0 40px;
    font-size: 48px;
}

.eight .row, .eighth .row {
    gap: 30px;
}

.eight figure, .eighth figure {
    transition: all 0.3s ease;
}

.eight figure:hover, .eighth figure:hover {
    transform: translateY(15px) scale(1.125);
}

.eight figcaption, .eighth figcaption {
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
}

.eight .row:last-of-type {
    margin-top: 50px;
}

.eighth .row:last-of-type {
    margin: 60px 0;
}

.eight .col-green, .eighth .col-green {
    padding: 15px;
    width: 389px;
    display: flex;
    justify-content: center;
    background: var(--main-color);
    transition: all 0.3s ease;
    cursor: default;
}

.eight .col-green:hover, .eighth .col-green:hover {
    background: white;
    box-shadow: 0 0 0 2px var(--main-color);
    transform: translateY(0) scale(1.125);
}

.eight .col-green:hover h2, .eighth .col-green:hover h2 {
    color: var(--main-color);
}

.eight .col-green h2, .eighth .col-green h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 300;
    color: white;
    margin: auto;
    padding: 0;
}

.nine, .ninth {
    background: white;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, var(--blue-color) 75%, var(--blue-color) 100%);
}

.nine .content, .ninth {
    justify-content: flex-start;
    align-items: flex-start;
}

.nine h1, .ninth h1 {
    color: white;
    text-align: center;
    margin: auto;
}

.nine h2, .ninth h2 {
    color: var(--yellow-color);
    text-align: center;
    margin: auto;
}

.nine .engine, .ninth .engine {
    padding-top: 69px;
    width: 100%;
    max-width: 97%;
    margin: auto;
    min-width: 1852px;
}

.nine .nav, .ninth .nav {
    /* min-width: 25%; */
    gap: 10px;
    width: 100%;
    max-width: 460px;
}

.nine .nav-pills .nav-link,
.ninth .nav-pills .nav-link {
    color: white;
    background-color: var(--main-color);
    font-size: 24px;
    border-radius: 0;
    text-align: right;
    padding: 10px 20px;
    border-right: 7px solid var(--blue-color);
}

.nine .nav-pills .nav-link.active, .nine .nav-pills .show>.nav-link,
.ninth .nav-pills .nav-link.active, .ninth .nav-pills .show>.nav-link {
    color: white;
    background-color: var(--blue-color);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--blue-color);
    border-right: 7px solid var(--main-color);
}

.nine .tab-content, .ninth .tab-content {
    border: 2px solid var(--blue-color);
    width: 100%;
    max-width: 75%;
}

.tab-content>.tab-pane {
    padding: 20px;
    height: 100%;
}

.tab-content h1 {
    font-size: 36px;
    color: var(--black-color);
}

.tab-content .inner-pill h3 {
    font-size: 30px;
    color: white;
    background-color: var(--blue-color);
    padding: 40px;
    padding-top: 14%;
    margin: 0;
    max-width: 27%;
    font-weight: 300;
}

.tab-content h3 strong {
    display: block;
    color: var(--yellow-color);
    font-weight: 300;
    font-size: 49px;
    margin-bottom: 10px;
}

.inner-pill {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
}

.inner-boxes {
    display: flex;
    height: 100%;
    gap: 30px;
}

.inner-boxes > div {
    display: flex;
    color: white;
    background-color: var(--blue-color);
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    width: 25%;
    position: relative;
    transition: all 0.3s ease;
}

.inner-boxes h2 {
    font-size: 102px;
    font-weight: 300;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.inner-boxes h2::before {
    content: '';
    position: absolute;
    border-bottom: 4px solid var(--yellow-color);
    bottom: 0;
    left: auto;
    right: auto;
    width: 100%;
}

.inner-boxes h3 {
    font-size: 42px;
    margin: auto;
}

.inner-boxes p {
    display: none;
    transition: all 0.3s ease;
}

.inner-boxes p span {
    font-size: 22px;
    background: var(--blue-color);
    padding: 15px;
}

.inner-boxes > div:hover p {
    display: flex;
    height: 100%;
    background-color: var(--main-color);
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 32px;
    padding: 40px;
    align-items: center;
    font-weight: 300;
    margin: auto;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.inner-h-i {
    display: flex;
    height: 100%;
    position: relative;
    gap: 30px;
}

.inner-h-i h1 {
    color: white;
    background-color: var(--blue-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    gap: 30px;
    font-size: 46px;
}

.inner-h-i h1 strong {
    display: block;
    color: var(--yellow-color);
    font-weight: 300;
    font-size: 36px;
}

.inner-h-i > img {
    width: auto;
    height: 588px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid var(--blue-color);
}

.inner-h-i > img:hover {
    width: 100%;
    height: auto;
    position: absolute;
    left: 242px;
    bottom: -85px;
    box-shadow: 0 0 0 100vh var(--main-color);
}

.inner-h-if {
    gap: 30px;
}

.inner-h-if h1 {
    margin: 0;
    max-width: 20%;
    font-size: 36px;
}

.inner-h-if h1 strong {
    font-size: 28px;
}

.ten {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 0 40px 0;
    /* background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 89%, var(--main-color) 89%, var(--main-color) 100%); */
}

body.main-page .vertical-section.ten {
    height: unset;
    min-height: 2200px;
}

.ten h1 {
    padding: 40px 0;
    margin-bottom: 20px;
    width: 100%;
    margin: auto;
    text-align: center;
    background:  var(--main-color)
}

.ten .join {
    margin-top: 120px;
    gap: 40px;
    width: 75%;
    position: relative;
}

.ten .join.show1 {
    margin-top: 80px;
}

/* .ten .join.op5 {
    opacity: .3;
    display: flex;
}

.ten .join.active {
    display: flex;
    animation: fade 2s ease both;
} */

.ten .join::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border: 1px solid #ccc;
    height: 120px;
}

.ten .join:last-child:before {
    border: unset;
}

.ten .join .col {
    align-self: center;
}

.join-num {
    color: white;
    background: var(--blue-color);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    font-weight: 300;
    font-size: 110px;
    align-items: center;
    transition: all 0.3s ease;
}

.ten .join img {
    width: 200px;
}

.ten .join h3 {
    font-size: 44px;
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.join-content {
    transition: all 0.3s ease;
    cursor: pointer;
}

.ten .join .col:nth-child(even) {
    width: 100%;
    max-width: 250px;
}

.join-content:hover ~ .col .join-num {
    background: var(--main-color);
    transform: scale(1.125);
    transform-origin: center center;
}

.join-content:hover h3,
.join-content:hover ~ .join-content h3 {
    padding: 10px;
    color: white;
    background: var(--main-color);
}

.home {
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, var(--main-color) 50%, var(--main-color) 100%);
}

.home .col {
    height: 100vh;
    padding: 0;
    position: relative;
}

.logo-home {
    margin: 70px 40px;
    display: flex;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.logo-home:hover {
    transform: scale(1.05);
    transform-origin: center center;
}

.home .bg-arrows {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 auto;
    width: 100%;
    height: 100%;
    background: url(../images/home-arrows.png) white no-repeat;
    background-position: center 100%;
    animation: animate-up 1.5s ease infinite;
}

@keyframes animate-up {
    0% {
        background-position: center 150%; opacity: .1;
    }

    100% {
        background-position: center 100%; opacity: 1;
    }
}

.home .col:first-child {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.home .col:first-child img {
    margin-top: 75px;
    transition: all 0.3s ease;
}

.home .col:first-child img:hover {
    transform: scale(1.125);
    transform-origin: center center;
}

.home a {
    margin-top: 75px;
    text-decoration: none;
    text-align: center;
}

.home a h1 {
    color: var(--main-color);
    background: white;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 3px white;
    padding: 15px 30px;
    border-radius: 60px;
}

.home a h1:hover, .home a h1:focus {
    color: white;
    background: transparent;
    transform: translateY(-15px);
}

.home h2 {
    color: white;
    font-size: 56px;
    font-weight: 300;
    cursor: default;
}

.home a h1 {
    text-align: center;
    font-size: 64px;
    margin: 0;
}

.logos li:nth-child(2) {
    left: 5%;
    width: 188px;
    height: 170px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.offcanvas {
    transition: transform 0.5s ease-in-out;
}

.offcanvas.offcanvas-start, .offcanvas.offcanvas-end, .offcanvas.offcanvas-top, .offcanvas.offcanvas-bottom {
    width: 100%;
    background-image: url(../images/ico_bg.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}

.offcanvas.offcanvas-top, .offcanvas.offcanvas-bottom {
    height: 100%;
}

.offcanvas-title {
    font-size: 72px;
    font-weight: 300;
    margin: auto;
}

.offcanvas-header .btn-close {
    font-size: 2rem;
    border: unset;
    width: 50px;
    height: 50px;
    color: white;
    background: var(--main-color);
    border-radius: unset;
}

.offcanvas-header .btn-close:hover, .offcanvas-header .btn-close:focus {
    background: var(--blue-color);
}

.offcanvas-body {
    padding: 0;
}

body.main-page .offcanvas-body section {
    min-width: unset;
    min-height: unset;
    justify-content: flex-start;
}

.offcanvas-body .btn-primary {
    font-size: 24px;
    font-weight: 400;
    width: 250px;
}

.offcanvas-body .btn-primary:nth-child(even) {
    width: 370px;
}

.customers-deals {
    position: relative;
}

.customers-deals .d-flex > div, .customers-events .d-flex > div, .magazines .d-flex > div, .customers-exposure .d-flex > div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 15px;
}

.customers-deals .d-flex > div {
    opacity: .5;
}

.customers-deals img {
    max-width: 260px;
}

.customers-events img {
    max-width: 369px;
    transition: all 0.3s ease;
    position: relative;
}

.magazines a, .customers-events a, .customers-exposure a {
    overflow: hidden;
    position: relative;
}

.magazines img, .customers-exposure img {
    max-width: 466px;
    transition: all 0.3s ease;
    position: relative;
}

.magazines a:hover img, .customers-events a:hover img, .customers-exposure a:hover img {
    transform: scale(1.125);
    transform-origin: center center;
}

.magazines a:hover::before, .customers-events a:hover::before, .customers-exposure a:hover::before {
    content: '';
    position: absolute;
    box-shadow: 0 0 0 4px inset #4d9fd3;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#deals-pop .modal-content {
    position: fixed;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    width: 960px;
    top: 224px;
    background: var(--main-color);
    transition: all 0.3s ease;
    /* box-shadow: 0 0 50px 100px rgb(255 255 255 / 50%); */
}

#deals-pop .modal-content:hover {
    transform: translateY(-20px);
}

.audio-jeru {
    position: relative;
    width: 466px;
    height: 326px;
    display: flex;
    gap: 30px;
    padding: 15px;
    justify-content: center;
    background: url(../images/exposure/6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.audio-jeru audio {
    width: 115px;
    margin-top: 77px;
    height: 44px;
    transition: all 0.3s ease;
}

.audio-jeru audio:hover {
    transform: scale(1.125);
    transform-origin: center center;
}

auto::-webkit-media-controls-panel {
    justify-content: center;
}

audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-volume-control-container,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline {
    display: none;
}

audio::-webkit-media-controls-panel {
    color: white;
    background-color: #018ad2;
}

audio::-webkit-media-controls-play-button {
    background-color: white;
    border-radius: 50%;
}

audio::-webkit-media-controls-panel:hover {
    background: var(--main-color);
}

body.main-page #magazine-pop .offcanvas-body section,
body.main-page #exposure-pop .offcanvas-body section {
    height: 100%;
    justify-content: center;
}

body.main-page section.forth,
body.main-page section.fifth,
body.main-page section.sixth,
body.main-page section.seventh {
    padding: 60px 0 40px;
}

body.main-page section.fifth, body.main-page section.seventh {
    background: #eeeeee;
}

.fifth .iframe-frame div h4,
.seventh .iframe-frame div h4 {
    letter-spacing: -2px;
}

body.main-page section.eighth {
    padding: 0 0 40px;
}

.eighth .heads {
    background: var(--main-color);
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 50px 0 40px;
    margin-bottom: 50px;
}

.eighth h1 {
    font-size: 72px;
    color: white;
}

.eighth h2 {
    font-size: 48px;
    color: white;
}

.eleventh {
    background: var(--main-color);
    height: 100%;
}

.eleventh h2 {
    font-size: 82px;
    color: white;
    margin-bottom: 20px;
}

body.main-page .eleventh .video-wrapper {
    height: 300px;
    min-height: unset;
}

#modal2 h3 {
    font-size: 30px;
    margin: auto auto 20px;
    text-align: center;
}

#modal2 h4 {
    font-size: 22px;
    color: white;
    padding: 4px;
    background: var(--main-color);
    margin: auto;
    text-align: center;
    font-weight: 300;
}

#modal2 .modal-content {
    background: white;
}

.twelve {
    height: 100%;
    padding-bottom: 0;
}

.twelve iframe {
    height: 100vh;
}

.sec-nav {
    position: fixed;
    right: 0;
    top: calc(100vh / 2 - 182px);
    background: #ffffff36;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
}

.sec-nav span {
    display: inline-flex;
}

.sec-nav a {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    background: var(--main-color);
    transition: all 0.3s ease;
}

.sec-nav a:hover {
    background: var(--blue-color);
    box-shadow: 0 0 0 5px var(--main-color);
}

.sec-nav1 {
    background: #cdcdcd70;
}

.sec-nav2 a {
    background: var(--blue-color);
}

.sec-nav2 a:hover {
    background: var(--main-color);
    box-shadow: 0 0 0 5px var(--blue-color);
}