.home-about-us{
    display:flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width:100%;
    background-image:url("/core/media/dimzo_website/background-2.webp");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    overflow:hidden;
}
.about-us-details{
    float:left;
    width:48%;
    height:98%;
    padding:1%;
}

.about-us-details p{
    font-size:22px;
    font-family:"Droid";
    text-align:center;
    width:70%;
    margin:15px auto;
    opacity: 0;
    transition: opacity .3s .25s ease-out;
    will-change: opacity;  
}
.about-us-details p.is-visible{
    opacity: 1;
}
.about-us-details span{
    font-size:22px;
    font-family:"Droid";
    color:purple;
}
.about-us-img{
    float:left;
    width:48%;
    padding:1%;
    height:98%;
    text-align:center;
    
    
    
}
.about-us-img img{
    width:80%;
    height:auto;
    aspect-ratio: attr(width) / attr(height);
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.about-us-img img.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}
.divider,.divider2 {
    display: flex;
    align-items: center;
    text-align: center;
    width: 40%;
    font-size: 26px;
    font-family:"Droid";
    margin:30px auto;
    padding-top: 10%;
    color:#641e5c;
    opacity: 0;
    transition: opacity .3s .25s ease-out;
    will-change: opacity;  
}
.divider2 {
    width: 40%;
    padding-top: 0%;
}
.divider.is-visible,.divider2.is-visible {
    opacity: 1;
}


.divider::after,
.divider::before,
.divider2::after,
.divider2::before {
  content: "";
  border: 2px solid #FDC905;
  flex: 1;
}
.divider:not(:empty)::before,.divider2:not(:empty)::before {
  margin-left: .5em;
}

.divider:not(:empty)::after,.divider2:not(:empty)::after {
  margin-right: .5em;
}

.home-contact-us{
     display:flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width:100%;
    background-image:url("/core/media/dimzo_website/background-4.webp");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center 30%;
    padding:100px 0;
    overflow:hidden;
}
.contact-us-details{
    padding: 6% 0%;
    padding-left:6%;
    width:44%;
  
}
.contact-us-img{
    padding: 1% 0%;
    padding-right:6%;
    width:44%;
    text-align:center;
}
.contact-us-img img{
    width:40%;
    height:auto;
    opacity: 0;
    aspect-ratio: attr(width) / attr(height);
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;  
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.contact-us-img img.is-visible {
  opacity: 1;
  transform: rotateZ(0deg);
}

.form-control{
    padding-top:6%;
}

.contact-us-details form{
    margin:0 auto;
    width:306px;
        opacity: 0;
    transition: opacity .3s .25s ease-out;
    will-change: opacity;  
}
.contact-us-details form.is-visible{
    opacity: 1;

}
.contact-us-details input{
    display:block;
    font-family:"Droid";
    outline:0;
    border:1px solid #641e5c;
    border-radius:15px;
    background:transparent;
    box-shadow: 2px 2px 6px #00000055;
    width:300px;
    height:40px;
}
.contact-us-details input::placeholder,.contact-us-details textarea::placeholder {
    font-family:"Droid";
    padding: 0 10px;
}
.contact-us-details textarea{
    display:block;
    font-family:"Droid";
    background:transparent;
    outline:0;
    border:1px solid #641e5c;
    box-shadow: 2px 2px 6px #00000055;
    border-radius:15px;
    width:300px;
    height:120px;
}


.send-btn {
    display: inline-block;
    width: 306px;
    height:40px;
    background: #FDC905;
    color: #641e5c;
    font-size: 20px;
    font-family: "Droid"!important;
    line-height: 2;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    border:0;
    box-shadow: 2px 2px 6px #00000055;
    margin-top: 10px;
    cursor:pointer;
}
.send-btn { 
    animation-delay: 0.25s; }
    
.home-journey-container{
    width:100%;
    height:49vw;
    position:relative;
    overflow:hidden;
    background:#efeded;

}    
.black-device{
    width: 38%;
    height: 22vw;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #000;
    border-radius: 20px;
    overflow:hidden;
}
#device-wallpaper{
    width: 95%;
    height: 95%;
    position: absolute;
    left: 2.5%;
    border-radius: 20px;
    top: 2.5%;
    opacity: 0;
    aspect-ratio: attr(width) / attr(height);
    transition: opacity .3s .25s ease-out;
    will-change:  opacity;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
#device-wallpaper.is-visible {
opacity: 1;
    
}
#start-journey {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 160px;
    height: 30px;
    background: #FDC905;
    color: #641e5c;
    font-size: 16px;
    font-family: "Droid"!important;
    line-height: 2;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    box-shadow: 4px 4px 10px #00000055;
    outline: 0;
    border: 0;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%,-200%);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;          
}

#start-journey.is-visible {
  opacity: 1;
  transform: translate(-50%,-50%);
}
#start-journey.is-not {
  visibility:hidden;
}
.install-app{
    position:absolute;
    top:50%;
    left:50%;
    width:50%;
    height:70%;
    z-index:5;
    background:#FFF;
    border-radius:8px;
    border: 1px solid #641e5c;
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: opacity .3s .25s ease-out;
    visibility:hidden;          
    will-change:  opacity;          
}
.install-app.show{
    opacity: 1;
    visibility:visible;
   
}
.children-img{
    display:block;
    width:35%;
    height:auto;
    margin:0.5vw auto;
    aspect-ratio: attr(width) / attr(height);
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
.install-app h3{
    display: inline-block;
    color: #641e5c;
    width: 100%;
    font-family: "Droid";
    margin: 0 auto;
    text-align: center;
    font-size:1vw;
}
.install-app-stores{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    margin: 0.8vw auto;
}
.install-app-stores a{
    width:26%;
    height:auto;
    
}
.install-app-stores img{
    width:100%;
    height:auto;
    aspect-ratio: attr(width) / attr(height);
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

#close-btn{
    display: block;
    position: relative;
    width: 30%;
    height: 10%;
    color: #641e5c;
    background: #FDC905;
    font-size: 0.9vw;
    font-family: "Droid"!important;
    line-height: 2;
    text-decoration: none;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 2px 2px 6px #00000055;
    cursor: pointer;
    z-index: 10;
}
    
#truck{
    position: absolute;
    left: 30%;
    top: 67%;
    transform: translate(-50%, -50%);
    width: 18.8vw;
    height: auto;
    opacity: 0;
    aspect-ratio: attr(width) / attr(height);
    transform: translate(-200%,-50%);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;          
}

#truck.is-visible {
  opacity: 1;
  transform: translate(-50%,-50%);
}

#phones{
    position: absolute;
    width: 28vw;
    height: auto;
    z-index: 3;
    right: 20%;
    top: 46%;
    opacity: 0;
    transform: translateX(200%);
    aspect-ratio: attr(width) / attr(height);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;          
}

#phones.is-visible {
  opacity: 1;
  transform: translateX(0%);
}
#bush{
    position: absolute;
    top: 61%;
    width: 15.6vw;
    left: 39%;
    height: auto;
    opacity: 0;
    aspect-ratio: attr(width) / attr(height);
    transition: opacity .3s .25s ease-out;
    will-change:  opacity; 
}
#bush.is-visible {
opacity: 1;
    
}
#slide{
    position: absolute;
    top: 75%;
    left: 37%;
    width: 15.6vw;
    height: auto;
    opacity: 0;
    transform: translateY(20%);
    transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
    will-change: transform, opacity;          
}

#slide.is-visible {
  opacity: 1;
  transform: translateY(0%);
}