/*responsive*/
    /* ===============================
   LARGE DESKTOP (1440px+)
================================ */
@media (min-width:1440px){

.vam-sec1-service-title{
  font-size:56px;
}

#canvas-container{
  width:1000px;
  height:1000px;
}

.vam-sec1-side{
  padding:0 80px;
}
 


}

/* ===============================
   LAPTOP (1200px - 1439px)
================================ */
@media (max-width:1439px){

.vam-sec1-service-title{
  font-size:46px;
}

#canvas-container{
  width:760px;
  height:760px;
}
    .sec2-index-grid{ gap:80px; }
    .sec2-index-card{ padding:48px 48px 48px 78px; }


}

/* ===============================
   TABLET LANDSCAPE (992px - 1199px)
================================ */
@media (max-width:1199px){

.vam-sec1-side{
  padding:0 30px;
}

.vam-sec1-service-title{
  font-size:38px;
}

.vam-sec1-service-desc{
  font-size:14px;
}

#canvas-container{
  width:620px;
  height:620px;
}
 .sec2-index-grid{ gap:70px; }
    .sec2-index-card{ padding:45px 45px 45px 70px; }

}
.sec2-index-section {
    padding: 120px 30px;
}

/* ===============================
   TABLET PORTRAIT (768px - 991px)
================================ */
@media (max-width:991px){

.vam-sec1-hero{
  flex-direction:column;
  
}
.vam-sec1-service-desc

.vam-sec1-slice-left,
.vam-sec1-slice-right{
  display:none;
}

.vam-sec1-side-left,
.vam-sec1-side-right{
  width:100%;
}

.vam-sec1-side{
  padding:60px 30px;
}

.vam-sec1-service-title{
  font-size:32px;
  text-align:center;
}

.vam-sec1-service-desc{
  text-align:center;
}

.vam-sec1-service-features{
  align-items:center;
}

.vam-sec1-text-side{
  text-align:center;
  margin:auto;
}

.vam-sec1-cube-side{
  height:480px;
}

#canvas-container{
  width:480px;
  height:480px;
}
    .sec2-index-grid{
        grid-template-columns:1fr;
        gap:70px;
    }
    .sec2-index-card{
        padding:52px 45px 52px 75px;
    }
.sec2-index-section {
    padding: 120px 30px;
}
   .sec2-index-icon{
        right:550px !important;
        width:95px;
        height:95px;
        font-size:36px;
    }

}

/* ===============================
   MOBILE LARGE (576px - 767px)
================================ */
@media (max-width:767px){

.vam-sec1-header{
  padding:12px 15px;
  flex-direction:column;
  gap:10px;
}

.vam-sec1-nav-links{
  gap:12px;
  padding:6px 12px;
}

.vam-sec1-service-title{
  font-size:26px;
}

.vam-sec1-service-desc{
  font-size:13px;
}

.vam-sec1-service-cta{
  height:46px;
  font-size:13px;
}

.vam-sec1-cube-side{
  height:380px;
}

#canvas-container{
  width:92vw;
  height:92vw;
  max-height:420px;
}
  .sec2-index-grid{
        gap:65px;
    }

    .sec2-index-card{
        padding-top:90px !important;   /* جای آیکون بالای کارت */
        padding-left:32px;
        padding-right:32px;
    }

    .sec2-index-icon{
        top:-42px;                     /* نیمه بیرون */
        left:50%;
        transform:translateX(-50%);
        right:auto !important;
        width:78px;
        height:78px;
        font-size:28px;
    }


 
}

/* ===============================
   MOBILE (400px - 575px)
================================ */
@media (max-width:575px){

.vam-sec1-service-title{
  font-size:22px;
}

.vam-sec1-service-desc{
  font-size:12px;
  line-height:1.8;
}

.vam-sec1-feature-item{
  font-size:12px;
}

.vam-sec1-service-cta{
  width:100%;
  justify-content:center;
}

.vam-sec1-cube-side{
  height:340px;
}
.sec2-index-card{
        padding-top:80px !important;
        padding-left:28px;
        padding-right:28px;
    }

    .sec2-index-icon{
        top:-36px;
        width:68px;
        height:68px;
        font-size:24px;
    }

    .sec2-index-header h2{ font-size:28px; }
    .sec2-index-header p{ font-size:14px; }
   

}

/* ===============================
   SMALL MOBILE (<400px)
================================ */
@media (max-width:399px){

.vam-sec1-service-title{
  font-size:19px;
}

.vam-sec1-service-desc{
  font-size:11px;
}

.vam-sec1-side{
  padding:40px 15px;
}

.vam-sec1-cube-side{
  height:300px;
}
.sec2-index-card{
        padding-top:70px !important;
        padding-left:22px;
        padding-right:22px;
        border-radius:20px;
    }

    .sec2-index-icon{
        top:-32px;
        width:58px;
        height:58px;
        font-size:20px;
    }

    .sec2-index-header h2{ font-size:24px; }
    .sec2-index-header p{ font-size:13px; }


}


    @media (max-width:1100px){
      .hero{ flex-direction:column;  background-color: #c6f1ff; }
      .slice-left, .slice-right{ display:none; }
      .side{ width:100%; padding:10px 20px; }
      .side-left{ order:1; width:100%; }
      .side-right{ order:2; width:100%; }
      .cube-side{ height:460px; min-height:460px; }
      #canvas-container{ width:92vw; height:92vw; max-height:70vh; }
      .service-title{ 
        font-size:34px;
          display: flex;
          justify-content: center;
          gap: 15px;
          color: #0368e0;
          }

          .service-title span{
            color:#000927 ;
          }
      .header{ padding:12px 20px; }
       .sec2-index-grid{
        gap:100px;
    }
    .sec2-index-card{
        padding:60px 70px 60px 110px;
    }
    .sec2-index-header h2{
        font-size:36px;
    }
    .sec2-index-header p{
        font-size:17px;
    }
    .sec2-index-icon{
        right:-30px;
        width:95px;
        height:95px;
        font-size:36px;
    }
       .sec2-index-grid{ gap:120px; }
    .sec2-index-card{ padding:60px 44px 44px 68px; }
       .contact-banner {
        padding: 130px 60px 56px;
        gap: 72px;
    }
    .contact-banner {
    gap: 60px;
    padding: 140px 24px 60px;
}

.contact-banner__left {
    max-width: 460px;
}

.contact-banner__right h1 {
    font-size: 29px;
}

.mehvae-event-main-title {
    font-size: 2.6rem;
}


   .service-cta{
    color:black;
        border:2px solid black;
   }
    }



/* ریسپانسیو */
@media (max-width: 1000px) {
    .sec3-index-conditions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .sec3-index-steps-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .sec3-index-steps-wrapper::before {
        display: none;
    }
    
    .sec3-index-step {
        flex: 0 0 calc(33.33% - 30px);
        min-width: 100px;
    }
     .contact-banner {
        padding: 120px 20px 60px 20px;
        gap: 40px;
    }

    .contact-banner__left {
        max-width: 440px;
    }

    .contact-banner__right h1 {
        font-size: 28px;
    }
}

@media (max-width: 700px) {
    .sec3-index-conditions-grid {
        grid-template-columns: 1fr;
    }
    
    .sec3-index-step {
        flex: 0 0 calc(50% - 30px);
    }
}

@media (max-width: 480px) {
    .sec3-index-step {
        flex: 0 0 100%;
    }
}

.sec3-index-condition-card.sec3-visible {
    animation: cardPopIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.sec3-index-step.sec3-visible {
    animation: stepFlipIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stepFlipIn {
    0% {
        opacity: 0;
        transform: translateY(40px) rotateX(20deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.sec3-index-step.sec3-visible .sec3-index-circle {
    animation: circleBounce 0.4s ease-out 0.15s both;
}

@keyframes circleBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}
/* ریسپانسیو موبایل - حالت عمودی */
@media (max-width: 768px) {
    .spacer-top {
        height: 40vh;
        font-size: 0.9rem;
        text-align: center;
        padding: 0 1rem;
    }

    .check-section {
        padding: 0.5rem;
       
    }
    .feature-item{
        color: rgb(64, 64, 64) !important;
        font-size: 16px;
        text-align: justify;
    }
    .service-desc{
        font-size: 16px;
       text-align: justify;
    }

    .check-container {
        flex-direction: column;
        height: auto !important;
        margin: 20px 0;
        border-radius: 24px;
        overflow: visible;
    }

    .check-side {
        width: 100%;
        min-height: 280px;
    }

  
    .right-side {
display: none;
    }
    .left-side {
        order: 2; 
        margin-top: -2px;
        border-radius: 0 0 20px 20px;
        overflow: hidden;
        will-change: transform;
        transform-origin: top center;
    }
    .service-cta{
        width: 100%;
    }

    .left-side img
     {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
 
    .spacer-bottom {
        height: 80vh;
        font-size: 0.9rem;
        text-align: center;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .check-side {
        min-height: 220px;
    }
    .spacer-top {
        height: 30vh;
    }
    .service-features{
    display: flex;
    justify-content: center;
        color: rgb(43, 43, 43) !important;
    font-size: 14px;
}
.service-desc{
    display: flex;
    justify-content: center;
}
}

/* ------------------- TABLET ------------------- */
@media (max-width: 1024px) {
    .footer-content {
        justify-content: center;
        gap: 25px;
    }
   .service-cta{
        width: 100%;
    }
       .feature-item{
        color: black !important;
    }
      .service-desc{
        
        font-size: 16px;
       text-align: justify;
    }
.service-features{
    display: flex;
    justify-content: center;
     color: rgb(64, 64, 64) !important;
    font-size: 14px;
}
.service-desc{
    display: flex;
    justify-content: center;
    color: black !important;
}
    .footer-column {
        flex: 1 1 calc(50% - 25px);
        max-width: calc(50% - 25px);
        text-align: center;
    }

    .footer-column h3::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .social-icons {
        justify-content: center;
    }
}

/* ------------------- MOBILE ------------------- */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer-column {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .footer-column h3::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer-links ul li a,
    .footer-address p {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }
      .contact-banner {
        padding: 30px 16px 40px 16px;
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .contact-banner__right h1 {
        font-size: 22px;
    }

    .contact-banner__right span {
        font-size: 16px;
    }

    .contact-banner__left {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.9;
    }
}