/* div.p-6 */
@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

.col-lg-6:nth-child(2) .service-item {
  transform: rotate(var(--rotate-transform, 0rad));

  animation:
    kf_6027_136_rotate_0 1.022094s linear,
    kf_6027_136_translate_0 1.022094s linear;
}

@keyframes kf_6027_136_rotate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    --rotate-transform: 0rad;
  }

  100% {
    --rotate-transform: 1.857rad;
  }
}

@keyframes kf_6027_136_translate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    translate: 0px 0px;
  }

  100% {
    translate: -1178.938px 28.936px;
  }
}

/* div.p-6 */
@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

.col-lg-6:nth-child(3) .service-item {
  transform: rotate(var(--rotate-transform, 3.142rad));

  animation:
    kf_6027_157_rotate_0 1.022094s linear,
    kf_6027_157_translate_0 1.022094s linear;
}

@keyframes kf_6027_157_rotate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    --rotate-transform: 3.142rad;
  }

  100% {
    --rotate-transform: 1.362rad;
  }
}

@keyframes kf_6027_157_translate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    translate: 0px 0px;
  }

  100% {
    translate: -18.939px -1101.063px;
  }
}

/* div.p-6 */
@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

.col-lg-6:first-of-type .service-item {
  transform: rotate(var(--rotate-transform, 3.142rad));

  animation:
    kf_6027_150_rotate_0 1.022094s linear,
    kf_6027_150_translate_0 1.022094s linear;
}

@keyframes kf_6027_150_rotate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    --rotate-transform: 3.142rad;
  }

  100% {
    --rotate-transform: 1.571rad;
  }
}

@keyframes kf_6027_150_translate_0 {
  0% {
    animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993);
    translate: 0px 0px;
  }

  100% {
    translate: -28.938px -161.065px;
  }
}
/* ---------------------------    */
.col-lg-6:nth-child(2) .service-item{
    --rotate-transform: 1.857rad;

    transform:
        translate(-1178.938px, 28.936px)
        rotate(var(--rotate-transform));

    opacity: 0;

    transition:
        transform 1.022094s cubic-bezier(.22,1,.36,1),
        opacity .8s ease;
}

.animate-section.active .col-lg-6:nth-child(2) .service-item{
    --rotate-transform: 0rad;

    transform:
        translate(0,0)
        rotate(var(--rotate-transform));

    opacity: 1;
}

.col-lg-6:nth-child(3) .service-item{
    --rotate-transform: 1.362rad;
    transform: translate(-18.939px, -1101.063px) rotate(var(--rotate-transform));
    opacity: 0;
    transition: transform 1.022094s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}

.animate-section.active .col-lg-6:nth-child(3) .service-item{
    --rotate-transform: 0rad; /* بدل 3.142rad */

    transform: translate(0,0) rotate(var(--rotate-transform));
    opacity: 1;
}

.col-lg-6:first-of-type .service-item{
    --rotate-transform: .35rad; /* أو 0rad لو مش عايزة أي لف */

    transform:
        translate(-28.938px, -161.065px)
        rotate(var(--rotate-transform));

    opacity: 0;

    transition:
        transform 1.022094s cubic-bezier(.22,1,.36,1),
        opacity .8s ease;
}

.animate-section.active .col-lg-6:first-of-type .service-item{
    --rotate-transform: 0rad;

    transform:
        translate(0,0)
        rotate(var(--rotate-transform));

    opacity: 1;
}

@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

/* قبل وصول السكشن */
.col-lg-6:last-of-type .service-item {
    --rotate-transform: -1.898rad;

    transform:
        translate(-1038.937px, -1171.063px)
        rotate(var(--rotate-transform));

    opacity: 0;

    transition:
        transform 1.022094s cubic-bezier(.22,1,.36,1),
        opacity .8s ease;
}

/* عند وصول السكشن */
.animate-section.active .col-lg-6:last-of-type .service-item {
    --rotate-transform: 0rad;

    transform:
        translate(0, 0)
        rotate(var(--rotate-transform));

    opacity: 1;
}

@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

/* الحالة قبل ظهور السكشن */
.services-info .my-btn a{
    --rotate-transform: 0rad;   /* بدل 3.142rad */
    transform: rotate(var(--rotate-transform))
               translate(-758.939px, -641.063px);

    transition:
        transform 1.022094s cubic-bezier(.22,1,.36,1);
}

/* عند وصول السكشن */
.animate-section.active .services-info .my-btn a{
    --rotate-transform: 0rad;
    transform: rotate(0rad) translate(0,0);
}

@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

/* قبل وصول السكشن */
.services-info h5 {
    --rotate-transform: 0rad; /* بدل 3.142rad حتى لا يظهر مقلوب */

    transform: rotate(var(--rotate-transform))
               translate(-939.292px, -640.917px);

    transition: transform 1.022094s cubic-bezier(.22,1,.36,1);
}

/* عند وصول السكشن */
.animate-section.active .services-info h5 {
    --rotate-transform: 0rad;
    transform: rotate(0rad) translate(0, 0);
}
@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

/* قبل وصول السكشن */
.services-info .section-title h4 {
    --rotate-transform: 0rad; /* حتى لا يكون مقلوب */

    transform: rotate(var(--rotate-transform))
               translate(-728.191px, -397.058px);

    transition: transform 1.022094s cubic-bezier(.22,1,.36,1);
}

/* عند وصول السكشن */
.animate-section.active .services-info .section-title h4 {
    --rotate-transform: 0rad;
    transform: rotate(0rad) translate(0, 0);
}