/* =========================================
   DIRECTOR AI VIDEO FRAME
========================================= */

.dai-video-frame{
position: relative;
  width: calc(100% - 30px);
  max-width: 995px;
  margin: 0 auto;
  height: 570px;
  padding: 20px 28px;
  background: #171720;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  box-shadow: 0 15px 50px rgba(0,0,0,.35), inset 0 0 25px rgba(255,255,255,.015);
  overflow: hidden;

}


/* Inner black video area */
.dai-video-inner{
    position: relative;
    width: 100%;

    aspect-ratio: 16 / 9;

    background: #05050a;
    border-radius: 4px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.05);
}


/* Actual video */
.dai-chat-video{
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center center;

    background: #05050a;

    border: 0;
    outline: 0;
}


/* =========================================
   CORNER DETAILS
   Optional - screenshot jaisa look
========================================= */

.dai-video-inner::before,
.dai-video-inner::after{
    content: "";
    position: absolute;
    z-index: 5;

    width: 12px;
    height: 12px;

    top: 10px;

    border-top: 1px solid #d98a00;
}

.dai-video-inner::before{
    left: 10px;
    border-left: 1px solid #d98a00;
}

.dai-video-inner::after{
    right: 10px;
    border-right: 1px solid #d98a00;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px){

    .dai-video-frame{
        width: calc(100% - 30px);
        padding: 16px 20px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px){

    .dai-video-frame{
        width: calc(100% - 24px);

        padding: 12px;

        border-radius: 7px;
    }

    .dai-video-inner{
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .dai-chat-video{
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-fit: fill;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px){

    .dai-video-frame{
        width: calc(100% - 20px);
        padding: 8px;
    }

}

/* first section */

/* =========================================================

   DIRECTOR AI - COMMAND VIDEO SHOWCASE

   Dark Premium Theme

   Unique Prefix: daicmd-

========================================================= */

.daicmd-section,

.daicmd-section * {

   box-sizing: border-box;

}



/* =========================================================

   SECTION

========================================================= */

.daicmd-section {

   position: relative;

   z-index: 1;

   overflow: hidden;

   padding: 95px 0 105px;

   /* background:

      radial-gradient(

         circle at 7% 12%,

         rgba(143, 65, 220, .20),

         transparent 27%

      ),

      radial-gradient(

         circle at 92% 70%,

         rgba(68, 112, 230, .16),

         transparent 29%

      ),

      linear-gradient(

         180deg,

         #03040c 0%,

         #070817 50%,

         #020309 100%

      ); */

      background: url(../images/daicmd-section.png) no-repeat center top;
    background-size: auto;
    background-size: cover;

   color: #ffffff;

}

.daicmd-section2 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 95px 0 105px;
  background: radial-gradient( circle at 7% 12%, rgba(143, 65, 220, .20), transparent 27% ), radial-gradient( circle at 92% 70%, rgba(68, 112, 230, .16), transparent 29% ), linear-gradient( 180deg, #03040c 0%, #070817 50%, #020309 100% );
  background: url(../images/daicmd-section4.png) no-repeat center top;
    background-size: auto;
  background-size: auto;
  background-size: cover;
  color: #ffffff;
}

/* =========================================================

   BACKGROUND

========================================================= */

.daicmd-bg {

   position: absolute;

   inset: 0;

   z-index: -1;

   overflow: hidden;

   pointer-events: none;

}



.daicmd-bg__grid {

   position: absolute;

   inset: 0;

   opacity: .46;

   background-image:

      linear-gradient(

         rgba(112, 85, 204, .04) 1px,

         transparent 1px

      ),

      linear-gradient(

         90deg,

         rgba(74, 105, 210, .04) 1px,

         transparent 1px

      );

   background-size: 58px 58px;

   -webkit-mask-image:

      radial-gradient(

         ellipse at center,

         #000,

         transparent 76%

      );

   mask-image:

      radial-gradient(

         ellipse at center,

         #000,

         transparent 76%

      );

}



.daicmd-bg__orb {

   position: absolute;

   display: block;

   border-radius: 50%;

   filter: blur(40px);

}



.daicmd-bg__orb--one {

   width: 650px;

   height: 650px;

   left: -430px;

   top: 200px;

   background:

      radial-gradient(

         circle,

         rgba(143,69,221,.21),

         transparent 70%

      );

}



.daicmd-bg__orb--two {

   width: 700px;

   height: 700px;

   right: -470px;

   bottom: -250px;

   background:

      radial-gradient(

         circle,

         rgba(69,115,231,.17),

         transparent 70%

      );

}



/* =========================================================

   HEADING

========================================================= */

.daicmd-head {

   max-width: 1050px;

   margin: 0 auto 60px;

}



.daicmd-head__tag {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

   margin-bottom: 15px;

   padding: 8px 15px;

   border:

      1px solid rgba(121,88,226,.25);

   border-radius: 50px;

   background:

      linear-gradient(

         90deg,

         rgba(143,70,222,.12),

         rgba(71,117,231,.10)

      );

   font-size: 10px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .15em;

   color: #b8a7ff;

}



.daicmd-head__tag span {

   color: #995aed;

}



.daicmd-head__title {

   margin: 0 !important;

   font-size:

      clamp(40px, 4.8vw, 56px) !important;

   line-height: 1.03 !important;

   font-weight: 900 !important;

   letter-spacing:

      -.045em !important;

   color: #ffffff !important;

}



.daicmd-head__title span {

   display: block;

   margin-top: 5px;

   color: transparent !important;

   background:

      linear-gradient(

         90deg,

         #a655ef,

         #7e57eb 40%,

         #6063e9 68%,

         #4879ed

      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}



.daicmd-head__line {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 4px;

   margin: 20px 0 16px;

}



.daicmd-head__line i {

   display: block;

   height: 3px;

   border-radius: 20px;

}



.daicmd-head__line i:nth-child(1) {

   width: 45px;

   background: #9850ea;

}



.daicmd-head__line i:nth-child(2) {

   width: 28px;

   background: #695be8;

}



.daicmd-head__line i:nth-child(3) {

   width: 14px;

   background: #497aed;

}



.daicmd-head__sub {

margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  color: #fff !important;

}



/* =========================================================

   MAIN SHELL

========================================================= */

.daicmd-shell {

position: relative;

  max-width: 1280px;

  margin: 0 auto;

  min-height: 541px;

  isolation: isolate;

}



/* User-provided frame image */

.daicmd-shell__frame {

   position: absolute;

   inset: 0;

   z-index: 0;

   width: 100%;

   height: 100%;

   object-fit: fill;

   pointer-events: none;

}



/* Inner Content */

.daicmd-shell__content {

position: relative;

  z-index: 3;

  padding: 65px 74px 40px;

}



/* =========================================================

   BRAND TAB

========================================================= */

.daicmd-brand {

   position: absolute;

   z-index: 10;

   top: 0;

   left: 50%;

   display: inline-flex;

   align-items: center;

   justify-content: center;

   gap: 9px;

   min-width: 210px;

   padding:

      14px 26px;

   transform:

      translateX(-50%);

   border-radius:

      0 0 18px 18px;

   background:

      linear-gradient(

         100deg,

         #9349df 0%,

         #6759e6 50%,

         #4879eb 100%

      );

   box-shadow:

      0 14px 34px rgba(92,74,216,.32);

   font-size: 18px;

   line-height: 1;

   font-weight: 900;

   color: #ffffff;

}



.daicmd-brand__check {

   display: grid;

   place-items: center;

   width: 20px;

   height: 20px;

   border-radius: 50%;

   background: #ffffff;

   font-size: 11px;

   color: #7058e3;

}



/* =========================================================

   COMMAND BAR

========================================================= */

.daicmd-command {

   display: grid;

   grid-template-columns:

      115px minmax(0,1fr);

   align-items: center;

   gap: 16px;

   max-width: 870px;

margin: 13px auto 13px;

}



.daicmd-command__label {

   text-align: right;

   font-size: 11px;

   line-height: 1.2;

   font-weight: 800;

   letter-spacing: .07em;

   color: #a87af0;

}



.daicmd-command__label strong {

   display: block;

   color: #d3c1ff;

}



.daicmd-command__field {

   display: flex;

   align-items: center;

   min-height: 50px;

   padding:

      5px 6px 5px 19px;

   overflow: hidden;

   border:

      1px solid rgba(153,84,233,.70);

   border-radius: 30px;

   background:

      rgba(13, 8, 29, .82);

   box-shadow:

      inset 0 1px 0 rgba(255,255,255,.05),

      0 10px 30px rgba(0,0,0,.18);

}



.daicmd-command__text {

   flex: 1;

   overflow: hidden;

   padding-right: 12px;

   font-size: 13px;

   line-height: 1;

   color:

      rgba(221,216,235,.65);

   white-space: nowrap;

   text-overflow: ellipsis;

}



.daicmd-command__button {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   gap: 6px;

   flex: 0 0 auto;

   min-height: 38px;

   padding:

      8px 18px;

   border: 0;

   border-radius: 25px;

   background:

      linear-gradient(

         90deg,

         #ab52e9,

         #7958e9,

         #4c79eb

      );

   box-shadow:

      0 7px 18px rgba(116,77,222,.32);

   font-size: 13px;

   line-height: 1;

   font-weight: 800;

   color: #ffffff;

}



/* =========================================================

   VIDEO

========================================================= */

.daicmd-video {

   position: relative;

   overflow: hidden;

   width: 100%;

   aspect-ratio: 16 / 8.6;

   border:

      1px solid rgba(117,88,222,.27);

   border-radius: 14px;

   background: #05070d;

   box-shadow:

      0 24px 60px rgba(0,0,0,.38);

}



.daicmd-video__poster,

.daicmd-video__media {

   position: absolute;

   inset: 0;

   display: block;

   width: 100%;

   height: 100%;

   object-fit: cover;

}



.daicmd-video__poster {

   z-index: 1;

   opacity: 1;

   transition:

      opacity .3s ease;

}



.daicmd-video__media {

   z-index: 2;

   /* opacity: 0;

   background: #05070d; */

   transition:

      opacity .3s ease;

}



.daicmd-video.is-loaded

.daicmd-video__media {

   opacity: 1;

}



.daicmd-video.is-loaded

.daicmd-video__poster {

   opacity: 0;

}



/* =========================================================

   PLAY BUTTON

========================================================= */

.daicmd-video__play {

   position: absolute;

   z-index: 7;

   left: 50%;

   top: 50%;

   display: grid;

   place-items: center;

   width: 68px;

   height: 68px;

   padding-left: 4px;

   transform:

      translate(-50%, -50%);

   border:

      1px solid rgba(255,255,255,.25);

   border-radius: 50%;

   background:

      rgba(7,9,19,.70);

   backdrop-filter: blur(12px);

   box-shadow:

      0 15px 38px rgba(0,0,0,.42);

   font-size: 25px;

   color: #ffffff;

   cursor: pointer;

   transition:

      transform .3s ease,

      background .3s ease,

      opacity .3s ease;

}



.daicmd-video__play:hover {

   transform:

      translate(-50%, -50%)

      scale(1.08);

   background:

      linear-gradient(

         135deg,

         #9750e9,

         #4d79ec

      );

}



.daicmd-video.is-playing

.daicmd-video__play {

   opacity: 0;

   pointer-events: none;

}



/* =========================================================

   VIDEO OUTPUT BADGE

========================================================= */

.daicmd-video__output {

   position: absolute;

   z-index: 6;

   top: 16px;

   left: 16px;

   display: inline-flex;

   align-items: center;

   gap: 7px;

   padding:

      8px 11px;

   border:

      1px solid rgba(255,255,255,.10);

   border-radius: 8px;

   background:

      rgba(5,7,15,.72);

   backdrop-filter: blur(12px);

   font-size: 8px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .12em;

   color: #ffffff;

}



.daicmd-video__output span {

   width: 7px;

   height: 7px;

   border-radius: 50%;

   background: #9a5df0;

   box-shadow:

      0 0 12px #9a5df0;

}



/* =========================================================

   VIDEO LABELS

========================================================= */

.daicmd-video__labels {

   position: absolute;

   z-index: 6;

   left: 14px;

   right: 14px;

   bottom: 14px;

   display: flex;

   align-items: center;

   gap: 7px;

   flex-wrap: wrap;

}



.daicmd-video__labels span {

   display: inline-flex;

   padding:

      6px 9px;

   border:

      1px solid rgba(255,255,255,.10);

   border-radius: 20px;

   background:

      linear-gradient(

         90deg,

         rgba(147,78,232,.90),

         rgba(71,117,232,.88)

      );

   box-shadow:

      0 6px 15px rgba(0,0,0,.20);

   font-size: 7px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .07em;

   color: #ffffff;

}



/* =========================================================

   META

========================================================= */

.daicmd-meta {

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 20px;

   padding:

      20px 5px 0;

}



.daicmd-meta__main small {

   display: block;

   margin-bottom: 5px;

   font-size: 8px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .15em;

   color: #8163e8;

}



.daicmd-meta__main strong {

   display: block;

   font-size: 20px;

   line-height: 1.2;

   font-weight: 900;

   color: #ffffff;

}



.daicmd-meta__features {

   display: flex;

   align-items: center;

   justify-content: flex-end;

   gap: 7px;

   flex-wrap: wrap;

}



.daicmd-meta__features span {

   display: inline-flex;

   padding:

      7px 10px;

   border:

      1px solid rgba(112,82,223,.16);

   border-radius: 30px;

   background:

      rgba(111,82,223,.06);

   font-size: 9px;

   line-height: 1;

   font-weight: 700;

   color: #a9b0c3;

}



/* =========================================================

   BOTTOM GLOW

========================================================= */

.daicmd-shell__glow {

   position: absolute;

   z-index: -1;

   left: 50%;

   bottom: -75px;

   width: 65%;

   height: 100px;

   transform:

      translateX(-50%);

   border-radius: 50%;

   background:

      rgba(91,74,215,.25);

   filter: blur(50px);

}



/* =========================================================

   TABLET

========================================================= */

@media (max-width: 991.98px) {

   .daicmd-section {

      padding:

         75px 0 80px;

   }



   .daicmd-shell__content {

      padding:

         60px 34px 32px;

   }



   .daicmd-command {

      grid-template-columns:

         90px minmax(0,1fr);

   }

}



/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 767.98px) {

   .daicmd-section {

      padding:

         58px 0 65px;

   }



   .daicmd-head {

      margin-bottom:

         40px;

   }



   .daicmd-head__tag {

      padding:

         7px 11px;

      font-size: 8px;

   }



   .daicmd-head__title {

      font-size:

         clamp(33px, 9.5vw, 44px) !important;

   }



   .daicmd-head__sub {

      font-size:

         16px !important;

   }



   .daicmd-shell {

      min-height: 0;

   }



   .daicmd-shell__content {

      padding:

         54px 18px 24px;

   }



   .daicmd-brand {

      min-width:

         165px;

      padding:

         11px 18px;

      font-size:

         14px;

   }



   .daicmd-command {

      grid-template-columns:

         75px minmax(0,1fr);

      gap: 9px;

      margin:

         12px auto 17px;

   }



   .daicmd-command__label {

      font-size:

         8px;

   }



   .daicmd-command__field {

      min-height:

         42px;

      padding-left:

         11px;

   }



   .daicmd-command__text {

      font-size:

         9px;

   }



   .daicmd-command__button {

      min-height:

         32px;

      padding:

         7px 10px;

      font-size:

         9px;

   }



   .daicmd-video__play {

      width:

         54px;

      height:

         54px;

      font-size:

         20px;

   }



   .daicmd-meta {

      display: block;

      text-align: center;

   }



   .daicmd-meta__main {

      margin-bottom:

         13px;

   }



   .daicmd-meta__features {

      justify-content:

         center;

   }

}



/* =========================================================

   SMALL MOBILE

========================================================= */

@media (max-width: 480px) {

   .daicmd-head__tag span {

      display: none;

   }



   .daicmd-head__title {

      font-size:

         30px !important;

   }



   .daicmd-command {

      grid-template-columns:

         1fr;

   }



   .daicmd-command__label {

      text-align:

         left;

   }



   .daicmd-shell__content {

      padding:

         50px 11px 18px;

   }



   .daicmd-video {

      aspect-ratio:

         16 / 10;

   }



   .daicmd-video__output {

      top: 9px;

      left: 9px;

      font-size:

         6px;

   }



   .daicmd-video__labels {

      left: 8px;

      right: 8px;

      bottom: 8px;

   }



   .daicmd-video__labels span {

      padding:

         5px 7px;

      font-size:

         6px;

   }

}

.daicmd-video {

   position: relative;

   width: 100%;

   aspect-ratio: 16 / 9;

   overflow: hidden;

   /* background: #050611; */

   border-radius: 8px;

}



/* =========================================

   VIDEO

========================================= */

.daicmd-video__media {

   position: absolute;

   inset: 0;

   width: 100%;

   height: 100%;

   display: block;

   object-fit: cover;

   z-index: 1;

}



/* =========================================

   TOP OUTPUT BADGE

========================================= */

.daicmd-video__output {

   position: absolute;

   top: 16px;

   left: 16px;

   z-index: 5;

   display: inline-flex;

   align-items: center;

   gap: 7px;

   padding: 7px 11px;

   color: #fff;

   background: rgba(5, 7, 20, 0.78);

   border: 1px solid rgba(121, 82, 255, 0.35);

   backdrop-filter: blur(10px);

   -webkit-backdrop-filter: blur(10px);

   border-radius: 5px;

   font-size: 11px;

   font-weight: 700;

   letter-spacing: 1px;

}



/* Badge dot */

.daicmd-video__output span {

   width: 7px;

   height: 7px;

   flex: 0 0 7px;

   border-radius: 50%;

   background: #725cff;

   box-shadow:

      0 0 0 4px rgba(114, 92, 255, 0.15),

      0 0 12px rgba(114, 92, 255, 0.8);

}



/* =========================================

   BOTTOM LABELS

========================================= */

.daicmd-video__labels {

   position: absolute;

   left: 15px;

   right: 15px;

   bottom: 15px;

   z-index: 5;

   display: flex;

   align-items: center;

   gap: 8px;

   flex-wrap: wrap;

}



.daicmd-video__labels span {

   padding: 6px 10px;

   color: #fff;

   background: rgba(4, 6, 17, 0.82);

   border: 1px solid rgba(255, 255, 255, 0.14);

   backdrop-filter: blur(10px);

   -webkit-backdrop-filter: blur(10px);

   border-radius: 4px;

   font-size: 10px;

   font-weight: 700;

   line-height: 1.2;

   letter-spacing: 0.7px;

}



/* =========================================

   MOBILE

========================================= */

@media (max-width: 767px) {

   .daicmd-video {

      aspect-ratio: 16 / 10;

   }

   .daicmd-video__output {

      top: 10px;

      left: 10px;

      padding: 5px 8px;

      font-size: 9px;

   }

   .daicmd-video__labels {

      left: 10px;

      right: 10px;

      bottom: 10px;

      gap: 5px;

   }

   .daicmd-video__labels span {

      padding: 5px 7px;

      font-size: 8px;

   }

}



/* =========================================================

   DIRECTOR AI - AI AVATAR PORTRAIT SHOWCASE

   Unique Prefix: davatar-

========================================================= */

.davatar-card,

.davatar-card * {

   box-sizing: border-box;

}

.davatar-card {

   position: relative;

   overflow: hidden;

   width: 100%;

   min-height: 560px;

   padding: 22px 20px;



background: url(../images/command-box1.png) no-repeat;

  background-position: center;

  background-size: 100% 100%;

  padding: 44px 60px;

  color: #ffffff;







   color: #ffffff;

}

.davatar-card2 {

   position: relative;

   overflow: hidden;

   width: 100%;

   min-height: 560px;

   padding: 22px 20px;



background: url(../images/command-box2.png) no-repeat;

  background-position: center;

  background-size: 100% 100%;

  padding: 44px 60px;

  color: #ffffff;







   color: #ffffff;

}



/* Decorative dotted pattern */

.davatar-card__dots {

   position: absolute;

   inset: 0;

   opacity: .20;

   pointer-events: none;

   background-image:

      radial-gradient(

         rgba(255,255,255,.35) 1px,

         transparent 1px

      );

   background-size: 18px 18px;

}



/* =========================================================

   PHONE FRAME

========================================================= */

.davatar-phone {

   position: relative;

   z-index: 3;

   max-width: 280px;

   margin: 0 auto;

   padding: 7px;

   border-radius: 30px;

   background:

      linear-gradient(

         145deg,

         #ffffff,

         #e6ddff,

         #ffffff

      );

   box-shadow:

      0 25px 55px rgba(0,0,0,.42),

      0 0 35px rgba(119, 84, 226, .20);

}



.davatar-phone__top {

   display: flex;

   justify-content: center;

   padding:

      3px 0 6px;

}



.davatar-phone__top span {

   width: 55px;

   height: 5px;

   border-radius: 20px;

   background:

      #1b1c25;

}



/* Screen */

.davatar-phone__screen {

   position: relative;

   overflow: hidden;

   width: 100%;

   aspect-ratio: 9 / 16;

   border-radius: 23px;

   background:

      #03050c;

}



/* Poster */

.davatar-video__poster {

   position: absolute;

   inset: 0;

   z-index: 1;

   width: 100%;

   height: 100%;

   object-fit: cover;

   transition:

      opacity .3s ease;

}



/* Video */

.davatar-video {

   /* position: absolute; */

   inset: 0;

   z-index: 2;

   width: 100%;

   height: 100%;

   object-fit: cover;

   /* opacity: 0;

   background: #03050c; */

   transition:

      opacity .3s ease;

}



/* =========================================================

   PLAY BUTTON

========================================================= */

.davatar-play {

   position: absolute;

   z-index: 7;

   left: 50%;

   top: 50%;

   display: grid;

   place-items: center;

   width: 58px;

   height: 58px;

   padding-left: 4px;

   transform:

      translate(-50%, -50%);

   border:

      1px solid rgba(255,255,255,.28);

   border-radius: 50%;

   background:

      rgba(6,8,18,.66);

   backdrop-filter:

      blur(12px);

   box-shadow:

      0 14px 30px rgba(0,0,0,.38);

   font-size: 21px;

   color: #ffffff;

   cursor: pointer;

   transition:

      transform .3s ease,

      background .3s ease,

      opacity .3s ease;

}



.davatar-play:hover {

   transform:

      translate(-50%, -50%)

      scale(1.08);

   background:

      linear-gradient(

         135deg,

         #9950eb,

         #4c79ed

      );

}



/* Video running */

.davatar-phone__screen.is-playing

.davatar-video {

   opacity: 1;

}



.davatar-phone__screen.is-playing

.davatar-video__poster {

   opacity: 0;

}



.davatar-phone__screen.is-playing

.davatar-play {

   opacity: 0;

   pointer-events: none;

}



/* =========================================================

   AI AVATAR LABEL

========================================================= */

.davatar-live {

   position: absolute;

   z-index: 6;

   left: 12px;

   top: 12px;

   display: inline-flex;

   align-items: center;

   gap: 6px;

   padding:

      6px 9px;

   border:

      1px solid rgba(255,255,255,.12);

   border-radius: 20px;

   background:

      rgba(5,7,16,.66);

   backdrop-filter:

      blur(10px);

   font-size: 7px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .10em;

   color: #ffffff;

}



.davatar-live span {

   width: 6px;

   height: 6px;

   border-radius: 50%;

   background:

      #9d5cf0;

   box-shadow:

      0 0 10px #9d5cf0;

}



/* =========================================================

   RIGHT INFO

========================================================= */

.davatar-info {

   position: relative;

   z-index: 3;

   padding:

      20px 8px 20px 18px;

}



.davatar-info__tag {

   margin-bottom: 12px;

   font-size: 8px;

   line-height: 1;

   font-weight: 900;

   letter-spacing: .16em;

   color: #9973ee;

}



.davatar-info h3 {

   margin:

      0 0 14px !important;

   font-size:

      clamp(25px, 2.2vw, 36px) !important;

   line-height:

      1.05 !important;

   font-weight:

      900 !important;

   letter-spacing:

      -.035em !important;

   color:

      #ffffff !important;

}



.davatar-info h3 span {

   color: transparent;

   background:

      linear-gradient(

         90deg,

         #a755ef,

         #6d5ce9,

         #4d79ed

      );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}



.davatar-info__line {

   width: 60px;

   height: 3px;

   margin-bottom: 16px;

   border-radius: 20px;

   background:

      linear-gradient(

         90deg,

         #9950ea,

         #4b79ed

      );

}



.davatar-info p {

   margin: 0 !important;

   font-size: 15px !important;

   line-height: 1.55 !important;

   font-weight: 400 !important;

   color: #b7bdcf !important;

}



/* =========================================================

   STATS

========================================================= */

.davatar-info__stats {

   display: grid;

   grid-template-columns:

      repeat(2, 1fr);

   gap: 8px;

   margin-top: 22px;

}



.davatar-info__stats div {

   padding:

      11px 8px;

   border:

      1px solid rgba(112,82,223,.18);

   border-radius: 10px;

   background:

      rgba(111,82,223,.06);

   text-align: center;

}



.davatar-info__stats strong {

   display: block;

   margin-bottom: 4px;

   font-size: 15px;

   line-height: 1;

   font-weight: 900;

   color: #ffffff;

}



.davatar-info__stats span {

   display: block;

   font-size: 7px;

   line-height: 1;

   font-weight: 800;

   letter-spacing: .07em;

   color: #8f97ae;

}



/* =========================================================

   DECORATIVE ARROW

========================================================= */

.davatar-arrow {

   position: relative;

   display: flex;

   justify-content: flex-end;

   margin-top: 25px;

   font-size: 28px;

   color: #9d6ef1;

}



.davatar-arrow span {

   position: absolute;

   right: 28px;

   top: 14px;

   width: 70px;

   border-top:

      1px dashed rgba(153,100,235,.55);

   transform:

      rotate(-18deg);

}



/* =========================================================

   TABLET / MOBILE

========================================================= */

@media (max-width: 991.98px) {

   .davatar-card {

      min-height: auto;

   }

   .davatar-phone {

      max-width: 250px;

   }

   .davatar-info {

      padding-left: 10px;

   }

}



@media (max-width: 767.98px) {

   .davatar-card {

      max-width: 520px;

      margin: 0 auto;

      padding:

         18px 14px;

   }

   .davatar-phone {

      max-width: 230px;

   }

   .davatar-info h3 {

      font-size:

         25px !important;

   }

   .davatar-info p {

      font-size:

         13px !important;

   }

}



@media (max-width: 480px) {

   .davatar-card > .row {

      align-items: center;

   }

   .davatar-phone {

      max-width: 185px;

   }

   .davatar-info {

      padding:

         12px 2px 12px 8px;

   }

   .davatar-info h3 {

      font-size:

         20px !important;

   }

   .davatar-info p {

      font-size:

         11px !important;

   }

   .davatar-info__stats {

      grid-template-columns: 1fr;

      margin-top: 13px;

   }

   .davatar-arrow {

      display: none;

   }

}

.davatar-phone__screen {

   position: relative;

   width: 100%;

   aspect-ratio: 9 / 16;

   overflow: hidden;

   background: #050712;

}

.davatar-video {

   position: absolute;

   inset: 0;

   width: 100%;

   height: 100%;

   object-fit: cover;

   display: block;

   z-index: 1;

}

/* Label video ke upar rahega */

.davatar-live {

   position: absolute;

   top: 15px;

   left: 15px;

   z-index: 5;

}

/* ==========================================

   AVATAR CARD - CONTENT LEFT / VIDEO RIGHT

========================================== */

.davatar-card2 {

   position: relative;

   height: 100%;

}



/* LEFT CONTENT */

.davatar-info--left {

   position: relative;

   z-index: 5;

   padding: 20px 18px 20px 5px;

   text-align: left;

}



.davatar-info--left .davatar-info__tag {

   margin-bottom: 10px;

}



.davatar-info--left h3 {

   margin: 0 0 14px;

   font-size: clamp(25px, 2.2vw, 38px);

   font-weight: 900;

   line-height: 1.02;

   color: #ffffff;

}



.davatar-info--left h3 span {

   color: transparent;

   background: linear-gradient(

      90deg,

      #a94df0 0%,

      #7958ed 48%,

      #4d7df0 100%

   );

   -webkit-background-clip: text;

   background-clip: text;

   -webkit-text-fill-color: transparent;

}



.davatar-info--left p {

   margin: 0;

   font-size: 14px;

   line-height: 1.55;

   color: rgba(255, 255, 255, 0.72);

}



/* LINE */

.davatar-info--left .davatar-info__line {

   width: 42px;

   height: 3px;

   margin: 0 0 16px;

   border-radius: 20px;

   background: linear-gradient(

      90deg,

      #a64cf0,

      #4f7df1

   );

}



/* ==========================================

   VIDEO RIGHT

========================================== */

.davatar-phone {

   position: relative;

   width: 100%;

   max-width: 270px;

   margin-left: auto;

   margin-right: 0;

}



.davatar-phone__screen {

   position: relative;

   width: 100%;

   aspect-ratio: 9 / 16;

   overflow: hidden;

   background: #03040a;

   border-radius: 22px;

}



.davatar-video {

   position: absolute;

   inset: 0;

   width: 100%;

   height: 100%;

   display: block;

   object-fit: cover;

}



/* ==========================================

   STATS

========================================== */

.davatar-info--left .davatar-info__stats {

   display: grid;

   grid-template-columns: repeat(2, 1fr);

   gap: 7px;

   margin-top: 20px;

}



.davatar-info--left .davatar-info__stats > div {

   min-width: 0;

   padding: 10px 5px;

   text-align: center;

   border: 1px solid rgba(121, 91, 235, 0.22);

   border-radius: 8px;

   background: rgba(255, 255, 255, 0.025);

}



.davatar-info--left .davatar-info__stats strong {

   display: block;

   color: #ffffff;

   font-size: 15px;

   line-height: 1.1;

}



.davatar-info--left .davatar-info__stats span {

   display: block;

   margin-top: 4px;

   color: rgba(255, 255, 255, 0.55);

   font-size: 8px;

   line-height: 1.2;

}



/* ==========================================

   ARROW

========================================== */

.davatar-info--left .davatar-arrow {

   margin-top: 22px;

}



/* ==========================================

   RESPONSIVE

========================================== */

@media (max-width: 991px) {

   .davatar-info--left {

      padding-right: 12px;

   }

   .davatar-info--left h3 {

      font-size: 25px;

   }

   .davatar-info--left p {

      font-size: 13px;

   }

   .davatar-phone {

      max-width: 230px;

   }

}



@media (max-width: 767px) {

   .davatar-info--left {

      padding:

         15px 12px

         15px 2px;

   }

   .davatar-info--left h3 {

      font-size: 23px;

   }

   .davatar-info--left p {

      font-size: 12px;

      line-height: 1.45;

   }

   .davatar-phone {

      max-width: 210px;

   }

}



/* Small mobile */

@media (max-width: 480px) {

   .davatar-card2 .col-5,

   .davatar-card2 .col-7 {

      width: 100%;

   }

   /* Video first on small mobile */

   .davatar-card2 .col-7 {

      order: 1 !important;

   }

   .davatar-card2 .col-5 {

      order: 2 !important;

   }

   .davatar-phone {

      max-width: 245px;

      margin: 0 auto;

   }

   .davatar-info--left {

      max-width: 330px;

      margin: 25px auto 0;

      padding: 0 5px;

      text-align: center;

   }

   .davatar-info--left .davatar-info__line {

      margin-left: auto;

      margin-right: auto;

   }

   .davatar-info--left h3 {

      font-size: 30px;

   }

   .davatar-info--left p {

      font-size: 14px;

   }

}


/* =========================================================
   VIDEO HOVER / TOUCH INTERACTION
   Desktop:
   - Hover landscape video => play
   - Hover phone video => play
   - Mouse leave => pause

   Touch devices:
   - Tap/click => play/pause
========================================================= */

.daicmd-video,
.davatar-phone__screen {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
}

.daicmd-video__media,
.davatar-video {
   pointer-events: none;
}

/* Optional subtle active feedback */
.daicmd-video.is-playing,
.davatar-phone__screen.is-playing {
   cursor: pointer;
}

/* Avoid sticky hover behavior on touch devices */
@media (hover: none), (pointer: coarse) {
   .daicmd-video,
   .davatar-phone__screen {
      touch-action: manipulation;
   }
}




/* second section */

/* =========================================================
   DIRECTOR AI — VIDEO TYPE SHOWCASE
   Prefix: dshow26-
========================================================= */

.dshow26-section {
   position: relative;
   overflow: hidden;
   padding: 70px 0;

   background:
      radial-gradient(circle at 82% 20%, rgba(206, 190, 148, .18), transparent 28%),
      linear-gradient(120deg, #f2f0eb 0%, #e8e6df 100%);

   color: #141414;
   font-size: 18px;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.dshow26-shell {
   position: relative;
}


/* =========================================================
   LEFT VERTICAL VIDEO
========================================================= */

.dshow26-main-video {
   position: relative;
   width: 100%;
   max-width: 350px;
   aspect-ratio: 9 / 16;
   margin: 0 auto;
   overflow: hidden;
   background: #111;

   box-shadow: 0 20px 40px rgba(0, 0, 0, .15);

   transform: rotate(-3deg);

   transition:
      transform .35s ease,
      box-shadow .35s ease;
}

.dshow26-main-video:hover {
   /* transform: rotate(0deg) translateY(-4px); */

   box-shadow:
      0 28px 55px rgba(0, 0, 0, .20);
}


/* =========================================================
   VIDEO
========================================================= */

.dshow26-video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* =========================================================
   PHONE WRAPPER
========================================================= */

.dshow26-phone-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
}


/* =========================================================
   PHONE
========================================================= */

.dshow26-phone {
position: relative;
  width: min(290px, 100%);
  aspect-ratio: 9 / 18.5;
  padding: 6px;
  overflow: hidden;
  border: 3px solid #151515;
  border-radius: 42px;
  background: #151515;
  box-shadow: 0 0 0 2px #bb7a17, 0 24px 45px rgba(0, 0, 0, .18);
  transition: transform .35s ease, box-shadow .35s ease;
  transform: rotate(4deg);
  left: -20px;
}

.dshow26-phone:hover {
   /* transform: translateY(-5px); */

   box-shadow:
      0 0 0 2px #c88b27,
      0 30px 60px rgba(0, 0, 0, .22);
}


/* Dynamic island */

.dshow26-phone__island {
   position: absolute;

   top: 14px;
   left: 50%;
   z-index: 6;

   width: 74px;
   height: 22px;

   transform: translateX(-50%);

   border-radius: 100px;

   background: #050505;

   pointer-events: none;
}


/* Phone screen */

.dshow26-phone__screen {
   position: relative;

   width: 100%;
   height: 100%;

   overflow: hidden;

   border-radius: 32px;

   background: #111;
}


/* =========================================================
   PLAY BUTTON

   DEFAULT = DESKTOP HIDDEN
========================================================= */

.dshow26-play {
   position: absolute;

   top: 50%;
   left: 50%;
   z-index: 10;

   display: none;

   align-items: center;
   justify-content: center;

   width: 64px;
   height: 64px;

   padding: 0;

   transform: translate(-50%, -50%);

   border: 1px solid rgba(255, 255, 255, .55);
   border-radius: 50%;

   background: rgba(0, 0, 0, .50);

   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);

   color: #fff;

   cursor: pointer;

   transition:
      opacity .25s ease,
      transform .25s ease,
      background .25s ease;
}

.dshow26-play span {
   margin-left: 4px;
   font-size: 20px;
}

.dshow26-play:hover {
   background: rgba(0, 0, 0, .75);

   transform:
      translate(-50%, -50%)
      scale(1.06);
}


/* Playing state */

.dshow26-video-trigger.is-playing .dshow26-play {
   opacity: 0;
   pointer-events: none;
}


/* =========================================================
   RIGHT COPY
========================================================= */

.dshow26-copy {
   max-width: 380px;
}

.dshow26-copy__kicker {
   display: block;

   margin-bottom: 15px;

   color: #9c6d24;

   font-size: 11px;
   line-height: 1;
   font-weight: 900;

   letter-spacing: 1.8px;
}

.dshow26-copy h3 {
   margin: 0 0 22px;

   color: #111;

   font-size: clamp(42px, 4.4vw, 70px);
   line-height: .95;
   font-weight: 950;

   letter-spacing: -3px;

   text-transform: uppercase;
}

.dshow26-copy h3 span {
   display: block;
}

.dshow26-copy p {
   max-width: 340px;

   margin: 0;

   color: #272727;

   font-size: 18px;
   line-height: 1.45;
   font-weight: 700;

   text-transform: uppercase;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

   .dshow26-section {
      padding: 60px 0;
   }

   .dshow26-main-video {
      max-width: 320px;
   }

   .dshow26-phone {
      width: 260px;
   }

   .dshow26-copy {
      max-width: 100%;
      margin-top: 20px;
      text-align: center;
   }

   .dshow26-copy p {
      max-width: 650px;
      margin: 0 auto;
   }
}


/* =========================================================
   MOBILE
   Only phone video visible
========================================================= */

@media (max-width: 767.98px) {

   .dshow26-section {
      padding: 45px 0;
   }


   /* -----------------------------------------
      Hide complete large video column
   ----------------------------------------- */

   .dshow26-main-video {
      display: block !important;
   }


   /*
      Because your phone is currently inside:
      col-12 col-md-4 col-lg-4

      make its mobile width clean
   */

   .dshow26-phone-wrap {
      width: 100%;
      justify-content: center;
   }

   .dshow26-phone {
      width: min(290px, 82vw);
      margin: 0 auto;
   }


   /* -----------------------------------------
      Play button visible ONLY on mobile
   ----------------------------------------- */

   .dshow26-phone .dshow26-play {
      display: flex;
   }


   /* Hide button when video is playing */

   .dshow26-phone.is-playing .dshow26-play {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }


   .dshow26-copy {
      margin-top: 30px;
   }

   .dshow26-copy h3 {
      font-size: 44px;
      line-height: .98;
      letter-spacing: -2px;
   }

   .dshow26-copy p {
      max-width: 520px;
      font-size: 16px;
      line-height: 1.5;
   }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

   .dshow26-phone {
      width: min(265px, 84vw);
   }

   .dshow26-copy h3 {
      font-size: 39px;
   }

   .dshow26-play {
      width: 60px;
      height: 60px;
   }
}
/* Prevent video rendering flashes */
.dshow26-video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   background: #111;
}


/* Phone screen must never appear white */
.dshow26-phone__screen {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 32px;
   background: #111;
   transform: translateZ(0);
}


/* GPU rendering fix */
.dshow26-phone__screen .dshow26-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: translateZ(0);
   backface-visibility: hidden;
}


/* =========================================================
   ALL VIDEO FORMAT MASTER SECTION
========================================================= */

.dshow26-master {
   position: relative;
   overflow: hidden;
   padding: 85px 0 0px;
/* background: radial-gradient( circle at 7% 12%, rgba(143, 65, 220, .20), transparent 27% ), radial-gradient( circle at 92% 70%, rgba(68, 112, 230, .16), transparent 29% ), linear-gradient( 180deg, #03040c 0%, #070817 50%, #020309 100% ); */

              background:  url(../images/daicmd-section2.png) no-repeat center top / cover;

}


/* =========================================================
   MAIN HEADING
========================================================= */

.dshow26-master-head {
   position: relative;
   z-index: 2;

   max-width: 900px;
   margin: 0 auto 55px;
}


.dshow26-master-head__kicker {
   display: inline-block;

   margin-bottom: 16px;
   padding: 7px 11px;

   border: 1px solid rgba(161, 108, 28, .22);

   background: rgba(255, 255, 255, .65);

   color: #a16c1c;

   font-size: 10px;
   line-height: 1;
   font-weight: 900;

   letter-spacing: 1.6px;
}


.dshow26-master-head h2 {
   margin: 0;

   color: #111;

   font-size: clamp(42px, 5vw, 70px);
   line-height: .98;
   font-weight: 950;

   letter-spacing: -3.5px;
}


.dshow26-master-head h2 span {
   display: block;
   color: #af751f;
}


.dshow26-master-head p {
   max-width: 650px;

   margin: 20px auto 0;

   color: #68645e;

   font-size: 17px;
   line-height: 1.6;
}


/* =========================================================
   IMPORTANT
   Section background comes from master now
========================================================= */

.dshow26-master .dshow26-section {
   overflow: visible;

  padding: 40px 40px;
margin-top: 30px;
   background: transparent;
}


/* Separator */

.dshow26-master .dshow26-section + .dshow26-section {
   /* border-top: 1px solid rgba(20, 20, 20, .08); */
}


/* =========================================================
   VIDEO AREA

   Bootstrap controls columns.
   CSS only handles visual alignment.
========================================================= */

.dshow26-video-area {
   position: relative;
   width: 100%;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.dshow26-copy__num {
   display: block;

   margin-bottom: 18px;

   color: rgba(164, 111, 32, .17);

   font-size: 70px;
   line-height: .7;
   font-weight: 950;

   letter-spacing: -5px;
}


/* =========================================================
   CONTENT
========================================================= */

.dshow26-master .dshow26-copy {
   position: relative;

   max-width: 390px;
}


.dshow26-master .dshow26-copy h3 {
  font-size: clamp(40px, 4vw, 46px);
}


.dshow26-master .dshow26-copy p {
   max-width: 380px;

   color: #4e4b46;

   font-size: 17px;
   line-height: 1.55;

   text-transform: none;
}


/* =========================================================
   LARGE VIDEO
========================================================= */

.dshow26-master .dshow26-main-video {
   max-width: 345px;
}


/* =========================================================
   PHONE
========================================================= */

.dshow26-master .dshow26-phone {
   width: min(255px, 100%);
}


/* =========================================================
   DESKTOP ALIGNMENT
========================================================= */

@media (min-width: 768px) {

   /*
      On reversed rows content sits toward video,
      rather than hugging far left edge.
   */

   .dshow26-section
   .order-md-1
   .dshow26-copy {
      margin-left: auto;
      margin-right: auto;
   }

}


/* =========================================================
   TABLET
   THIS IS THE IMPORTANT FIX
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

   /*
      Keep 8 / 4 Bootstrap columns even on tablet.
      They will NOT stack anymore.
   */

   .dshow26-master .dshow26-section {
      padding: 55px 0;
   }


   .dshow26-master .dshow26-main-video {
      max-width: 250px;
   }


   .dshow26-master .dshow26-phone {
      width: 185px;
      border-radius: 34px;
   }


   .dshow26-master .dshow26-phone__screen {
      border-radius: 25px;
   }


   .dshow26-master .dshow26-phone__island {
      top: 11px;

      width: 55px;
      height: 17px;
   }


   .dshow26-master .dshow26-copy {
      margin-top: 0;

      text-align: left;
   }


   .dshow26-master .dshow26-copy__num {
      font-size: 52px;
   }


   .dshow26-master .dshow26-copy h3 {
      margin-bottom: 17px;

      font-size: clamp(31px, 4vw, 45px);
      line-height: .96;

      letter-spacing: -2px;
   }


   .dshow26-master .dshow26-copy p {
      font-size: 14px;
      line-height: 1.5;
   }


   .dshow26-master .dshow26-copy__kicker {
      font-size: 9px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

   .dshow26-master {
    padding: 15px 0 0px;
   }


   .dshow26-master-head {
      margin-bottom: 15px;

      text-align: center;
   }


   .dshow26-master-head h2 {
      font-size: 39px;

      letter-spacing: -2px;
   }


   .dshow26-master-head p {
      font-size: 16px;
   }


   .dshow26-master .dshow26-section {
      padding: 52px 0;
   }


   /*
      LARGE VIDEO HIDDEN
      Only phone visible on mobile
   */

   .dshow26-master .dshow26-main-video {
      display: none !important;
   }


   /*
      Since first nested Bootstrap column is hidden,
      phone will remain centered.
   */

   .dshow26-master .dshow26-video-area {
      justify-content: center !important;
   }


   .dshow26-master .dshow26-phone-wrap {
      justify-content: center;
   }


   .dshow26-master .dshow26-phone {
      width: min(255px, 78vw);
   }


   /*
      Mobile only play button
   */

   .dshow26-master .dshow26-phone .dshow26-play {
      display: flex;
   }


   .dshow26-master
   .dshow26-phone.is-playing
   .dshow26-play {
      opacity: 0;

      visibility: hidden;
      pointer-events: none;
   }


   /*
      Content comes under phone
   */

   .dshow26-master .dshow26-copy {
      max-width: 500px;

      margin: 25px auto 0;

      text-align: center;
   }


   .dshow26-master .dshow26-copy__num {
      margin-bottom: 18px;

      font-size: 55px;
   }


   .dshow26-master .dshow26-copy h3 {
      font-size: 40px;
      line-height: .96;

      letter-spacing: -2px;
   }


   .dshow26-master .dshow26-copy p {
      margin: 0 auto;

      font-size: 16px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .dshow26-master-head h2 {
      font-size: 34px;
   }


   .dshow26-master .dshow26-phone {
      width: min(235px, 76vw);
   }


   .dshow26-master .dshow26-copy h3 {
      font-size: 36px;
   }

}

/* =========================================================
   MOBILE — SHOW BOTH VIDEOS
========================================================= */

@media (max-width: 767.98px) {

   /* Large video visible */
   .dshow26-main-video,
   .dshow26-master .dshow26-main-video {
 display: block !important;
    width: min(300px, 60vw);
    max-width: 300px;
    margin: 0 auto 0;
    left: 14px;
   }


   /* Both video columns stack cleanly */
   .dshow26-video-area {
      display: flex;
      justify-content: center !important;
      align-items: center;
      row-gap: 30px;
   }


   .dshow26-video-area > [class*="col-"] {
      width: 100%;
      flex: 0 0 100%;
      max-width: 100%;
   }


   /* Phone */
   .dshow26-phone-wrap,
   .dshow26-master .dshow26-phone-wrap {
      width: 100%;
      justify-content: center;
   }


   .dshow26-phone,
   .dshow26-master .dshow26-phone {
width: min(255px, 60vw);
      margin: 0 auto;
      left: 0;
      left: 14px;
   }


   /* Remove rotation a little on mobile */
   .dshow26-main-video,
   .dshow26-phone,
   .trigger-m1,
   .trigger-m2 {
      transform: rotate(0deg) !important;
   }


   /* Play button on BOTH mobile videos */
   .dshow26-main-video .dshow26-play,
   .dshow26-phone .dshow26-play {
      display: flex;
   }


   /* Hide play icon while playing */
   .dshow26-video-trigger.is-playing .dshow26-play {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }
   .dshow26-main-video .dshow26-video-trigger{
left: 12px;
   }

}




.vid-card1{
background: linear-gradient( 90deg, #fff 0%, #fff 45%, #feceec 100% ) !important;
border-radius: 30px;
padding: 40px 30px;
background-position: center;
  background-size: cover;
  border: 1px solid #fed2ed;
  box-shadow: 0 10px 15px -3px rgba(15, 16, 32, 0.08), 0 4px 6px -4px rgba(15, 16, 32, 0.05);
}
.vid-card2{
background: linear-gradient( 90deg, #b6f7fe 0%, #fff 45%, #fff 100% ) !important;
  border-radius: 30px;
  padding: 40px 30px;
  background-position: center;
  background-size: cover;
  border: 1px solid #aae7fc;
  box-shadow: 0 10px 15px -3px rgba(15, 16, 32, 0.08), 0 4px 6px -4px rgba(15, 16, 32, 0.05);

}
.vid-card3{
background: linear-gradient( 90deg, #fff 0%, #fff 45%, #f9e3db 100% ) !important;
  border-radius: 30px;
  padding: 40px 30px;
  background-position: center;
  background-size: cover;
  border: 1px solid #f9dcda;
  box-shadow: 0 10px 15px -3px rgba(15, 16, 32, 0.08), 0 4px 6px -4px rgba(15, 16, 32, 0.05);
}
.vid-card4{

}

.trigger-m1{
transform: rotate(-3deg) !important;
}
.phone2{
   position: relative;
left: 20px;
}
.trigger-m2{
transform: rotate(4deg) !important; 
}

/* third section */
.dxfac26-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #050505;
}

/* =========================================================
   DIRECTOR AI — VIDEO SHOWCASE
========================================================= */

.dshow26,
.dshow26 * {
    box-sizing: border-box;
}

.dshow26 {
    position: relative;
    overflow: hidden;

    padding: 100px 0 0px 0;

    background:
        radial-gradient(
            circle at 90% 6%,
            rgba(114, 72, 247, 0.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 8% 55%,
            rgba(70, 110, 240, 0.045),
            transparent 24%
        ),
        #ffffff;

    color: #15121c;

    font-family:
        "Inter",
        Arial,
        sans-serif;
}


/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

.dshow26::before {
    position: absolute;
    inset: 0;

    content: "";

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(40, 30, 65, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40, 30, 65, 0.022) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    opacity: 0.7;
}


/* =========================================================
   HEADER
========================================================= */

.dshow26__header {
    position: relative;
    z-index: 2;

    margin-bottom: 62px;
}

.dshow26__eyebrow {
    display: inline-flex;

    margin-bottom: 16px;
    padding: 8px 13px;

    border: 1px solid rgba(113, 71, 247, 0.15);
    border-radius: 100px;

    background: rgba(113, 71, 247, 0.06);
    color: #6840db;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.3px;
}

.dshow26__title {
    max-width: 930px;
    margin: 0 auto;

    color: #15121b;

    font-size: clamp(38px, 4vw, 54px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -2.4px;
}

.dshow26__title span {
    display: block;

    color: #7147f7;
}


/* =========================================================
   STUDIO
========================================================= */

.dshow26__studio {
    position: relative;
    z-index: 2;

    margin-bottom: 28px;
    padding: 28px;

    overflow: hidden;

    border: 1px solid #e8e5f0;
    border-radius: 18px;

    background:
        linear-gradient(
            130deg,
            #ffffff,
            #fbfaff
        );

    box-shadow:
        0 18px 55px rgba(42, 31, 70, 0.065);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.dshow26__studio:hover {
    border-color:
        rgba(113, 71, 247, 0.22);

    box-shadow:
        0 25px 70px rgba(42, 31, 70, 0.1);
}


/* Premium top line */
.dshow26__studio::before {
    position: absolute;
    top: 0;
    left: 30px;

    width: 140px;
    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            #7047f7,
            #5e82f6,
            transparent
        );
}


/* =========================================================
   STUDIO INFO
========================================================= */

.dshow26__info {
    position: relative;

    padding: 7px 10px;
}

.dshow26__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 17px;

    border: 1px solid rgba(113, 71, 247, 0.15);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #f5f1ff,
            #ece7ff
        );

    color: #7147f7;

    font-size: 22px;
}

.dshow26__number {
    position: absolute;
    top: 7px;
    right: 8px;

    color: rgba(100, 74, 146, 0.27);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dshow26__studio-title {
    margin: 0 0 10px;

    color: #1c1823;

    font-size: 26px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.dshow26__accent {
    display: block;

    width: 30px;
    height: 2px;

    margin-bottom: 16px;

    background: #7147f7;
}

.dshow26__studio-copy {
    margin: 0;

    color: #69636f;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   VIDEO RAIL
========================================================= */

.dshow26__rail {
    position: relative;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;
}

.dshow26__rail::-webkit-scrollbar {
    display: none;
}


/* Fade left/right edges */
.dshow26__rail::before,
.dshow26__rail::after {
    position: sticky;
    z-index: 10;
    top: 0;

    width: 18px;
    height: 100%;

    content: "";

    pointer-events: none;
}

.dshow26__track {
    display: flex;
    align-items: stretch;
    gap: 11px;

    width: max-content;

    padding: 3px;
}


/* =========================================================
   PORTRAIT CARD
========================================================= */

.dshow26__card {
    position: relative;

    flex: 0 0 185px;

    width: 185px;
    aspect-ratio: 9 / 16;

    padding: 0;

    overflow: hidden;

border: 2px solid rgb(204, 179, 255);
  border-radius: 11px;
  background: #fdfcff;
  box-shadow: 0 12px 26px rgb(248, 248, 248);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}


/* =========================================================
   VIDEO
========================================================= */

.dshow26__video {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #100d16;

    transition:
        transform 0.5s ease,
        filter 0.35s ease;
}


/* =========================================================
   CARD OVERLAY
========================================================= */

.dshow26__shade {
    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(9, 6, 14, 0.22)
        );

    transition:
        opacity 0.3s ease;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.dshow26__play {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    transform:
        translate(-50%, -50%);

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;

    background:
        rgba(12, 9, 18, 0.59);

    backdrop-filter: blur(8px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.3);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
}

.dshow26__play i {
    display: block;

    width: 0;
    height: 0;

    margin-left: 4px;

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #ffffff;
}


/* =========================================================
   PLAYING STATE
========================================================= */

.dshow26__card.is-playing {
    border-color:
        rgba(113, 71, 247, 0.5);

    box-shadow:
        0 17px 38px rgba(67, 39, 132, 0.22);
}

.dshow26__card.is-playing .dshow26__play {
    opacity: 0;
    transform:
        translate(-50%, -50%)
        scale(0.86);

    pointer-events: none;
}

.dshow26__card.is-playing .dshow26__shade {
    opacity: 0;
}


/* =========================================================
   DESKTOP / MOUSE HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .dshow26__card:hover {
        z-index: 3;

        /* transform:
            translateY(-6px)
            scale(1.018); */

        border-color:
            rgba(113, 71, 247, 0.42);

        box-shadow:
            0 22px 45px rgba(35, 25, 53, 0.21);
    }

    .dshow26__card:hover .dshow26__video {
        /* transform: scale(1.035); */
    }

    .dshow26__card:hover .dshow26__play {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        background:
            rgba(113, 71, 247, 0.9);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .dshow26__card {
        flex-basis: 170px;

        width: 170px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .dshow26 {
        padding: 75px 0 0px;
    }

    .dshow26__header {
        margin-bottom: 45px;
    }

    .dshow26__studio {
        padding: 23px;
    }

    .dshow26__info {
        padding: 0;
    }

    .dshow26__icon {
        margin-bottom: 12px;
    }

}


/* =========================================================
   MOBILE / TOUCH
========================================================= */

@media (max-width: 767.98px) {

    .dshow26 {
        padding: 58px 0 0px;
    }

    .dshow26__header {
        margin-bottom: 38px;
    }

    .dshow26__title {
        font-size: 34px;
        line-height: 1.15;
        letter-spacing: -1.4px;
    }

    .dshow26__studio {
        margin-bottom: 19px;
        padding: 17px;

        border-radius: 14px;
    }


    /* Horizontal info row */
    .dshow26__info {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        align-items: center;
    }

    .dshow26__icon {
        grid-row: 1 / 4;

        width: 44px;
        height: 44px;

        margin: 0;

        border-radius: 11px;

        font-size: 19px;
    }

    .dshow26__number {
        display: none;
    }

    .dshow26__studio-title {
        margin: 0 0 3px;

        font-size: 23px;
    }

    .dshow26__accent {
        display: none;
    }

    .dshow26__studio-copy {
        font-size: 17px;
        line-height: 1.45;
    }


    /* Portrait videos */
    .dshow26__card {
        flex-basis: 145px;

        width: 145px;

        border-radius: 9px;
    }

    .dshow26__track {
        gap: 8px;
    }

    .dshow26__play {
        width: 42px;
        height: 42px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .dshow26__title {
        font-size: 30px;
    }

    .dshow26__studio {
        padding: 14px;
    }

    .dshow26__studio-title {
        font-size: 21px;
    }

    .dshow26__studio-copy {
        font-size: 16px;
    }

    .dshow26__card {
        flex-basis: 132px;

        width: 132px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dshow26 *,
    .dshow26 *::before,
    .dshow26 *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}




/* no more video section*/
/* ==========================================================
   DIRECTOR AI VIDEO SHOWCASE — PREMIUM FIX
========================================================== */

.dai-vfix-sec{
    position:relative;
    padding:80px 0 95px;
    overflow:hidden;

    background-color:#fff;

    background-image:
        linear-gradient(rgba(18,18,25,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,18,25,.055) 1px, transparent 1px);

    background-size:52px 52px;
}


/* ==========================================================
   MAIN HEADING
========================================================== */

.dai-vfix-head{
    position:relative;
    z-index:2;

    max-width:950px;

    margin:0 auto 48px;

    padding:0 20px;

    text-align:center;
}


.dai-vfix-head h2{
    margin:0;

    color:#050505;

    font-size:clamp(38px,4.7vw,64px);
    line-height:1.02;

    font-weight:900;

    letter-spacing:-2.8px;
}


.dai-vfix-head p{
    max-width:700px;

    margin:16px auto 0;

    color:#666572;

    font-size:17px;
    line-height:1.6;
}


/* ==========================================================
   COMMON LEVEL BOX
========================================================== */

.dai-vfix-level{
    position:relative;

  max-width: 1250px;

    margin:0 auto 32px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.35);
    border-radius:18px;

    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-size:cover !important;

    isolation:isolate;

    box-shadow:
        0 22px 55px rgba(20,20,25,.11),
        0 5px 16px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.dai-vfix-level:hover{
    /* transform:translateY(-2px); */

    box-shadow:
        0 28px 70px rgba(20,20,25,.15),
        0 7px 18px rgba(0,0,0,.09);
}


/* dark overlay so all content remains visible */

.dai-vfix-level::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(3,6,15,.06) 0%,
            rgba(3,6,15,.10) 35%,
            rgba(3,6,15,.20) 100%
        );
}


/* ==========================================================
   YOUR ORIGINAL BACKGROUND IMAGES
========================================================== */

.dai-vfix-level1{
    background:
        url("../images/vid-bg1.webp")
        no-repeat center top / cover;
}


.dai-vfix-level2{
    background:
        url("../images/vid-bg2.webp")
        no-repeat center top / cover;
}


.dai-vfix-level3{
    background:
        url("../images/vid-bg3.webp")
        no-repeat center top / cover;
}


.dai-vfix-level4{
    background:
        url("../images/vid-bg4.webp")
        no-repeat center top / cover;
}


/* ==========================================================
   PREMIUM LEVEL BAR
========================================================== */

.dai-vfix-topbar{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:66px;

    border-bottom:1px solid rgba(255,255,255,.14);

    overflow:hidden;
}


/* subtle highlight */

.dai-vfix-topbar::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}


/* LEVEL badge */

.dai-vfix-topbar span{
    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:180px;

    padding:10px 28px;

    border:1px solid rgba(255,255,255,.62);
    border-radius:100px;

    background:rgba(255,255,255,.91);

    color:#08090c;

    font-size:25px;
    line-height:1;

    font-weight:950;

    letter-spacing:-.7px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.12),
        inset 0 1px 0 #fff;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}


/* ==========================================================
   HEADER COLORS MATCHING EACH BACKGROUND
========================================================== */

/* BG 1 = dark olive / black + electric cyan */
.dai-vfix-level1 .dai-vfix-topbar{
    background:
        linear-gradient(
            90deg,
            #06a8ec,
            #28c4ff
        );
}


/* BG 2 = deep blue */
.dai-vfix-level2 .dai-vfix-topbar{
    background:
        linear-gradient(
            90deg,
            #4267e8,
            #6389ff,
            #5ecbff
        );
}


/* BG 3 = deep teal */
.dai-vfix-level3 .dai-vfix-topbar{
    background:
        linear-gradient(
            90deg,
            #15a59f,
            #22c9bd,
            #6ce0cf
        );
}


/* BG 4 = warm brown */
.dai-vfix-level4 .dai-vfix-topbar{
    background:
        linear-gradient(
            90deg,
            #d88b46,
            #f2ad62,
            #ffc982
        );
}


/* ==========================================================
   BRAND AREA
========================================================== */

.dai-vfix-brand{
    position:relative;
    z-index:3;

    padding:25px 20px 18px;

    text-align:center;
}


.dai-vfix-logo{
    display:block;

    width:auto;
    height:auto;

    max-width:325px;
    max-height:78px;

    margin:0 auto 9px;

    object-fit:contain;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.25));
}


/* IMPORTANT — text visible on backgrounds */

.dai-vfix-brand h3{
    margin:4px 0 5px;

    color:#ffffff;

    font-size:20px;
    line-height:1.2;

    font-weight:900;

    letter-spacing:-.25px;

    text-shadow:
        0 2px 12px rgba(0,0,0,.8);
}


.dai-vfix-brand p{
    max-width:650px;

    margin:0 auto;

    color:rgba(255,255,255,.82);

    font-size:13px;
    line-height:1.5;

    font-weight:500;

    text-shadow:
        0 2px 9px rgba(0,0,0,.9);
}


/* ==========================================================
   VIDEO ROW — 5 CARDS
========================================================== */

.dai-vfix-row{
position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px;
  padding: 30px 50px 50px;

  
}


/* ==========================================================
   INDIVIDUAL CARD
========================================================== */

.dai-vfix-card{
    position:relative;

    min-width:0;

    text-align:center;
}


/* ==========================================================
   VIDEO FRAME
========================================================== */

.dai-vfix-video-box{
    position:relative;

    width:100%;

    aspect-ratio:9 / 16;

    padding:5px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.24);
    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 13px 30px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.22);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    cursor:pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* remove previous card background */

.dai-vfix-video-box::before{
    display:none !important;
}


/* border gloss */

.dai-vfix-video-box::after{
    content:"";

    position:absolute;
    inset:4px;

    z-index:5;

    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;

    pointer-events:none;

    background:none;
}


/* ==========================================================
   ACTUAL VIDEO
========================================================== */

.dai-vfix-video{
    position:absolute;

    inset:5px;

    z-index:2;

    width:calc(100% - 10px);
    height:calc(100% - 10px);

    display:block;

    object-fit:cover;
    object-position:center;

    border:none;
    outline:none;

    border-radius:10px;

    background:#080a0e;

    opacity:1;

    visibility:visible;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05);

    transition:
        transform .4s ease,
        filter .3s ease;
}


/* Prevent browser controls */

.dai-vfix-video::-webkit-media-controls,
.dai-vfix-video::-webkit-media-controls-enclosure,
.dai-vfix-video::-webkit-media-controls-panel,
.dai-vfix-video::-webkit-media-controls-play-button,
.dai-vfix-video::-webkit-media-controls-start-playback-button{
    display:none !important;
    -webkit-appearance:none !important;
}


/* ==========================================================
   VIDEO NAME
========================================================== */

.dai-vfix-name{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:calc(100% - 4px);

    min-height:47px;

    margin:9px auto 0;

    padding:7px 6px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;

    background:rgba(0,0,0,.27);

    color:#ffffff;

    font-size:13px;
    line-height:1.2;

    font-weight:800;

    text-align:center;

    text-shadow:
        0 1px 6px rgba(0,0,0,.8);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}


/* ==========================================================
   LEVEL SPECIFIC NAME ACCENTS
========================================================== */

.dai-vfix-level1 .dai-vfix-name{
    border-color:rgba(38,193,255,.35);
}


.dai-vfix-level2 .dai-vfix-name{
    border-color:rgba(112,155,255,.40);
}


.dai-vfix-level3 .dai-vfix-name{
    border-color:rgba(63,222,204,.38);
}


.dai-vfix-level4 .dai-vfix-name{
    border-color:rgba(255,192,118,.35);
}


/* ==========================================================
   HOVER — DESKTOP
========================================================== */

@media (hover:hover) and (pointer:fine){

    .dai-vfix-video-box:hover{
        /* transform:translateY(-6px); */

        border-color:rgba(255,255,255,.55);

        box-shadow:
            0 20px 40px rgba(0,0,0,.38),
            0 0 0 1px rgba(255,255,255,.09),
            inset 0 1px 0 rgba(255,255,255,.26);
    }


    .dai-vfix-video-box:hover .dai-vfix-video{
        /* transform:scale(1.025); */
    }


    .dai-vfix-level1 .dai-vfix-video-box:hover{
        box-shadow:
            0 20px 42px rgba(0,0,0,.38),
            0 0 28px rgba(0,184,255,.16);
    }


    .dai-vfix-level2 .dai-vfix-video-box:hover{
        box-shadow:
            0 20px 42px rgba(0,0,0,.38),
            0 0 28px rgba(80,128,255,.20);
    }


    .dai-vfix-level3 .dai-vfix-video-box:hover{
        box-shadow:
            0 20px 42px rgba(0,0,0,.38),
            0 0 28px rgba(42,209,194,.17);
    }


    .dai-vfix-level4 .dai-vfix-video-box:hover{
        box-shadow:
            0 20px 42px rgba(0,0,0,.38),
            0 0 28px rgba(240,158,80,.18);
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991px){

    .dai-vfix-sec{
        padding:60px 0 72px;
    }


    .dai-vfix-head{
        margin-bottom:36px;
    }


    .dai-vfix-topbar{
        min-height:56px;
    }


    .dai-vfix-topbar span{
        min-width:150px;

        padding:8px 20px;

        font-size:20px;
    }


    .dai-vfix-brand{
        padding:19px 15px 15px;
    }


    .dai-vfix-logo{
        max-width:245px;
        max-height:62px;
    }


    .dai-vfix-brand h3{
        font-size:17px;
    }


    .dai-vfix-brand p{
        font-size:11px;
    }


    .dai-vfix-row{
        gap:9px;

        padding:
            8px
            14px
            22px;
    }


    .dai-vfix-name{
        min-height:42px;

        font-size:10px;

        padding:6px 3px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .dai-vfix-sec{
        padding:48px 0 58px;

        background-size:36px 36px;
    }


    .dai-vfix-head{
        margin-bottom:28px;

        padding:0 12px;
    }


    .dai-vfix-head h2{
        font-size:31px;
        line-height:1.06;

        letter-spacing:-1.4px;
    }


    .dai-vfix-head p{
        margin-top:11px;

        font-size:14px;
    }


    .dai-vfix-level{
        margin-bottom:22px;

        border-radius:13px;
    }


    .dai-vfix-topbar{
        min-height:46px;
    }


    .dai-vfix-topbar span{
        min-width:125px;

        padding:7px 14px;

        font-size:15px;
    }


    .dai-vfix-brand{
        padding:15px 10px 13px;
    }


    .dai-vfix-logo{
        max-width:185px;
        max-height:48px;

        margin-bottom:5px;
    }


    .dai-vfix-brand h3{
        font-size:13px;

        margin-bottom:3px;
    }


    .dai-vfix-brand p{
        max-width:290px;

        font-size:9px;
        line-height:1.4;
    }


    /*
       MOBILE:
       readable horizontal cards instead of
       shrinking all 5 into tiny boxes
    */

    .dai-vfix-row{
        display:flex;

        gap:10px;

        overflow-x:auto;

        padding:
            8px
            12px
            18px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }


    .dai-vfix-row::-webkit-scrollbar{
        display:none;
    }
    .dai-vfix-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

    padding:
            8px
            12px
            18px;
}


    .dai-vfix-card{
        flex:0 0 140px;

        scroll-snap-align:start;
    }


    .dai-vfix-video-box{
        border-radius:13px;

        padding:4px;
    }


    .dai-vfix-video{
        inset:4px;

        width:calc(100% - 8px);
        height:calc(100% - 8px);

        border-radius:9px;
    }


    .dai-vfix-name{
        min-height:40px;

        margin-top:7px;

        padding:6px 4px;

        font-size:10.5px;

        border-radius:8px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .dai-vfix-head h2{
        font-size:27px;
    }


    .dai-vfix-card{
        flex-basis:128px;
    }


    .dai-vfix-logo{
        max-width:165px;
    }


    .dai-vfix-name{
        font-size:9.5px;
    }

    .trigger-m1{
transform: rotate(-0deg) !important;
}
.phone2{
   position: relative;
left: 20px;
}
.trigger-m2{
transform: rotate(0deg) !important; 
}

}