#home .home-slog {
    margin-top:72px;
    font-size: 56px;
}

#home .home-sub-slog{
    margin-top:24px
}

#home #home-ai-install-wrap{
    margin-top:53px;
    gap:46px;
}

#home #home-ai-install-wrap #install-wrapper #install {
    gap:18px;
    border-radius:44px;
    padding-left: 36px;
    padding-right:20px;
    height:64px;
    background:linear-gradient(129.23deg,rgba(45,0,255,0.45),rgba(255,0,234,0.45) 100%)
}
#home #home-ai-install-wrap #install-wrapper .install-panel {
  top: 62px;
  left: 0;
  right: 0;
  z-index: 15;
  transform-origin: top;
  opacity: 0;
  transform: scale(0.95) translateY(-0.25rem);
  pointer-events: none;

  transition: 
    opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#home #home-ai-install-wrap #install-wrapper .install-panel_active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

#home #home-ai-install-wrap #install-wrapper .install-panel ul {
    margin-top:10px;
    border-radius:16px;
    box-shadow: 
      rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, 
      rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}
#home #home-ai-install-wrap #install-wrapper .install-panel ul > li {
   padding-inline:12px;
   padding-block:8px;
   cursor:pointer;
   border-bottom:1px solid #7b7ddb;
}
#home #home-ai-install-wrap #install-wrapper .install-panel ul > li:hover {
   background-color:#f6f3f4;
}
#home #home-ai-install-wrap #install-wrapper .install-panel ul > li a {
   display:flex;
   gap:16px;
   align-items:center
}

#home #home-ai-install-wrap #install-wrapper #install .install-btn-text {
    font-size: var( --size-32);
}

#home #home-ai-install-wrap .home-chat-entry {
    gap: 18px;
    border-radius: 44px;
    padding-left: 12px;
    padding-right: 4px;
    padding-block: 8px;
    background: linear-gradient(129.23deg,rgba(45,0,255,0.45),rgba(255,0,234,0.45) 100%)
}

#home #home-ai-install-wrap .home-chat-entry .entry-text {
    font-size:var(--size-32)
}

#home #home-image-first {
    display:flex;
    margin-top: 124px;
}
#home #home-image-first .first-image{
    margin-right: 16px;
    background-color: var(--primary-color);
    height:320px;
    width:300px;
    color:#fff;
}
#home #home-image-first .first-image p{
    color:#fff;
}
#home #home-image-first .two-image{
    margin-right: 8px;
    padding-left: 14px;
    padding-top: 7px;
    background: linear-gradient(134.45deg, rgba(155,120,220,1), rgba(123,125,219,0.75) 49%, rgba(155,120,220,0) 100%) ;
    height:320px;
    width: 396px;
    color:#fff;
}
#home #home-image-first .three-image{
  padding: 26px;
  width: 480px;
  height: 320px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#home #home-image-first .three-image #more > div{
  width:4px;
  height:4px;
  border-radius:50%;
  background-color:#fff
}
#home #home-image-first .three-image #try-now > a{
  width:104px;
  height:36px;
  border:1px solid #fff;
  border-radius: 18px;
  background-color:rgba(255,255,255,0.1);
  backdrop-filter:blur(20px)
}
#home #home-image-first .three-image #try-now > a:hover{
    opacity:50%
}
#home #home-ai-step {
    gap:100px;
    margin-top:82px;
    margin-bottom:300px;
    width:100%
}
#home #home-ai-step .step-1,.step-2,.step-3{
    display: flex;
  gap: 4rem;
  width: 100%;
  justify-content: space-between;
}
#home #home-ai-step .step-1 .text-container{
    align-items:flex-start;
    padding-left:32px;
}
#home #home-ai-step .step-1 .image-container{
    background-color: rgb(234, 233, 255);
    align-items: center;
    border-radius: 2rem;
    max-width: 640px;
    width: 100%;
    height: 480px;
}
#home #home-ai-step .step-1 .image-container img{
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 404px;
  height: 736px;
  width: 100%;
}
#home #home-ai-step .step-2 .image-container{
 background-color: rgb(234, 233, 255);
  align-items:center;
  border-radius: 32px;
  max-width: 640px;
  width: 100%;
  height: 480px;
}
#home #home-ai-step .step-2 .image-container img{
 left: 50%;
  transform: translate(-50%, -50%);
  max-width: 404px;
  height: 736px;
  width: 100%;
}
#home #home-ai-step .step-2 .text-container {
  align-items:flex-start;
  padding-right:32px;
}
#home #home-ai-step .step-2 .text-container p{
    margin-top:8px
}

#home #home-ai-step .step-3 .text-container {
    align-items:flex-start;
    padding-left:24px;
}
#home #home-ai-step .step-3 .text-container p{
    margin-top:8px
}
#home #home-ai-step .step-3 .image-container {
  background-color: rgb(234, 233, 255);
  border-radius: 32px;
  max-width: 640px;
  width: 100%;
  height: 480px;
}
#home #home-ai-step .step-3 .image-container img{
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  max-width: 435px;
  height: 380px;
  width: 100%;
}

footer .footer-sub{
    position:absolute;
    bottom: 20px;
    left:0;
    right: 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px
}

footer .footer-sub a:hover{
    color:var(--primary-color)
}

@media only screen and (max-width: 1224px) {
    #home #home-image-first {
        flex-wrap: wrap;
        justify-content:center;
    }
    #home #home-image-first .three-image{
        margin-top:8px;
    }
}

@media only screen and (max-width: 768px) {

    #home #home-ai-install-wrap #install-wrapper #install {
        display:none;
        height:54px;
        padding-left: 20px;
    }
    #home #home-ai-install-wrap #install-wrapper #install .install-btn-text {
        font-size: var( --size-20);
    }
    #home #home-ai-install-wrap .home-chat-entry {
        justify-content:space-between;
        height: 54px;
    }

    #home #home-ai-install-wrap .home-chat-entry .entry-text {
        font-size:var(--size-20)
    }
    #home #home-image-first {
        margin-top: 24px;
        gap:8px;
    }
    #home #home-image-first .first-image,.two-image{
        margin-right: 0 !important;
        width:100% !important;
    }
    #home #home-image-first .three-image{
        width: 100%;           /* w-full */
        background-size: cover; /* bg-cover */
        margin-top:0
    }
    #home #home-ai-step .step-1, .step-2, .step-3 {
        flex-wrap: wrap;
        justify-content: center;
    }
    #home #home-ai-step .step-2 {
        flex-direction: column-reverse
    }
    #home #home-ai-step .step-1 .text-container {
        align-items: flex-start;
        padding-left: 0;
    }
    #home #home-ai-step .step-1 .text-container h2{
        width:100%;
        text-align:center
    }
    #home #home-ai-step .step-1 .text-container p{
        width:100%;
        text-align:center
    }
    #home #home-ai-step .step-1 .image-container {
        height: 380px;
    }

    #home #home-ai-step .step-1 .image-container img {
        max-width: 300px;
        height: auto;
    }
    #home #home-ai-step .step-2 .image-container {
        height: 380px;
    }
    #home #home-ai-step .step-2 .image-container img{
      max-width: 300px;
      height: auto;
    }
    #home #home-ai-step .step-2 .text-container {
        padding-right: 0;
    }
    #home #home-ai-step .step-2 .text-container h2{
        width:100%;
        text-align:center
    }
    #home #home-ai-step .step-2 .text-container p{
        width:100%;
       text-align:center
    }
    #home #home-ai-step .step-3 .text-container {
        padding-left: 0;
    }
    #home #home-ai-step .step-3 .text-container h2{
        width:100%;
       text-align:center
    }
    #home #home-ai-step .step-3 .text-container p{
        width:100%;
       text-align:center
    }
    #home #home-ai-step .step-3 .image-container img {
        height: auto;
        width:300px
    }
}

@media only screen and (max-width: 648px) {
    #home #home-ai-install-wrap {
        flex-wrap:wrap;
        gap:24px
    }
    #home #home-ai-install-wrap .home-chat-entry {
        width:288px
    }


}