/* @font-face {
  font-family: 'ITCAvantGardeStd-bold';
  src: url('/assets/fonts/ITCAvantGardeStd-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ITCAvantGardeStd-Demi';
  src:url('/assets/fonts/ITCAvantGardeStd-Demi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ITCAvantGardeStd-Md';
  src:url('/assets/fonts/ITCAvantGardeStd-Md.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */


/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /* gradient */

  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsla(240, 1%, 18%, 0.251) 0%,
    hsla(240, 2%, 11%, 0) 100%
  ), hsl(240, 2%, 13%);

  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(240, 1%, 25%) 3%,
    hsl(0, 0%, 19%) 97%
  );

    /** Gradient colors */
    --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    --gradient-2: linear-gradient(90deg,#ed184f,#e117f1 39.06%,#0084ff 77.6%,#00c6e9);
    --gradient-3: linear-gradient(to right, #F27121, #E94057, #8A2387, #00c6e9);

    /**
   * colors
   */
   --beige: hsl(33, 11% , 80%);
   --satin-sheen-gold: hsl(49, 54%, 43%);
   --vegas-gold: hsl(48, 40%, 51%);
   --rich-black-fogra-29_50: hsl(210, 26%, 11%, 0.5);
   --rich-black-fogra-29-1: hsl(210, 26%, 11%);
   --rich-black-fogra-29-2: hsl(210, 50%, 4%);
   --silver-metallic: hsl(212, 9%, 67%);
   --coquelicot_20: hsla(12, 98%, 52%, 0.2);
   --coquelicot_10: hsla(12, 98%, 52%, 0.1);
   --sonic-silver: hsl(0, 0%, 47%);
   --cadet-gray: hsl(214, 15%, 62%);
   --light-gray: hsl(0, 0%, 80%);
   --coquelicot: hsl(12, 98%, 52%);
   --gainsboro: hsl(0, 0%, 88%);
   --white_20: hsl(0, 0%, 100%, 0.2);
   --white_10: hsl(0, 0%, 100%, 0.1);
   --black_10: hsl(0, 0%, 0%, 0.1);
   --white: hsl(0, 0%, 100%);
   --onyx: hsl(240, 1%, 17%);
   --raw-seinna: hsl(24, 77%, 54%);
   --eerie-black-1: hsl(0, 0%, 13%);
   --text-wild-blue-yonder: hsla(216, 33%, 68%, 1);
   --bg-prussian-blue: hsla(216, 33%, 20%, 1);
   --text-carolina-blue: hsla(199, 89%, 49%, 1);
   --border-prussian-blue: hsla(216, 33%, 20%, 1);
   --bg-carolina-blue: hsla(199, 89%, 49%, 1);
   --bg-oxford-blue: hsla(222, 44%, 13%, 1);
   --bg-secondary: hsl(0, 0%, 19%);



    /**
   * typography
   */
  /* font family */
    --fontFamily-recoleta: 'Recoleta';
   --ff-poppins: 'Poppins', sans-serif;

   --fs-1: 3.8rem;
   --fs-2: 3rem;
   --fs-3: 2.5rem;
   --fs-4: 2rem;
   --fs-5: 1.8rem;
   --fs-6: 1.5rem;
   --fs-7: 1.3rem;
   --fs-8: 0.875rem;

   --fw-900: 900;
   --fw-800: 800;
   --fw-700: 700;
   --fw-600: 600;
   --fw-500: 500;

     /**
   * spacing
   */

   --section-padding: 35px;

     /**
   * shadow
   */

  --shadow-1: 0 0 20px var(--black_10);
  --shadow-2: 0px 10px 24px var(--coquelicot_20);
  --shadow-3: 10px 10px 40px var(--card-shadow);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
  

    /**
   * border radius
   */
    --radius-20: 20px;
   --radius-15: 15px;
   --radius-10: 10px;
   --radius-8: 8px;
   --radius-5: 5px;
   --radius-pill: 200px;
   --radius-circle: 50%;

     /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}

@media (prefers-reduced-motion: no-preference) {

  :root {

    /**
     * TRANSITION
     */

    /* duration */
    --motion-duration-short-1: 100ms;

    /* easing */
    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  }

}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a {
  text-decoration: none;
  color: inherit;
}

a,
img,
span,
input,
button,
strong,
ion-icon { display: block; }

img { height: auto; }

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
  font-family: var(--ff-poppins);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: #0d0d0d;
  color: var(--white);
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

:focus-visible { outline-offset: 4px; }

::-webkit-scrollbar { width: 5px; }

::-webkit-scrollbar-track { background-color: var(--light-gray); }

::-webkit-scrollbar-thumb { background-color: var(--coquelicot); }

::-webkit-scrollbar-thumb:hover { background-color: var(--rich-black-fogra-29-1); }

/* .choose-card {
  list-style: none;
} */

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

.section { padding-block: var(--section-padding); }

.bg-dark {
  background-color: var(--rich-black-fogra-29-1);
  color: var(--silver-metallic);
}

.has-bg-image {
  background-repeat: no-repeat;
  background-position: top left;
}

.has-before,
.has-after {
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after {
  content: "";
  position: absolute;
}

.h1,
.h2,
.h3 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.25;
}

.h1 {
  color: var(--beige);
  font-size: var(--fs-2);
  font-weight: 700;
}

.h2,
.h3 {
  color: var(--beige);
  font-weight: 700;
}

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-4); }

.btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn {
  max-width: max-content;
  font-size: var(--fs-7);
  text-transform: uppercase;
  font-weight: var(--fw-500);
  padding: 13px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  transition: var(--transition-1);
}

.btn-primary {
  border: 1px solid var(--coquelicot);
  color: var(--white);
}

.btn-primary:is(:hover, :focus) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);;
  color: var(--white);
  border: none;
}

.btn-secondary {
  background-color: var(--white);
  color: var(--coquelicot);
}

.btn-secondary:is(:hover, :focus) { background-color: var(--rich-black-fogra-29-1); }



.w-100 { width: 100%; }



/*-----#VIDEO LINK-----*/


.btn-link {
  --color: var(--coquelicot);
  font-family: var(--ff-poppins);
  color: var(--color);
  font-size: var(--fs-5);
  font-weight: var(--fw-800);
  text-transform: uppercase;
  max-width: max-content;
  transition: var(--transition-1);
}

.btn-link::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color);
  transition: var(--transition-1);
}

.btn-link:is(:hover, :focus) { --color: var(--raw-seinna); }




/*-----#ABOUT-----*/

.about .section-subtitle {
  font-family: 'Poppins';
  font-weight: 600;
  letter-spacing: 2px;
  font-size: var(--fs-6);
  color: var(--coquelicot);
}


/*-----#SERVICE-----*/

.grid-list {
  display: grid;
  gap: 30px;
}


/*-----#INDUSTRIES-----*/


.img-holder {
  aspect-ratio: var(--width) / var(--height);
  /* background-color: var(--light-gray); */
  overflow: hidden;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-scrollbar {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  padding-block-end: 30px;
  scroll-snap-type: inline mandatory;
}

.scrollbar-item {
  min-width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar { height: 10px; }

.has-scrollbar::-webkit-scrollbar-track,
.has-scrollbar::-webkit-scrollbar-thumb { border-radius: 50px; }

.has-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--coquelicot); }

.has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 25px); }


/*-----#TESTIMONIALS-----*/

.hass-scrollbar::-webkit-scrollbar {
  width: 5px; /* for vertical scrollbar */
  height: 5px; /* for horizontal scrollbar */
}

.hass-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.hass-scrollbar::-webkit-scrollbar-thumb {
  background: var(--coquelicot);
  border-radius: 5px;
}

.hass-scrollbar::-webkit-scrollbar-button { width: 20px; }

.content-card {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

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


/*-----#ASIDE-----*/

.card {
  background-color: var(--bg-oxford-blue);
  border: 1px solid var(--border-prussian-blue);
}

.blog-warpper {
  display: flex;
  gap: 3px;
  align-items: center;
}

/*-----#MOBILE VIEW PORTFOLIO-----*/ 

.mobiletitle-wrapper .section-title { text-align: center; }


/*-----#MOBILE APP PAGE-----*/

/*-----#OTHER SERVICE LISTING-----*/
.grid-lister {
  display: grid;
  gap: 40px 28px;
}

/*-----#MOBILE APP DEVELOPMENT SERVICES-----*/

.acard {
  background-color: #202020;
  border: 1px solid #3e3e3e;
}


.imgholder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--bg-prussian-blue);
  overflow: hidden;
}

.appimg-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*-----#ADVANTAGE APP DEVELOPMENT-----*/

.grid-prolist {
  display: grid;
  gap: 20px;
}

.bg-gray { 
  background-color: #202020;
  border: 1px solid #3e3e3e;
  border-radius: var(--radius-10); }

  /*-----#WHY CHOOSE ORISMEDIA-----*/

  .tooltip {
    position: absolute;
    top: -40px;
    background: var(--raw-seinna);
    width: 200px;
    height: 200px;
    /* min-width: max-content; */
    color: var(--white);
    font-size: 14px;
    font-weight: var(--fw-400);
    text-align: center;
    padding: 5px 5px;
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-1);
    z-index: 1;
  }







/*--------------------------------------------------------------------------------*\
  #HOME
\*--------------------------------------------------------------------------------*/



/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
  background-color: #0d0d0d;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 10px;
  z-index: 4;
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container #logo {
  width: 120px;
  cursor: pointer;
}

.nav-open-btn {
  background-color: var(--coquelicot);
  padding: 20px 15px;
  border-radius: var(--radius-8);
}

.nav-open-btn .line {
  background-color: var(--white);
  width: 30px;
  height: 3px;
}

.nav-open-btn .line:not(:last-child) { margin-block-end: 6px; }

.nav-open-btn .line:nth-child(2) {
  width: 25px;
  margin-inline-start: auto;
}

.navbar {
  background-color: var(--coquelicot);
  color: var(--white);
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  visibility: hidden;
  transition: 0.25s var(--cubic-in);
}

.navbar.active {
  visibility: visible;
  transform: translateY(-100%);
  transition: 0.5s var(--cubic-out);
}

.nav-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: var(--rich-black-fogra-29-1);
  color: var(--white);
  font-size: 40px;
  padding: 10px;
  border-radius: var(--radius-8);
}

.navbar-link {
  font-family: var(--ff-roboto);
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  padding-block: 10px;
  margin-block-end: 20px;
  transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus, .active) { color: var(--rich-black-fogra-29-1); }


/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  place-content: center;
  padding-block-start: calc(var(--section-padding) + 85px);
  z-index: 1;
}

.text-box a {
  margin-top: 30px;
  display: inline-block;
  border-radius: 6px;
  border: 1px solid var(--coquelicot);
  color: #fff724;
  padding: 10px 30px;
  text-decoration: none;
}


.hero-content {
  background-color: var(--black_60);
  color: var(--white);
  text-align: center;
  padding: 30px;
}

.hero-title {
  font-family: 'Poppins';
  color: var(--beige);
  /* letter-spacing: 1px; */
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  line-height: 1.25;
}



/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .wrapper { margin-block-start: 30px; }

.about-us {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 30px;
}

.about .section-text { margin-block-start: 30px; }




/*-----------------------------------*\
  #VIDEO
\*-----------------------------------*/

.video {
  padding-block: 0;

}

.video-card {
  background-size: cover;
  background-position: center;
  height: 600px;
  width: 100%;
  border-radius: var(--radius-15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.btn-link {
  display: flex;
  align-items: center;
}


/*-----------------------------------*\
  #SERVICE
\*-----------------------------------*/


.service-card {
  background-color: #202020;
  border-radius: 15px;
  padding: 35px;
  transition: 0.25s ease;
}

.service-card .card-head {
  font-family: 'Poppins';
  color: var(--text-color);
  font-size: var(--fs-3);
  text-align: center;
}

.service-card .card-title {
  font-family: 'Poppins';
  color: var(--text-color);
  font-size: var(--fs-7);
  text-align: center;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.service-card:is(:hover, :focus-within) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);
  --text-color: var(--white);
}


/*-----------------------------------*\
  #OUR SERVICES
\*-----------------------------------*/

.faq .container {
  display: grid;
  gap: 20px;
}

.faq .title-wrapper {
  background-color: #272727;
  border-radius: var(--radius-5);
  padding: 30px 25px;
  box-shadow: var(--shadow-1);
}

.faq .section-title {
  font-family: 'Poppins';
  font-weight: 600;
  font-size: var(--fs-5);
  margin-block-end: 30px;
}

.faq-card {
  background-color: #272727;
  border-radius: var(--radius-5);
  overflow: hidden;
  margin-block-end: 20px;

}

.faq-card .card-action {
  --action-bg: #272727;
  --color: var(--white);

  background-color: var(--action-bg);
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  gap: 20px;
  transition: var(--transition-1);
}

.faq-card .card-action:is(:hover, :focus, .active) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);
  --color: var(--white);
}

  .faq-card .card-title {
    color: var(--color);
    font-size: var(--fs-4);
    transition: var(--transition-1);
  }

  .faq-card ion-icon {
    color: var(--color);
    font-size: 15px;
    transition: var(--transition-1);
    --ionicon-stroke-width: 60px;
  }

  .faq-card .card-action.active .open,
  .faq-card .card-action .close { display: none; }

  .faq-card .card-action .open,
  .faq-card .card-action.active .close { display: block; }

  .faq-card .card-content {
    font-size: var(--fs-5);
    padding-inline: 25px;
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-2);
  }

  .faq-card .card-content p { margin-block: 15px; }

  .faq-card .card-action.active + .card-content { max-height: 500px; }



/*-----------------------------------*\
 * #OUR WORK
\*-----------------------------------*/

.gallery .section-subtitle {
  font-family: 'Poppins';
  font-weight: normal;
  letter-spacing: 2px;
  font-size: var(--fs-6);
  color: var(--coquelicot);
}

.gallery .gallery-list { margin-block-start: 70px;

}

.gallery .gallery-list { margin-block-end: 50px;

}

/* .gallery { padding-block: var(--section-padding); } */

.gallery-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gallery-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-15);
  overflow: hidden;
}

.gallery-item:nth-child(3) { grid-area: 1 / 2 / 3 / 3; }

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item .view-portfolio {
  margin-block-start: 45px;
}


/*-----------------------------------*\
 * #CTA
\*-----------------------------------*/

.cta .container { margin-block-start: 70px; }

.cta .container { margin-block-end: 70px; }

.cta-card {
  border: 1px solid var(--coquelicot);
  padding: 50px 36px;
  border-radius: 30px;
  text-align: center;
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  color: var(--white);
  font-size: var(--fs-3);
  line-height: 1.3;
  margin-bottom: 20px;
}

.cta-text {
  color: var(--white);
  font-size: var(--fs-5);
  font-weight: 400;
  margin-bottom: 50px;
}

/*-----------------------------------*\
  #INDUSTRIES
\*-----------------------------------*/

.class .container { margin-block-start: 100px; }

.class .container { margin-block-end: 70px; }


.class .section-subtitle {
  font-family: 'Poppins';
  font-weight: normal;
  letter-spacing: 2px;
  font-size: var(--fs-6);
  color: var(--coquelicot);
}

.class .section-title {
  color: var(--beige);
  font-size: var(--fs-2);
}

.class .section-title {
  margin-block-start: 50px;
}

.class .section-title {
  margin-block-end: 50px;
}

.class-card {
  background-color: #272727;
  border-radius: var(--radius-10);
  height: 100%;
  overflow: hidden;
}

.class-card .card-content { padding: 24px; }

.class-card .card-title {
  margin-block-end: 10px;
}

.class-card .card-title {
  font-family: 'Poppins';
  font-weight: 600;
}

.card-content .card-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-wrap .left-icon {
  color: var(--sonic-silver);
  font-size: var(--fs-5);
  padding-right: 5px;
}

.class-card .card-text {
  color: var(--white);
  font-size: var(--fs-6);
  margin-block: 10px 10px;
}

.class-card:is(:hover, :focus-within) {
  border: 1px solid var(--coquelicot);
  --text-color: var(--white);
}

/*-----------------------------------*\
  #TESTIMONIALS
\*-----------------------------------*/

.testimonials .container { margin-block-start: 70px; }

.testimonials .container { margin-block-end: 70px; }

.testimonials .section-subtitle { margin-block-end: 40px; }

.testimonials .section-title { margin-block-end: 50px; }

.testimonials .section-subtitle {
  font-family: 'Poppins';
  font-weight: normal;
  letter-spacing: 2px;
  font-size: var(--fs-6);
  color: var(--coquelicot);
}

.testimonials .section-title {
  color: var(--beige);
  font-size: var(--fs-3);
}

.testimonials { margin-bottom: 30px; }

.testimonials .wrapper {
  display: flex;
  /* width: 100%; */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* gap: 50px; */
  margin-block-end: 30px;
}

.testi {
  flex-basis: 70%;
}

.view {
  flex-basis: 40%;
}

.testimonials-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px 15px;
  padding-bottom: 35px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.testimonials-item {
  min-width: 100%;
  scroll-snap-align: center;
}

.testimonials-avatar-box {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(15px, -25px);
  background: var(--bg-gradient-onyx);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}

.testimonials-item-title { margin-bottom: 7px; }

.testimonials-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * #testimonials-modal
 */

 .modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
}

.modal-container::-webkit-scrollbar { display: none; }

.modal-container.active {
  pointer-events: all;
  visibility: visible;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: hsl(0, 0%, 5%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-1);
}

.overlay.active {
  opacity: 0.8;
  visibility: visible;
  pointer-events: all;
}

.testimonials-modal {
  background: var(--rich-black-fogra-29-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px;
  border: 1px solid var(--black_10);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.2);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
}

.modal-container.active .testimonials-modal {
  transform: scale(1);
  opacity: 1;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--onyx);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  font-size: 18px;
  opacity: 0.7;
}

.modal-close-btn:hover,
.modal-close-btn:focus { opacity: 1; }

.modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }

.modal-avatar-box {
  background: var(--bg-gradient-onyx);
  width: max-content;
  border-radius: 14px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-5);
}

.modal-img-wrapper > img { display: none; }

.modal-title { margin-bottom: 4px; }

.modal-content time {
  font-size: var(--fs-6);
  color: var(--light-gray-70);
  font-weight: var(--fw-300);
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/*-----------------------------------*\
  #LOGO CAROUSEL
\*-----------------------------------*/

.carousel {
  display: grid;
    height: 20vh;
    place-content: center;
}

.scroller {
  max-width: 1100px;
  padding-bottom: 50px;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}




/*-----------------------------------*\
  #CONTACT US
\*-----------------------------------*/

.contact-us {
  margin-block-start: 50px;
  margin-block-end: 20px;
  width: 100%;
  padding: 0 10px;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-us .wrapper{
  max-width: 1000px;
  margin-block-end: 40px;
  width: 100%;
  background-color: #272727;
  border: 1px solid var(--coquelicot);
  border-radius: 30px;
  padding: 30px 60px 40px 40px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.05);
}

.contact-us .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-us .wrapper .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.wrapper  .left-side::before {
  content: "";
  position: absolute;
  height: 90%;
  width: 1px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--coquelicot);
}

.wrapper .left-side .details {
  margin: 14px;
  text-align: center;
}

.wrapper .left-side .details .lefticon {
  font-size: 20px;
  font-weight: 500;
  color: var(--cadet-gray);
  margin-bottom: 2px;
}

.wrapper .left-side .details .topic {
  font-size: 14px;
  font-weight: 300;
  color: var(--white-20);
}

.wrapper .left-side .details .text-one {
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
}

   /*---------- RIGHT SIDE------- */

   .contact-us .wrapper .right-side {
    width: 75%;
    margin-left: 75px;
  }

  .wrapper .right-side .topic-text {
    font-family: var(--ff-poppins);
    font-weight: 500;
    color: var(--white);
    font-size: var(--fs-4);
    color: var(--white);
  }

  .wrapper .right-side p {
    font-size: 16px;
    font-weight: 400;
    color: var(--white-2);
  }

  .right-side .form {
    width: 100%;
    margin-top: 20px;
  }

  .form .input-box {
    width: 100%;
    margin-top: 10px;
  }

  .form .input-box input {
    background-color: #0d0d0d;
  }

  .form :where(.input-box input, .select-box) {
    position: relative;
    height: 50px;
    width: 100%;
    outline: none;
    font-size: 14px;
    color: #bab9b9;
    background-color: #0d0d0d;
    margin-top: 8px;
    border: 1px solid hsl(0, 0%, 100%, 0.2);
    border-radius: 6px;
    padding: 0 15px;
  }

  .form .column {
    display: flex;
    column-gap: 15px;
  }

  .address :where(input, .select-box) {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .select-box select {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background: none;
    color: #bab9b9;
    font-size: 14px;
    font-weight: 400;
  }

  .form .message{
    position: relative;
  }

  .form .message textarea {
    min-height: 130px;
    max-height: 230px;
    max-width: 100%;
    min-width: 100%;
    padding: 15px 20px 0 48px;
  }

  .form .message textarea {
    font-size: 15px;
    font-weight: 400;
    color: #bab9b9;
    background-color: #0d0d0d;
    margin-top: 8px;
    border: 1px solid hsl(0, 0%, 100%, 0.2);
    border-radius: 6px;
    padding: 5px 15px;
  }

  .form .message textarea::-webkit-scrollbar{
    width: 0px;
  }

     /*---------- SEND NOW BUTTON------- */

     form .button-area {
      margin: 25px 0;
      display: flex;
      align-items: center;
    }

    .button-area button {
      color: var(--white);
      border: none;
      outline: none;
      font-size: 18px;
      cursor: pointer;
      border-radius: 25px;
      border: 1px solid var(--coquelicot);
      padding: 13px 25px;
      background: #0d0d0d;
      transition: background 0.3s ease;
    }

    .button-area button:hover{
      background: var(--gradient-2);
    }

    .button-area span{
      font-size: 15px;
      margin-left: 20px;
      display: none;
    }





/*-----------------------------------------------------------------------------*\
  #FOOTER
\*------------------------------------------------------------------------------*/

.footer { font-size: var(--fs-6); }

.footer-top .container {
  display: grid;
  gap: 50px;
}

.footer #logo {
  margin-bottom: 20px;
}

.footer-brand-text { margin-block: 25px; }

.footer-top .wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.footer-brand-list li:not(:last-child) { margin-block-end: 15px; }

.footer-brand-title,
.footer-list-title {
  color: var(--white);
  font-family: var(--ff-roboto);
  font-weight: 400;
}

.footer-list-title {
  font-family: var(--ff-roboto);
  font-size: var(--fs-4);
  font-weight: 400;
  margin-block-end: 28px;
}

.footer-list-title::before {
  bottom: 0;
  width: 70px;
  height: 1px;
  background-color: var(--coquelicot);
}

.footer-list > li:not(:first-child) { margin-block-start: 12px; }

.footer-link { transition: var(--transition-1); }

.footer-link:not(.address):is(:hover, :focus) { color: var(--coquelicot); }

.footer-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 19px;
}

.footer-list-item .icon {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);
  color: var(--white);
  font-size: 19px;
  padding: 8px;
  border-radius: 50px;
}

.footer-list-item #icon-partner {
  width: 30px;
}

.social-list {
  display: flex;
  gap: 15px;
}

.social-link {
  background-color: var(--white_20);
  color: var(--white);
  padding: 13px;
  border-radius: 50%;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus) { background: linear-gradient(to right, #F27121, #E94057, #8A2387); }

.footer-bottom {
  background-color: var(--rich-black-fogra-29-2);
  color: var(--white);
  text-align: center;
  padding-block: 15px;
}

.copyright-link {
  display: inline-block;
  color: var(--coquelicot);
}

.footer-bottom-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-block-start: 10px;
}

.footer-bottom-link {
  padding-inline-start: 20px;
  transition: var(--transition-1);
}

.footer-bottom-link::before {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 10px;
  height: 10px;
  background-color: var(--coquelicot);
  border-radius: 50%;
}

.footer-bottom-link:is(:hover, :focus) { color: var(--coquelicot); }




/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/

.back-top-btn {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background-color: var(--coquelicot);
  color: var(--white);
  font-size: 20px;
  padding: 11px;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition-1);
  z-index: 4;
}

.back-top-btn.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(-10px);
}




/*-------------------------------------------------------------------------------------------*\
  #SERVICES PAGE
\*-------------------------------------------------------------------------------------------*/

.portfolio .section-title { margin-block-start: 80px; }

.portfolio .section-title { margin-block-end: 80px; }

.portfolio .section-title {
  font-size: var(--fs-1);
  color: #0d0d0d;
  -webkit-text-stroke: 1px var(--beige);
}

.portfolio .section-subtitle {
  font-family: var(--ff-poppins);
  font-weight: normal;
  color: var(--white);
  font-size: var(--fs-4);
}

.portfolio-list {
  display: grid;
  gap: 60px;
}

.portfolio-card {
  background-repeat: no-repeat;
  background-color: #222536;
  background-size: cover;
  background-position: center;
  padding: 90px 20px;
  border-radius: var(--radius-20);
  font-family: 'Poppins';
  font-weight: normal;
  color: var(--white);
  /* transition: var(--transition-2); */
}

.service-logo .icon-wrapper  {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 19px;
}
.icon-wrapper .service-icon {
  color: var(--sonic-silver);
  font-size: var(--fs-4);
  padding-right: 5px;
  margin-block-end: 10px;
}

.service-logo .icon-text {
  color: var(--white);
  font-size: var(--fs-5);
  /* margin-block: 10px 10px; */
}

.icon-wrapper #service-icon {
  width: 35px;
  /* padding-right: 5px; */
  margin-block-end: 10px;
}

.portfolio-card .card-subtitle {
  color: var(--coquelicot);
  margin-block-end: 5px;
}

.portfolio-card .card-title {
  max-width: 30ch;
  margin-block-end: 20px;
}

.portfolio-card .card-title {
  font-family: var(--ff-poppins);
  font-weight: 500;
  color: var(--white);
  font-size: var(--fs-3);
}

.portfolio-card .btn-link {
  margin-block-start: 20px;
}

.portfolio-card .btn-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-6);
  text-transform: uppercase;
}

.portfolio-card .btn-link ion-icon {
  color: var(--white);
  font-size: var(--fs-6);
}

/**
 * TAB for MOBILE APP DEVELOPMENT CARD
 */

 .tab-content:not(.active) { display: none; }

 .primary-tabs {
  margin-block-start: 15px;
  margin-inline: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  border-block-end: 1px solid hsl(264, 7%, 29%);
}

.tab-btn {
  height: 48px;
  width: 100%;
  display: grid;
  place-content: center;
  color: hsl(270, 11%, 79%);
}

.tab-btn.active {
  color: hsl(258, 100%, 87%);
}

.tab-text {
  position: relative;
  height: 48px;
  line-height: 48px;
}

.tab-text {
  font-family: var(--ff-poppins);
}

.tab-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--coquelicot);
  opacity: 0;
}

.tab-btn.active .tab-text::after { opacity: 1; }



/*-----------------------------------*\
  #PROJECT
\*-----------------------------------*/

.tab-content {
  padding-top: 10px;
  padding-bottom: 10px;
}

.resume-top-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.resume-top-item {
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 8px;
}

.resume-top-item {
  font-family: var(--ff-poppins);
}

.resume-top-item:is(:hover, :focus-within) {
  border: 1px solid var(--coquelicot);
}

.resume-top-item .icon { width: 40px; }

/* .resume-top-item .label-medium {
  font-size: var(--fs-6);
} */

/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.resume-bottom-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.resume-bottom-item {
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 8px;
}

.resume-bottom-item {
  font-family: var(--ff-poppins);
}

.resume-bottom-item:is(:hover, :focus-within) {
  border: 1px solid var(--coquelicot);
}

.resume-bottom-item .icon { width: 40px; }



/**
 * TAB for WEB DEVELOPMENT CARD
 */

 .tab-cont:not(.active) { display: none; }

 .prime-tabs {
  margin-block-start: 15px;
  margin-inline: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  border-block-end: 1px solid hsl(264, 7%, 29%);
}

.tabb-butn {
  height: 48px;
  width: 100%;
  display: grid;
  place-content: center;
  color: hsl(270, 11%, 79%);
}

.tabb-butn.active {
  color: hsl(258, 100%, 87%);
}

.tab-copy {
  position: relative;
  height: 48px;
  line-height: 48px;
}

.tab-copy {
  font-family: var(--ff-poppins);
}

.tab-copy::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--coquelicot);
  opacity: 0;
}

.tabb-butn.active .tab-copy::after { opacity: 1; }




/*-----------------------------------*\
  #PROJECT
\*-----------------------------------*/

.tab-cont {
  padding-top: 10px;
  padding-bottom: 10px;
}

.web-top-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.web-top-item {
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 8px;
}

.web-top-item {
  font-family: var(--ff-poppins);
}

.web-top-item:is(:hover, :focus-within) {
  border: 1px solid var(--coquelicot);
}

.web-top-item .icon { width: 40px; 
}


.icon-text {
  font-family: var(--ff-poppins);
}


/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.web-bottom-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.web-bottom-item {
  background-color: #0d0d0d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border-radius: 8px;
}

.web-bottom-item {
  font-family: var(--ff-poppins);
}

.web-bottom-item:is(:hover, :focus-within) {
  border: 1px solid var(--coquelicot);
}

.web-bottom-item .icon { width: 40px; }


/*-----------------------------------*\
  #CTA SERVICE
\*-----------------------------------*/

.service-cta {
  margin-block-start: 30px;
  margin-block-end: 30px;
}
.service-cta { border-block: 1px solid var(--white_20); }

.service-cta .section-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  color: var(--white);
  font-size: var(--fs-4);
}

.service-cta .section-title::before {
  content: "";
  display: block;
  background-color: var(--light-gray);
  width: 40px;
  height: 20px;
  border-radius: 20px 20px 0 0;
  margin-inline: auto;
  margin-block-end: 15px;
}

.service-cta .btn {
  margin-inline: auto;
  margin-block-start: 30px;
}


/*-----------------------------------*\
 * #ON DEMAND APPS
\*-----------------------------------*/

.stats .container {
  margin-block-start: 30px;
}

.stats { 
  padding-block: 20px; }


.stats .section-title {
  color: var(--beige);
  font-size: var(--fs-3);
}

.stats .section-title {
  margin-block-end: 50px;
} 


.stats-list {
  display: grid;
  gap: 30px;
}

.stats-card {
  background: hsl(0, 0%, 19%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 25px;
  border-radius: var(--radius-10);
  box-shadow: 10px 10px 40px hsla(0, 0%, 0%, 0.4);
  transition: var(--transition-1);
}

.stats-card:is(:hover, :focus) { transform: translateY(-5px); }

.stats-card .card-icon {
  background: var(--raw-seinna);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.stats-card .card-icon img {
  width: 70%;
}

.stats-card .card-title {
  width: calc(100% - 95px);
  color: var(--white);
  text-align: center;
}

.stats-card .card-title {
  display: block;
  color: var(--white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  font-size: var(--fs-6);
  line-height: 1.3;
  margin-top: 5px;
}

.stats-card > ion-icon { color: var(--light-gray); }



/*-------------------------------------------------------------------------------------------*\
  #SUCCESS STORIES PAGE
\*-------------------------------------------------------------------------------------------*/

.success-stories {
  background: url("../images/service-bg.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  padding-block-start: 50px;
  padding-block-end: 50px;
}

.success-banner {
  position: relative;
  margin-bottom: 50px;
  max-width: max-content;
}

.success-banner img { width: 100%; }

.success-text,
.success-card .success-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  line-height: 1.8;
}

.success-text { margin-bottom: 40px; }

.success-list > li:first-child {
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.success-card .success-icon img {
  color: var(--white);
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  font-size: 40px;
  border-radius: 50%;

  outline-offset: 5px;
  margin: 5px;
  margin-bottom: 20px;
  transition: var(--transition-2);
}

.success-card .success-title { margin-bottom: 10px; }


/*-----------------------------------*\
  #SUCCESS STORIES HORIZONTAL
\*-----------------------------------*/


.testi { border-block: 1px solid var(--white_20); }

.testi-content { padding-inline-start: 15px; }

.testi .section-text {
  text-indent: -15px;
  line-height: 1.5;
  margin-block-end: 20px;
}

.testi .section-text {
  font-family: var(--fontFamily-recoleta);
  font-size: var(--fs-3);
  font-weight: normal;
  font-style: normal;
}

.img-holder {
  width: 70px;
  height: 70px;
  overflow: hidden;
  background-color: var(--black_10);
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title {
  color: var(--white);
  font-family: 'Recoleta-Medium', serif;
  font-weight: normal;
  font-style: normal;
  font-size: var(--fs-5);
}

.profile-card .card-banner { display: none; }

.profile-card .card-subtitle { font-size: var(--fs-7); }

/*-----------------------------------*\
  #SUCCESS STORIES 2
\*-----------------------------------*/

.success-stories2 {
  background: url("../images/service-bg.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  padding-block-start: 50px;
  padding-block-end: 50px;
}

.success-banner2 {
  position: relative;
  margin-bottom: 50px;
  max-width: max-content;
}

.success-banner2 img { width: 100%; }

.success-text2,
.success-card2 .success-text2 {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  line-height: 1.8;
}

.success-text2 { margin-bottom: 40px; }

.success-list2 > li:first-child {
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.success-card2 .success-icon2 img {
  color: var(--white);
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  font-size: 40px;
  border-radius: 50%;

  outline-offset: 5px;
  margin: 5px;
  margin-bottom: 20px;
  transition: var(--transition-2);
}

.success-card2 .success-title2 { margin-bottom: 10px; }




/*-------------------------------------------------------------------------------------------*\
  #PORTFOLIO PAGE
\*-------------------------------------------------------------------------------------------*/

.scroll-reveal { background-color: var(--onyx); }
.testi-content { padding: var(--section-padding) 15px; }

.scroll-reveal .section-title {
  color: var(--white);
  margin-block: 0px 10px;
}

.scroll-reveal .section-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  font-size: var(--fs-3);
}

.scroll-reveal .section-subtitle {
  font-family: var(--ff-poppins);
  font-weight: 500;
  font-size: var(--fs-5);
  margin-block: 0px 10px;
}

.testi-card { color: var(--white); }

.testi-text { 
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
 }

.testi-text {
  padding-block-end: 30px;
  border-block-end: 1px solid var(--white_10);
  margin-block: 20px 30px;
}

.testi-banner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.testi-banner1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.portbtn-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.portbtn-list .btn-item-link {
  overflow: hidden;
  border-radius: 10px;
}

.app-content .btn-item-link .img-app { 
  width: 130px;
  height: 100%; 
  object-fit: cover;
}

.app-content .port-btn {
  margin-block-start: 30px;
}




[data-reveal="left"] { clip-path: inset(0 100% 0 0); }

[data-reveal="left"].revealed { 
  animation: reveal-left 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}

@keyframes reveal-left {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% { clip-path: inset(0 0 0 0); }  
}

[data-reveal="right"] { clip-path: inset(0 0 0 100%); }

[data-reveal="right"].revealed {
  animation: reveal-right 1.2s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}

@keyframes reveal-right {
  0% { clip-path: inset(0 0 0 100%); }

  100% {clip-path: inset(0 0 0 0);}
}



/*-------------------------------------------------------------------------------------------*\
  #ABOUT US PAGE
\*-------------------------------------------------------------------------------------------*/

.abouthero {
  background-image: url("../images/about-banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: hsla(0, 0%, 0%, 0.7);
  background-blend-mode: overlay;
  display: grid;
  place-items: center;
  min-height: 600px;
  text-align: center;
  padding-top: 125px;
}

/* .abouthero .about-title { 
  font-size: var(--fs-2);
  font-weight: 700;
 } */

.about-title { margin-bottom: 20px; }



.special-dish-content { padding-block: 50px; 
  background-color: #282828;
  color: var(--rich-black-fogra-29-1);
}

.special-dish .abs-img {
  margin-inline: auto;
  margin-block-end: 12px;
}

.special-dish .section-text { margin-block: 16px 20px;
color: #fff; }

/*---------------------------*\
  #ABOUT TWO
\*---------------------------*/


.abouttwo { background-color: var(--onyx); }
.abouttwo-content { padding: var(--section-padding) 15px; }

.abouttwo .section-title {
  color: var(--white);
  margin-block: 0px 10px;
}

.abouttwo .section-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  font-size: var(--fs-3); 
}

.abouttwo-card { color: var(--white); }

.abouttwo-text { 
  font-size: var(--fs-6);
  font-size: var(--fw-500);
 }

.abouttwo {
  padding-block-end: 30px;
  border-block-end: 1px solid var(--white_10);
  margin-block: 20px 30px;
}

.abouttwo-banner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/*---------------------------*\
  #FEAT-VISMIS
\*---------------------------*/

.download { padding: 80px 0; }

.download-list {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 40px;
}

.download-link {
  max-width: 150px;
  color: var(--white);
  font-size: var(--fs-4);
  text-align: center;
}



.featvismis {
  padding: 50px 15px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 50px;
}

.featvismis-item:not(:last-child) { margin-bottom: 50px; }

.featvismis-item-title { margin-bottom: 20px;
  font-family: var(--ff-poppins);
  font-weight: 600;
  font-size: var(--fs-3); 
  letter-spacing: 2px;
}

.featvismis-item-text { 
  color: var(--white);
  /* font-size: var(--fs-5);  */
}

.featvismis-banner { position: relative; }

.featvismis-banner-bg {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(calc(-50% - 3px));
  width: 125%;
}

.featbanner-img {
  position: relative;
  left: 5px;
  width: 100%;
  margin: auto;
}



/*---------------------------*\
  #ABOUT THREE
\*---------------------------*/

.abouthre-wrapper {
  margin-block-start: 60px;
}

.abouthre-card {
  position: relative;
  background-color: #202020;
  height: 100%;
  padding: 60px 40px 40px;
  transition: var(--transition-2);
}

.card-icon .abouthre-icon {
  width: 80px;
}

.abouthre-card .card-title {
  --content-color: var(--white);
  font-family: var(--ff-poppins);
  font-weight: 500;
  font-size: var(--fs-4);
  margin-block: 20px;
}

.abouthre-card:is(:hover, :focus-within) {
  background-color: var(--rich-black-fogra-29_50);
}

.slider {
  --slider-items: 1;
  --item-gap: 12px;

  margin-block-start: 60px;
  overflow: hidden;
}

.slider-container {
  position: relative;
  display: flex;
  gap: var(--item-gap);
  transition: transform var(--cubic-ease-out);
}

.slider-item {
  --total-gap: calc(var(--item-gap) * (var(--slider-items) - 1));
  --item-width: calc((100% / var(--slider-items)) - (var(--total-gap) / var(--slider-items)));

  min-width: var(--item-width);
  width: var(--item-width);
}

.slider-control {
  position: relative;
  max-width: max-content;
  padding-block: 8px;
  opacity: 0.5;
}

.slider-control .line {
  width: 30px;
  height: 1px;
  background-color: var(--white);
}

.slider-control .arrow {
  position: absolute;
  transform: translateY(-60%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: var(--white);
}

.slider-control.prev .arrow {
  left: 0;
  border-width: 0 0 1px 1px;
}

.slider-control.next .arrow {
  right: 0;
  border-width: 1px 1px 0 0;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-block-start: 40px;
  margin-block-end: 40px;
}



/*-------------------------------------------------------------------------------------------*\
  #BLOG PAGE
\*-------------------------------------------------------------------------------------------*/

.blogmain {
  padding: var(--py) 0;
}

.blog .h2 {
  font-family: var(--ff-poppins);
  font-size: var(--fs-3);
  line-height: 1.3;
  margin-bottom: 3rem;
  text-align: center;
}

.blog .h2 {
  background-image: var(--gradient-1);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.blog-card-group { margin-bottom: 3rem; }

.blog-card {
  background: hsl(218, 23%, 23%);
  padding: 10px;
  margin-bottom: 2rem;
  border-radius: 10px;
  box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05);
  transition: 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1);
}

.blog-card-banner { display: none; }

.blog-content-wrapper { padding: 10px 5px; }

.blog-topic {
  background: hsl(217, 10%, 41%);
  color: hsl(211, 25%, 84%);
  font-family: var(--ff-poppins);
  font-size: var(--fs-7);
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.blog-topic:hover {
  background: var(--silver-metallic);
  color: hsl(218, 23%, 23%);
}

.blog-card .h3 {
  font-family: var(--ff-poppins);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.blog-card .h3:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.blog-text,
.profile-wrapper { display: none; }

.blog-text {
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
}

.blog .time-wrapper {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap: 15px;
}

.blog .h4 { color: hsl(211, 25%, 84%); }
.blog .h4:hover { color: hsl(229, 76%, 66%); }

.blog .text-sm {
  display: flex;
  align-items: center;
  gap: 5px;
  color: hsl(214, 20%, 69%);
}

.blog .separator {
  background: hsl(214, 20%, 69%);
  margin-inline: 3px;
  margin: 0 3px; /* fallback for margin-inline */
  width:  3px;
  height: 3px;
  border-radius: 3px;
}

.blog ion-icon { --ionicon-stroke-width: 50px; }

.pagination-btn {
  background-color: var(--bg-prussian-blue);
  color: var(--white);
  font-weight: var(--weight-bold);
  line-height: 1;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
}

.pagination {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin-block-start: 60px;
}

.pagination-btn:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  background-color: var(--bg-carolina-blue);
}


/*-----------------------------------*\ 
  #ASIDE
\*-----------------------------------*/

.aside { display: none; }

.aside-card {
  padding: 25px;
  border-radius: var(--radius-15);
}

.aside-title { margin-block-end: 40px; }

.aside-title .span { position: relative; }

.aside-title .span {
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.aside-title .span::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  background-color: var(--bg-carolina-blue);
  margin-block-start: 10px;
}

.popularblog-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 20px;
}

.popularblog-card h4 {
  font-family: var(--ff-poppins);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
}

.popularblog-list > li:not(:last-child) .cardblog-content {
  border-block-end: 1px solid var(--border-prussian-blue);
}

.popularblog-card .blog-warpper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  font-size: var(--fs-7);
  color: var(--cadet-gray);
  margin-block: 12px 20px;
}

/*---------------------------*\
  #BLOG CONTINUATION PAGE
\*---------------------------*/

.aboutblog {
  background-image: url("../images/ai_product_banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: hsla(0, 0%, 0%, 0.7); */
  /* background-blend-mode: overlay; */
  display: grid;
  place-items: center;
  min-height: 700px;
  text-align: center;
  padding-top: 125px;
}

.aboutblog_2 {
  background-image: url("../images/development_partner_banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: hsla(0, 0%, 0%, 0.7); */
  /* background-blend-mode: overlay; */
  display: grid;
  place-items: center;
  min-height: 700px;
  text-align: center;
  padding-top: 125px;
}

.aboutblog_3 {
  background-image: url("../images/inventory_banner.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: hsla(0, 0%, 0%, 0.7); */
  /* background-blend-mode: overlay; */
  display: grid;
  place-items: center;
  min-height: 700px;
  text-align: center;
  padding-top: 125px;
}

.aboutblog_4 {
  background-image: url("../images/mobile_app_2025.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: hsla(0, 0%, 0%, 0.7); */
  /* background-blend-mode: overlay; */
  display: grid;
  place-items: center;
  min-height: 700px;
  text-align: center;
  padding-top: 125px;
}

.aboutblog_5 {
  background-image: url("../images/ux_design_blog5.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* background-color: hsla(0, 0%, 0%, 0.7); */
  /* background-blend-mode: overlay; */
  display: grid;
  place-items: center;
  min-height: 700px;
  text-align: center;
  padding-top: 125px;
}

.section .uiux-us > li:first-child { 


}


/*-------------------------------------------------------------------------------------------*\
  #MOBILE APP DEVELOPMENT PAGE
\*-------------------------------------------------------------------------------------------*/

.mobileapp  { padding-block-start: 130px;
padding-block-end: 5px;}

/* .mobileapp .section-title { margin-block-end: 80px; } */

.mobileapp .section-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--white);
  font-size: var(--fs-2);
}

.mobileapp .section-title .span {
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.mobileapp .container {
  display: grid;
  gap: 20px;
}

.mobile-text {
  font-size: var(--fs-4);
  font-weight: 400;
  margin-block: 10px 35px;
}

.mobile-content :is(.wrapper, .hero-btn) {
  display: flex;
  align-items: center;
}

.mobile-content .wrapper {
  flex-wrap: wrap;
  gap: 30px;
  margin-block-end: 30px;
}

/*---------------------------*\
  #MOBILE TWO SLIDER
\*---------------------------*/


.mobileapp-card {
  position: relative;
  background-color: #202020;
  border: 1px solid #3e3e3e;
  height: 100%;
  padding: 40px 30px 30px;
  transition: var(--transition-2);
}

/* .mobile-icon .mobileapp-icon {
  width: 100px;
  padding-left: ;
} */

.mobileapp-card .card-title {
  --content-color: var(--white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  font-size: var(--fs-4);
  margin-block: 20px;
}

.mobileapp-card .card-title .span {
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}


.mobileapp-card .mobileapp-text {
  color: var(--white);
  font-weight: 300;
  font-size: var(--fs-5);
}

.botcard-icon {
  padding: 25px;
}

.native-icon {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.mobileicon-text {
  font-size: var(--fs-7);
  text-align: center;
}

.botcard-icon .service-icon {
  width: 85px;
  /* margin-bottom: 15px; */
}


.native-icon .mobileapp-title {
  font-size: var(--fs-7);
  font-weight: 300;
}

.consult-logo .consult-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 19px;
}
.consult-wrapper .consult-icon {
  color: var(--sonic-silver);
  font-size: var(--fs-3);
  font-weight: 200;
  /* padding-right: 1px; */
  /* margin-block-end: 8px; */
}

.consult-logo .consult-text {
  color: var(--white);
  font-size: var(--fs-5);
  font-weight: 300;
  margin-block: 10px 10px;
}



.mobileapp-card:is(:hover, :focus-within) {
  background-color: var(--white-20);
}

.slider {
  --slider-items: 1;
  --item-gap: 12px;

  margin-block-start: 60px;
  overflow: hidden;
}

.slider-container {
  position: relative;
  display: flex;
  gap: var(--item-gap);
  transition: transform var(--cubic-ease-out);
}

.slider-item {
  --total-gap: calc(var(--item-gap) * (var(--slider-items) - 1));
  --item-width: calc((100% / var(--slider-items)) - (var(--total-gap) / var(--slider-items)));

  min-width: var(--item-width);
  width: var(--item-width);
}

.slider-control {
  position: relative;
  max-width: max-content;
  padding-block: 8px;
  opacity: 0.5;
}

.slider-control .line {
  width: 30px;
  height: 1px;
  background-color: var(--white);
}

.slider-control .arrow {
  position: absolute;
  transform: translateY(-60%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: var(--white);
}

.slider-control.prev .arrow {
  left: 0;
  border-width: 0 0 1px 1px;
}

.slider-control.next .arrow {
  right: 0;
  border-width: 1px 1px 0 0;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-block-start: 40px;
  margin-block-end: 40px;
}


/*-----------------------------------*\
 * #MOBILE STATS
\*-----------------------------------*/



.mobilestats { padding-block-start: 30px; }

.mobilestats-list {
  display: grid;
  gap: 30px;
}

.mobilestats-card {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 25px;
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-1);
  transition: var(--transition-1);
}


.mobilestats-card .mobilecard-title {
  width: 100%;
  color: var(--white-20);
  font-family: var(--ff-poppins);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.mobilestats-card .mobilecard-title strong {
  display: block;
  color: var(--color-primary);
  font-family: var(--ff-poppins);
  font-weight: 500;
  font-size: initial;
  line-height: 1.3;
  margin-top: 5px;
}




/*-----------------------------------*\
 * #MOBILE VIEW PORTFOLIO
\*-----------------------------------*/

.upcoming {
  padding-block-start: 30px;
  /* padding-block: var(--section-padding); */
}

.upcoming .flex-wrapper { margin-bottom: 50px; }

.upcoming .section-title { margin-bottom: 30px; }

.mobiletitle-wrapper .section-title {
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  color: var(--white);
  font-size: var(--fs-2);
}

.mobiletitle-wrapper .section-title .span {
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.upcoming .filter-btn {
  color: var(--white);
  background: var(--raisin-black);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  border: 2px solid var(--white_20);
  padding: 12px 26px;
  border-radius: 50px;
}

.upcoming .filter-btn:focus { border-color: var(--coquelicot); }

.popular-list,
.popular-list > li:not(:last-child) { margin-bottom: 30px; }

.popular-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-10);
  height: 375px;
}

.popular-card .card-img { height: 100%; }

.popular-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*-----------------------------------*\
 * #MOBILE APP SERVICES SLIDER
\*-----------------------------------*/

#apptopic {
  padding-top: 50px;
}

.apptopic-card {
  padding: 24px;
  border-radius: var(--radius-8);
}

.appcard-content h2 {
  padding-top: 20px;
}

.apptopic-card .stackk-content .section-title {
  font-family: var(--ff-poppins);
  font-weight: 600;
  text-transform: uppercase;
}

.apptopic-card .appcard-content { margin-block-end: 15px; }

.apptopic-card .appcard-text {
  color: var(--white);
  font-size: var(--fs-6);
  margin-block: 15px 20px;
}

.btn-appgroup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.appbtn-icon{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--bg-prussian-blue);
  border-radius: var(--radius-circle);
  color: var(--white);
}

.appbtn-icon:is(:hover, :focus-visible) { background: var(--gradient-2); }

/* .appdev-slider .slider-banner {
  width: 507px;
  height: 618px;
} */

.appdev-slider {
  --slider-items: 1;
  overflow: hidden;
}

.appslider-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform var(--transition-2);
}

.appslider-item { min-width: 100%;
}

.appslider-card {
  position: relative;
}

.appslider-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  /* background-image: var(--gradient-3); */
  border-radius: var(--radius-8);
}

.appslider-list .slider-banner {
  border-radius: var(--radius-8);
}

.appslider-content {
  position: absolute;
  top: 30px;
  left: 25px;
  right: 25px;

}

.slider-title {
  margin-block-end: 10px;
  transition: var(--transition-1);
}

.slider-title {
  font-family: var(--ff-poppins);
  font-weight: normal;
  font-size: var(--fs-4);
}



/*-----------------------------------*\
  #PRICEING
\*-----------------------------------*/


.pricing-content .section-text { 
  /* margin-block-end: 60px; */
  padding-bottom: 30px;
  font-family: var(--ff-poppins);
  font-weight: 400;
  font-size: var(--fs-5);
 }

 .pricing-content .section-title {
  margin-block-end: 50px;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  color: var(--white);
  font-size: var(--fs-3);
 }

 .pricing-content .section-title .span{
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
 }

.pricing-list {
  display: grid;
  gap: 30px;
}

.pricing-card {
  background-color: #202020;
  border: 1px solid #3e3e3e;
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-3);
  line-height: 1.5;
  padding: 30px;
  transition: var(--transition-1);
}

.pricing-card .section-title {
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
  text-transform: uppercase;
  font-size: var(--fs-4);
}


.pricing-card .card-title {
  color: var(--white);
  font-family: var(--ff-poppins);
  font-weight: 300;
  font-size: var(--fs-5);
  margin-block: 14px 10px;
  transition: var(--transition);
}


.pricing-card:is(:hover, :focus-within) {
  background-color: var(--rich-black-fogra-29_50);
}


/*-----------------------------------*\
  #TECH-STACK
\*-----------------------------------*/

.stack-top {
  background: url("../assets/images/techstack.png") no-repeat;
  background-size: cover;
  background-position: center;
  padding: 10px;
}

.stack-brand-wrapper {
  position: relative;
  padding-bottom: 30px;
  border-bottom: 1px solid hsl(220, 14%, 8%);
  margin-bottom: 50px;
}

.stack-brand-wrapper::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: hsla(0, 0%, 50%, 0.2);
}

.stack-top .lefthead {
  width: max-content;
  margin-inline: auto;
  margin-bottom: 50px;
}

.stack-top .lefthead {
  color: var(--white);
  font-family: var(--ff-poppins);
  font-size: var(--fs-4);
  font-weight: 500;
}

.stack-menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px 40px;
  margin-bottom: 20px;
}

.stack-menu-link {
  color: var(--white);
  font-family: var(--ff-poppins);
  font-size: var(--fs-5);
  font-weight: 300;
  letter-spacing: 1px;
  padding: 5px 10px;
  /* transition: var(--transition-1); */
}

.stack-content .section-title {
  margin-block-start: 40px;
  margin-block-end: 40px;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  color: var(--white);
  font-size: var(--fs-3);
 }

 .stack-content .section-title .span{
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
 }

.stack-content .section-text {
  padding-bottom: 30px;
  font-family: var(--ff-roboto);
  font-weight: 400;
  font-size: var(--fs-5);
 } 

  /*-----------------------------------*\
  #ADVANTAGE OF MOBILE APP DEVELOPMENT
  \*-----------------------------------*/

  .section-promo {
    padding-bottom: 35px;
  }

  .section-promo .section-title {
    margin-block-start: 50px;
    margin-block-end: 10px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .section-promo .section-title .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

   .section-promo .section-text {
    padding-inline: 8px;
    margin-block-end: 50px;
   }

   .promo-card {
    padding: 40px 25px;
    width: 100%;
    height: 360px;
  }

  .promo-card .card-title {
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
    font-size: var(--fs-4);
  }

  .promo-card .card-text {
    margin-block: 10px 10px;
  }

    /*-----------------------------------*\
    #INDUSTRIES WE SERVE
    \*-----------------------------------*/

  .class .section-titlee {
    /* margin-block-start: 0px; */
    margin-block-end: 40px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    color: var(--white);
    font-size: var(--fs-3);
  }

  .class .section-titlee .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

  .class .title-wrapper .card-title {
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
  }


 /*-----------------------------------*\
  #WHO WE ARE
  \*-----------------------------------*/

  #who {
    padding-top: 10px;
  }

.who-card {
  background-color: var(--white_10);
  padding: 40px 25px;
  border-radius: var(--radius-20);
  margin-top: 40px;
}

.who-content .section-title {
  margin-block-start: 20px;
  margin-block-end: 20px;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
  color: var(--white);
  font-size: var(--fs-3);
 }

 .who-content .section-title .span{
  background-image: var(--gradient-2);
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
 }

 .who-content .oriwho-card{ 
  background-color: #0d0d0d; }

  .section-who .section-text:last-of-type { margin-block: 16px; }

  .who-list {
    margin-top: 20px;
    display: grid;
    gap: 15px;
  }

  .oriwho-card {
    padding: 17px;
    border-radius: var(--radius-5);
  }

  .who-card .card-title {
    font-size: var(--fs-4);
    margin-block-end: 10px;
  }

  .who-card .who-text {
    font-size: var(--fs-6);
    color: var(--light-gray);
  }

   /*-----------------------------------*\
  #WHY CHOOSE ORISMEDIA
  \*-----------------------------------*/

  .choose .container {
    margin-block-start: 50px;
    padding-top: 10px;
  }

  .choose .section-title {
    margin-block-start: 50px;
    margin-block-end: 10px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .choose .section-title .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

   .choose .section-text {
    padding-inline: 8px;
    margin-block-end: 50px;
   }


   .skills-box .skills-list  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  @keyframes fadeIn {
  
    0% { opacity: 0; }
    100% { opacity: 1; }
  
  }
  
  .skill-card {
    position: relative;
    background: var(--bg-secondary);
    width: 330px;
    height: 100px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-10);
    box-shadow: var(--shadow-1);
    cursor: help;
  }
  
  .skill-card .card-title {
    font-family: var(--ff-poppins);
    font-weight: normal;
    font-size: var(--fs-5);
  }
  
  .skill-card:hover .tooltip {
    transform: translateY(0);
    opacity: 1;
  }
  
  .card-icon {
    display: flex;
    align-items: center;
  }
  
  .card-icon .servcho-icon {
    font-size: var(--fs-4);
    font-weight: var(--fw-400);
    padding-right: 5px;
    color: white;
  }
  
 

  /*-----------------------------------*\
  #OTHER SERVICES LISTING
  \*-----------------------------------*/

  .listing .container {
    margin-top: 20px;
    padding-top: 20px;
  }

  .listing-card {
    padding: 25px 16px;
    display: flex;
    gap: 20px;
    border: 1px solid var(--coquelicot);
    border-radius: var(--radius-10);
    transition: var(--transition-1);
  }

  .listing-card:is(:hover, :focus-visible) { border-color: var(--vegas-gold); }

  .grid-lister .headline-md{
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .grid-lister .headline-md .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

  .listing-card .card-title {
    margin-block-end: 5px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
    color: var(--white);
  }



  /*-----------------------------------*\
  #MOBILE APP PAGE_FAQ
  \*-----------------------------------*/
  

  .stackk-content .section-title {
    margin-block-end: 20px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .stackk-content .section-title .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

  .stackk-content .section-text {
    /* padding-bottom: 0px; */
    font-family: var(--ff-poppins);
    font-weight: 400;
    font-size: var(--fs-5);
}

.faqq .container {
  display: grid;
  gap: 20px;
}

.faqq-card {
  background-color: #272727;
  border-radius: var(--radius-5);
  overflow: hidden;
  margin-block-end: 20px;

}

.faqq-card .card-action {
  --action-bg: #272727;
  --color: var(--white);

  background-color: var(--action-bg);
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  gap: 20px;
  transition: var(--transition-1);
}

.faqq-card .card-action:is(:hover, :focus, .active) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);
  --color: var(--white);
}

  .faqq-card .card-title {
    font-family: var(--ff-poppins);
    color: var(--color);
    font-size: var(--fs-6);
    transition: var(--transition-1);
  }

  .faqq-card ion-icon {
    color: var(--color);
    font-size: 15px;
    transition: var(--transition-1);
    --ionicon-stroke-width: 60px;
  }

  .faqq-card .card-action.active .open,
  .faqq-card .card-action .close { display: none; }

  .faqq-card .card-action .open,
  .faq-card .card-action.active .close { display: block; }

  .faqq-card .card-content {
    font-size: var(--fs-6);
    padding-inline: 25px;
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-2);
  }

  .faqq-card .card-content p { margin-block: 15px; }

  .faqq-card .card-action.active + .card-content { max-height: 500px; }



/*-------------------------------------------------------------------------------------------*\
  #WEB DEVELOPMENT PAGE
\*-------------------------------------------------------------------------------------------*/

  .ind-content .section-title {
    font-family: var(--ff-poppins);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    color: var(--white);
    font-size: var(--fs-2);
  }
  
  .ind-content .section-title .span {
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }


  /*-------------------------------------------------------------------------------------------*\
  #UI/UX PAGE
  \*-------------------------------------------------------------------------------------------*/

  .section-uiux .section-title {
    margin-block-start: 50px;
    padding-top: 20px;
    margin-block-end: 10px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .section-uiux .section-title .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

   .section-uiux .section-text {
    padding-inline: 8px;
    margin-block-end: 50px;
   }


  /*-------------------------------------------------------------------------------------------*\
  #DIGITAL TRANSFORMATION PAGE
  \*-------------------------------------------------------------------------------------------*/

  .section-digi .section-title {
    margin-block-start: 50px;
    padding-top: 20px;
    margin-block-end: 15px;
    font-family: var(--ff-poppins);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    color: var(--white);
    font-size: var(--fs-3);
   }
  
   .section-digi .section-title .span{
    background-image: var(--gradient-2);
    display: inline-block;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
   }

   .section-digi .section-text {
    padding-inline: 8px;
    margin-block-end: 50px;
   }


.section-digisol { 
  padding-block-start: 30px;
  padding-block-end: 50px; 
}

.digisol-list {
  display: grid;
  gap: 30px;
}

.digisol-card {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 25px;
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-1);
  transition: var(--transition-1);
}


.digisol-card .digisol-title {
  width: 100%;
  color: var(--white-20);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-600);
  text-align: center;
}

.digisol-card .digisol-title strong {
  display: block;
  color: var(--color-primary);
  font-family: var(--ff-poppins);
  font-weight: normal;
  font-size: initial;
  line-height: 1.3;
  margin-top: 5px;
}

  /*---------- DIGITAL TRANFORMATION SERVICES------- */

.digitr .container {
  display: grid;
  gap: 30px;
}

.digitr .digitr-content {
  background-color: var(--eerie-black-1);
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 20px;
}

.digitr-content .section-title {
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
  font-size: var(--fs-4);
  margin-block: 16px;
}

.digitr .section-text:last-of-type { 
  margin-block-end: 16px; }

.digitr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.digitr-card {
  padding: 17px;
  border-radius: var(--radius-10);
  background-color: #0d0d0d;
}


.digitr-card .digitr-text {
  font-size: var(--fs-6);
  color: var(--white);
}

.digitr-card:is(:hover, :focus, .active) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);
  --color: var(--white);
}

  /*-------------------------------------------------------------------------------------------*\
  #REACTJS DEVELOPMENT PAGE
  \*-------------------------------------------------------------------------------------------*/
  .digitr .digitr-hed {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .digitr .digitr-hed .section-title:hover { color: var(--coquelicot);

  }

  /*-------------------------------------------------------------------------------------------*\
  #ON DEMAND APP PAGE
  \*-------------------------------------------------------------------------------------------*/

  .appslider-content .demand-icon {
    background: var(--raw-seinna);
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }

  .appslider-content .demand-icon {
    margin-block-start: 15px;
    margin-block-end: 15px;
  }
  
  .appslider-content .demand-icon img {
    width: 70%;
  }


  /*-------------------------------------------------------------------------------------------*\
  #COOKING APP PAGE
  \*-------------------------------------------------------------------------------------------*/

  .portri {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
  }


  /*-------------------------------------------------------------------------------------------*\
  #SITEMAP PAGE
  \*-------------------------------------------------------------------------------------------*/

.site-content .site-subtitle {
  font-size: var(--fs-3);
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 20px;
  }

.site-wrapper {
  margin-top: 20px;
  padding-top: 10px;
}

.site-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 30px;
  border-bottom: 1px solid #424148;

}

.site-wrapper .sbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  
}

.site-wrapper .sbtn {
  max-width: max-content;
  font-size: var(--fs-5);
  /* text-transform: uppercase; */
  font-weight: var(--fw-500);
  letter-spacing: 1px;
  padding: 13px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  transition: var(--transition-1);
}

.sbtn-primary {
  border: 1px dashed var(--silver-metallic);
  color: var(--white);
}

.sbtn-primary:is(:hover, :focus) {
  background: linear-gradient(to right, #F27121, #E94057, #8A2387);;
  color: var(--white);
  border: none;
}


  /*-------------------------------------------------------------------------------------------*\
  #PRIVACY POLICY PAGE
  \*-------------------------------------------------------------------------------------------*/
  .privacy-title {
    font-family: var(--ff-poppins);
    font-weight: normal;
    font-size: var(--fs-4);
    font-weight: 700;
    text-transform: uppercase;
  }

  .privacy-title {
    margin-top: 30px;
  }

/*------------------------------------------------*\
  #MEDIA QUERIES
\*------------------------------------------------*/

@media (max-width: 600px) {

        /**
   * CONTACT US
   */

   .wrapper .contact-title {
    text-align: center;
   }

   .wrapper form{
    margin: 35px 20px;
  }

  form .dbl-field{
    flex-direction: column;
    margin-bottom: 0px;
  }

  form .dbl-field .field{
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
  }

  form .message textarea{
    resize: none;
  }
  form .button-area{
    margin-top: 20px;
    flex-direction: column;
  }
  .button-area button{
    width: 100%;
    padding: 11px 0;
    font-size: 16px;
  }
  .button-area span{
    margin: 20px 0 0;
    text-align: center;
  }

}



/*---------- CONTACT FORM RESPONSIVE------- */

@media (max-width: 950px) {
  .container {
    width: 100%;
    padding: 30px 15px 30px 15px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}


@media (max-width: 820px) {
  .contact-us{
    margin: 40px 0;
    height: 100%;
  }
  .contact-us .wrapper {
    flex-direction: column-reverse;
  }
  .contact-us .wrapper .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .contact-us .wrapper .left-side::before {
    display: none;
  }
  .contact-us .wrapper .right-side {
    width: 100%;
    margin-left: 0;
  }
}

@media screen and (max-width: 500px) {
  
  .form .column {
    flex-wrap: wrap;
  }
  .form .message textarea{
    resize: none;
  }

  form .message textarea{
    resize: none;
  }

  form .button-area {
    margin-top: 20px;
    flex-direction: column;
  }

  .button-area button {
    width: 100%;
    padding: 11px 0;
    font-size: 16px;
  }

  .button-area span{
    margin: 20px 0 0;
    text-align: center;
  }
}


/***-------- responsive for large than 575px screen---------*****/

  @media (min-width: 575px) {

      /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 5.8rem;
    --fs-2: 4rem;

  }


  /**
   * REUSED STYLE
   */

   .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }

  .section-subtitle { font-size: var(--fs-6); }


    /**
   * HEADER
   */

   .header .container {
    max-width: unset;
    padding-inline: 30px;
  }

      /**
   * HERO
   */

   


   /**
   * ABOUT
   */

  .about .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
  }

  .about-us { margin-block-end: 0; }

  .about-us .section-title {
    font-size: var(--fs-3);
  }


  /**
   * VIDEO
   */

  .video-card .card-title { --fs-3: 3.5rem; }

  /**
   * CTA
   */

   .cta-title { --fs-1: 42px; }


  /**
   * FOOTER
   */

  .footer-top .container {
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
  }

    /**
   * TESTIMONIAL
   */
   .testimonials-title { margin-bottom: 25px; }
   
   .testi .view {
    flex-basis: 100%;
  }
  


  .testimonials-list {
    gap: 30px;
    margin: 0 -30px;
    padding: 30px;
    padding-bottom: 35px;
  }

  .content-card {
    padding: 30px;
    padding-top: 25px;
  }

  .testimonials-avatar-box {
    transform: translate(30px, -30px);
    border-radius: 20px;
  }

  .testimonials-avatar-box img { width: 80px; }

  .testimonials-item-title {
    margin-bottom: 10px;
    margin-left: 95px;
  }

  .testimonials-text {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  /* testimonials modal */
  .modal-container { padding: 20px; }

  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
  }

  .modal-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-avatar-box {
    border-radius: 18px;
    margin-bottom: 0;
  }

  .modal-avatar-box img { width: 65px; }

  .modal-img-wrapper > img {
    display: block;
    flex-grow: 1;
    width: 35px;
  }

   /**
   * SUCCESS STORIES
   */

   .success-list > li:first-child { padding-bottom: 30px; }

   .success-card {
     display: flex;
     align-items: center;
     gap: 20px;
   }
 
   .success-card .success-icon { margin-bottom: 0; }
 
   .success-card .success-content { width: calc(100% - 115px); }

      /**
   * SUCCESS STORIES HORIZONTAL
   */

   .profile-card .card-banner {
    display: block;
    border-radius: 50%;
  }

  .testi .profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
  }

     /**
   * SUCCESS STORIES 2
   */


   .success-list2 > li:first-child { padding-bottom: 30px; }

   .success-card2 {
     display: flex;
     align-items: center;
     gap: 20px;
   }
 
   .success-card2 .success-icon2 { margin-bottom: 0; }
 
   .success-card2 .success-content2 { width: calc(100% - 115px); }

     /**
   * FEAT-VISMIS
   */

  .feature-banner-bg { width: 150%; }


        /**
   * ABOUT THREE
   */


   .slider { --slider-items: 2; }


     /**
   * Blog
   */

   .blog-card {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 20px;
  }

  .blog-card-banner {
    display: block;
    overflow: hidden;
    border-radius: 5px;
  }

  .blog-banner-img {
    width:  100%;
    height: 100%;
    object-fit: cover;
  }

       /**
   * MOBILE APP PAGE
   */

        /**
   * MOBILE APP DEVELOPMENT SERVICES
   */

   .appdev-slider { --slider-items: 3; }

   .appslider-item { min-width: calc(33.33% - 13.33px); }

     /**
   * PRICING
   */

  .pricing-card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .pricing-card .card-title {
    margin-block: 0;
    margin-inline-end: auto;
  }

       /**
   * MOBILE APP PAGE_WHO WE ARE
   */

  .who-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }



  }


  /****------* responsive for larger than 650px screen--------*****/

@media (min-width: 650px) {

    /**
   * HERO
   */




  /**
   * BLOG
   */

   .blog .h2 {
    position: relative;
    text-align: left;
    padding-left: 2rem;
  }

  .blog .h2::before {
    content: '';
    position: absolute;
    top:  0;
    left: 0;
    background: hsl(216, 15%, 52%);
    width:  5px;
    height: 100%;
    border-radius: 5px;
  }

  .blog-text,
  .profile-wrapper { display: block; }

  .blog-text {
    color: var(--foreground-secondary);
    font-size: var(--fs-6);
    font-weight: var(--fw-500);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .blog .wrapper-flex {
    display:         flex;
    justify-content: start;
    align-items:     center;
    gap: 10px;
  }

  .profile-wrapper {
    width:  56px;
    height: 56px;
    background: hsl(216, 15%, 52%);
    padding: 3px;
    border-radius: 50%;
  }

  .profile-wrapper img { border-radius: 50%; }

  .blog .wrapper {
    flex-direction: column;
    align-items: start;
    gap: 0;
  }

}







 /******------ responsive for large than 768px screen-------*******/


  @media (min-width: 768px) {

    /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-2: 4.5rem;
    --fs-3: 3.5rem

  }

  /**
   * REUSED STYLE
   */

   .container { max-width: 720px; }

   .scrollbar-item { min-width: calc(50% - 12.5px); }

   .grid-list { grid-template-columns: 1fr 1fr; }

   :is(.feature, .flight) .grid-list li:first-child { grid-column: 1 / 3; }


   /**
   * HERO
   */

   /* .hero-title .span { --fs-2: 6rem; }
   .hero-content .hero-title { --fs-2: 7rem;} */

   /* .hero-text {
     font-size: var(--fs-7);
     max-width: 40ch;
     margin-block-end: 40px;
   } */


      /**
   * ABOUT
   */

  .about-us {
    width: 70%;
  }

  .about-us .section-title {
    font-size: var(--fs-3);
  }

    /**
   *  OUR WORK
   */

   .gallery { padding-bottom: calc(var(--section-padding * 2)); }

   .gallery-list {
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }

   .gallery-image { border-radius: var(--radius-10); }

     /**
   * TESTIMONIALS
   */

    /* testimonials modal */
    .testimonials-modal {
      gap: 35px;
      max-width: 680px;
    }

    .modal-avatar-box img { width: 80px; }


  /**
   * FOOTER
   */

   .footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-bottom-list { margin-block-start: 0; }

      /**
   * SERVICES PAGE
   */

   .portfolio-card {
    background-size: 115%;
    padding-inline: 60px;
  }

  .portfolio-card:is(:hover, :focus) { background-size: 130%; }

    /* 1st TAB */

.primary-tabs {
  grid-template-columns: repeat(2, 1fr);
}

.primary-tabs { z-index: 2; }

  /* 2nd TAB */

  .prime-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .prime-tabs { z-index: 2; }


      /**
   * CTA SERVICE
   */

   .service-cta { padding-block: 40px; }

  .service-cta .section-title {
    display: flex;
    align-items: center;
  }

  .service-cta .section-title::before {
    border-radius: 0 30px 30px 0;
    width: 30px;
    height: 60px;
    flex-shrink: 0;
    margin-block-end: 0;
  }


    /**
   * STATS
   */

   .stats .about-content {
    display: flex;
    justify-content: space-between;
    align-items: center;    
  }

  .stats-list { grid-template-columns: 1fr 1fr; }

  /**
   * SUCCESS STORIES
   */   

   .service-content { padding-inline: 40px; }

     /**
   * SUCCESS STORIES 2
   */  
   .success-banner2 { order: 1; 
   }
   
   .service-content2 { padding-inline: 40px; }


        /**
   * PORTFOLIO
   */ 
   .testi-text { margin-block-start: 0; }


   .testi-banner { order: 1; 
   }


           /**
   * ABOUT US
   */ 

   .abouttwo { margin-block-start: 0; }


   .abouttwo-banner { order: 1; 
   }

     /**
   * FEAT-VISMIS
   */

   .download-list {
    grid-template-columns: repeat(3, 1fr);
    max-width: fit-content;
    margin: auto;
    gap: 80px;
  }


  .featvismis-item {
    max-width: 450px;
    margin-inline: auto;
    text-align: center;
  }

       /**
   * MOBILE APP PAGE
   */

   .mobileapp .container { gap: 15px; }

   .mobileapp .wrapper {
     gap: 50px;
     margin-block-end: 60px;
   }

          /**
   * MOBILE STATS
   */

   .mobilestats-list { grid-template-columns: 1fr 1fr; }
   
             /**
   * MOBILE VIEW PORTFOLIO
   */
   .foliostats .container { gap: 15px; }

   .popular-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }

  .popular-list > li:not(:last-child) { margin-bottom: 0; }

    /**
   * PRICING
   */

   .pricing-card { font-size: var(--fs-5); }

       /**
   * TECH STACK
   */

   .stack-menu-wrapper .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
   .stack-menu-list {
     max-width: 100%;
     justify-content: flex-start;
     column-gap: 16px;
     margin-bottom: 0;
   }

          /**
   * WHY CHOOSE APP DEVELOPMENT
   */

   .grid-prolist { grid-template-columns: 1fr 1fr; }

   /**
   WHY CHOOSE ORISMEDIA
    */



          /**
   * OTHER SERVICES LISTING
   */

   .listing .grid-lister { grid-template-columns: 1fr 1fr; }

   .listing .grid-lister > li:first-child { grid-column: 1 / 3; }


          /**
   * DIGITAL TRANSFORMATION PAGE
   */

   .digisol-list { grid-template-columns: 1fr 1fr; }
 
 
   
}






  /******-------* responsive for large than 992px screen------*******/


  @media (min-width: 992px) {

    /**
   * REUSED STYLE
   */

  .container,
  .header .container { max-width: 960px; }

  /**
   * HEADER
   */

   .nav-open-btn,
   .nav-close-btn { display: none; }


   .header {
     background-color: transparent;
     box-shadow: none;
     padding-block: 30px;
     transition: var(--transition-1);
   }

   .header.active {
     transform: translateY(-100%);
     background-color: #0d0d0d;
     padding-block: 20px;
     box-shadow: var(--shadow-1);
     animation: slideIn 0.5s ease forwards;
   }

   @keyframes slideIn {
     0% { transform: translateY(-100%); }
     100% { transform: translateY(0); }
   }

   .header .container { gap: 30px; }

   .navbar,
  .navbar.active {
    all: unset;
    margin-inline-start: auto;
  }

  .navbar-list {
    display: flex;
    gap: 10px;
  }

  .navbar-link {
    color: var(--white);
    font-size: unset;
    padding: 0 10px;
    margin-block-end: 0;
  }

  .header.active .navbar-link { color: var(--white); }

  .header .navbar-link:is(:hover, :focus, .active) { color: var(--coquelicot); }


    /**
   * HERO
   */

   .hero { grid-template-columns: 1fr; }

   /* .hero-content { padding: 0; }
 
   .hero-title .span { --fs-2: 6rem; }

   .hero-content .hero-title { --fs-2: 10rem;   } */
   

    /**
   * ABOUT
   */

  .about .wrapper { gap: 30px; }

  .about-us {
    width: 70%;
  }

  .grid-list { grid-template-columns: repeat(4, 1fr); }


    /**
   * OUR SERVICES
   */

   .faq .container {
    grid-template-columns: 1fr 0.48fr;
    align-items: flex-start;
  }

      /**
   * OUR WORK
   */

  .gallery-item .view-portfolio {
    margin-block-start: 60px;
  }

      /**
   * TESTIMONIALS
   */

   .testimonials-item { min-width: calc(50% - 15px); }


    /**
   * FOOTER
   */

   .footer-top .container {
    grid-template-columns: 0.85fr 0.5fr 1fr 0.85fr;
    column-gap: 50px;
  }

        /**
   * SERVICES PAGE
   */

   .portfolio-card .card-subtitle { font-size: var(--fs-5); }

   .portfolio-card .btn-link { --fs-6: 1.5rem; }

   .primary-tabs {
    grid-template-columns: repeat(4, 1fr);
    top: 64px;
  }

    /* 2nd TAB */

    .prime-tabs {
      grid-template-columns: repeat(4, 1fr);
      top: 64px;
    }

          /**
   * CTA SERVICE
   */

   .service-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .service-cta .section-title {
    text-align: left;
    gap: 30px;
  }

  .service-cta .btn {
    flex-shrink: 0;
    margin: 0;
  }
    
  /**
   * STATS
   */

   .stats .section-title { max-width: 25ch;  }

   .stats-list { grid-template-columns: repeat(3, 1fr); }

   .stats-card { height: 100%; }

   /**
   * SUCCESS STORIES
   */

  .success-stories .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }

  .success-content {
    padding-inline: 0;
    width: calc(100% - 470px);
  }

  .success-banner { margin-bottom: 0; }

     /**
   * SUCCESS STORIES 2
   */

   .success-stories2 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }

  .success-content2 {
    padding-inline: 0;
    width: calc(100% - 470px);
  }

  .success-banner2 { margin-bottom: 0; }


          /**
   * PORTFOLIO
   */

   .scroll-reveal {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .scroll-reveal {
    border-block: 0;
}

  .testi-content { padding-inline: 30px 50px; }


            /**
   * ABOUT US PAGE
   */

  .special-dish {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .special-dish-content { padding-inline: 50px 25px; }

  .special-dish-content .container { position: relative; }



            /**
   * ABOUT TWO
   */

  
  .abouttwo {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .abouttwo {
    border-block: 0;
    padding-block-end: 0px;
}

  .abouttwo-content { padding-inline: 30px 50px; }


       /**
   * FEAT-VISMIS
   */

   .featvismis {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 50px 29px;
  }

  .featvismis-list:first-child li { text-align: right; }

  .featvismis-list:last-child li { text-align: left; }


          /**
   * ABOUT THREE
   */


   .slider { --slider-items: 2; }


          /**
   * BLOG
   */


   .blogmain .container {
    display: grid;
    grid-template-columns: 5fr;
    gap: 60px;
  }

      /**
   * ASIDE 
   */

   /* .aside {
    display: block;
    align-self: stretch;
  }

    .aside .h3 {
    color: var(--foreground-secondary);
    margin-bottom: 3rem;
    text-align: center;
    line-height: 1.3;
  }

  .aside .blog-warpper {
    background: var(--background-primary);
    border-radius: 10px;
    padding: 0px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
  } */

        /**
   * MOBILE APP PAGE
   */

   .mobileapp .container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    
  }

  .mobileapp .wrapper { flex-wrap: nowrap; }

  .mobileapp .btn  { flex-shrink: 0; }

  
          /**
   * MOBILE STATS
   */
   .mobilestats-list { grid-template-columns: repeat(3, 1fr); }

   .mobilestats-card { height: 100%; }

           /**
   * MOBILE APP PAGE
   */

   .foliostats .container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;    
  }

             /**
   * MOBILE VIEW PORTFOLIO
   */

   .upcoming .flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

          /**
   * MOBILE APP DEVELOPMENT SERVICES
   */

   /* .apptopic-card {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    align-items: center;
    gap: 20px;
  } */


  /* .upcoming :is(.section-subtitle, .section-title) { text-align: left; } */

  .upcoming .section-title { margin-bottom: 0; }

  .popular-list { grid-template-columns: repeat(3, 1fr); }

    /**
   * PRICING
   */

   .pricing .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    gap: 100px;
  }

  .pricing-content {
    position: sticky;
    top: 120px;
  }

  .pricing-card {
    flex-direction: column;
    align-items: flex-start;
}

  .pricing .section-text { margin-block-end: 0; }

      /**
   * TECH STACK
   */

   .stack-brand-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .stack-top .lefthead {
    margin-inline: 0;
    margin-bottom: 0;
    margin-right: 50px;
  }

  .stack-menu-wrapper { gap: 50px; }

  .stack-menu-list {
    flex-grow: 1;
    max-width: unset;
  }

            /**
   * WHY CHOOSE APP DEVELOPMENT
   */
   .grid-prolist { grid-template-columns: repeat(4, 1fr); }

         /**
   * MOBILE APP PAGE_WHO WE ARE
   */
   .section-who .container {
    grid-template-columns: 1fr;
    align-items: center;
  }

     /**
   WHY CHOOSE ORISMEDIA
    */
    .skills-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      gap: 50px;
    }

      /**
   * MOBILE APP PAGE_FAQ
   */

   .faqq .container {
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
  }

            /**
   * DIGITAL TRANSFORMATION PAGE
   */

   .digisol-list { grid-template-columns: repeat(3, 1fr); }

   .digisol-card { height: 100%; }

     /*- DIGITAL TRANFORMATION SERVICES- */

     .digitr .container {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }


  }






  /******-------* responsive for large than 1200px screen------*******/

  @media (min-width: 1200px) {

    /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 7rem;
    --fs-2: 5.5rem;
    --fs-3: 3.5rem;
    --fs-4: 2.2rem;
    --fs-5: 2rem;

    /**
     * spacing
     */

    --section-padding: 70px;

  }

    /**
   * REUSED STYLE
   */

   .container,
   .header .container { max-width: 1140px; }

   .section-subtitle { --fs-5: 2.2rem; }

   .has-scrollbar { gap: 30px; }

   .scrollbar-item { min-width: calc(33.33% - 20px); }

     /**
   * HEADER
   */

  .header .container { padding-inline: 0; }

    /**
   * HERO
   */

   .hero-title {

    font-size: 4rem;
  }

   /* .hero {
    padding-block-start: 150px;
    background-position: left;
  } */

  /* .hero-title .span { --fs-2: 6rem; }

  .hero-content .hero-title{ --fs-2: 10rem;

  }

  .hero-text { --fs-7: 2.4rem; } */


     /**
   * ABOUT
   */

  .about .wrapper { gap: 40px; }

  .about-us .section-title {
    font-size: var(--fs-3);
  }

       /**
   * SERVICE
   */

  .grid-list { grid-template-columns: repeat(4, 1fr); }

  .faq-card .card-action.active + .card-content { max-height: 200px; }


    /**
   * OUR SERVICES
   */
   .faq-card .card-action.active + .card-content { max-height: 200px; }

         /**
   * OUR WORK
   */

  .gallery-item .view-portfolio {
    margin-block-start: 70px;
  }

    /**
   * INDUSTRIES
   */

   .class .section-title {
    font-size: var(--fs-3);
  }

   :is(.class-card) .card-content { padding: 30px; }

   /* .card-meta { padding: 15px 30px; } */

    /**
   * FOOTER
   */

   .footer-top .container { grid-template-columns: 1fr 0.6fr 0.9fr 1fr; }

           /**
   * SERVICES PAGE
   */

   .primary-tabs {
    grid-template-columns: repeat(4, 1fr);
    top: 64px;
  }

      /* 2nd TAB */

    .prime-tabs {
     grid-template-columns: repeat(4, 1fr);
    top: 64px;
  }

    /**
   * SUCCESS STORIES
   */

   /* .success-content { width: calc(100% - 700px); } */

 
   .success-list,
   .success-title { max-width: 480px; }

       /**
   * SUCCESS STORIES 2
   */

   /* .success-content { width: calc(100% - 700px); } */

 
   .success-list2,
   .success-title2 { max-width: 480px; }
  

               /**
   * ABOUT US PAGE
   */

   .special-dish-content {
    padding: 225px 120px;
    padding-inline-end: 0;
  }

  .special-dish-content .container {
    max-width: 460px;
    margin-inline: 0;
  }

  .slider { --slider-items: 3; }

                 /**
   * MOBILE APP PAGE
   */

   .mobile-content {
    display: flex;
    flex-direction: column;
    margin-block-start: 50px;
  }

  .mobile-text { margin-block: 0px 45px; }

  .mobileapp .wrapper { margin-block-end: auto; }

                   /**
   * MOBILE VIEW PORTFOLIO
   */

   .foliostats-content {
    display: flex;
    flex-direction: column;
    margin-block-start: 50px;
  }

            /**
   * OTHER SERVICES LISTING
   */

   .listing .grid-lister { grid-template-columns: repeat(4, 1fr); }

  }