@font-face {
     font-family: "Poppins";
     src: url(../fonts/Poppins/Poppins-Regular.ttf) format("truetype");
}


@font-face {
     font-family: "Gilroy-Regular";
     src: url(../fonts/Gilroy/Gilroy-Regular.ttf) format("truetype");
}

@font-face {
     font-family: "Gilroy-SemiBold";
     src: url(../fonts/Gilroy/Gilroy-SemiBold.ttf) format("truetype");
}

@font-face {
     font-family: "Montserrat-edu";
     src: url(../fonts/Montserrat/Montserrat-ExtraBold.ttf) format("truetype");
}

:root {
     --primary-bg: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);
     --secondary-bg: #272727;
     --primary-color: #F06445;
     --secondary-color: #272727;
     --ed-white: #ffffff;
     --section-padding: clamp(5em, 21vh, 12em);
     --container-padding: clamp(2.5em, 8vw, 8em);
     --gap-padding: clamp(1.5em, 4vw, 2.5em);
}

.c-scrollbar_thumb {
     position: absolute;
     top: 0;
     right: 0;
     background-color: var(--primary-color);
     opacity: 1;
     width: 7px;
     border-radius: 10px;
     margin: 2px;
     cursor: -webkit-grab;
     cursor: grab;
}


/* Scrollbar Styling */
::-webkit-scrollbar {
     width: 0px;
}

::-webkit-scrollbar-track {
     background-color: transparent;
     -webkit-border-radius: 10px;
     border-radius: 10px;
}

::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
     border-radius: 10px;
     background: #f36f37;
}

.button {
     position: relative;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: none;
     cursor: pointer;
     outline: none;
     overflow: hidden;
}

.button span {
     position: relative;
     pointer-events: none;
}

.target {
     transition: 0.3s all;
}

.button::before {
     --size: 0;
     content: '';
     position: absolute;
     left: var(--x);
     top: var(--y);
     width: var(--size);
     height: var(--size);
     background: radial-gradient(circle closest-side, #FF9900, transparent);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     transition: width .2s ease, height .2s ease;
}

.button:hover::before {
     --size: 400px;
}

.bg-blur {
     position: absolute;
     inset: 0;
     background: linear-gradient(119.3deg, rgba(48, 38, 67, 0.6) 3.18%, rgba(21, 15, 17, 0.6) 25.55%, rgba(52, 56, 63, 0.6) 62.89%, rgba(39, 56, 72, 0.6) 106.42%);

     backdrop-filter: blur(210px);
     -webkit-backdrop-filter: blur(210px);
     height: 100%;
     width: 100%;
     -webkit-transform: translateZ(0);
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
}

.bg-about-3 {
     background: linear-gradient(269deg, #E8E8E7 0%, #EAEAEA 10.60%, #F1F1F1 69.46%, #F2F2F2 100%);
}

.noice-bg {
     background-image: url(../images/texture/noise-bg.png);
}

.containers {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100vh;
     align-items: center;
     justify-content: center;
     align-content: center;
}

.containers:nth-of-type(1) {
     background-color: lightgrey;
}

/*MACBOOK PRO*/
.contenitore-css-macbook {
     width: 100%;
     position: relative;
}

.css-macbook {
     max-width: 100%;
     /* Set the desired maximum width of the macbook */
     min-width: 99vmin;
}

.css-macbook div {
     box-sizing: border-box !important;
     /* Just in case */
}

/* Center the display */
.css-macbook .macbook-display-position {
     /* width: 40%; */
     margin: 0 auto;
}

/* The display */
.css-macbook .macbook-display {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 65.9442%;
     background: #373435;

     -webkit-border-top-left-radius: 3.5% 5.3075%;
     -moz-border-radius-topleft: 3.5% 5.3075%;
     border-top-left-radius: 3.5% 5.3075%;

     -webkit-border-top-right-radius: 3.5% 5.3075%;
     -moz-border-radius-toptight: 3.5% 5.3075%;
     border-top-right-radius: 3.5% 5.3075%;

     -webkit-border-bottom-left-radius: 3.5% 5.3075%;
     -moz-border-radius-bottomleft: 3.5% 5.3075%;
     border-bottom-left-radius: 3.5% 5.3075%;

     -webkit-border-bottom-right-radius: 3.5% 5.3075%;
     -moz-border-radius-bottomtight: 3.5% 5.3075%;
     border-bottom-right-radius: 3.5% 5.3075%;
     outline: .5px solid #fff
}

/* Webcam */
/* Browser may not render a perfect circle */
.css-macbook .macbook-display:before {
     content: '';
     display: block;
     position: absolute;
     top: 3%;
     left: 50%;
     width: 1%;
     height: 1.5164%;
     margin-left: -0.5%;
     border-radius: 50%;
     background: #999;
     opacity: 0;
     transition: opacity .3s ease
}

.acceso .macbook-display:before {
     opacity: 1;
     display: block
}

/* Glare */
/* Browser may not render the top and right offset evenly */
.css-macbook .macbook-display:after {
     content: '';
     display: none;
     position: absolute;
     right: 0.4%;
     top: 0.64%;
     width: 62.5%;
     height: 100%;

     background: none;
     /* Hide the gradient on older browsers */
     background: -moz-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(255, 255, 255, 0.05) 61%);
     /* FF3.6+ */
     background: -webkit-linear-gradient(36deg, rgba(0, 0, 0, 0) 61%, rgba(255, 255, 255, 0.05) 61%);
     /* Chrome10+ and Safari5.1+ compute the degree differently */
     background: -o-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(255, 255, 255, 0.05) 61%);
     /* Opera 11.10+ */
     background: -ms-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(255, 255, 255, 0.05) 61%);
     /* IE10+ */
     background: linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(255, 255, 255, 0.05) 61%);

     -webkit-border-top-right-radius: 5.3075%;
     -moz-border-radius-toptight: 5.3075%;
     border-top-right-radius: 5.3075%;
}

/* Only show glare, if the class is applied */
.css-macbook.with-glare .macbook-display:after {
     display: block;
}

/* Position the screen and give make it the right size, ratio 16:10 */
.css-macbook .macbook-screen-position {
     /* position: absolute;
     top: 6.5%;
     width: 93.2%;
     left: 3.4%;
     height: 0;
     margin: 0;
     padding-bottom: 58.25%; */
     position: absolute;
     top: 2.5%;
     width: 97.2%;
     left: 1.4%;
     height: 0;
     margin: 0;
     padding-bottom: 61.9442%;
     /* Ratio */
}

/* Give parent (this element) a "height", so that child elements can use height: 100%;*/
.css-macbook .macbook-screen {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
     background: #4b4b4d;
     /* bg color if content is not big enough, or rendering is off */
}

/* Image on the screen */
.css-macbook .macbook-screen img {
     max-width: 100%;
     height: auto;
}

/* Iframe on the screen */
.css-macbook .macbook-screen iframe {
     width: 100%;
     height: 100%;
     border: 0;
}

.video-ux-design {
     width: 100%;
     height: -webkit-fill-available;
     object-fit: cover;
}

.pa-hero-bg-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     -webkit-transform: translateZ(20px);
     -moz-transform: translateZ(20px);
     transform: translateZ(20px);
     background: rgba(0, 0, 0, .78);
}

.pa-hero-bg-overlay2 {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     -webkit-transform: translateZ(20px);
     -moz-transform: translateZ(20px);
     transform: translateZ(20px);
     background: rgba(0, 0, 0, .65);
}

.course {
     background: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.button1 {
     background: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);
}

.git {
     background: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);
}

.title_section {
     background-image: url(../images/text_bg.png);
     background-attachment: fixed;
     background-repeat: repeat;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
}

.bg {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     overflow: hidden;
}

.bg2 {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     overflow: hidden;
}


.bg-image1 {
     width: 100%;
     height: 100%;
     background-image: url("../images/parallax.png");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     overflow: hidden;
}

.bg-image2 {
     width: 100%;
     height: 100%;
     background-image: url("../images/about/about-3-bg1.png");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     overflow: hidden;
     z-index: 0;
}


.parallax-container {
     height: 100vh;
     overflow: hidden;
}

.parallax-video {
     position: relative;
     height: 200%;
     width: 100%;
}

.parallax-video video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: auto;
     transform: translate3d(0, 0, 0);
}

/* .childfeatures .childsf::after {
     content: "";
     height: 1px;
     width: 100%;
     background: gray;
}
 */




.navbar--scrolled {
     height: 50px;
     background: #000;
}


.markerspace .icon {
     position: absolute;
     width: 110px;
     height: 110px;
     background: #FEF8F5;
     border-top-left-radius: 2.2rem;
     transition: 0.5s;
     bottom: 0;
     right: 0;
}

.markerspace .icon::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: -30px;
     width: 30px;
     height: 30px;
     background: #e71e1e00;
     border-bottom-right-radius: 1.5rem;
     box-shadow: 6px 6px 0 5px #FEF8F5;
}

.markerspace .icon::after {
     content: '';
     position: absolute;
     top: -30px;
     right: 0px;
     width: 30px;
     height: 30px;
     background: transparent;
     border-bottom-right-radius: 1.5rem;
     box-shadow: 6px 6px 0 5px #FEF8F5;
}

.markerspace .icon .iconbox {
     position: absolute;
     inset: 20px;
     /* background: #EFEFEF; */
     border-radius: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: 0;
     right: 0;
     font-weight: 600;
}

@media only screen and (max-width: 1080px) {
     .markerspace .icon {
          width: 80px;
          height: 80px;
     }
}


/* CONATCT FOOTER  HOME*/
.contact_footer .icon {
     position: absolute;
     width: 110px;
     height: 110px;
     /* background: var(--clr); */
     border-bottom-left-radius: 30%;
     transition: 0.5s;
     right: 0;
}

.contact_footer .icon::before {
     content: '';
     position: absolute;
     bottom: -30px;
     right: 0;
     width: 30px;
     height: 30px;
     background: transparent;
     border-top-right-radius: 30px;
     box-shadow: 6px -6px 0 5px #ffffff;
}

.contact_footer .icon::after {
     content: '';
     position: absolute;
     top: 0;
     right: 110px;
     width: 30px;
     height: 30px;
     background: transparent;
     border-top-right-radius: 30px;
     box-shadow: 6px -6px 0 5px #ffffff;
}

.contact_footer .icon .iconbox {
     position: absolute;
     inset: 15px;
     background: #EFEFEF;
     border-radius: 30%;
     border-top-right-radius: 30px;
     border-bottom-left-radius: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     top: 0;
     right: 0;
     font-weight: 600;
}





/* Navbar Responsive  */

body.scrolled .navbar-toggle {
     background-color: rgb(39 39 39 / 60%);
     border-radius: 9999px;
}

body.scrolled .navbar-toggle.active {
     background-color: transparent;
     /* opacity: 0.5; */
     border-radius: 9999px;
}

.navbar-toggle {
     -webkit-tap-highlight-color: transparent;
     transition: transform 400ms;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
     /* position: fixed; */
     /* z-index: 20; */
     /* top: 1rem;
     right: 1rem;
     border: none;
     outline: none;
     padding: 0; */
}

.navbar-toggle .line {
     fill: none;
     transition-delay: 400ms, 0;
     transition-property: stroke, stroke-dasharray, stroke-dashoffset;
     transition-timing-function: ease;
     transition-duration: 400ms;
     stroke: #fff;
     stroke-width: 5.5;
     stroke-linecap: round;
}

.navbar-toggle .line.top {
     stroke-dasharray: 40 139;
}

.navbar-toggle .line.bottom {
     stroke-dasharray: 20 180;
     stroke-dashoffset: -20px;
}

.navbar-toggle.active {
     transform: rotate(45deg);
}

.navbar-toggle.active .line {
     stroke: #fff;
}

.navbar-toggle.active .line.top {
     stroke-dashoffset: -98px;
}

.navbar-toggle.active .line.bottom {
     stroke-dashoffset: -138px;
}

/* .navbar-toggle:not(.active):hover .line.bottom {
     stroke-dasharray: 40 180;
     stroke-dashoffset: 0px;
} */

.navbar-mobile {
     position: fixed;
     width: 100%;
     height: 100%;
     z-index: 2;
     display: none;
     align-items: center;
     justify-content: center;
}

.navbar-mobile ul {
     width: 100%;
     max-width: 200px;
     list-style: none;
     padding: 0;
     margin: 0;
}

.navbar-mobile ul li {
     opacity: 0;
}

.navbar-mobile ul li a {
     color: white;
     text-decoration: none;
     font-size: 25px;
     display: block;
     text-align: left;
     padding: 20px 0;
     font-weight: bold;
     letter-spacing: 2px;
     text-transform: uppercase;
     cursor: pointer;
     transition: all ease 500ms;
     position: relative;
}

.navbar-mobile ul li a:before {
     content: attr(data-text);
     position: absolute;
     left: 0;
     top: 50%;
     transform: translate(-50%, -50%);
     font-size: 70px;
     opacity: 0;
     transition: opacity ease 500ms;
}

.navbar-mobile ul li a:hover {
     letter-spacing: 3px;
}

.navbar-mobile ul li a:hover:before {
     opacity: 0.2;
}

#bg-circle {
     transform: scale(0);
     width: 80px;
     height: 80px;
     background: #1c1d20;
     position: fixed;
     top: 1rem;
     right: 1rem;
     border-radius: 50%;
     z-index: 1;
}

/* navbar top fixed  */

.navbar,
.navbar_wrapper {
     transition: ease 0.4s;
}

.navbar--up {
     top: -60px;
     transition: ease 0.4s;
}

.navbar--scrolled {
     height: 60px;
     background: #101010cf;
     backdrop-filter: blur(50px);
     transition: ease 0.4s;
}

.navbar--scrolled .navbar_wrapper {
     height: 60px;
     transition: ease 0.4s;
}

.scrollable-area {
     height: 200vh;
     padding: 100px;
}


/* ------------------------- Home - Horizontal Gallery -------------------------------------------------- */
.gallery-section {
     --section-padding: clamp(5em, 21vh, 12em);
     --container-padding: clamp(2.5em, 8vw, 8em);
     --gap-padding: clamp(1.5em, 4vw, 2.5em);
     margin: 0 auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
     max-width: 100em;
}

.overlay {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
}

.gallery-imgs {
     display: block;
     width: 100%;
     order: 2;
     position: relative;
}

.horizontal-items {
     overflow: hidden;
     /* padding-top: calc(var(--section-padding) * 0.75); */
     padding-bottom: calc(var(--section-padding) - 2.5vw);
}

.horizontal-items .gallery-section {
     padding: 0;
     transform: rotate(0deg);
}

.horizontal-items .row-img {
     width: 120vw;
     left: -16vw;
     will-change: transform;
}

.horizontal-items .gallery-imgs {
     width: 20%;
     padding: calc(var(--gap-padding) / 2);
     padding: 1.25vw;
     will-change: transform;
}

.horizontal-items .horizontal-single-item {
     position: relative;

     /* added css  */
     border-radius: 14px;
     overflow: hidden;
     height: 165px;
}

.horizontal-items .horizontal-single-item::before {
     display: block;
     content: "";
     padding-top: 75%;
}

@media screen and (max-width: 1000px) {
     .horizontal-items .gallery-imgs {
          width: 33.333%;
     }

     .horizontal-items .gallery-imgs:nth-child(4) {
          display: none;
     }
}

@media screen and (max-width: 540px) {
     .horizontal-items {
          padding-top: calc(var(--section-padding) * 1);
          padding-bottom: 0;
     }

     .horizontal-items .gallery-imgs {
          width: 50%;
          padding: 2.5vw;
     }

     .horizontal-items .gallery-imgs:nth-child(4) {
          display: block;
     }

     .horizontal-items .row-img {
          width: 320vw;
     }

     /* .horizontal-items .row-img {
          width: 120vw;
     } */

     .horizontal-items .row-img.row-1,
     .horizontal-items .row-img.row-2 {
          transform: translate(0, 0) !important;
     }

     .horizontal-items .row-img-1 .gallery-imgs:nth-child(3),
     .horizontal-items .row-img-1 .gallery-imgs:nth-child(4) {
          transform: translate(-20vw, 0);
     }

     .horizontal-items .row-img-2 .gallery-imgs:nth-child(3),
     .horizontal-items .row-img-2 .gallery-imgs:nth-child(4) {
          display: none;
     }

     /* .horizontal-items .gallery-section {
          display: none;
          opacity: 0;
          visibility: hidden;
     } */

     .horizontal-items {
          padding-top: 0;
     }
}

/* Pre Loader Gsap animation  */

.preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #000;
     overflow: hidden;
     z-index: 100;
}

.preloader .text-container {
     display: flex;
     flex-direction: row;
     gap: 1em;
     overflow: hidden;
     color: white;
     opacity: 0;
}


/* .preloader .text-container svg {

     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;

     animation: dash 3s infinite alternate;

     stroke-dasharray: 400px;
     stroke-dashoffset: -400px;
} */

/* @keyframes dash {
     from {
          stroke-dashoffset: -400px;
     }

     to {
          stroke-dashoffset: 0px;
     }
} */

.preloader .text-container svg {
     position: absolute;
     font: 40px Poppins;
     /* width: 100%;
     height: 100%;
     margin-top: 5%; */
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
}

.preloader .text-container svg text {
     fill: #fc8c11;
     stroke: #fc8c11;
     fill-opacity: 1;
     font-weight: bold;
     stroke-width: 0;
     stroke-dasharray: 100% 0;
     animation: stroke-offset 2s ease-in;
}

@keyframes stroke-offset {
     0% {
          fill-opacity: 0;
          stroke-width: 0;
          stroke-dasharray: 0% 100%;
     }

     25% {
          stroke-width: 2px;
     }

     50% {
          fill-opacity: 0;
     }

     75% {
          stroke-width: 2px;
     }

     100% {
          stroke-width: 0;
     }
}

/* 
.preloader .text-container svg {
     position: absolute;
     font: 5em Poppins;
     top: 50%;
     transform: translate(-50%, -50%);
     left: 50%;
}

.preloader .text-container svg text {
     fill: #fc8c11;
     stroke: #fc8c11;
     fill-opacity: 1;
     font-weight: bold;
     stroke-width: 0;
     stroke-dasharray: 100% 0;
     animation: stroke-offset 2s ease-in infinite alternate;
}

@keyframes stroke-offset {
     0% {
          fill-opacity: 0;
          stroke-width: 0;
          stroke-dasharray: 0% 100%;
     }

     25% {
          stroke-width: 3px;
     }

     50% {
          fill-opacity: 0;
     }

     75% {
          stroke-width: 3px;
     }

     100% {
          stroke-width: 0;
     }
} */


.bg_student::after {
     width: 300px;
     height: 72px;
     position: absolute;
     filter: blur(17.453479766845703px);

}

.footer {
     background: linear-gradient(108.38deg, #221D33 1.7%, #3A2B46 45.59%, #523B53 98.92%);
}

.glass_container {
     border-radius: 13.497px;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 3.04%, rgba(255, 255, 255, 0.00) 96.03%);
     backdrop-filter: blur(13.497163772583008px);
     /* border: 1.18px solid; */

}

.glass_container::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 13.497px;
     padding: 1px;
     background: linear-gradient(307deg, rgba(81, 66, 89, 0) -26.1%, #ffffff73 113.74%), linear-gradient(130deg, #9D9D9D -7.91%, rgba(0, 0, 0, 0) 69.8%), linear-gradient(359deg, #B6A08C 10.07%, rgba(0, 0, 0, 0.14) 64.5%);
     -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;

}

.lightbox {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: rgba(0, 0, 0, .7);
     z-index: 9999;
}

.appear {
     opacity: 1;
}

.bg_video_scroll {
     position: relative;
     /* width: 100%; */
     /* height: 100vh; */
     overflow: hidden;
}



.bg_video_scroll video {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1;
}

.bg_video {
     position: relative;
     width: 100%;
     /* height: 100vh; */
     overflow: hidden;
}



.bg_video video {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1;
}

.bg video {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1;
}

.span-lines.animate .span-line {
     position: relative;
     display: inline-flex;
     overflow: hidden;
}

.span-lines.animate .span-line .span-line-inner {
     position: relative;
     display: block;
}

.lines {
     padding-bottom: 0.35rem;
     will-change: transform;
     overflow: hidden;
}

.svgsprite {
     -webkit-animation: educraft-anime 5s infinite linear;
     animation: educraft-anime 5s infinite linear;
}

@keyframes educraft-anime {
     0% {
          transform: rotate(0);
     }

     100% {
          transform: rotate(360deg);
     }
}

.bottom-video {
     position: relative;
     contain: layout;
     /* transform: translateY(-8%); */
}

/* .video_scroll_section {
     margin: 0 auto;
} */

.video-scroll {
     position: relative;
     width: 100%;
     /* height: 100%; */
     overflow: hidden;
     transform: translateZ(0);
     border-radius: 1000px;
}

.video-scroll video {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width:1023px) {
     .video-scroll {
          height: 100%;
     }

     .video_scroll_section {
          height: 200px;
     }
}

@media screen and (min-width:1024px) {
     .bottom-video {
          max-width: 100%;
          /* margin-left: 5rem; */
          /* transform: translateY(-50%); */

     }

     .video_scroll_section {
          width: auto;
          /* height: 53.2rem; */
          max-width: 40rem;
          /* margin: 0 0 0 auto; */
     }
}

.box_bg {

     background: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);

     opacity: 0.4;

}

.text_ {

     background: linear-gradient(225.49deg, #FF9900 -10.05%, #F06445 116.14%);

     -webkit-background-clip: text;

     -webkit-text-fill-color: transparent;

     background-clip: text;

}

h1,
h2,
h3 {
     margin: 0;
}

.hh {

     margin: 0;
     position: relative;
     overflow: hidden;
}

h1>div {
     position: relative;
     margin: 0;
}

.split-parent {
     overflow: hidden;
}

.split-child {
     display: inline-block;
     position: relative;

}

.text-heading {
     width: 100%;
}

.line,
.span-line {
     overflow: hidden;
}


/* PRELOADER CSS */
.page-loaderhome {
     width: 100%;
     height: 100vh;
     position: absolute;
     background: #0e0e0e;
     z-index: 1000;
     position: fixed;
     top: 0;
     left: 0;


}

.page-loaderhome .txt {
     color: #666;
     text-align: center;
     top: 40%;
     position: relative;
     text-transform: uppercase;
     letter-spacing: 0.3rem;
     font-weight: bold;
     line-height: 1.5;
}

.page-loader {
     width: 100%;
     height: 100vh;
     /* position: absolute; */
     background: #0e0e0e;
     z-index: 1000;
     position: fixed;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;


}

.page-loader .txt {
     color: #666;
     text-align: center;
     top: 40%;
     position: relative;
     text-transform: uppercase;
     letter-spacing: 0.3rem;
     font-weight: bold;
     line-height: 1.5;
}

/* SPINNER ANIMATION */
.spinner {
     position: relative;
     top: 35%;
     width: 80px;
     height: 80px;
     margin: 0 auto;
     background-color: #fff;

     border-radius: 100%;
     -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
     animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
     0% {
          -webkit-transform: scale(0)
     }

     100% {
          -webkit-transform: scale(1.0);
          opacity: 0;
     }
}

@keyframes sk-scaleout {
     0% {
          -webkit-transform: scale(0);
          transform: scale(0);
     }

     100% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
          opacity: 0;
     }
}



.loader {
     width: 48px;
     height: 48px;
     border: 3px solid #FFF;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     box-sizing: border-box;
     animation: rotation 1s linear infinite;
}

.loader::after {
     content: '';
     box-sizing: border-box;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 56px;
     height: 56px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-bottom-color: var(--primary-color);
}

@keyframes rotation {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);
     }
}









.accordion {
     display: block;
     /* width: 400px; */
     overflow: hidden;
     margin: 0 auto;
     background: white;
     border-radius: 4px;
     position: relative;
     /* box-shadow: 0 2px rgba(0, 0, 0, 0.12); */
}

.panel-ac {
     display: block;
     background: white;
     position: relative;
     overflow: hidden;
     color: #b5abab;
     margin: 0 auto;
}

.panel-header {
     line-height: 56px;
     background: white;
     cursor: pointer;
     text-indent: 15px;
     /* border-bottom: 1px solid #e4e4e4; */
}

.spacer {
     /* height: 3px;
     position: absolute;
     width: 0;
     display: block;
     top: 54px; */
     /* background: #38B087; */
}

.panel-content {
     /* background: rgba(92, 127, 94, 0.72); */
     position: relative;
     border-top: 0px solid rgba(0, 0, 0, 0.12);
     height: 0;
}

.item {
     display: block;
     width: 100%;
     cursor: pointer;
     padding: 15px 0;
     text-decoration: none;
     color: white;
     text-indent: 25px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.item:hover {
     /* background-color: rgba(0, 0, 0, 0.06); */
}

.panel-ac i {
     text-indent: 0;
     /* Keep paragraph text-indent setting from affecting icons */
     padding-right: 6px;
}

.panel-ac span i {

     padding-right: 0;
     /* No padding on arrow icon */
}

.arrow {
     text-indent: 0;
     /* Keep paragraph text-indent setting from affecting icons */
     line-height: 56px;
     float: right;
     position: relative;
     right: 16px;
     font-weight: bold;
}

.photobanner {
     position: absolute;
     top: 0px;
     left: 0px;
     overflow: hidden;
     white-space: nowrap;
     animation: bannermove 10s linear infinite;
}

.photobanner img {
     margin: 0 0.5em
}

@keyframes bannermove {
     0% {
          transform: translate(0, 0);
     }

     100% {
          transform: translate(-50%, 0);
     }
}



logo-slider {
     --image-size: 180px;
     /* border: 1px solid #575757; */
     padding: 20px;
     overflow: hidden;
     max-width: 900px;
     width: 100%;
     margin: 0 auto;
     position: relative;
     display: flex;
}

/* logo-slider:hover div {
     animation-play-state: paused;
} */

logo-slider div {
     display: flex;
     position: relative;
     animation: marquee 10s linear infinite;
     justify-content: space-around;
}

logo-slider img {
     display: block;
     min-width: var(--image-size);
     width: var(--image-size);
     margin: 0 1vw;
     object-fit: scale-down;
}


@media (max-width: 900px) {
     logo-slider {
          --image-size: 140px;
          /* --image-size: min(max(50px, 10vw), 100px); */
     }
}

@keyframes marquee {
     0% {
          transform: translateX(0%);
     }

     100% {
          transform: translateX(-100%);
     }
}


.owl-nav button {
     position: absolute;
     top: 50%;
     background-color: var(--primary-color);
     color: #fff;
     margin: 0;
     transition: all 0.3s ease-in-out;
}

.owl-nav button.owl-prev {
     left: 0;
}

.owl-nav button.owl-next {
     right: 0;
}

.owl-dots {
     text-align: center;
     padding-top: 15px;
}

.owl-dots button.owl-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     display: inline-block;
     background: var(--primary-color);
     opacity: 0.3;
     margin: 0 3px;
}

.owl-dots button.owl-dot.active {
     background-color: var(--primary-color);
     opacity: 1;
}

.owl-dots button.owl-dot:focus {
     outline: none;
}

.owl-nav button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.38) !important;
}

/* span {
       font-size: 70px;    
       position: relative;
       top: -5px;
   } */
.owl-nav button:focus {
     outline: none;
}


/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
     -webkit-background-clip: text;
     /* -webkit-text-fill-color: #ffffff; */
     transition: background-color 5000s ease-in-out 0s;
     box-shadow: inset 0 0 20px 20px #23232300;
}

@media screen and (max-width:1023px) {
     .input-subscribe input {
          text-align: center;
     }

     .input-subscribe input::placeholder {
          text-align: center;
     }

     /* or, for legacy browsers */

     .input-subscribe input::-webkit-input-placeholder {
          text-align: center;
     }

     .input-subscribe input:-moz-placeholder {
          /* Firefox 18- */
          text-align: center;
     }

     .input-subscribe input::-moz-placeholder {
          /* Firefox 19+ */
          text-align: center;
     }

     .input-subscribe input:-ms-input-placeholder {
          text-align: center;
     }
}

.jarallax {
     position: relative;
     z-index: 0;
     height: 100vh;
}

.jarallax>.jarallax-img {
     position: absolute;
     object-fit: cover;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}

.popup {
     width: 400px;
     background: #fff;
     border-radius: 6px;
     position: absolute;
     top: 25%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.1);
     text-align: center;
     padding: 30px;
     visibility: hidden;
     transition: transform 0.4s, top 0.4s;
     box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
 
.popup h2 {
     font-size: 38px;
     font-weight: 500;
     margin: 30px 0 10px;
}
 
.open-popup {
     visibility: visible;
     top: 50%;
     transform: translate(-50%,-50%)scale(1);
}
 
 
.popup i {
     font-size: 50px;
}
.error-message {
     color: rgb(255, 71, 71);
}