@font-face {
    font-family: 'Myriad Pro';
    src: url('../MyriadPro_Font/Myriad\ Pro\ Black.otf') format('woff2'),
         url('../MyriadPro_Font/Myriad\ Pro\ Bold.ttf') format('woff'),
         url('../MyriadPro_Font/Myriad\ Pro\ Light.otf') format('truetype'),
         url('../MyriadPro_Font/Myriad\ Pro\ Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Myriad Pro Light', sans-serif;
}

body,html {
    overflow-x: hidden;
    min-height: 100vh;
    width:100vw;
}

body {
    margin: 0;
    padding: 0;
    background: url(../images/Asset\ 1.png);
    /* background:linear-gradient(to left, grey,black); */
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    color: #fff;
    font-size: 16px
}

@media (max-width: 768px) {
    body {
        font-size:13px;
        overflow-x: hidden;
        min-height: 100vh;
        max-width:100vw;
    }
    /*.header-logo-wrp{*/
    /*    margin-left:-65px;*/
    /*}*/
}

#wrapper {
    width: 100%;
    overflow-x: hidden;
    position: relative
}

textarea {
    resize: none
}

h1 {
    font-family: myriad pro;
    font-size: 2em;
    color: #fff;
    text-align: center;
    text-decoration:underline
}

body:not(#homePage) h1 {
    margin-top: 200px
}

.container {
    max-width: 100vw;
    margin: auto
}

.title-caption {
    /* font-family: pp_telegrafregular; */
    font-size: 30px;
    color: #fff;
    text-align: center
}

button {
    color: #fff;
    font-size: 15px;
    padding: 5px 5px 3px;
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: auto;
    text-align: center
    /* font-family: pp_telegrafregular; */
}
#contact-form-submit{    
    color: #fff;
    font-size: 13px;
    padding: 5px 15px;
    background: 0 0;
    border: 2px solid #fff;
    border-radius: 10px;
    margin: auto;
    text-align: center
}

button a {
    text-decoration: none;
    color: #fff
}

body:not(#homePage) button {
    font-size: 20px
}

button:hover {
    background: #fff;
    color: #302473
}
#contact-form-submit:hover{
    background: #fff;
    color: #302473
}

button:hover a {
    background: #fff;
    color: #302473
}

input,input:focus {
    outline: 0
}

.flex {
    display: flex
}

.box-shadow {
    box-shadow: 5px 5px 10px 0 rgba(65, 65, 66, 0.5);
    -webkit-box-shadow: 5px 5px 10px 0 rgba(65, 65, 66, 0.5);
    -moz-box-shadow: 5px 5px 10px 0 rgba(65, 65, 66, 0.5)
}

.blurry {
    filter: blur(5px)
}

section {
    max-width: 100vw;
    margin:auto;

}

.float {
    float: left
}

::placeholder {
    color: #fff;
    opacity: 1
}

:-ms-input-placeholder {
    color: #fff
}

::-ms-input-placeholder {
    color: #fff
}

.max-width-100 {
    max-width: 100%
}

#loading-container {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100vw;
    height: 100vh;
    /* background-image: url(../images/Asset\ 1.png); */
    background-position: 0 0 ;
    z-index: 999;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 16px;
    transition: opacity 0.5s ease-out;
}

.video-loading {
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height to ensure vertical centering */
    margin: 0; /* Remove any default margins */
}

.video-loading video {
    max-width: 40vw; /* 60% of the viewport width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure video is treated as a block element */
    margin: 0 auto; /* Center horizontally */
}

.corner-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the logo over the video */
    /*width: 20%;*/
    display: flex;
    justify-content: center;
    z-index: 1000; /* Ensure it overlays the video */
}
#logo-corner {
    image-rendering: crisp-edges; /* or 'auto' for regular rendering */
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
}



/* #loading-container>div.glow-loading {
    animation: glow-loading ease-in-out 5s infinite
} */

/* #loading-container.glow-out>div {
    outline: 0;
    background: #fff;
    transform: scale(10);
    box-shadow: 0 0 30px 10px rgb(255 255 255),0 0 30px 10px rgb(255 255 255),inset 0 0 30px 10px rgb(255 255 255)
} */

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

/* @keyframes glow-loading {
    0% {
        box-shadow: none
    }

    50% {
        box-shadow: 0 0 15px 5px rgb(255 255 255),0 0 15px 5px rgb(255 255 255),inset 0 0 15px 5px rgb(255 255 255)
    }

    100% {
        box-shadow: none
    }
} */

header {
    border-top: 10px solid #5b00e1;
    display: flex;
    position: absolute;
    top: -10px;
    width: 100%;
    z-index: 10;
    padding: 40px 40px 0 40px;
    box-sizing: border-box;
    align-items: center
}

/* #menu-container {
    margin-left: auto;
    align-self: center;
    display: flex;
    align-items: center;
    position: fixed;
    right:2%;
    top:4%;
} */
#burger-menu {
    cursor: pointer;
    position:absolute;
    right:35px;
    top:50px;
}

#menu-container.opened #burger-menu {
    margin-top: 5px
}

#burger-menu>div {
    width: 28px;
    height: 2px;
    background: #fff;
    margin-top: 8px;
    border-radius: 10px;
    transition: all .5s
}

#burger-menu>div:first-child {
    margin-top: 0
}

#menu {
    position: absolute;
    right: -340px;
    top: 33px;
    width: 300px;
    height: 100%;
    transition: all .5s;
    text-align: right
}

#menu-container.opened #menu {
    right: -20px;
}

#menu-container.opened #burger-menu>div:nth-of-type(1) {
    display: none
}

#menu-container.opened #burger-menu>div:nth-of-type(2) {
    transform: rotate(45deg);
    transition: all .5s
}

#menu-container.opened #burger-menu>div:nth-of-type(3) {
    transform: rotate(-45deg);
    margin-top: -3px;
    transition: all .5s
}

#menu>ul>li {
    list-style: none;
    margin-top: 10px
}

#menu>ul>li a {
    /* font-family: pp_telegrafultrabold; */
    font-size: 23px;
    color: #fff;
    text-decoration: none
}

#menu>ul>li a.active,#menu>ul>li a:hover {
    text-shadow: 0 0 20px #fff
}

#menu-bg {
    display: none
}

#menu-container.opened #menu-bg {
    display: block;
    background: rgba(84 81 85 / 50%);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

#search-container {
    position: relative
}

#search-container input {
    height: 40px;
    width: 0;
    border: 3px solid transparent;
    background: 0 0;
    border-radius: 50px;
    position: relative;
    outline: 0;
    color: #fff;
    padding: 0 50px 0 15px;
    /* font-family: pp_telegrafregular; */
    font-size: 20px;
    transition: width .5s ease-in-out
}

#search-container:not(:hover) input {
    transition: border 0s .6s ease-in-out,width .5s
}

#search-container input.opened,#search-container:hover input {
    width: 235px;
    border: 2px solid #fff;
    transition: width .5s ease-in-out
}

#search-container img {
    position: absolute;
    right: 16px;
    top: 11px
}

@keyframes typing {
    0% {
        width: 0
    }

    20% {
        width: 0
    }

    40% {
        width: 166px
    }

    60% {
        width: 166px
    }

    80% {
        width: 0
    }

    100% {
        width: 0
    }
}

#logo-container {
    overflow: hidden;
    border-radius:5px;
    padding:10px;
    /* animation: typing 12s infinite */
    position:absolute;
    top:10%;
}

/* Default styling for larger screens */
#logo-container img {
    width: 20%; /* Make the image responsive by default */
}

/* Media query for screens smaller than 768px (typical tablets and mobiles) */
@media (max-width: 768px) {
    #logo-container img {
        width: 50%; /* Adjust width to 80% on smaller screens */
    }
}

#logo-o {
    box-shadow: 0 0 6px 1px rgb(255 255 255),0 0 10px 1px rgb(255 255 255),inset 0 0 6px 1px rgb(255 255 255),inset 0 0 2px 1px rgb(255 255 255);
    width: 17px;
    height: 14px;
    border: 3.5px solid #fff;
    border-radius: 6px;
    margin-top: -4px
}

#introduction-video {
    position: relative
}
#introduction-video {
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    height: 100vh;            /* Make sure the container takes the full height of the viewport */
}

#introduction-video video {
    width: 100vw;
    max-height: 100vh;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto; /* Center the video horizontally if needed */
    display: block;
    z-index:9
}
#introduction-video iframe {
    width: 100vw;
    max-height: 100vh;
    height:100vh;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto; /* Center the video horizontally if needed */
    display: block;
    z-index:9
}

#introduction-video {
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    height: 100vh;            /* Make sure the container takes the full height of the viewport */
    position: relative;       /* Necessary for absolute positioning of the pseudo-element */
}

#introduction-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../blog-images/75921_A .png');
    background-size: cover;    /* Cover the entire container */
    background-position: center; /* Center the background image */
    opacity: 0.1;              /* Adjust the opacity here */
    z-index: 1;                /* Ensure it is behind the content */
}

/* #introduction-video > * {
    z-index: 2;             
} */



/* #introduction-video #start-scroll {
    cursor: pointer;
    position: absolute;
    left: 50%;
    margin-left: -18px;
    bottom: 40px;
    z-index: 10
} */

#introduction-video #mute {
    cursor: pointer;
    position: absolute;
    right: 32px;
    bottom: 32px;
    z-index: 10;
    height: 25px;
    width: 28px;
    object-fit: contain;
    object-position: right
}

.footer-container{
    max-width:90vw;
}
@media (max-width: 768px) {
    #introduction-video video {
        height: 100vh; /* Full viewport height */
        width: 100%; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    #introduction-video iframe {
        height: 100vh; /* Full viewport height */
        width: 100%; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    #loading-video{
        height: 100vh; /* Full viewport height */
        width: 100vw !important; /* Full width of the container */
        /* background-color:black; */
    }
    .video-loading video {
        max-width: 100vw !important; /* 60% of the viewport width */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensure video is treated as a block element */
        margin: 0 auto; /* Center horizontally */
    }
}
@media (max-width: 1920) and (max-height: 1080px) {
    #loading-video {
        height: auto; /* Adjust height based on resolution */
        width: 40vw; /* Adjust width based on resolution */
    }
    #introduction-video video {
        height:auto; /* Full viewport height */
        width: 100vw; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    #introduction-video iframe {
        height:100vh; /* Full viewport height */
        width: 100vw; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    button{
        padding: 5px 5px 1px;
    }
}
@media (min-width: 1921px) {
    #loading-video {
        height: auto; /* Set height to match the 27-inch screen resolution */
        width: 40vw;  /* Set width accordingly */
        /* background-color: black; */
    }
    #introduction-video video {
        height:auto; /* Full viewport height */
        width: 65vw; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    #introduction-video iframe {
        height:100vh; /* Full viewport height */
        width: 65vw; /* Full width of the container */
        object-fit: cover; /* Cover to maintain aspect ratio */
        margin-top: 0; /* Reset margin */
    }
    button{
        padding: 5px 5px 1px;
    }
    .container {
        max-width: 100vw;
        margin: auto;
        padding-right:50px;
    }
    .footer-container{
        max-width:60vw;
    }
    #burger-menu{
        right:65px !important;
    }
    #logo-corner{
        width:300px !important;
    }
}


#introduction-video #mute.unmuted {
    margin-right: 10px
}

#youtube-popup {
    width: 650px;
    z-index: 99;
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    max-width: 100%;
    max-height: 100%
}

#youtube-popup .close {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
    width: 50px;
    height: 50px;
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100);
    z-index: 99;
    cursor: pointer
}

#youtube-popup>div {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

#youtube-popup iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

/* #tech-meets-art {
    color: #fff;
    text-align: center;
    transition: .5s all;
    font-size: 16px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

#tech-meets-art>div {
    position: relative;
    width: 42.5em;
    height: 23.5em;
    margin: auto;
    transition: .3s transform
}

#tech-meets-art>div.fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

#tech-meets-art .scroll-scale {
    transition: .3s transform
}

#tech-meets-art p {
    padding: 0;
    margin: 0;
    line-height: 80%
}

#tech-meets-art p:nth-of-type(1) {
    font-size: 2.9375em;
    margin-left: -3.625em
}

#tech-meets-art p:nth-of-type(2) {
    font-size: 10.5625em;
    margin-left:0.2em
}
#tech-meets-art p:nth-of-type(4){
    font-size: 7.5625em
}

#tech-meets-art p:nth-of-type(3) {
    font-size: 6.4375em;
    margin-left: 1em
}

#tech-meets-art img {
    position: absolute
}

#paint-left {
    bottom: 0;
    left: 1.5em;
    width: 8.625em
}

#paint-right {
    bottom: -8em;
    right: 1.5625em;
    width: 16.25em
}

#shape-left {
    top: 2em;
    left: .5em;
    width: 8.6875em
}

#shape-right {
    right: 3.125em;
    top: 11.875em;
    width: 12.5em
}

@media (max-width: 660px) {
    #tech-meets-art {
        font-size:11px
    }
}

@media (max-width: 450px) {
    #tech-meets-art {
        font-size:8px
    }
}

@media (max-width: 350px) {
    #tech-meets-art {
        font-size:6px
    }
} */

#who-we-are {
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    width:80%;
}
#who-we-are {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;/* Ensure the section takes up at least the full viewport height */
}


#who-we-are p {
    /* font-family: pp_telegrafultralight; */
    font-size: 20px;
    line-height: 1p;
    font-weight: lighter;
}

/* #who-we-are p b {
    font-family: pp_telegrafregular
} */

@media (max-width: 768px) {
    #who-we-are {
        padding-top:800px
    }
    #sandbox-video{
        max-width:150% !important;
        height:auto;
    }
    #loadingScreen-logo{
        width:30% !important;
    }
}

#sandbox-video{
    max-width:60%;
    height:auto;
}

/* Styles for screens larger than 1280px */
@media (min-width: 1280px) {
    #who-we-are {
        width: 60%; /* Adjust the width as needed */
    }
}

/* Styles for screens larger than 1440px */
@media (min-width: 1440px) {
    #who-we-are {
        width: 60%; /* Adjust the width as needed */
    }
}

#what-we-do{
    min-height: 100vh;
}

/* #what-we-do {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
}

#what-we-do button {
    margin-top: 50px;
}

#what-we-do .justify-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: auto;
    transition: all .4s;
}

#what-we-do .justify-image>div {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#what-we-do .justify-image .img-container {
    position: relative;
    z-index: 2;
    transition: transform .4s;
}

#what-we-do .justify-image>div span {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 24px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1000px rgba(125, 125, 128, 0.5);
}

#what-we-do span:hover + img {
    transform: scale(1.2);
}

#what-we-do .justify-image>div img {
    display: block;
    max-width: 100%;
}

#what-we-do .justify-image .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
}

#what-we-do .justify-image>div video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

#what-we-do .active {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
}

#what-we-do .img-container:hover span {
    opacity: 0;
}

#what-we-do .active:hover {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 5px 5px 10px 0 rgba(42, 15, 60, .5);
    -webkit-box-shadow: 5px 5px 10px 0 rgba(42, 15, 60, .5);
    -moz-box-shadow: 5px 5px 10px 0 rgba(42, 15, 60, .5);
}

#what-we-do .justify-image .img-container:hover span {
    opacity: 0;
} */

/* #what-we-do {
    padding-top: 380px;
    text-align: center;
}

#what-we-do button {
    margin-top: 50px;
}

#what-we-do .justify-image {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden;
}

#what-we-do .img-container {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    transition: transform .4s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 5px solid white;
    background-color: rgba(255, 255, 255, 0.8);
}

#what-we-do .img-container span {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-family: pp_telegrafultrabold;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#what-we-do .img-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
 */
 .img-circle {
    width: 200px; 
    /*height: 200px; */
    object-fit: cover; /* Ensures the image covers the entire container */
    /*border-radius: 50%; */
    /*border: 1px solid lightgrey;*/
    transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
    padding:5px;
}
@media (min-width:2560px){
    .img-circle{
        width:300px;
    }
}
.img-description {
    text-align: center;
    margin-top: 25px;
}
.img-description p{
    font-size:12px;
}
.custom-section {
    text-align: center;
}
.img-circle:hover {
    transform: scale(1.2); /* Scale the image to 120% on hover */
    filter: brightness(80%); /* Optional: Reduce brightness on hover for emphasis */
}
.img-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Adjust gradient colors as needed */
    opacity: 0; /* Initially invisible */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
    border-radius: 50%; /* Ensures gradient is circular */
}
.img-circle:hover::before {
    opacity: 1; /* Show gradient overlay on hover */
}
#products-left-container .img-container:nth-of-type(2) video {
    object-fit: cover;
    width: 100%;
    height: 100%
}

@media (min-width: 768px) {
    #products-left-container {
        width:20%
    }

    #products-right-container {
        width: calc(80% - 5px)
    }

    #products-right-container>.img-container:nth-of-type(1) {
        width: 28.025%
    }

    #products-right-container>.img-container:nth-of-type(2) {
        width: 28.025%
    }

    #products-right-container>.img-container:nth-of-type(3) {
        width: calc(43.95% - 15px)
    }

    #products-right-container>.img-container:nth-of-type(4) {
        width: calc(36% - 15px)
    }

    #products-right-container>.img-container:nth-of-type(5) {
        width: 21.7%
    }

    #products-right-container>.img-container:nth-of-type(6) {
        width: 20.86%
    }

    #products-right-container>.img-container:nth-of-type(7) {
        width: 20.86%
    }

    #products-left-container .img-container:nth-of-type(1) video {
        left: -130px
    }

    #products-right-container .img-container:nth-of-type(3) .video-container {
        height: 165px
    }

    #products-right-container .img-container:nth-of-type(3) video {
        top: -12px
    }

    #products-right-container .img-container:nth-of-type(4) .video-container {
        width: 400px
    }

    #products-right-container .img-container:nth-of-type(5) video {
        left: -122px
    }

    #products-right-container .img-container:nth-of-type(6) .video-container {
        width: 260px
    }

    #products-right-container .img-container:nth-of-type(6) video {
        left: -58px
    }

    #products-right-container .img-container:nth-of-type(7) .video-container {
        width: 229px;
        left: -30px
    }

    #products-right-container .img-container:nth-of-type(6) video {
        left: -122px
    }
}

@media (max-width: 768px) {
    #what-we-do .justify-image>div {
        justify-content:center;
        align-items: center;
        width: 100%
    }

    #what-we-do .justify-image .img-container {
        width: 100%;
        height: 16em;
        position: relative;
        overflow: hidden
    }

    #what-we-do .justify-image>div img {
        margin: auto;
        width: 100%;
        position: absolute;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    #products-left-container .img-container:first-child>img,#products-right-container .img-container:nth-child(6)>img {
        object-position: center -3em
    }
}
#featured-projects{
    min-height:100vh;
    padding:30px 0;
}
@media (max-width:768px) {
    #featured-projects{
        min-height: unset;
        max-height:100vh;
    }
}
.swiper-slide:not(.swiper-slide-active) {
    position: relative; /* Ensure position context for shadow */
    filter: brightness(20%); /* Darkens the non-active slides */
}
/* #featured-projects h1{
    margin-top:20px;
} */
/* #featured-projects {
    padding-top: 290px;
    font-size: 16px;
    text-align: center
}

#featured-projects h1 {
    margin-bottom: 100px
}

#featured-projects button {
    margin-top: 100px
}

.swiper {
    overflow: visible
}

#featured-projects .swiper-slide {
    transition: .4s all;
    width: calc(80% - 35em)!important;
    position: relative
}

#featured-projects .swiper-slide img {
    display: block
}

#featured-projects .swiper-slide video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
    cursor: pointer;
}

#featured-projects .swiper-slide-active {
    z-index: 10;
    transform: scale(1.2);
    transition: .4s all;
    box-shadow: 5px 5px 10px 0 rgba(89, 88, 89, 0.5);
    -webkit-box-shadow: 5px 5px 10px 0 rgba(89, 88, 89, 0.5);
    -moz-box-shadow: 5px 5px 10px 0 rgba(89, 88, 89, 0.5)
}

#featured-projects .swiper-slide .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    color: #fff;
    font-size: 2em;
    display: flex;
    align-items: center;
    padding: 30px;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1000px rgba(89, 89, 90, 0.5);
    cursor: pointer
}

#featured-projects .swiper-slide:not(.swiper-slide-active) .title span {
    display: none
}

.swiper-button-next,.swiper-button-prev {
    width: 2.875em;
    height: 4.75em;
    background-size: 2.875em 4.75em!important;
    margin-top: -2.375em
}

.swiper-button-next {
    background: url(../images/arrow-right.png)
}

.swiper-button-prev {
    background: url(../images/arrow-left.png)
}

.swiper-button-next::after,.swiper-button-prev::after {
    content: ""
}

@media (max-width: 768px) {
    #featured-projects {
        font-size:10px
    }

    #featured-projects .swiper-slide {
        width: calc(70% - 14em)!important
    }
}

@media (max-width: 450px) {
    #featured-projects {
        font-size:7px
    }
} */

#glo-team {
    padding-top: 290px
}

#glo-team h1 {
    margin-bottom: 20px
}

#glo-team .title-caption {
    margin-bottom: 80px;
    /* font-family: pp_telegrafultralight */
}

#glo-team .swiper-slide {
    transition: .4s all;
    position: relative
}

#glo-team .swiper-slide:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0 0 0 1000px rgb(255 255 255 / 69%);
    -moz-box-shadow: inset 0 0 0 1000px rgb(255 255 255 / 69%);
    box-shadow: inset 0 0 0 1000px rgb(255 255 255 / 69%);
    overflow: hidden
}

#glo-team .swiper-slide:hover:after {
    display: none
}

#glo-team .swiper-slide img {
    width: 100%;
    display: block
}

#glo-team .swiper-slide .team-member {
    font-family: pp_telegrafregular;
    font-size: 22px;
    text-align: center;
    color: #fff;
    padding-top: 10px;
    position: absolute;
    width: 100%
}

#glo-team .swiper-slide:hover {
    z-index: 2;
    transform: scale(1.1);
    transition: .4s all
}

#glo-team .swiper {
    position: relative
}

#glo-team .swiper-button-next {
    height: 100%;
    background-repeat: no-repeat;
    top: 0;
    margin-top: -40px;
    right: 0;
    padding-right: 15px;
    padding-left: 15px;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 40px
}

#glo-team .swiper-button-prev {
    height: 100%;
    background-repeat: no-repeat;
    top: 0;
    margin-top: -40px;
    left: 0;
    padding-right: 15px;
    padding-left: 15px;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 40px
}

@media (max-width: 768px) {
    #glo-team .swiper-slide .team-member {
        font-size:20px
    }
}

#clients {
    max-width: max-content;
    margin: auto;
    overflow: hidden; /* Hide overflow to create the sliding effect */
    text-align: center;
    max-height: 100vh;
    /* background-image: url('../images/meet_our_client.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat; */
}


.clients-logos-wrapper {
    display: flex;
    overflow: hidden;
    background-color: white;
}

.clients-logos {
    display: flex;
    justify-content: center;  
    align-items: center;   
    height:50vh;
    text-align: center;       
    flex-wrap: nowrap;
    animation: moveSlideshow  100s linear infinite alternate;
}


.clients-logos > div {
    flex: 0 0 auto; /* Prevent shrinking */
    width: 13%; /* Adjust width as needed */
    transition: transform 0.3s ease-in-out;
    margin-left:25px;
}

.clients-logos img {
    width: 80%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

@keyframes moveSlideshow {
    0% {
        transform: translate(90%, 0);
    }
    100% {
        transform: translate(-90%, 0);
    }
}
@keyframes moveSlideshowMobile {
    0% {
        transform: translate(250%, 0);
    }
    100% {
        transform: translate(-250%, 0);
    }
}

@media (max-width: 768px) {
    .clients-logos > div {
        width: 23% !important;
    }
    .clients-logos {        
        height:30vh;
        animation: moveSlideshowMobile  30s linear infinite alternate;
    }
    .clients-logos > div {
        margin-left:10px;
    }
    .swiper-container {
        padding-left: 20px; /* Adjust padding as needed */
        padding-right: 20px; /* Adjust padding as needed */
    }
}

@media (max-width: 500px) {
    .clients-logos > div {
        width: 30% !important;
    }
}



#contact, #contact-us-form {
    width: 80%;
    margin: auto;
    padding-left: 20px;
    text-align: center;
    padding-right: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.col-md-6 {
    flex: 0 0 48%;
    box-sizing: border-box;
}

#contact-us-form input, #contact-us-form select, #contact-us-form textarea {
    width: 100%;
    background: transparent;
    color: #e3dfec;
    font-size: 24px;
    padding: 8px 20px;
    border: 1px solid #adaaaa;
    margin-bottom: 18px;
    border-radius: 5px;
    box-sizing: border-box;
}

#contact-us-form ::-webkit-input-placeholder {
    color: #e3dfec;
}

#contact-us-form ::-moz-placeholder {
    color: #e3dfec;
}

#contact-us-form ::placeholder {
    color: #6d6c6e;
}

#contact-us-form select::before, select::after {
    box-sizing: border-box;
}

#contact-us-form select {
    appearance: none;
    margin: 0;
    z-index: 1;
    outline: 0;
    grid-area: select;
    opacity: 0;
    padding: 0;
}

#contact-us-form select option {
    color: #201736;
}

.select {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
    margin-bottom: 18px;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 50px;
    padding-bottom: 12px;
    padding-top: 12px;
    box-sizing: border-box;
}

.select > span {
    color: #e3dfec;
    font-size: 26px;
    padding: 14px 25px;
    position: absolute;
    width: 100%;
    text-align: left;
}

.select::after {
    content: "";
    justify-self: end;
    width: 36px;
    height: 22px;
    background: url(../media/arrow-down.png);
    grid-area: select;
    margin-right: 25px;
}

select:focus + .focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid #fff;
    border-radius: inherit;
}

#contact-us-form button[type=submit] {
    margin-top: 10px;
    border-radius:5px;
}

#contact-us-form h2 {
    border-radius: 50px;
    padding: 8px;
    color: #fff;
}

@media (max-width: 768px) {
    #contact-us-form input, #contact-us-form select, #contact-us-form textarea {
        font-size: 20px;
    }

    button {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .col-md-6 {
        flex: 0 0 100%;
    }
}

#contact {
    font-size: 20px;
    padding-bottom: 270px;
    padding-top: 110px;
    height: 100vh;
}

#contact .seperator {
    height: 3px;
    width: 100%;
    background: #fff;
}

#contact a {
    color: #fff;
    text-decoration: none;
    outline: 0;
}
.left-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    text-align: left; /* Align text to the left */
}

.left-col .inner {
    width: 100%; /* Ensure the inner div takes full width */
}

.left-col .sec-title {
    text-align: left;
}

.left-col .text {
    text-align: left;
}

.left-col .info {
    text-align: left;
}

.left-col .info ul {
    padding-left: 0; /* Remove left padding from the ul */
}

.left-col .info li {
    display: flex;
    align-items: center;
}

.left-col .info .icon {
    margin-right: 10px; /* Add some space between the icon and text */
}

.left-col .info a {
    text-decoration: none;
    color: inherit;
}

.left-col .info a:hover {
    text-decoration: underline;
}

/* Responsive adjustments, if needed */
@media (max-width: 768px) {
    .left-col {
        text-align: left;
        align-items: flex-start;
    }
}

@media (min-width: 1080px) {
    #contact-us-form {
        width: 70%;
    }
}

.select {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
    margin-bottom: 18px;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 50px;
    padding-bottom: 12px;
    padding-top: 12px;
    box-sizing: border-box
}

.select>span {
    color: #e3dfec;
    /* font-family: pp_telegrafregular; */
    font-size: 26px;
    padding: 14px 25px;
    position: absolute;
    width: 100%;
    text-align: left
}

.select::after {
    content: "";
    justify-self: end;
    width: 36px;
    height: 22px;
    background: url(../media/arrow-down.png);
    grid-area: select;
    margin-right: 25px
}

select:focus+.focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid #fff;
    border-radius: inherit
}

#contact-us-form button[type=submit] {
    margin-top: 10px
}

#contact-us-form h2 {
    /* font-family: pp_telegrafregular; */
    display: none;
    border-radius: 50px;
    padding: 8px;
    color: #fff
}

@media (max-width: 768px) {
    #contact-us-form input,#contact-us-form select,#contact-us-form textarea {
        font-size:20px
    }

    button {
        font-size: 22px
    }
}

#contact {
    /* font-family: pp_telegrafregular; */
    font-size: 20px;
    padding-bottom: 270px;
    padding-top: 110px;
    height:100vh;
}

#contact .seperator {
    height: 3px;
    width: 100%;
    background: #fff
}

/* #contact .country,#contact .email {
    font-family: pp_telegrafultrabold
} */

#contact a {
    /* font-family: pp_telegrafregular; */
    color: #fff;
    text-decoration: none;
    outline: 0
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-unstyled a{
    text-decoration: none;
    color:#989595;
}

.address {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.address .fas {
    font-size: 24px; /* Adjust size as needed */
    margin-right: 10px;
}

.address .info {
    flex: 1;
    font-size: 16px; /* Adjust size as needed */
    line-height: 1.2;
}

.address strong {
    font-weight: bold;
}

.address a {
    text-decoration: none;
    color: inherit;
}

.address a:hover {
    text-decoration: underline;
}

.flex>div {
    flex-grow: 1
}

@media (max-width: 768px) {
    #contact,#contact-us-form {
        width:100%;
        padding-left: 20px;
        box-sizing: border-box;
        padding-right: 20px
    }
}

#back-to-top {
    font-size: 18px;
    color: #e3dfec;
    text-align: center;
    /* font-family: pp_telegrafregular; */
    cursor: pointer
}

.footer-dark {
    background-color: rgba(54, 52, 52, 0.947);
    color: white;
    padding-top:50px;
}

.footer-dark a {
    color: white;
}

.footer-dark .text-left {
    text-align: left;
}

.footer-dark .row > div {
    text-align: left;
}

.footer-dark hr.light {
    border: 0;
    height: 1px;
    background: #ccc; /* Light grey color for visibility */
    margin: 20px 0; /* Adjust spacing as needed */
}
.footer-dark .contact-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-dark .contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer-dark .contact-list li i {
    margin-right: 10px;
    font-size: 16px;
    color: white;
}

.footer-dark .contact-list li span {
    color: white;
}
/* footer {
    display: flex;
    align-items: center;
    padding: 40px 55px 80px 55px
}

footer .email{
    text-align:center;
}

footer .email a {
    font-family: pp_telegrafregular;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}

footer .logo {
    text-align: center
}

footer .social-media {
    text-align: center
}

footer .social-media a {
    margin: 5px
}

footer>div {
    width: 33.33%
} */

@media (max-width: 768px) {
    /* footer {
        flex-direction:column
    } */

    .flex>div {
        width: 100%;
        text-align: center;
        margin-top: 15px
    }
}

.img-loader,.img-loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em
}

.img-loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255,255,255,.2);
    border-right: 1.1em solid rgba(255,255,255,.2);
    border-bottom: 1.1em solid rgba(255,255,255,.2);
    border-left: 1.1em solid #fff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

#tags-container {
    overflow-x: hidden;
    margin: auto;
    padding-top: 0;
}

#prPage .swiper-slide {
    font-size: 10px;
    cursor: pointer;
    width: 150px;
    height: 65px;
    margin: 10px 10px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    transition: all .3s ease;
    border:none;
}

#prPage .swiper-slide-active {    
    font-size:14px;
    color: #fff!important;
    text-shadow: none!important
}
#prPage .swiper-slide-prev {
    color: #fff!important;
    text-shadow: none!important
}
#prPage .swiper-slide-next {
    color: #fff!important;
    text-shadow: none!important
}

#prPage .show-all .swiper-slide-active {
    color: rgba(255,255,255,.5)!important;
    text-shadow: 0 0 5px rgb(255 255 255 / 50%)!important
}

#prDetailsPage .items,#prPage .items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 100px;
    margin-top: 50px;
    width: 1000px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

#prPage .items>div {
    position: relative;
    overflow: hidden;
    width: 0;
    height: 0;
    display: none
}
#prPage .items>div>p{
    color:white;
    margin-top:10px;
    font-size:14px;
    width:100vw
}

#prDetailsPage .items>div,#prPage .items>div.active {
    width: 32%;
    height: auto;
    display: inherit
}

#prPage .items>div.active {
    display: block
}

#prDetailsPage .items>div img {
    width: 100%;
    height: auto
}

@media (max-width: 480px) {
    #prDetailsPage .items>div,#prPage .items>div.active {
        width:45%
    }
}

@media (max-width: 320px) {
    #prDetailsPage .items>div,#prPage .items>div.active {
        width:100%
    }
}

#prPage .service-div{
    padding:5px;
    border:1px solid grey;
    border-radius:10px;
}

#prPage .items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:10px;
}

#prPage .items .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    color: #fff;
    font-size: 1.5em;
    /*font-family: pp_telegrafultrabold;*/
    display: flex;
    align-items: center;
    padding: 30px;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1000px rgba(34, 34, 84, 0.5);
    cursor: pointer;
    margin: 0;
    border-radius:10px;
}

#prDetailsPage h1 {
    margin-top: 50px!important
}

#prDetailsPage button {
    font-size: 1em!important;
    margin-top: 200px
}

#prDetailsPage video {
    width: 600px
}

#prDetailsPage .video-container {
    position: relative
}

#prDetailsPage .video-container .play {
    content: "";
    display: block;
    position: absolute;
    width: 80px;
    border-radius: 60px;
    background: #563fdf;
    z-index: 9999999;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    z-index: 8
}

#prDetailsPage .video-container .play::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right: 0;
    border-left: 40px solid #fff;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    z-index: 9;
    margin-top: -20px
}

body.innerPage {
    background-position: top;
    text-align: center
}

/* .innerPage #show-all-btn {
    padding: 5px 20px;
    text-align: center;
    width: 130px;
    display: block;
    cursor: pointer;
    position:relative;
    left:120px;
}

.innerPage #show-all-btn.active {
    background: #fff;
    color: #302473
} */

.innerPage h2 {
    /* font-family: pp_telegrafultrabold; */
    /* font-size: 2.3em; */
    width: 400px;
    max-width: 100%;
    /* margin: 50px auto -20px auto */
}

.innerPage p {
    /* font-family: pp_telegrafultralight; */
    /* font-size: 1.3em; */
    width: 400px;
    max-width: 100%!important;
    /* margin: 20px 0!important; */
    /* color: #fff!important */
}

.technologies-title {
    font-family: pp_telegrafultrabold;
    font-size: 1.3em;
    margin-bottom: 30px;
    margin-top: 30px
}
/* 
.back-nav {
    background: url(../media/nav-bg.png);
    background-size: cover;
    width: 134px;
    height: 250px;
    position: absolute;
    top: 100px
}

.back-nav img {
    position: absolute;
    top: 100px;
    width: 24px;
    left: 12px
} */

.next-nav {
    background: url(../media/nav-bg.png);
    background-size: cover;
    width: 134px;
    height: 250px;
    position: absolute;
    right: 0;
    top: 100px;
    cursor: pointer;
    transform: rotate(180deg)
}

.next-nav img {
    position: absolute;
    top: 100px;
    width: 24px;
    left: 12px
}

#prDetailsPage .technologies {
    display: flex;
    justify-content: center;
    gap: 30px
}

#prDetailsPage .technologies .technology-img {
    height: 60px;
    margin-bottom: 10px
}

#prDetailsPage .technologies img {
    max-width: 60px;
    max-height: 60px
}

#prDetailsPage .technologies span {
    display: block;
    font-family: pp_telegrafultralight;
    font-size: 18px;
    color: #fff
}

#prDetailsPage .video-container {
    width: 1000px;
    max-width: 100%;
    margin: auto
}

.video-wrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 54%;
    padding-top: 25px;
    height: 0
}

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

#blogListPage {
    text-align: center
}

#blogListPage article {
    margin-bottom: 50px
}

#blogListPage article h2 {
    font-family: pp_telegrafultrabold;
    font-size: 2em
}

#blogListPage article p {
    font-family: pp_telegrafultralight;
    font-size: 1.3em;
    width: 800px;
    max-width: 100%;
    margin: 20px auto
}

#blogListPage article img {
    max-width: 100%
}

#blogListPage article h3 {
    font-family: pp_telegrafultrabold
}

#chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10
}

.grecaptcha-badge {
    visibility: hidden;
    z-index: -1
}

#recaptcha-disclaimer {
    color: #e3dfec;
    /* font-family: pp_telegrafregular; */
    font-size: 13px
}

#recaptcha-disclaimer a {
    color: #e3dfec
}
.bg-dark {color: #343a40; }
.pd-tb-small { padding-top: 60px; padding-bottom: 10px; padding-left:30px;padding-right:40px }
.pos-rel { position: relative; }
.typo-light { color: #fff; }
.typo-light h2{
    font-size:1rem;
}
.iconbox { display: inline-flex; align-items: center; justify-content: center; }
.btn-white { color: #fff; background-color: transparent; border: 1px solid #fff; }
.btn-white:hover { color: #333; background-color: #fff; }
.sq30 { width: 30px; height: 30px; }
.fs16 { font-size: 16px; }
.mr-r-4 { margin-right: 4px; }
.rd-4 { border-radius: 4px; }
.list-1 li {list-style: none; margin-bottom: 10px; }
.inline-block {
    display: inline-block;
}

.max-px-w100 {
    max-width: 100%;
}
.line {
    position: absolute;
    background-color: white;
    z-index: -1; /* Ensure lines are behind images */
  }
  
  .line-horizontal {
    height: 2px; /* Adjust height as needed */
    width: 100px; /* Adjust width as needed */
    top: 50%; /* Adjust position */
    left: 50%; /* Adjust position */
    transform: translate(-50%, -50%);
  }
  
  .line-vertical {
    width: 2px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    top: 50%; /* Adjust position */
    left: 50%; /* Adjust position */
    transform: translate(-50%, -50%);
  }
  .img-container{
    border:5px solid white;
  }
  .curved-text {
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
    height: 100%;
    color:white;
    font-size: 24px;
}
.swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    padding:50px 0px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; /* Add perspective for panoramic effect */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; 
    padding:5px;
    border:1px solid grey;
}
.video-slide-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Image is visible for non-active slides */
.video-slide-container img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1; /* Visible by default */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
    position: relative;
    z-index: 2; /* Ensure image is above the video by default */
}

/* Hide image for the active slide */
.video-slide-container.active img {
    opacity: 0; /* Hide image for active slide */
    z-index: 0; /* Move image behind the video in the active slide */
}

/* Video is always set to display */
.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Ensure video is behind image by default */
    transition: z-index 0.5s ease; /* Optional: smooth transition for z-index */
}

/* Make video visible and on top for active slide */
.video-slide-container.active .video-slide {
    z-index: 3; /* Bring video to front when active */
}

.swiper-button-next, .swiper-button-prev {
    color: #000;
}

.swiper-pagination-bullet {
    background-color: white;
}
.footer-home{
    background-color: #343a40;
    text-decoration: none;
}
.footer a:hover {
    color: white;
}
.footer .iconbox {
    display: inline-block;
    text-align: center;
    padding: 6px;
    margin-right: 5px;
    border-radius: 4px;
    background-color: white;
    color: black;
}
.footer .iconbox:hover {
    color: #007bff;
}
.footer p, .footer h2 {
    color: white;
}
.footer .list-unstyled li {
    margin-bottom: 10px;
}
.social-media a{
    margin-right:20px;
}