html {
  scroll-behavior: smooth;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

:root {
  --white: white;
  --puff-blue: #bacfff;
  --cb-600: #98a2b3;
  --horizon-prple: #6e25cc;
  --cdgous-blue: #4279f3;
  --moonlight-grey: #1b2034;
  --dark-sky: #000420;
  --z-yellow: #ffa83c;
  --cg-500: #d0d5dd;
  --z-mint: #4df5b9;
  --z-pink: #ed5695;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    height: 100%;
    width: 100%;
    margin: 0;
    background: #040f13;
    color:white;
    overflow-x: hidden;
    overflow-y: scroll;
    /* background: linear-gradient(90deg, rgba(204,213,174,1) 0%, rgba(233,237,201,1) 100%); */
}

/* 
#Rendering{
  background-image: url('Gredient icons/renderingfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#Augmented_Reality{
  background-image: url('Gredient icons/Augmented Realityfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#Mixed_Reality{
  background-image: url('Gredient icons/mixed realityfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#Virtual_Reality{
  background-image: url('Gredient icons/virtual realityfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#Animation{
  background-image: url('Gredient icons/animationfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#modelling{
  background-image: url('Gredient icons/3d_modelfull.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: cover;
}
 */
 .drag-btn {
  position: absolute;
  left: 0;
  bottom: 10px; /* Adjust the bottom spacing as needed */
  border: 1px solid;
  border-radius: 20px;
  background: #3d3d3d;
  color: navajowhite;

}

.p-font{
  font-size: 1rem;
}
 .cdg {
  position: relative;
}

/* Style for the left button */
.cdg .replace-btn {
  position: absolute;
  left: 0;
  bottom: 10px; /* Adjust the bottom spacing as needed */
  border: 1px solid;
  border-radius: 20px;
  background: #3d3d3d;
  color: navajowhite;
}

.cdg .ar-btn{
  position: absolute;
  left: 0;
  top: 10px; /* Adjust the bottom spacing as needed */
  border: 1px solid;
  border-radius: 20px;
  background: #3d3d3d;
  color: navajowhite;
}

/* Style for the right button */
.cdg .amazon-btn {
  position: absolute;
  right: 0;
  bottom: 10px; /* Adjust the bottom spacing as needed */
  border: 1px solid;
  border-radius: 20px;
  background: #3d3d3d;
  color: navajowhite;
}

#myModelViewer {
    width: 100%;
    height: 100%;
    border-radius: 5px ; 
}
/* .swiper-slide {
  height: 300px;
} */

.top_video {
  width: 100%;
  height: 100%;
  min-height: 630px;
  object-fit: cover;
  background-size: cover;
}
/* .replace-btn{
  margin-top: -15%;
  margin-left: -90%;
}  */
/* .amazon-btn{
  margin-top: -15%;
  margin-right: -90%;
}  */
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
}

.about_video{
  border-radius: 25px;
  box-shadow: 0px 1px 20px 0px #6978d1;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
}
.glb_models {
    background: transparent;
    /* Adjust the blur amount as needed */
}
.qr_model{
  background: #deeaf445;
}
.element {
    height: 300px !important;
    border: 1px solid white;
    overflow: hidden;
    object-fit: cover;
}

.element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

nav{
    background: linear-gradient(90deg, rgb(11 13 60) 0%, rgb(20 61 151) 100%);
}
.nav_btn{
    background: transparent;
    color: white;
    font-weight: 400;
    font-size: 20px;
    border: 1px solid #009cff;
    border-radius: 16px 16px 0px 16px;
}
.nav_btn:hover{
    border: 1px solid white;
    transition: 0.5s;
}
.nav_items{
    font-size: 20px;
    font-weight: 400;
}
@-webkit-keyframes hvr-pop {
50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@keyframes hvr-pop {
50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

.nav_items:hover {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
cursor: pointer;
}
.video_card{
    object-fit: cover;
    background-size: cover;
}


/* .people__slide {
.swiper-slide {
    width: 50%;
    padding: 30px 0;
    transform: scale(0.75);
    transition: 0.3s;
    .people__card {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 276px;
    padding: 25px 30px 30px;
    border-radius: 48px;
    background: linear-gradient(
        135deg,
        hsl(25 98% 70%),
        hsl(23.9645 96.8689% 69.7096%),
        hsl(21.0027 93.4957% 68.9107%),
        hsl(16.5084 88.0997% 67.7756%),
        hsl(11.099 81.428% 66.5035%),
        hsl(5.69633 74.8663% 65.3092%),
        hsl(1.56759 70.0643% 64.439%),
        hsl(0.00000265346 68.306% 64.1176%)
    );
    transition: 0.3s;
    .people__image {
        position: relative;
        padding: 4px;
        width: 150px;
        height: 150px;
        margin-bottom: 15px;
        overflow: hidden;
        border-radius: 100%;
        border: 5px solid rgba(#fff, 0.5);
        img {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        }
    }
    }
    &.swiper-slide-active {
    animation-name: elastic1;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    }
    &.swiper-slide-active {
    animation-name: elastic1_sp;
    }
    &:nth-child(even) .people__card {
    transform: rotate(-5deg);
    }
    &:nth-child(odd) .people__card {
    transform: rotate(5deg);
    }
}
}

@keyframes elastic1 {
0% {
    transform: scale(1);
}

40% {
    transform: scale(1.4);
}

55% {
    transform: scale(1.27);
}

70% {
    transform: scale(1.36);
}

85% {
    transform: scale(1.31);
}

100% {
    transform: scale(1.33);
}
}

@keyframes elastic1_sp {
0% {
    transform: scale(0.75);
}

40% {
    transform: scale(1.05);
}

55% {
    transform: scale(0.95);
}

70% {
    transform: scale(1.02);
}

85% {
    transform: scale(0.98);
}

100% {
    transform: scale(1);
}
} */


.about-details{
margin: auto;
width: 50%;
height: 50%;
font-size: 40px;
text-align: start;
}
.nav-item{
  transition: 1.5s !important;
}

.slide-container-top{
max-width: 1200px;
max-height: 1100px;
height: 100%;
width: 100%;
/* padding: 40px 0; */
}

.slide-container-middle{
max-width: 1000px;
width: 100%;
height: 100%;
/* padding: 40px 0; */
/* border: 1px solid white; */
background-color: rgba(255, 255, 255, 0.11);
/* opacity:0.1;  */
}
.d_side_text{
padding: 30px 20px 0px 20px;
font-size: 20px;
text-align: center;
line-height: 35px;
font-weight: 350;
}

.slide-content{
margin: 0 40px;
overflow: hidden;
border-radius: 25px;
}
.cdg{
border-radius: 25px;
background-color:transparent;
width:50px;
}
.image-content,
.cdg-content{
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 14px;
}
.image-content{
position: relative;
row-gap: 5px;
padding: 25px 0;
}
.overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #4070F4;
border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
content: '';
position: absolute;
right: 0;
bottom: -40px;
height: 40px;
width: 40px;
background-color: #4070F4;
}
.overlay::after{
border-radius: 0 25px 0 0;
background-color: #FFF;
}
.cdg-image{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background: #FFF;
padding: 3px;
}
.cdg-image .cdg-img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 4px solid #4070F4;
}
.name{
font-size: 18px;
font-weight: 500;
color: #333;
}
.description{
font-size: 14px;
color: #707070;
text-align: center;
}
.button{
border: none;
font-size: 16px;
color: #FFF;
padding: 8px 16px;
background-color: #4070F4;
border-radius: 6px;
margin: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover{
background: #265DF2;
}

.swiper-navBtn{
color: #6E93f7;
transition: color 0.3s ease;
}
.swiper-navBtn:hover{
color: #4070F4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
font-size: 38px;
}
.swiper-button-next{
right: 0;
}
.swiper-button-prev{
left: 0;
}
.swiper-pagination-bullet{
background-color: #6E93f7;
opacity: 1;
}
.swiper-pagination-bullet-active{
background-color: #4070F4;
}

@media screen and (max-width: 768px) {
.slide-content{
  margin: 0 10px;
}
/* .swiper-navBtn{
  display: none;
} */
}

#home{
  padding: 5px 0px 0px 0px;
}

#home h1{
font-size: 50px;
color:white;
letter-spacing: 3px;
text-shadow: 0px 1px 0px #ccc,
            0px 2px 0px #ccc,
            0px 3px 0px #ccc,
            0px 4px 0px #ccc,
            0px 5px 0px #ccc,
            0px 6px 0px #ccc;
}

.cdg-points-heaidng.clover {
  max-width: 790px;
}


.cdg-points-heaidng.clover {
  align-items: flex-start;
}


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

.cdg-points-heaidng {
  z-index: 1;
  max-width: 620px;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}


.cdg-points-heaidng {
  max-width: 100%;
  align-items: center;
}


.cdg-tag {
  color: var(--z-mint);
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  display: inline-block;
}

.cdg-card-wrapper {
  width: 100%;
  margin-top: 64px;
  position: sticky;
  top: 140px;
}

.cdg-card-wrapper {
  margin-top: 32px;
}

.cdg-design-card {
  background-color: #14192f;
  border: 1px solid rgba(66, 121, 243, .2);
  border-bottom-color: rgba(20, 25, 47, 0);
  border-radius: 24px;
  justify-content: space-between;
  margin-bottom: 60px;
  padding: 0;
  display: flex;
  position: sticky;
  top: 140px;
  flex-direction: column;
}

.cdg-design-card._2 {
  padding: 0;
  top: 160px;
}

.cdg-design-card._3 {
  margin-top: 20px;
  top: 220px;
}

.cdg-design-card.last {
  margin-bottom: 0;
  top: 60px;
}


.cdg-design-text {
  grid-row-gap: 24px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

.cdg-design-text {
  max-width: 500px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 48px;
  display: flex;
}


.cdg-designcard-heading {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.HotspotAnnotation1 {
  position: absolute;
  top: -85px; /* Adjust the top position */
  left: 50; /* Adjust the left position */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  color: black;
}


.HotspotAnnotation2 {
  position: absolute;
  left: 0;
  top: 82%;
  border: 1px solid;
  border-radius: 16px 16px 16px 0px;
  background: #0000004a;
  color: white;
  opacity: 0.7;
  padding: 5px;
}

.HotspotAnnotation3 {
  position: absolute;
  left: 0; /* Adjust the left position */
  bottom: 0;
  border: 1px solid;
  border-radius: 20px;
  background: #3d3d3d;
  color: navajowhite;
}

.cdg-design-points {
  grid-column-gap: 40px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.cdg-design-points.single-column {
  grid-template-columns: 1fr;
}

.cdg-design-points.single-column.horizontal {
  grid-template-rows: auto auto;
}

.cdg-design-points {
  grid-template-columns: 1fr;
}

.cdg-design-points.single-column {
  max-width: 100%;
}

.cdg-design-points.single-column.horizontal {
  flex-wrap: wrap;
  display: flex;
}


.expand-design-point {
  flex-wrap: wrap;
}


.expand-design-point {
  grid-row-gap: 8px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
} 


.cdg-card-point {
  width: auto;
  min-width: 210px;
  grid-column-gap: 8px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  display: flex;
}

.cdg-card-point.small {
  min-width: 180px;
}

.cdg-card-point {
align-items: flex-start;
}


.design-subpoint {
  grid-column-gap: 8px;
  align-items: center;
  padding-left: 32px;
  display: flex;
}


.design-subpoint {
  grid-row-gap: 8px;
  flex-wrap: wrap;
}
.design-point-dot {
  width: 4px;
  height: 4px;
  background-color: var(--white);
  border-radius: 10px;
}

.b3-16px {
  color: #1d2939;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


.cdg-card-point {
  width: auto;
  min-width: 210px;
  grid-column-gap: 8px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  display: flex;
}

.cdg-card-point.small {
  min-width: 180px;
}

.cdg-card-point {
  align-items: flex-start;
}

.cdg-design-img {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  flex: 1;
  overflow: hidden;
}

.cdg-card-uimg {
  width: 100%;
  height: 100%;
}

.color-block.blue {
  background-color: var(--horizon-prple);
}

.blue-span {
  color: var(--zealous-blue);
}

.cdg-tag.blue {
  color: var(--cdgous-blue);
}

.h4-30px {
color: #101828;
letter-spacing: -.01em;
margin-top: 0;
margin-bottom: 0;
font-family: Inter, sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 38px;
}

.h4-30px._700 {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
}

.h4-30px.center {
text-align: center;
font-weight: 700;
}

.h4-30px._600 {
font-weight: 600;
}

.h4-30px.white {
color: var(--white);
}

.b2-18px.white {
  color: var(--white);
}

.color-block.white {
  background-color: #fff;
  border: 1px solid #f0f2f3;
}


.b3-16px.white {
  color: var(--white);
}


.s-btn.white {
  background-color: #fff;
}

.s-btn.white:hover {
  background-color: #efe6ff;
}


.white-link {
  color: #ff8491;
}

.h4-30px.white {
  color: var(--white);
}

.h2-48px.white {
  color: #fff;
}
.h5-24px.white {
  color: var(--white);
}

.p-btn.white {
  color: #843df5;
  background-color: #fff;
  text-decoration: none;
}

.p-btn.white:hover {
  outline-offset: 0px;
  color: #5c16cc;
  background-color: #efe6ff;
  border: 1px #000;
  outline: 2px solid #843df5;
}
.h1-a-72px.center.white {
  color: var(--white);
}

.h1-a-72px.center.white.hero-span {
  margin-top: 0;
  margin-bottom: 0;
}

.p2-16px.white {
  color: #fff;
}


.h1-a-72px.center.white {
  color: var(--white);
}

.h1-a-72px.center.white.hero-span {
  margin-top: 0;
  margin-bottom: 0;
}

.h2-48px.white {
  font-size: 30px;
  line-height: 38px;
}

.h2-48px.center._600.white.left-mobile {
  text-align: left;
}


.b2-18px {
  color: #101828;
  letter-spacing: -.02em;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.b2-18px.cg-600 {
  color: #98a2b3;
}

.b2-18px.center {
  text-align: center;
}

.b2-18px.white {
  color: var(--white);
}

.b2-18px.puff {
  color: var(--puff-blue);
}

.b2-18px._600 {
  font-weight: 600;
}

.b2-18px {
  font-size: 16px;
  line-height: 24px;
}

.b2-18px.cg-600 {
  color: #98a2b3;
}

.cdg-design-points.single-column {
  grid-template-columns: 1fr;
}

.cdg-design-points.single-column.horizontal {
  grid-template-rows: auto auto;
}



.cdg-design-points.single-column {
  max-width: 100%;
}

.cdg-design-points.single-column.horizontal {
  flex-wrap: wrap;
  display: flex;
}

#w-node-d32f9407-aa72-e9f0-7866-4d29e1c22ff6-0da9b8a1, #w-node-a0288746-4366-c2f0-f17d-e91049a982fd-0da9b8a1, #w-node-_1b7fbcf1-b57d-0ad7-170f-4677d52fda59-0da9b8a1, #w-node-ebea7182-509e-11d4-bc4c-39389df09629-0da9b8a1, #w-node-_61e604ed-c607-4305-ff9f-0ff217ed330f-0da9b8a1, #w-node-_661ccae3-0c21-750e-2ca2-86a015bfb105-0da9b8a1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
.vertical-tab {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
}

.b3-16px {
  color: #1d2939;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.b3-16px._600 {
  color: #101828;
  font-weight: 600;
}

.b3-16px.center {
  text-align: center;
}

.b3-16px.center.puff {
  color: var(--puff-blue);
}

.b3-16px.cb-600 {
  color: var(--cb-600);
}

.b3-16px.white {
  color: var(--white);
}

.b3-16px.puff {
  color: var(--puff-blue);
}

.top_glb_viewer{
  width: 100%;
  height: 100%;
}

.vision_card {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  background: transparent;
  font-size: 16px;
  &::before,
&::after {
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  background-color: #2b5774;
  z-index: -20;
  transition: all .4s;
  background: transparent;
}

&::before {
  top: 0;
  right: 0;
}

&::after {
  bottom: 0;
  left: 0;
}

.content {
  width: 100%;
  height: 100%;
  color: #fff;
  background: transparent;
  backdrop-filter: blur(20px);
  border: 1px solid #4368e0;
  border-radius: 6px;
  box-shadow: -20px 10px 20px rgba(98, 168, 209, 0.16);
  transition: all .4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

&:hover {
  &::before {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(20px, -20px);
    background-color: #4368e0;
  }
  
  &::after {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(-30px, 30px);
    background-color: #4368e0;
  }
  
}
}


.cdg-design-img {
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
flex: 1;
overflow: hidden;
}


.cdg-card-uimg {
width: 100%;
height: 100%;
}

.horizontal-line {
width: 100%;
height: 1px;
opacity: .2;
background-color: #1d1916;
margin-bottom: 36px;
}

.horizontal-line.design-system {
position: relative;
bottom: -80px;
}

.cdg-design-points.single-column {
grid-template-columns: 1fr;
}

.cdg-design-points.single-column.horizontal {
grid-template-rows: auto auto;
}

.design-point-horizontal {
align-items: center;
display: flex;
}

.design-point-horizontal {
grid-row-gap: 16px;
flex-wrap: wrap;
}

.choose-card{
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
background: transparent;
border: 1px solid #fff;
background: transparent;
transition: filter 0.5s ease;
}

.choose-card:hover{
background-color: rgba(255, 255, 255, 0.199);
opacity:0.9; 
transition: 0.5s;
}

.div-head:hover{
color:#52ff38;
cursor: pointer;
transition: 0.9s;
}


.contact-p{
font-size: 25px;
text-decoration: none;
font-weight: 500;
}

.form-control{
background: #979696 !important;
}

.inform_span_assets{
font-size: clamp(25px, 5vw, 25px);
font-weight: 350;
}

.inform_span_client{
font-size: clamp(25px, 5vw, 25px);
font-weight: 350;
}

.inform_span_office{
font-size: clamp(25px, 5vw, 25px);
font-weight: 350;
}

.inform_span_artist{
font-size: clamp(25px, 5vw, 25px);
font-weight: 350;
}
.port-card{
  height:100% !important;
  width:50% !important;
  border:1px solid white;
  overflow:hidden;
  object-fit: cover;
}

.port-card img{
width: 100%;
height: 100%;
object-fit: cover;
}

#auto-container {
position: absolute;
height: 80px;
width: 100%;
max-width: 1266px;
overflow: hidden;
}

#auto-scroller {
position: absolute;
width: calc(260px * 6);
transition: all 1s ease;
}

.auto-item {
width: 220px;
height: 80px;
display: inline-block;
margin: 20px;
position: relative;
}

.auto-item img {
position: absolute;
top: 16%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 220px;
max-height: 50px;
background-size: cover;
object-fit: cover;
}

/* .book-service{
margin: auto;
} */
.rt-card{
height: 250px;
background: transparent;
}


.card{
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
background: transparent;
border: none;
border-radius: 5px;
background: transparent;
transition: filter 0.5s ease;
object-fit: cover;
background-size: cover;
}

.port_img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 25px;
}

.port_img:hover{
box-shadow: 1px 1px 2px 3px rgb(79, 89, 221);
}

:root {
  font-size: 100%;
  --white: oklch(100% 0 0);  
  --greyLight-1:  oklch(93.77% 0.015 257.2);
  --greyLight-2:  oklch(85.86% 0.033 270.41);
  --greyLight-3:  oklch(83.4% 0.041 269.92);

  --background: var(--greyLight-1);
  --onBackground: var(--greyLight-3);

  --surface: oklch(64.95% 0.186 268.81);
  --onSurface: var(--white);

  --shadow: .3rem .3rem .6rem var(--greyLight-2),
           -.2rem -.2rem .5rem var(--white);
}





.box {
  /* display: flex; */
  /* align-items:end;
  justify-content:right; */
  margin: 25px;
  /* padding: 15px;   */
  transform: translateX(200%);
  transition: transform 400ms ease;
  background: #1b224d;
  border: 1px solid blue;
  border-radius: 25px;
  box-shadow: -3px 11px 20px 0px #2a2a4c;
  overflow: hidden;
}

.box:nth-of-type(even) {
  transform: translateX(-200%);
  justify-content:left;
}

.box.show {
  transform: translateX(0);
}

.service_text{
font-size: 1.2rem;
padding:15px;
line-height: 30px;
margin-top: 1rem;
color: #b0ccff;
}

/* .service_text_Aug{
font-size: 25px;
padding:15px;
line-height: 40px;
} */

.service_images{
  width: 72%;
  /* height: 107%; */
  /* margin-top: -15px; */
  border-radius: 30px;
  transition: 0.5s;
}

.service_images:hover{
transform: scale(1.1);
transition: 0.5s;
cursor: grabbing;
}
/* .one {
background: transparent;
}

.two {
background: transparent;
}

.three {
background: transparent;
} */

.virtual-try{
height: 70vh;
border-radius: 25px;
}

.int-card{
height: 300px;
background: transparent;
margin-top: 2rem;
}
.int-card img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px;
transition: 0.5s;
background-size: cover;
}

.model_image:hover{
cursor: zoom-in;
transform: scale(1.1);
transition: 0.5s;
}

[data-ssc="zoom-in"] {
animation-name: zoomIn;
}

.gradient-text {
/* background-image: linear-gradient(to right, #ff00cc, #6d6dd1); */
background-image: linear-gradient(326deg, rgb(54, 212, 247) 0%, rgba(210, 122, 240, 0.95) 100%);
color: transparent;
-webkit-background-clip: text; /* For WebKit/Blink browsers like Chrome and Safari */
background-clip: text;
/* font-weight: bold; */
text-align: start;
}

#main-text{
border: 1px solid #323b3e;
border-radius: 25px;
}
.head_glb{
width: 100%;
height: 500px;
border-radius: 25px;
}

.loader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: rgba(255, 255, 255, 0.7); */
z-index: 1000;
}

.loader iframe {
position: absolute;
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
width: 100%;
height: 100%;
/* border: none; */
}

/* 
.spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} */

.model_video{
  border-radius: 25px;
}
:root {
  --switches-bg-color: goldenrod;
  --switches-label-color: white ;
  --switch-bg-color: white;
  --switch-text-color: goldenrod ;
}

/* a container - decorative, not required */
.container {
  margin-left: auto;
  margin-right: auto;
}
/* p - decorative, not required */
p {
margin-top:2rem;
font-size:0.75rem;
text-align:center;
}

/* container for all of the switch elements 
  - adjust "width" to fit the content accordingly 
*/
.switches-container {
  width: 16rem;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: var(--switches-bg-color);
  line-height: 3rem;
  border-radius: 3rem;
  margin-left: auto;
  margin-right: auto;
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: var(--switches-label-color);
}

/* switch highlighters wrapper (sliding left / right) 
  - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0.15rem;
  z-index: 3;
  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
  /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
  border-radius: 3rem;
  background: var(--switch-bg-color);
  height: 100%;
}

/* switch box labels
  - default setup
  - toggle afterwards based on radio:checked status 
*/
.switch div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: var(--switch-text-color) ;
  transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
  transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
  transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
  opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
  opacity: 1;
}

.gradient-icon-bar{
width: 40%;
height: auto;
}

.gradient-icon-pen{
  width: 18%;
  height: auto;
}

.gradient-icon{
width: 38%;
height: 75%;
}

.gradient-icon-d{
  width: 30%;
  height: 75%;
}
.about_us_text{
  font-size: 21px;
  text-align: center;
  font-weight: 350;
  margin-left: 3rem;
}
.plus_icon{
  color: #5241FA;
  font-size: 50px;
  font-weight: 900;
}
.specification_text{
  text-align: start;
}
.amazon_break{
  display: none;
}
.location_div{
  justify-content: space-around;
}
.location_text{
  margin-left: 15px;
}
@media (max-width: 768px) {
  .ar-btn{
    display: none;
  }
  .ar_work_model{
    display: none;
  }
  .location_text{
    margin-left: 0px;
  }
  .contact_form{
    width: 90%;
    text-align: center;
    margin: auto;
  }
  .location_div{
    justify-content: space-evenly;
  }
  .amazon_break{
    display: block;
  }
  .amazon_hifen{
    display: none;
  }
  .plus_icon{
    color: #5241FA;
    font-size: 35px;
    font-weight: 900;
  }
  #pen_div{
    margin-top: 0rem !important;
  }
  .specification_text{
    text-align: center;
  }
  #about_video{
    display: none;
  }
  .HotspotAnnotation2{
    display: none;
  }
  .cdg .replace-btn {
    position: absolute;
    left: 0;
    bottom: 60px;
    border: 1px solid;
    border-radius: 20px;
    background: #3d3d3d;
    color: navajowhite;
  }
  .cdg .amazon-btn {
    position: absolute;
    left: 0;
    bottom: 10px;
    border: 1px solid;
    border-radius: 20px;
    background: #3d3d3d;
    color: navajowhite;
    width: max-content;
  }
  .about_us_text{
    font-size: 21px;
    text-align: center;
    font-weight: 350;
    margin-left: 0rem;
  }
  .contact-p {
    font-size: 20px;
  }
  }
  
  .email {
    border: 4px solid white;
    border-left-color: transparent;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin89345 1s linear infinite;
  }
  
  @keyframes spin89345 {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

  #my-form-status{
    text-align: center;
    margin-top: 15%;
    letter-spacing: 0px;
    margin-bottom: 15%;
  }

  .border-danger{
    border: 2px solid red !important;
  }