/*  */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

.navber {
  /* font-family: Arial, sans-serif; */
  font-family: "Roboto", sans-serif;
  color: rgba(0, 0, 0, 0.6);
}

/* course pages */
.cousrse-page-font {
  /* font-family: Helvetica, Arial, Lucida, sans-serif; */
  font-family: "Roboto", sans-serif;
}

/* home page */
.home-page-sec-heading,
.home-read-me,
.home-sec-title,
.home-heading,
.about-specifc,
.font-cormorant {
  /* font-family: "Georgia", "Times New Roman", serif; */
  font-family: "Roboto", sans-serif;
}

.home-page-sec-phara,
.home-phara,
.about-specifc-phara,
.font-montserrat,
p {
  /* font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif; */
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.7em;
}

/* about page */
.font-Georgia {
  /* font-family: Georgia, "Times New Roman", serif; */
  font-family: "Roboto", sans-serif;
}

.about-p,
.about-h,
.font-poppins {
  /* font-family: "Poppins", Helvetica, Arial, Lucida, sans-serif; */
  font-family: "Roboto", sans-serif;
}

.about-span {
  /* font-family: "Playfair Display", Georgia, "Times New Roman", serif; */
  font-family: "Roboto", sans-serif;
}

.font-openSans {
  /* font-family: "Open Sans", Arial, sans-serif; */
  font-family: "Roboto", sans-serif;
}

.font-lato {
  /* font-family: "Lato", Helvetica, Arial, Lucida, sans-serif; */
  font-family: "Roboto", sans-serif;
}

.animate-slide {
  opacity: 0;
  transform: translateY(-25px);
  transition: all 1s ease-in-out;
}

.animate-slide.show {
  opacity: 1;
  transform: translateY(0);
}

.scale-animateb {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.scale-animateb.showb {
  opacity: 1;
  transform: scale(1);
}

.animate-slidec {
  opacity: 0;
  transform: translatex(35px);
  transition: all 1s ease-in-out;
}
.animate-slidec.showc {
  opacity: 1;
  transform: translateY(0);
}

.course-card-formobile {
  display: block;
}
/* .about-top-img{

  background-image: url(/public/about/bg-photo-bWcolor-1-scaled.webp);
  background-image: url(/public/about/about2.jpg);
} */



/* mobile */

@media only screen and (max-width: 480px) {
  .top-img {
    height: 31vh !important;
  }

  .ser-title{
        font-size: 0.8rem !important;
  }

  .home-heading {
    font-size: 1.8rem;
    width: 100%;
    flex-direction: column !important;
  }
  .home-heading button {
    font-size: 1rem !important;
    width: fit-content;
    margin: 0 auto;
  }

  .our-clients {
    padding: 11% 8% !important;
    display: flex !important;
    flex-wrap: wrap;
  }

  .special-padding {
    padding: 40px 0;
  }

  .home-page-sec-phara {
    padding-bottom: 27px !important;
  }

  .home-video {
    width: 100% !important;
  }
  .premium-services {
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    height: auto !important;
    gap: 3rem;
  }
  .premium-services-provider {
    height: auto !important;
  }
  .premium-services-sec {
    height: auto;
  }
  .animation-training-delhi {
    display: block !important;
  }
  .home-training-delhi-phara {
    width: 100% !important;
    padding-top: 40px;
  }

  .about-amazdraw {
    display: block !important;
  }
  .about-amazdraw-inner {
    width: 100% !important;
  }

  .choose-amazdraw {
    flex-direction: column !important;
    gap: 3rem;
    align-items: center;
  }

  /* <------------------------------------------------managers---------------------------------------> */

  .width-increase {
    width: 90% !important;
    height: auto !important;
  }

  .width-increaseb {
    width: 90% !important;
  }

  .manage-height {
    height: auto !important;
  }

  .column-manager {
    flex-direction: column;
  }

  .long-height-manager {
    height: auto !important;
  }

  .wide-width-manager {
    width: 100% !important;
  }

  .gap-manager {
    gap: 2rem;
  }

  .more-pad {
    padding: 4rem 0;
  }

  .padding-manager {
    padding: 2.5rem 0 !important;
  }

  .padding-none {
    padding: 0 !important;
  }

  .paddingtwo {
    padding: 1rem 0 !important;
  }

  .low-gap {
    gap: 0.75rem;
  }

  .height-manager {
    height: 15vh !important;
  }

  /* <--------------------------------------------contactus--------------------------------------------> */

  .position-top-contactus {
    top: 88% !important;
  }
  .contactus-main-img {
    background-size: cover !important;
  }

  .margin {
    margin-top: 170% !important;
  }

  .margin div div p {
    color: black;
  }

  .contactus-cotact-card {
    width: 100% !important;
  }

  .contactus-cotact-card-grup {
    position: relative;
    top: 145%;
  }

  .letter-space {
    letter-spacing: -1px !important;
  }

  /* <------------------------------------------------traning-----------------------------------------> */

  .animatetraning {
    height: 20vh !important;
  }

  .traning-register-btn {
    position: relative !important;
    top: -4% !important;
  }

  /* <------------------------------------------------traning-----------------------------------------> */

  .img-hidder {
    display: none;
  }

  .video-height {
    height: 24vh !important;
  }

  .padding {
    padding: 2rem 0 !important;
  }

  .heading-size {
    font-size: 1.2rem !important;
  }

  .right {
    right: 0 !important;
  }

  .card-gap {
    gap: 0 !important;
  }

  /* <------------------------------------------------illustration-----------------------------------------> */
  .illustration-servicetag {
    font-size: 2.6rem !important;
  }

  .margin-down {
    margin-bottom: 30px;
  }

  /* <------------------------------------------------animation-----------------------------------------> */

  .contactbtn {
    font-size: 1rem !important;
  }

  .center-items {
    align-items: center;
  }

  .animationhhead-img {
    background-size: contain;
    height: 32vh !important;
  }

  .flex-reverse {
    flex-direction: column-reverse;
  }

  .arrow-container {
    width: 87% !important;
  }

  .left-arr {
    left: 3% !important;
  }

  .right-arr {
    right: 3% !important;
  }

  /* <------------------------------------------------aboutus-----------------------------------------> */
  .about-header {
    height: 10% !important;
  }

  .our-vision {
    text-align: center;
  }

  .second-section {
    margin-top: 1273px !important;
    /* margin-top: 160vh !important; */
  }

  .logo-design-width {
    width: 81.78% !important;
  }
  .logo-illustration-width {
    width: 84.444% !important;
  }
  .logo-icons-width {
    width: 83.556% !important;
  }
  .logo-motion-width {
    width: 86.222% !important;
  }

  .postion-about {
    top: 92% !important;
  }

  .sec-third {
    margin-top: 56vh;
  }

  .first-circle-container {
    width: 120%;
    top: -2vh !important;
  }

  .first-circle {
    width: 55% !important;
    height: 23vh !important;
  }

  .first-circle-text {
    top: 7vh !important;
    font-size: 3.5rem !important;
  }

  .second-circle-text {
    top: 5.5vh !important;
  }

  /* <------------------------------------------------footer-----------------------------------------> */

  .fotter-colum {
    flex-direction: column;
  }

  .footer-form {
    padding: 20px 0px !important;
  }

  .footer-contact {
    align-items: start !important;
  }

  .course-page-section-height {
    height: 65vh;
  }
  /* .course-card-forpc{
    display: block;
  } */

  .color-row {
    display: none;
  }
}

@media only screen and (max-width: 380px) {
  .postion-about {
    top: 112% !important;
  }

  .course-page-section-height {
    height: 67vh;
  }

  .second-section {
    margin-top: 201vh !important;
  }

  .first-circle-text {
    top: 6vh !important;
    font-size: 3rem !important;
  }

  .second-circle-text {
    top: 7vh !important;
  }

  .sec-third {
    margin-top: 65vh;
  }

  .animation-studio-head {
    font-size: 2.4rem !important;
  }
}

@media (min-width:1050px) and (max-width:1350px) {
    #training-cards {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5rem; 
      justify-items: center;
    }
  }




   :root{
    --marquee-duration: 22s;   /* desktop speed (smaller = faster) */
    --marquee-gap: 2.5rem;     /* gap between items */
    --item-size: 124px;        /* logo box size (desktop) */
  }

  /* medium screens: slightly smaller items / slower */
  @media (max-width: 1024px){
    :root{
      --marquee-duration: 26s;
      --item-size: 100px;
    }
  }

  /* mobile: smaller + slower */
  @media (max-width: 640px){
    :root{
      --marquee-duration: 34s;
      --item-size: 80px;
    }
  }

  /* reduced motion preference */
  @media (prefers-reduced-motion: reduce){
    :root{ --marquee-duration: 0s; }
  }

  @keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* because of duplication */
  }

  /* track animation */
  .marquee-track {
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    animation: marquee-left var(--marquee-duration) linear infinite;
    will-change: transform;
  }


  .marquee-item {
    flex: 0 0 var(--item-size);
    width: var(--item-size);
    height: var(--item-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fb0201;
    background: #fff;
  }

  .marquee-item img{
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display:block;
  }

  /* hide duplicates from assistive tech */
  .marquee-item[aria-hidden="true"] img { pointer-events: none; }


/* About IntegWorkz or Amazdraw section or video */



  /* --------- Stack between 500px and 1200px (override only in this range) --------- */
@media (min-width: 500px) and (max-width: 1200px) {
  /* make the outer flex container stack vertically */
  .about-amazdraw {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* left block and right block become full width */
  .about-amazdraw-inner,
  .wide-width-manager {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;           /* removes me-[5.5%] */
  }

  /* make logos wrap nicely and stay visible */
  .about-amazdraw-inner .flex {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  .about-amazdraw-inner .flex img {
    width: 18vw !important;  /* two logos side-by-side or stacked */
    height: auto !important;
    object-fit: contain;
    gap: 20px !important;
  }

  /* make iframe responsive: maintain 16:9 and not fixed vh */
  .wide-width-manager,
  .wide-width-manager iframe,
  .home-video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 65vh;               /* optional — keeps it from growing too big */
  }

  /* tune inner text spacing for stacked layout */
  .about-amazdraw-inner h1 {
    margin-bottom: 0.5rem;
  }
  .about-amazdraw-inner p {
    margin-bottom: 0.75rem;
  }
}

/* Optional: small tweak so very small screens (<500px) keep behaving as before but safe */
@media (max-width: 499px) {
  .about-amazdraw-inner .flex img {
    max-width: 60% !important;
  }
}