/* Medium (500) */
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/circular-std-medium-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Medium (300) */
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Light.otf") format("truetype");
  font-weight: 300;
  font-style: normal;
}



.hero-section::after {
  content: "";
  position: absolute;
  right:0;
  top: 85%;
  transform: translateY(-40%);
  width: 28vw;         /* responsive width (40% of viewport width) */
  height: 30vw;        /* keep it square */
  max-width: 660px;    /* prevent it from growing too large */
  max-height: 660px;
  min-width: 162px;    /* prevent it from shrinking too small */
  min-height: 250px;
  background: url('./image/hero_logo2.png') no-repeat center center;
  background-size: contain;
          /* subtle look */
  z-index: 0;          /* stays behind content */
}




@media (min-width:768px){
.hero-section::after {
  content: "";
  position: absolute;
  right: 0;
  top: 60%;
  transform: translateY(-40%);
  width: 33vw;         /* responsive width (40% of viewport width) */
  height: 30vw;        /* keep it square */
  max-width: 660px;    /* prevent it from growing too large */
  max-height: 660px;
  min-width: 250px;    /* prevent it from shrinking too small */
  min-height: 250px;
  background: url('./image/side_logo.png') no-repeat center center;
  background-size: contain;
          /* subtle look */
  z-index: 0;          /* stays behind content */
}
}




.Visibility-Stack-section::after {
  content: "";
  position: absolute;
  right:0;
  top: 15%;
  transform: translateY(-40%);
  width: 28vw;         /* responsive width (40% of viewport width) */
  height: 30vw;        /* keep it square */
  max-width: 660px;    /* prevent it from growing too large */
  max-height: 660px;
  min-width: 162px;    /* prevent it from shrinking too small */
  min-height: 250px;
  background: url('./image/hero_logo2.png') no-repeat center center;
  background-size: contain;
          /* subtle look */
  z-index: 0;          /* stays behind content */
}




@media (min-width:768px){
.Visibility-Stack-section::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  transform: translateY(-40%);
  width: 33vw;         /* responsive width (40% of viewport width) */
  height: 30vw;        /* keep it square */
  max-width: 660px;    /* prevent it from growing too large */
  max-height: 660px;
  min-width: 250px;    /* prevent it from shrinking too small */
  min-height: 250px;
  background: url('./image/side_logo.png') no-repeat center center;
  background-size: contain;
          /* subtle look */
  z-index: 0;          /* stays behind content */
}
}

@media (min-width: 1280px) {
  .from_section_arrow::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 15vw;
    height: 26vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/from_arrow.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .from_section_arrow::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 30vw;
    height: 50vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/from_arrow.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}



@media (min-width: 1280px) {
  .from_section_arrow-two::before {
    content: "";
    position: absolute;
    bottom: -245px;
    left: 0;
    width: 15vw;
    height: 26vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/from_arrow.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .from_section_arrow-two::before {
    content: "";
    position: absolute;
    bottom: -250px;
    left: 0;
    width: 30vw;
    height: 50vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/from_arrow.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}


@media (min-width: 1280px) {
  .dashbord_section_arrow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 25vw;
    height: 36vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/dashbord_right_icon.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
    
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .dashbord_section_arrow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 70vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/dashbord_right_icon.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
   
  }
}


@media (max-width: 767px){
  .b2b_section_arrow::before {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 30vw;
    height: 75vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/icons/b2b.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}



@media (min-width:768px){
 .how-we-build-section::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 26vw;
    height: 38vw;
    max-width: 660px;
    max-height: 660px;
    min-width: 250px;
    min-height: 250px;
    background: url('./image/from_arrow.svg') no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}






@media (min-width: 1736px) {
    .container {
        max-width: 1736px;
    }
}

@media (min-width: 1936px) {
    .container {
        max-width: 1936px;
    }
}


/* Arrow for dropdown */
.dropdown-menu-service::before {
  content: '';
  position: absolute;
  top: -20px;      /* distance above dropdown */
  left: 24px;     /* adjust to align with button */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white; /* same as dropdown bg */
}

.dropdown::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    height: 24px;
}

.accordion-content-how-we-build {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}


 #masonry-grid .masonry-item {
    margin-bottom: 16px; /* vertical gap */
  }