/* header */

.no-banner .nav-link {
  color: transparent;
  background: linear-gradient(90deg, #f58634, #f58634, 50%, #1C1F26 50%);
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
  background-size: 200%, 100%;
  background-position: 100%;
}

header.fixed-again {
  background: rgba(255, 247, 247, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.no-banner .dropdown-toggle::after {
  border-top: 0.3em solid var(--lightblack);
}

.schedule-btn {
  background: #1C1F26;
  color: #fff;
}





/* banner */
.visual-com-banner {
  position: relative;
  overflow: hidden;
  background: url('../img/visual-commerce-banner.jpg')no-repeat;
  padding-top: 100px;
  padding-bottom: 40px;
  background-size: cover;
 
}

.banner-row{
 display: flex;
 align-items: center;
 height: 100%;
}


.visual-com-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 70%;
}
.visual-com-banner .banner-content-box {
 max-width: 40%;
 flex: 0 0 40%;
 text-align: center;
 padding-right: 50px;
}

.visual-com-banner .banner-content-box .inner-content{
    max-width: 400px;
}
.video-box{
    max-width: 60%;
    flex: 0 0 60%;
}
.visual-com-banner .banner-content-box h1,
.visual-com-banner .banner-content-box p {
  color: var(--gray1);
}
.visual-com-banner .banner-content-box p {
  font-weight: 300;
  max-width: 400px;
  margin: 0 auto 40px;
  font-size: var(--font20);
  line-height: 25px;
}

.visual-com-banner .banner-content-box .blue-btn.white-btn{
    max-width: 100%;
}



/* benifit-three-dev-section */
.benifit-three-dev-section {
  background: #EEF6F9;
}
.benifit-three-dev-section .benifit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 65px 100px;
  justify-content: center;
  max-width: 1100px;
  margin: auto;
}
.benifit-three-dev-section .benifit-item {
  position: relative;
  max-width: calc((100% - 100px) / 2);
   flex: 0 0 calc((100% - 100px) / 2);
}
.benifit-three-dev-section .benifit-item .image {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  padding-top: calc(370/450*100%);
}

.benifit-three-dev-section .benifit-item .image img{
    position: absolute;
    top: 0;
    left: 0;
}
.benifit-three-dev-section .benifit-item .content-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
}
.benifit-three-dev-section .benifit-item .content-box .title {
  font-size: var(--font18);
  line-height: 25px;
  color: var(--white);
  text-align: center;
}
.benifit-three-dev-section .benifit-item .content-box .desc-box {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.5s ease, opacity 0.4s ease;
}
.benifit-three-dev-section .benifit-item .content-box .desc-box p {
  font-size: var(--font14);
  color: var(--white);
  line-height: 18px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 0;
}


/* visual-studio-section */
.visual-studio-section {
  background: #eee;
}
.visual-studio-section .studio-slider .studio-box {
  margin-bottom: 25px;
  position: relative;
    max-width: 1024px;
  margin-inline: auto;
}
.visual-studio-section .studio-slider .studio-box video {
  width: 100%;
  height: 100%;
}
.visual-studio-section .studio-slider .studio-box .text-with-arrow {
    position: absolute;
    top: 20%;
    right: 0;
    padding-top: 40px;
    width: 276px;
}
.visual-studio-section .studio-slider .studio-box .text-with-arrow .arrow {
  transform: rotate(232deg);
  width: 60px;
  position: absolute;
  top: 0;
  left: 0;
}
.visual-studio-section .studio-slider .studio-box .text-with-arrow p {
  color: var(--lightblack1);
  font-size: var(--font18);
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  padding-left: 50px;
}
.visual-studio-section .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.visual-com-slider  .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: var(--lightblack1);
}
.visual-studio-section .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .visual-studio-section .swiper-pagination .swiper-pagination-bullet,
.visual-com-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.visual-com-slider .swiper-pagination .swiper-pagination-bullet{
  border: 2px solid var(--lightblack1);
}
.threeD-model-container ul li:nth-child(n+3) {
    display: none;
}
.threeD-model-container .read-more-btn{
  text-align: center;
  cursor: pointer;
    margin-top: 40px;
    display: block;
}



@media (max-width: 992px) {
  .no-banner .hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1C1F26;
    border-radius: 3px;
    transition: all 0.3s ease;
  }
  .no-banner .mobile-header {
    background: rgba(255, 247, 247, 0.55);
  }

  .visual-studio-section .studio-slider .studio-box {
    max-width: 992px;
    margin-inline: auto;
}

.visual-studio-section .studio-slider .studio-box .text-with-arrow{
    right: 0;
    width: 200px;
}
}
@media only screen and (max-width: 767px) {

.visual-studio-section .studio-slider .studio-box .text-with-arrow p{
        font-size: 10px;
        line-height: 16px;
        padding-left: 20px;
}
.visual-studio-section .studio-slider .studio-box .text-with-arrow {
    right: -30px;
    padding-top: 28px;
    width: 140px;
}
.visual-studio-section .studio-slider .studio-box .text-with-arrow .arrow {
    width: 40px;
}
.visual-com-banner .banner-content-box{
  width: 90%;
  top:70px;
  transform: none;
  margin: auto;
  right: 0;
  left: 0;
}
.vto-banner-section,.vto-banner-section .video-box {
        height: auto;
    }
.visual-com-banner .banner-content-box .blue-btn.white-btn {
    max-width: 200px;
}
.visual-com-banner .banner-content-box p{
        margin: 0 auto 17px;
        font-size: var(--font14);
        line-height: 18px;
        max-width: 90%;
}


.visual-com-slider .item-content{
    padding-block: 30px;
    text-align: center;
}
.banner-row{
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 30px 0;
}
.video-box,.visual-com-banner .banner-content-box{
    flex: 0 0 100%;
    max-width: 100%;
}


.visual-com-banner{
    padding-block:70px 0;
   background: url('../img/visual-commerce-mobile-banner.jpg')no-repeat;
   background-size: cover;
}

.visual-com-banner img {
    max-width: 100%;
}
}

@media only screen and (max-width: 575px) {
.visual-com-banner .banner-content-box{
    padding-right: 0;
}
}