.typewriter h1 {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation: typing 4.5s steps(40, end);
}

.typewriter1 h1 {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation: typing 4.5s steps(40, end);
}



/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}



/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}


#nav-bar {
    /* border:2px solid red; */
    background-color: rgb(250, 250, 250);
    display: flex;
    font-family: sans-serif;
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: 300;
    position: fixed;
    width: 100%;
    z-index: 1;
    font-weight: bolder;



}

#nav-bar a {
    transition: 0.7s;
}

#nav-bar a:hover {
    color: #ff7f7f;
    cursor: pointer;
}

#logo1 {
    width: 10%;

}

#logo-digital {
    width: 100px;

}

.nav-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;


}

.nav-button .dropdown:hover {
    color: #ff7f7f;
}

.nav-button2 {
    display: flex;
    align-items: center;
    width: 15%;


}

#btn-joinnow {
    color: #040706da;
    background-color: rgb(206, 206, 206);
    border-radius: 12px;
    transition: 0.6s;
    border: none;
    


}

.fa-volume-control-phone {
    transition: 0.6s;
    cursor: pointer;
}

.fa-volume-control-phone:hover {
    color: #ff7f7f;

}

#btn-joinnow:hover {
    transform: scale();
    box-shadow: 0px 1px 8px 0.01px rgb(11, 3, 3);
    color: #ffffff;
  
   background-color: rgb(170, 170, 170);

}

/* body */
.section1-item {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* background: rgb(10, 55, 146);
    background: linear-gradient(140deg, rgb(252, 253, 255) 0%, rgba(184, 187, 203, 1) 0%, rgba(105, 192, 205, 0.859) 100%, rgb(54, 125, 183) 100%, rgb(213, 225, 236) 100%, rgb(93, 144, 186) 100%); */
    display: flex;
    background-color: #fbc9afe6;

    justify-content: center;
    /* Centers the content vertically */
    align-items: center;
    /* Centers the content horizontally */
    height: 200px;
    text-align: center;
    flex-direction: column;
    /* Centers text inside the element */
}

.section1-item h1,
.section1-item p {
    margin: 0;
    /* Removes default margin */
}

/* section 2 */
.section2 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #e9e5e5;

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
    text-align: center;
}

/* section 3 */
.section3 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


}

#image-app {
    width: 200px;
}

#image-app {
    transition: 0.6s;
}

#image-app:hover {
    transform: scale(1.3);
    border-radius: 10px;
    box-shadow: 4px 2px 15px 0.1px black;
}

.app {
    /* border: 2px solid red; */
    width: 250px;
    height: 350px;
    transition: 0.6s;


}

.app:hover {
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;
    transform: scale(0.9);

    margin-top: 20px
}

.web-app {
    width: 250px;
    height: 350px;

    transition: 0.6s;


}

.web-app:hover {

    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;
    transform: scale(0.9);

}

#image-app2 {
    width: 235px;
    transition: 0.6s;
    height: 200px;

}

#image-app2:hover {
    transform: scale(1.3);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 10px;
}

.digital-app {

    width: 250px;
    height: 350px;

    transition: 0.6s;


}

.digital-app:hover {
    transform: scale(0.9);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;
}

#image-app3 {
    width: 210px;
    transition: 0.6s;

}

#image-app3:hover {
    transform: scale(1.3);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 10px;
}

.maintain-app {
    width: 250px;
    height: 350px;


    transition: 0.6s;


}

.maintain-app:hover {
    transform: scale(0.9);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;


}

#image-app4 {
    width: 210px;
    text-align: center;
    transition: 0.6s;

}

#image-app4:hover {
    transform: scale(1.3);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 10px;
}

.design-app {
    width: 250px;
    height: 350px;


    transition: 0.6s;


}

.design-app:hover {
    transform: scale(0.9);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;


}

#image-app5 {
    width: 200px;
    transition: 0.6s;

}

#image-app5:hover {
    transform: scale(1.3);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 10px;
}

.domain-app {
    width: 250px;
    height: 350px;


    transition: 0.6s;



}

.domain-app:hover {
    transform: scale(0.9);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 17px;


}

#image-app6 {

    width: 190px;
    transition: 0.6s;
}

#image-app6:hover {
    transform: scale(1.3);
    box-shadow: 4px 2px 15px 0.1px black;
    border-radius: 10px;
}

/* section-4 */
.section {
    background: #f3dbdb;
}

.section-4 {
    margin-top: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


}

.prem-1 {
    width: 250px;
    background-color: #f8f8f8;
    height: 450px;
    border-radius: 10px;
    transition: 0.6s;

}

.prem-1:hover {
    box-shadow: 0px 2px 12px 0.1px black;
    transform: scale(0.9);

}

#img-1 {
    width: 100px;

}

.prem-2 {
    width: 250px;
    border-radius: 10px;
    height: 450px;
    transition: 0.6s;
    color: whitesmoke;
    background-color: black;

}

.prem-2:hover {
    transform: scale(0.9);
    box-shadow: 0px 2px 12px 0.1px rgb(90, 222, 69);
}

#img-2 {
    width: 100px;

}

.prem-3 {
    height: 450px;
    width: 250px;
    border-radius: 10px;
    background-color: rgb(249, 244, 222);
    transition: 0.6s;

}

.prem-3:hover {
    box-shadow: 0px 2px 12px 0.1px black;
    transform: scale(0.9);
}

#img-3 {
    width: 100px;

}

/* Button of choose plan */
#btn-plan1,
#btn-plan2,
#btn-plan3 {
    background: #f8c2c2;
    border: none;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    transition: 0.5s;


}

#btn-plan1:hover,
#btn-plan2:hover,
#btn-plan3:hover {
    background: #ff7f7f;
    /* Change the background color on hover */
    /* Add any other hover styles here */
    box-shadow: 0px 0px 6px 0.2px black;
    color: black;
    transform: scale3d()
}

/* section */
.select-footer {
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;


}

.select-footer h2 {
    color: #ef9090;
    margin-right: 10px;
}

.selection {
    color: #080606;
    font-size: 19px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#img-sticker {
    width: 150px;
    margin-right: 18px;

}

form {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}

.form-division1 {}

.form-division2 {
    margin-left: 10px;

}

/* 2nd last Fotter  */


/* FORM ITEMS */
#name,
#email,
#services,
#business,
#location,
#query,
#phone {
    border: 2px solid black;
    border-radius: 12px;
    background-color: #d1cece37;


}

#submit {
    border: none;
    background-color: #f596b0;
    border-radius: 8px;
    transition: 0.6s;

}

#submit:hover {
    background-color: #da2d2d;
    color: #fdf7f7;
    transform: scale(0.9);
}

/* Last footer */
.footer {
    color: white;
    background: rgb(9, 13, 20);
    background: linear-gradient(140deg, rgba(9, 13, 20, 0.9304971988795518) 1%, rgba(15, 15, 7, 1) 3%, rgba(1, 1, 3, 1) 94%, rgba(97, 105, 104, 1) 100%, rgba(8, 4, 13, 1) 100%, rgba(94, 84, 161, 1) 100%, rgba(28, 72, 107, 1) 100%, rgba(23, 125, 207, 1) 100%, rgba(23, 125, 207, 1) 100%);
    height: 350px;
}

.contact-info {
    text-align: center;
    margin-top: 20px;
}

.services {
    margin-top: 20px;
}

.products {
    margin-top: 20px;
}


ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.All-services {
    display: flex;
    justify-content: space-evenly;
}