.tabs {
  display: flex;
  border: 1px transparent;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 888;
}

.tabs .tabstudio {
  flex: 1;
  padding: 10px;
  text-align: center;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition: all .3s;
  font-family: Arial, sans-serif;
  border: none;
}

.tabs .active {
  background-color: #000;
  color: #fff;
}

.tabs-class {
  overflow: hidden;
  position: relative;
  z-index: 888;
}

@media screen and (max-width: 576px) {
  .tabs-class {
    position: absolute;
    
    left: 50%;
    
    transform: translateX(-50%);
  }

  [dir="rtl"] .tabs-class {
    left: auto;
    
    right: 50%;
    
    transform: translateX(50%);
  }
}

.tabs-class .tabs-class-wrapper {
  position: relative;
}

.tabs-class .tabs-class-wrapper .tabs360 {
  padding: 12px 24px;
  background-color: transparent;
  text-align: center;
  color: #000;
  cursor: pointer;
  transition: all .3s;
  font-family: "inter-bold";
  font-size: 16px;
  position: relative;
}

.tabs-class .tabs-class-wrapper .active::after {
  content: "";
  position: absolute;
  bottom: 0;
  
  left: 50%;
  
  transform: translateX(-50%);
  width: 85px;
  height: 5px;
  background-color: #000;
}

[dir="rtl"] .tabs-class .tabs-class-wrapper .active::after {
  left: auto;
  
  right: 50%;
  
  transform: translateX(50%);
}

@media screen and (max-width: 576px) {
  .tabs-class .tabs-class-wrapper .active::after {
    bottom: 3px;
  }
}

#colorSelectorExterior {
  width: auto;
}

@media screen and (max-width: 576px) {
  #colorSelectorExterior {
    width: 70%;
  }
}

#colorSelectorInterior {
  width: auto;
}

@media screen and (max-width: 576px) {
  #colorSelectorInterior {
    width: 50%;
  }
}

.color-selector {
  
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 50%, #d6d6d6 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  font-size: 18px;
  font-family: "inter-bold";
  border-radius: 12px;
  
  right: 50px !important;
}

[dir="rtl"] .color-selector {
  
  background: linear-gradient(-180deg, #fff 0%, #f0f0f0 50%, #d6d6d6 100%);
  right: auto !important;
  
  left: 50px !important;
}

@media screen and (max-width: 576px) {
  .color-selector {
    bottom: 7px;
    
    left: 50%;
    
    transform: translateX(-50%);
    
    right: auto !important;
  }

  [dir="rtl"] .color-selector {
    
    right: 50%;
    
    transform: translateX(50%);
    
    left: auto !important;
  }
}

.color-selector .color-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 10px 2px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .3s;
}

.color-selector .color-circle.selected {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.6616 4.5294C16.9213 4.75671 16.9477 5.15156 16.7204 5.41133L7.97036 15.4113C7.85645 15.5415 7.69368 15.6187 7.5208 15.6244C7.34791 15.6302 7.18037 15.564 7.05806 15.4417L3.30806 11.6917C3.06398 11.4476 3.06398 11.0519 3.30806 10.8078C3.55214 10.5637 3.94786 10.5637 4.19194 10.8078L7.46956 14.0854L15.7796 4.5882C16.0069 4.32843 16.4018 4.3021 16.6616 4.5294Z' fill='white'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
}

.color-selector .color-circle:last-child.selected {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.6616 5.0294C16.9213 5.25671 16.9477 5.65156 16.7204 5.91133L7.97036 15.9113C7.85645 16.0415 7.69368 16.1187 7.5208 16.1244C7.34791 16.1302 7.18037 16.064 7.05806 15.9417L3.30806 12.1917C3.06398 11.9476 3.06398 11.5519 3.30806 11.3078C3.55214 11.0637 3.94786 11.0637 4.19194 11.3078L7.46956 14.5854L15.7796 5.0882C16.0069 4.82843 16.4018 4.8021 16.6616 5.0294Z' fill='black'/%3e%3c/svg%3e");
}

.color-selector .color-circle-interior {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 10px 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .3s;
}

.color-selector .color-circle-interior.selected {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.6616 4.5294C16.9213 4.75671 16.9477 5.15156 16.7204 5.41133L7.97036 15.4113C7.85645 15.5415 7.69368 15.6187 7.5208 15.6244C7.34791 15.6302 7.18037 15.564 7.05806 15.4417L3.30806 11.6917C3.06398 11.4476 3.06398 11.0519 3.30806 10.8078C3.55214 10.5637 3.94786 10.5637 4.19194 10.8078L7.46956 14.0854L15.7796 4.5882C16.0069 4.32843 16.4018 4.3021 16.6616 4.5294Z' fill='white'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
}

.color-selector .color-circle-interior:last-child.selected {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.6616 5.0294C16.9213 5.25671 16.9477 5.65156 16.7204 5.91133L7.97036 15.9113C7.85645 16.0415 7.69368 16.1187 7.5208 16.1244C7.34791 16.1302 7.18037 16.064 7.05806 15.9417L3.30806 12.1917C3.06398 11.9476 3.06398 11.5519 3.30806 11.3078C3.55214 11.0637 3.94786 11.0637 4.19194 11.3078L7.46956 14.5854L15.7796 5.0882C16.0069 4.82843 16.4018 4.8021 16.6616 5.0294Z' fill='black'/%3e%3c/svg%3e");
}

#interiorAnimation {
  width: 100vw;
  height: 100%;
  min-height: 620px;
  max-height: 85vh;
  height: 100%;
  left: 0;
  bottom: 0;
  right: 0;
}

@media screen and (max-width: 576px) {
  #interiorAnimation {
    max-height: 270px;
    min-height: 200px;
    height: 100%;
    bottom: 115px;
  }
}

#featuresAnimation img {
  width: 80% !important;
  
  transform: translateX(10%);
}

[dir="rtl"] #featuresAnimation img {
  
  transform: translateX(-10%);
}

@media screen and (max-width: 576px) {
  #featuresAnimation img {
    width: 100% !important;
    transform: translateX(0%);
  }
}

#exteriorAnimation img {
  width: 80% !important;
  
  transform: translateX(10%);
}

[dir="rtl"] #exteriorAnimation img {
  
  transform: translateX(-10%);
}

@media screen and (max-width: 576px) {
  #exteriorAnimation img {
    width: 100% !important;
    transform: translateX(0%);
  }
}

#section-360 {
  min-height: 100vh;
}

#section-360 h3 {
  font-size: 32px;
  letter-spacing: 5px;
}

@media screen and (max-width: 576px) {
  #section-360 h3 {
    font-size: 30px;
    letter-spacing: 2px;
  }
}

#section-360 h1 {
  font-size: 64px;
  margin-bottom: -4px !important;
}

@media screen and (max-width: 576px) {
  #section-360 h1 {
    font-size: 32px;
    letter-spacing: 2px;
  }
}

#section-360 h1 span {
  font-family: "inter-semibold";
  font-size: 24px;
  text-transform: none;
  font-weight: 500 !important;
  letter-spacing: 0;
}

@media screen and (max-width: 576px) {
  #section-360 p {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 576px) {
  #section-360 {
    min-height: 100vh;
  }
}

@media screen and (max-width: 576px) {
  #svg-360 {
    bottom: 120px !important;
  }

  #svg-360 img {
    width: 85px !important;
  }
}

@media screen and (max-width: 576px) {
  #svg-360-white {
    bottom: 120px !important;
  }

  #svg-360-white img {
    width: 85px !important;
  }
}

#classSelector {
  top: 167px;
  
  right: 50px !important;
}

[dir="rtl"] #classSelector {
  right: auto !important;
  
  left: 50px !important;
}

@media screen and (max-width: 576px) {
  #classSelector {
    background-color: #000;
    bottom: 118px;
    top: auto;
    
    left: 50%;
    
    transform: translateX(-50%);
    
    right: auto !important;
  }

  [dir="rtl"] #classSelector {
    
    right: 50%;
    
    transform: translateX(50%);
    
    left: auto !important;
  }
}

.mobile-active {
  background-color: #000 !important;
  width: 100% !important;
  height: 114px !important;
  bottom: 2px !important;
}

.mobile-active .tabs-class {
  bottom: 70px;
}

.mobile-active .tabs-class .tabs360 {
  color: #fff !important;
}

.mobile-active .tabs-class .active::after {
  background-color: #fff !important;
}

#switchAnimation {
  margin: 50px 0 20px 0;
}

@media screen and (max-width: 576px) {
  #switchAnimation {
    margin: 50px 0 20px 0;
  }
}

@media (max-width: 1280px) {
  .ml-md {
    
    margin-left: -48px;
    gap: .5rem;
  }

  [dir="rtl"] .ml-md {
    margin-left: 0;
    
    margin-right: -48px;
  }
}