* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
.logo-page,
.business-card-page,
.social-media-poster-main,
.seo-main-page 
{
    text-align: center;
    font-family: 'Poppins', sans-serif;
    background-color: #0d0d11;
    color: #FAFAFA;
}

/* arrow */
.arrow-container{
 
    display: none;
}

/* ---------------------------------------- */



a {
    text-decoration: none;
}

h2 {
    font-weight: bold;
    padding: 2px;
}

li {
    list-style: none;
}

p{
    line-height: 35px;
    font-size: 1rem;
}



b {
    color: #ddae36;
    
}


/* span */

.caps {
    font-size: 2rem;
}


/* -----------------home-page----------------- */


/* nav-bar */

.nav-bg-main {
    background-color: #000;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* nav-dropdown-menu */
.dropdown-menu{
    background-color: #222222;
}

.dropdown-item{
    color: #fff;
}

/* logo-image */

.logo-img {
    width: 6%;
    position: absolute;
    top: -20%;
    left: 2%;
}

#Home {
    position: relative;
    height: 78vh;
    width: 100%;
    background-color: rgb(0, 0, 3);
}


.main-h1-stellar{
    font-family: 'Michroma', sans-serif;
}

.main-h1 {
    color: white;
    font-family: 'Alegreya Sans SC', sans-serif;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 20%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 5vw;
    letter-spacing: 20px;
    animation: companyname 3s ease-in;
    animation-fill-mode: forwards;   
}

@keyframes companyname {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 2;
        transform: scale(0.8);
    }
}


/* earth-image */

.earth {
    background: rgba(88, 170, 255, 0);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px);
    border: 1px solid rgba(88, 170, 255, 0.3);
    position: absolute;
    top: 20%;
    left: -10%;
    width: 35vw;
    height: 60vh;
    background-image: url(../images/globe.png);
    background-size: cover;
    border-radius: 50%;
    z-index: 10;
    box-shadow: -20px -20px 50px 2px rgb(7, 7, 7) inset, 0 0 20px 2px rgb(50, 84, 114);
    animation: globe 100s linear infinite;
    
}

@keyframes globe {
    100% {
        background-position: 4000px 0;
    }
}


/* home-bg-image */

.galaxy {
    height: 100%;
    width: 100%;
    background-image: url(../images/home-bg-future-3.png);
    background-size: cover;
    position: absolute;
    background-repeat: repeat-x;
    animation: space-1 9000s linear infinite;
    /* parallex-effect */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

@keyframes space-1 {
    100% {
        background-position: 95000px 0;
    }
}


/* home-scroll-icon */

.scroll {
    color: white;
    text-align: center;
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    animation: scrollarrow 2s linear infinite;
}

@keyframes scrollarrow {

    0%{
        background: 0px 0px 90px 2px #fff, 0 0 20px 2px #D6E5FA;
        border-radius: 100%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    50%{
        background: rgba(255, 255, 255, 0.2);
        border-radius: 100%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0px 0px 90px 2px #fff, 0 0 20px 2px #D6E5FA;
    }
    100%{
        background: 0px 0px 90px 2px #fff, 0 0 20px 2px #D6E5FA;
        border-radius: 100%;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }


  }


.scroll:hover {
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
    box-shadow: 0px 0px 90px 2px #fff, 0 0 20px 2px #D6E5FA;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.3);

}


/* why-website */

#why-website {
    position: relative;
    height: 50vh;
    color: #fff;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-website-main {
    width: 97%;
    /* glass-bg */
    border-radius: 16px;
    border: 1px solid rgba(75, 73, 94, 0.808);
}

.why-head {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 2%;
}

.why-text {
    letter-spacing: 2px;
}


/* button */

.why-button-text {
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    margin: 2%;
    border-radius: 10px;
    
}

.why-button-text:hover {
    animation: pulsate 1s ease-in-out;
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 25px #5ddcff, 0 0 50px #4e00c2;
    }
}


/* ----------------- know more - why-website-html ----------------------------*/

.know-more {
    font-weight: 600;
    background-image: url(../images/contact-abstract-bg-2.png);
    /* parallex-effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
}

.why-nav-bg {
    background-color: #10102c;
}


.why-web-card {
    margin: 1%;
    /*glass-bg */
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    
}

.why-web-card:hover {
    background: #141A1F;
    background: #141A1F;
    box-shadow:  -6px -6px 12px #0a0d10,
                 6px 6px 12px #1e272e;
}

.why-web-card p {
    padding: 2%;
    font-size: 90%;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
}

.why-website-subhead {
    background-color: #082032;
    width: 100%;
    border-radius: 15px 15px 0 0;
    font-size: 1.5vw;
    padding: 2%;
    color: #F0A500;
}


/*------------- contact-icon------------- */

.contact-icon{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #031d20; 
    margin-left: 90%;
    position: sticky;
    bottom: 0;
    z-index: 200;
}

.contact-icon-text{
    color: yellow;
    text-decoration: none;

    
}


/* services */

#services {
    padding: 2%;
}

.service-main {
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 50%;
}

.service-icons {
    margin: 1.6%;
    border-radius: 50%;
    transition: transform .75s;
}

.service-icons h5 {
    padding: 10%;
    font-size: 85%;
    color: #FAFAFA;
}

.service-icons:hover {
    animation: pulsate 1s ease-in-out;
    transform: scale(1.12);
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 25px #b6efff, 0 0 50px #ede4fc;
    }
}


/*---------------- Web-Design & Development ------------------*/


/* webdes-and-dev */

#webdes-and-dev {
    background-image: linear-gradient(to right top, #ffffff, #fdfcfd, #fdf8f9, #fcf5f3, #f9f2ed);
}

.websites-demo {
    padding: 1%;
}




/* nav-bar */

.nav-bg-web-prev-1 {
    background-color: #000;
}


/* single-page-website  */

#single-page-animation-website,
#single-page-website,
#unlimited-animation-website {
    border: 1px solid #15133C;
    height: auto;
}


/* nav-logo */

.webdes-and-dev-logo {
    width: 10%;
    margin: 3% 0 0 2%;
}

#single-page-website {
    background-image: linear-gradient(to right top, #d4ffee, #d9ffff, #e8feff, #f8fdff, #ffffff);
    color: #000;
}

#web-1-home-page {
    background-color: #000000;
    height: 45vh;
}

.web-prev-single-h1 {
    text-align: left;
    padding-top: 10%;
    color: #fff;
}

.web-prev-single-rec-box {
    height: 20px;
    width: 30%;
    background-color: orange;
}


/* web-prev-single-home-img */

.web-prev-single-mainbox-home-img {
    display: flex;
    justify-content: flex-end;
}

.web-prev-single-home-img {
    height: 30vh;
    width: 60%;
}

.web-prev-single-home-main-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* web-1-2-page */

.web-prev-1-2-main-page {
    padding-top: 15%;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
}

.web-prev-1-2-main-img {
    height: 25vh;
    width: 40%;
}

.web-prev-1-2-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px
}

.web-prev-1-2-main-p {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.web-prev-1-2-p {
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 15px;
}


/* web-prev-1-2-3 */

.web-prev-1-2-3 {
    padding-top: 2%;
}


/* web-prev-1-3-main-page */

#web-1-3-page {
    padding: 5%;
}

.web-prev-1-3-main-page {
    display: flex;
    justify-content: space-evenly;
}

.web-1-3-imgs {
    width: 32%;
}


/*---------------------- website-preview --------------------*/

/* Basic-web-page-home */
#basic-web-page-body {
    background-image: linear-gradient(to right top, #d4ffee, #d9ffff, #e8feff, #f8fdff, #ffffff);
    color: #000;
}

#Basic-web-page-home {
    height: 60vh;
    background-image: linear-gradient(to right top, #000000, #18000b, #21001a, #23002a, #160040);
}

.Basic-web-page-home-h1-box {
    text-align: left;
    margin-left: 5%;
    padding-top: 10%;
    color: #fff;
}

.Basic-web-page-home-h1 {
    font-size: 4rem;
}

.Basic-web-page-home-rec-box {
    height: 20px;
    width: 45%;
    background-color: orange;
}

/* image */
.Basic-web-page-home-main-img-box {
    display: flex;
    justify-content: flex-end;
    padding: 2%;
    margin-top: -8%;
    margin-right: 6%;
}

.Basic-web-page-home-img {
    height: 55vh;
    width: 45%;
}

.Basic-web-page-home-main-img {
    height: 100%;
    width: 100%;
    object-fit: cover;

}

/* ----------Basic-web-page-services ----------*/
#Basic-web-page-services {
    margin-top: 30vh;
}


.Basic-web-page-services-content-box {
    padding: 2%;
}

.basic-web-page-service-h4-p {
    padding: 5%;
}

.basic-web-page-service-h4 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 2rem;
    padding: 2%;
}




/* basic-web-1-2-page */
#web-1-2-page {
    margin-top: 5%;
}

.basic-web-prev-web-1-2-page {
    padding: 0;
}


.Basic-web-page1-2-img-box {
    height: 50vh;
    width: 35%;
}

.Basic-web-page-1-2-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.Basic-web-page-1-2-p {
    text-align: left;
    padding: 2%;
    font-size: 100%;
    letter-spacing: normal;
    line-height: normal;
}

/* basic-web-1-3-page */

#web-1-3-page {
    margin-top: 2%;
}


.basic-web-1-3-img {
    border-radius: 27% 73% 18% 82% / 75% 19% 81% 25%;
    box-shadow: 3px 36px 23px -14px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 3px 36px 23px -14px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 3px 36px 23px -14px rgba(0, 0, 0, 0.7);
    width: 20%;

}

/* basic-web-1-4-page */
#basic-web-1-4-page {
    color: #fff;
    padding: 2%;
    margin: 2%;
    border-radius: 10px;
    background: #607EAA;
    box-shadow: inset 10px 10px 20px #324258,
        inset -10px -10px 20px #8ebafc;

}



/*----------- single-page-animation-website ----------*/

#single-page-animation-website {
    background-color: #F9F6F7;
    color: #000;
    position: relative;

}

/* intro-screen */
.splash {
    position: absolute;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to right top, #041c32, #181627, #1c121c, #181013, #0f0e0e);
    height: 100%;
    width: 100%;
    z-index: 200;
    color: #EEEEEE;
    text-align: center;
    line-height: 500vh;
}



.splash.display-none {
    opacity: 0;
    z-index: -200;
    transition: all 1s ease-in-out;
}


.intro-h1 {
    margin-top: 80%;
    font-size: 5rem;
    font-family: 'Times New Roman', Times, serif;
    opacity: 0;
    animation: fadeIn 3s 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}



@keyframes fadeIn {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-700px) translateY(-500px);
        opacity: 0;
    }

    40% {
        opacity: 0.5;
    }

    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}





/*______ web-2-home-img__________ */
#web-prev2-home-page {
    background-image: linear-gradient(to right top, #94b49f, #a3bda5, #b3c6ac, #c2ceb4, #d1d7bc, #d9ddc1, #e2e3c7, #eae9cc, #eeeece, #f2f3d1, #f6f8d3, #fafdd6);
    height: 40vh;
}

.web-2-home-img-box {
    height: 30vh;
}

.web-2-home-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-bottom: 20px solid #94B49F;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
}

.web-prev-home-h1 {
    padding: 5%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    font-weight: 400;

}


/*_______web-prev2-2page______ */

.web-prev2-2page-main-box {
    display: flex;
    justify-content: space-between;
    padding: 2%;
}

.web-prev2-page-2-text {
    padding: 2%;
    width: 50%;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.web-prev2-page-2-text-h3-background {
    background-color: #F7E9D7;
    height: auto;
    width: 100%;
}


#web-prev2-2page {
    height: 25vh;
}


.web-prev2-page-2-text-h3 {
    padding: 2%;
    margin: auto;
}


.web-prev2-page-img-anime {
    animation: scale-in-center 7s ease-in-out both;
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}



.web-prev2-page-2-img-box {
    width: 50%;
}

.web-prev2-page-2-img {
    width: 100%;
}

/* web-prev2-3page */

#web-prev2-3page {
    padding: 5% 2%;
}

.web-prev2-page-3-text-p {
    font-size: 10px;
    letter-spacing: 2px;
}

/* img */
.web-prev2-3page-img-box1 {
    display: flex;
}

.web-prev2-3page-img {
    padding: 2%;
    height: 18vh;
    width: 50%;
}

.web-prev2-3page-main-img {
    border-radius: 20px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* web-prev2-4page-map */
.web-prev2-4-page-map-box {
    padding: 2%;
}


/*---------------- standard-web-page ----------------------*/
/* standard-intro-screen */
.splash-standard-web-page {
    position: fixed;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to top, #16dada, #00b5ce, #0090b9, #006b9d, #1a487a);
    z-index: 200;
    color: #EEEEEE;
    text-align: center;
    line-height: 500vh;
    overflow: hidden;



}

.splash.display-none {
    opacity: 0;
    z-index: -200;
    transition: all 1s ease-in-out;
}




.standard-web-page-intro-h1 {
    margin-top: 20%;
    font-size: 10rem;
    font-family: 'Times New Roman', Times, serif;
    opacity: 0;
    animation: fadeIn 3s 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    /* color: #C58940; */
    text-shadow: 1px -1px 29px rgba(248,246,121,0.74);
}


@keyframes fadeIn {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-700px) translateY(-500px);
        opacity: 0;
    }

    40% {
        opacity: 0.5;
    }

    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}


/*____ scroll reveal animation ______*/
#standard-scroll-background{
    background-color: #030313;
}


.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;

}


/* standard-nav-bar */
.standard-nav-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
}

/*-standard-web-page-web-prev2-home-page-*/
#standard-web-page-web-prev2-home-page {
    position: relative;
    height: 80vh;
    background-image: url(../images/standard-web-page-home-img.png);
    background-position: center;
    background-size: cover;
}

.standard-web-home-h1 {
    color: #fff;
    font-size: 6rem;
    font-weight: bold;
    width: 100%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 5px;
    text-shadow: -1px 0px 9px rgb(238, 166, 10);
}

/* single-page-animation-website - standard-web-web-prev2-3page */
#standard-web-single-page-animation-website,
#standard-web-web-prev2-3page {
    padding: 2%;
}

/* web-prev2-2page */

#standard-web-web-prev2-2page {
    margin-top: 2%;
}

.standard-web-web-prev2-page-2-img-box {
    height: 40vh;
    width: 40vw;
}

.standard-web-prev2-page-2-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* text */
.standard-web-web-prev2-page-2-text-h3-background {
    background-color: #576F72;
    width: 50%;
    height: auto;
}

.web-prev2-page-2-text-h3 {
    padding: 5%;
}

.standard-web-web-prev2-page-2-text-p,
.standard-web-web-prev2-page-3-text-p {
    letter-spacing: 5px;
    padding: 2%;
    line-height: 20px;
    letter-spacing: 2px;
    font-size: 13px;
}

/* standard-web-web-prev2-3page */
.standard-web-web-prev-2-3page-text-box {
    background-color: #413F42;
    border: 2px solid #fff;
    padding: 2%;
}

.standard-web-web-prev2-page-3-text-p {
    padding: 1%;
}

/* standard-web-web-prev2-3page-img-box1 */
.standard-web-web-prev2-3page-img-box1 {
    padding: 2%;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.standard-web-web-prev2-3page-img {
    height: 35vh;
    width: 40vw;
}

.standard-web-prev2-3page-main-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* contact form */
.standard-web-prev2-contact-form-box {
    background-color: #2e4b53;
}

.standard-form-submit-button {
    background-color: #00D7FF;
}

/* standard-social-media-post */

#standard-social-media-post {
    margin-top: 3%;
    background-image: linear-gradient(to right bottom, #000000, #140008, #1d0015, #1f0021, #1b0130);
}

.standard-social-media-post-h2 {
    padding: 1%;
}

.standard-social-media-post-img-box {
    width: 25%;
    margin: 1% 4%;
}

.standard-social-media-post-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/*------------------------ unlimited-animation-website -------------------------*/

#unlimited-animation-website {
    background-image: linear-gradient(to left top, #fd93a7, #ffa8b4, #ffbdc3, #ffd2d4, #ffe6e6);
    color: #000;
}

/* intro screen */

.splash-web-prev-3 {
    position: absolute;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to left top, #fd93a7, #ffa8b4, #ffbdc3, #ffd2d4, #ffe6e6);
    height: 133%;
    width: 31.7%;
    z-index: 200;
    text-align: center;
    line-height: 500vh;
}



.splash-web-prev-3.display-none {
    opacity: 0;
    z-index: -200;
    transition: all 1s ease-in-out;
}


#intro-text-anime {
    stroke: #810955;
    font-size: 10rem;
    font-weight: 600;
    stroke-width: 4;
    margin-top: -70%;
    font-family: 'Times New Roman', Times, serif;
    opacity: 0;
    animation: textAnimation 6.2s ease-in-out;

}

@keyframes textAnimation {
    0% {
        stroke-dasharray: 0 50%;
        stroke-dashoffset: 1%;
        opacity: 1;
    }


    100% {
        stroke-dasharray: 50% 0%;
        stroke-dashoffset: -60%;
        opacity: 1;
    }
}




/* web-prev-3-home-page */
.web-prev-3-h1-bg {
    height: 46.8vh;
    width: 100%;
    background-image: url(../images/web-prev-3-home-img.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;


}

.web-prev-3-h1-box {
    font-family: 'Dancing Script', cursive;
    width: 100%;
    height: 5vh;
}

.web-prev-3-h1 {
    padding: 1%;
    font-size: 3rem;
    letter-spacing: 10px;
    line-height: 50px;
    color: #FF869E;
    /*glass-bg */
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* web-prev-3-page2 - web-prev-3-page 3 and 4-box */
#web-prev-3-page2,
#web-prev-3-page4 {
    padding: 5% 2%;

}

/* web-prev-3-page 3 and 4-box */
.web-prev-3-page2-img-text-box,
.web-prev-3-page4-box {
    display: flex;
}

.web-prev-3-page2-img-box,
.web-prev-3-page2-text-box {
    height: 25vh;
    width: 50%;

}

.web-prev-3-page2-img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: contain;
}

.web-prev-3-page2-text {
    text-align: left;
    padding: 5%;
    margin-top: 15%;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: normal;
}

/* web-prev-3-page3 */
#web-prev-3-page3 {
    padding: 2%;
    background-color: #fab7ada9;
}

.web-prev-3-page3-box {
    display: flex;
}

.web-prev-3-page3-img-box {
    height: 20vh;
    width: 100%;
    padding: 1%;
}

.web-prev-3-page3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* -----------------premium website package------------------------- */


.prewmium{
    background-color: rgb(14, 13, 13);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* premium-intro */
.premium-intro{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right top, #050030, #090052, #2b0161, #240141, #18012b);
    z-index: 200;
    text-align: center;
    line-height: 500vh;
    position: fixed;
    display: flex;
    justify-content: center;
    overflow: hidden;
}


.premium-intro.display-none {
   
    opacity: 0;
    z-index: -200;
    transition: all 1s ease-in-out;
}

#intro-text-anime-premium {
        stroke: #fff;
    font-size: 5rem;
    font-weight: 600;
    stroke-width: 2;
    font-family: 'Times New Roman', Times, serif;
    opacity: 0;
    animation: textAnimation 6.2s ease-in-out;

}


/* premium-carousel-webpages */


#premium-carousel-webpages{
padding: 2%;
} 



/* -------------scroll-animation-type--------------- */

#scroll-animation-type{
    border: 2px solid #fff;
    padding: 2%;
}

.scroll-animation-type-h2, .premium-h2, .premium-carousel-section-h2{
    padding-bottom: 2%;
    font-size: 3rem;
}

.scroll-animation-type-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.scroll-animation-type-p{
    padding: 2%;
    width: 50%;
    -webkit-animation: slide-in-fwd-center 10s ease-in-out infinite both;
    animation: slide-in-fwd-center 10s ease-in-out infinite both;
}

.scroll-animation-type-img-box{
    width: 50%;
    -webkit-animation: slide-in-fwd-center 10s ease-in-out infinite both;
    animation: slide-in-fwd-center 10s ease-in-out infinite both;
}

.scroll-animation-type-main-img{
    width: 50%;
    object-fit: cover;
}

/* keyframes - animation slide-in-fwd-center*/

 @-webkit-keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    50% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
    100%{
        -webkit-transform: translateZ(-1400px);
                transform: translateZ(-1400px);
        opacity: 0;
      }
  }
  @keyframes slide-in-fwd-center {
    0% {
      -webkit-transform: translateZ(-1400px);
              transform: translateZ(-1400px);
      opacity: 0;
    }
    50% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
    100%{
            -webkit-transform: translateZ(-1400px);
                    transform: translateZ(-1400px);
            opacity: 0;
          }
    }
  
    /* premium-carousel-section */

#premium-carousel-section{
    padding: 2%;
}

/* premium-social-media-post */
#premium-social-media-post{
    padding: 2%;
}


.premium-social-media-post-main-box{
    padding: 2%;
    background-image: linear-gradient(to right bottom, #000000, #140008, #1d0015, #1f0021, #1b0130);
}


/* premium-logo-bcard-main-box */
.premium-logo-bcard-main-box{
    padding: 2%;
    background-color: #000;
}

/*_____________------ website-pricing-----_____________ */
#website-pricing {
    margin-top: 2%;
}

/* === Indian Rupee button ===*/

.pricing-button-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

/* .pricing-button{
    margin: 10px;
} */

.price-button {
    width: 100%;
    position: relative;
    padding: 10px 20px;
    border-radius: 7px;
    border: 2px solid rgb(252, 252, 253); 
    /* rgb(61, 106, 255) */
    font-size: 14px;
    /* text-transform: uppercase; */
    font-weight: 600;
    letter-spacing: 2px;
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  
  .price-button:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  
  .price-button:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
  }
  
  .price-button::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
  }
  
  @keyframes sh02 {
    from {
      opacity: 0;
      left: 0%;
    }
  
    50% {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      left: 100%;
    }
  }
  
  .price-button:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
  }
  
/* ____________________________________ */
.pricing-number{
    font-size: 1.3rem;
    letter-spacing: 2px;
    font-family: serif;
    font-weight: bold;
}

.website-pricing-mainh2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #000;
}

.website-pricing-h2-box {
    margin-top: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.website-pricing-h2 {
    font-size: 2rem;
}



.website-pricing-ul-box {
    height: 50vh;
    font-size: 1.2rem;
    line-height: 160%;
    letter-spacing: 2px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    /*glass-bg */ 
    background: none;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

}

.website-pricing-basic-main-preview {
    margin-top: 1%;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;

}



.website-pricing-button{
    margin: 5%;
    width: 90%;
    border-radius: 20px;
    text-transform: uppercase;
    transition: all 1000ms;
    overflow: hidden;
    outline: 2px solid #fff;
    background-color: #3C79F5;
}

.website-pricing-button:hover {
    color: #ffffff;
    transform: scale(0.9);
    outline: 2px solid #fff;
    box-shadow: 4px 5px 17px -4px #268391;
  }
  
  .website-pricing-button::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #0014FF;
    transform: skewX(45deg);
    z-index: -1;
    transition: width 1000ms;
  }
  
  .website-pricing-button:hover::before {
    width: 250%;
  }

.webdesign-pricing-button-text{
    padding: 1%;
    margin: 2%;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 3px;
    /* font-weight:500; */
}

/* ---------------------------------------- */
.website-pricing-basic {
    background-image: linear-gradient(to top, #ecdbba, #c2a586, #997158, #704031, #461111);
    height: auto;
    border: 10px solid white;
    border-radius: 30px;
    position: relative;
}


.website-pricing-standard {
    background-image: linear-gradient(to right bottom, #519872, #397f6e, #2f6663, #2e4e51, #2c3639);
    height: auto;
    border: 10px solid white;
    border-radius: 30px;
    position: relative;
}

.website-pricing-premium {
    background-image: linear-gradient(to bottom, #57007e, #460075, #34006b, #210061, #090057);
    border: 10px solid white;
    border-radius: 30px;
    height: auto;
    position: relative;
}


/* -----------------------logo-page-------------------------- */

/* logo-text */

.logo-main {
    padding: 2%;
    text-align: start;
}

.logo-text {
    padding: 5%;
    margin: auto;
}

.logo-text h2 {
    font-size: 5rem;
}

.logo-text p {
    font-size: 1.3rem;
}

.logo-main-img {
    display: flex;
    justify-content: center;
}

.logo-main-image {
    width: 100%;
}

.logo-slide-main {
    margin: 1%;
    border-radius: 10px;
}

.logo-slide-image {
    height: 25vh;
    background-image: url(../images/logo-slide-new-1.png);
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
    animation: logo-slide 500s linear alternate-reverse infinite;
}

@keyframes logo-slide {
    100% {
        background-position: 80000px 0;
    }
}

.logo-slide-image-2 {
    height: 25vh;
    background-image: url(../images/logo-slide-new-2.png);
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
    animation: logo-slide 500s linear backwards infinite;
}

@keyframes logo-slide {
    100% {
        background-position: 80000px 0;
    }
}

/* contact-in-page */

.contact-in-page{
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 3px;
    animation: contactglow 1s ease-in-out infinite alternate;
}

@keyframes contactglow {

    from {
        text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 25px #002ae6, 0 0 30px #75a3f7, 0 0 50px #b5b6ee, 0 0 40px #081cd4, 0 0 50px #0f00e6;
      }
      
      to {
        text-shadow: 0 0 10px #fff, 0 0 20px #4dffff, 0 0 30px #84e5fd, 0 0 40px #c5daeb, 0 0 50px #e2eaf8, 0 0 60px #e9f5fc, 0 0 70px #e4f2f7;
      }



  }



/* -------------business-card-page---------------------- */

.business-card-main {
    /* margin: 2%; */
    text-align: start;
}

.business-card-text {
    margin: auto;
    padding: 2%;
}

.business-card-text h2 {
    font-size: 5rem;
}

.business-card-text p {
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.business-card-img{
    width: 40%;
} 

.buss-main-img {
    width: 100%;
}

.card-main {
    margin: 2%;
}



.cards {
    height: 300px;
    width: 500px;
    margin: auto;
    transform-style: preserve-3d;
    position: relative;
    transition: transform .75s cubic-bezier(0.4, 0.03, 0.5, 0.9);
}

.cards-2 {
    margin-top: 5%;
}

.card-img {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    outline: 1px solid rgb(166, 167, 172);
    outline-offset: 5px;
    backface-visibility: hidden;
}

.card-img:nth-child(2),
.cards:hover {
    transform: rotateY(180deg);
}


/*------------------social-media-poster-page------------------------*/

/* .social-media-poster-main {} */

.social-media-poster-text {
    padding: 2% 2% 8% 2%;
    margin: 2%;
    border: 1px solid rgb(96, 98, 105);
    background: #141A1F;
    box-shadow: inset 5px 5px 9px #080a0c, inset -5px -5px 9px #202a32;
}

.social-media-poster-text h2 {
    font-size: 4rem;
}

.social-media-poster-text p {
    font-size: 1.3rem;
}


.social-media-poster-images-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.poster {
    width: 25%;
    margin: -9% 1% 1% 1%;
    padding: 5px;
    outline-offset: -8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* glass-bg */
    background: rgba(41, 38, 38, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: #141A1F;
    box-shadow: inset 5px 5px 4px #080a0c, inset -5px -5px 4px #202a32;
}

.poster-image {
    padding: 2%;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s;
}

.poster:hover .poster-image {
    transform: scale(1.12);
}



/*----------------------- web-seo---------------------*/

#about-us {
    padding: 2%;
}

.websites-sub-head,
.web-seo {
    padding: 5%;
    text-align: start;
}

.web-seo-main {
    margin-top: 5%;
}

.web-seo {
    padding: 5%;
}

.web-seo-img-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.web-seo-img {
    width: 100%;
}


/* slide-effect */

#slide-effect {
    position: relative;
    padding: 2%;
 
}

#carouselExampleFade{
    padding: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
}

.carousel-control-prev {
    margin-left: -6%;
}

.carousel-control-next-icon {
    margin-right: -83%;
}

/*---------------- pricing-section------------------- */
/* pricing radio button */
/* .radio-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  
  .radio-button {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  
  .radio-button__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .radio-button__label {
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
    font-size: 18px;
    color: #f2f2f2;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
  }
  
  .radio-button__custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #555;
    transition: all 0.3s ease;
  }
  
  .radio-button__input:checked + .radio-button__label .radio-button__custom {
    background-color: #F79327;
    border-color: transparent;
    transform: scale(0.8);
    box-shadow: 0 0 20px #4c8bf580;
  }
  
  .radio-button__input:checked + .radio-button__label {
    color: #F79327;
  }
  
  .radio-button__label:hover .radio-button__custom {
    transform: scale(1.2);
    border-color: #4c8bf5;
    box-shadow: 0 0 20px #4c8bf580;
  } */

  /* ___________________________ */

  #pricing-section-button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    background-image: url(../images/pricing-bg-2.png);
    /* parallex-effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  }

#pricing-section{
    background-image: url(../images/pricing-bg-2.png);
    /* parallex-effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 }
 
 /* pricing-name-h2 */
 .pricing-name-h2, .pricing-h2{
     font-family: 'Times New Roman', Times, serif;
     font-size: 2.5rem;
 }
 
 
 /* text color */
 .ul-package, .ul-website-pricing, .rupees-Brand-Identity{
     font-size: 1.2rem;
     font-weight: 500;
 }

 /* .package-button{
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 10;
 }
  */



  /* ---------------------------- */
  .btn {
    border-radius: 0.5em;
    font-size: larger;
    height: 5em;
    width: 90%;
  }
  


  .btn{
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hwb(194 38% 0%);
    --btn-bg-2: hsla(217 100% 56% / 1);
    /* --btn-bg-color: hsla(360 100% 100% / 1); */
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    margin-bottom: 1%;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: 2px solid #fff;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
  }
  
  .btn:hover {
    background-position: right top;
  }
  
  .btn:is(:focus, :focus-within,:active) {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .btn{
      transition: linear;
    }
  }
  


  /* -------------------- */
 
 .ul-package, .ul-website-pricing{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 
 .graphic-design-package, .standard-website-package, .Premium-Website-package, .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing, .logo-price, .social-media-post-price, .businesscard-price{
 
 height: 110%;
 /*css.glass */
 background: none;
 border-radius: 10px;
 box-shadow: 12px 11px 26px -7px rgba(255, 255, 255, 0.315);
 backdrop-filter: blur(5px);
 -webkit-backdrop-filter: blur(5px);
 border: 3px solid rgba(255, 255, 255, 1);
 }
 
 .package-h3{
     color: #F49D1A;
     font-weight: bold;
 }
 
 .package-rupess, a{
 color: #fff;
 }
 
 .price-save{
     background-color: #fae41d;
     border-radius: 5px;
     color: #000;
     font-size: 20px;
     font-weight: bold; 
 }
 
 .package-h3, .h3-website-pricing, .Brand-Identity-pricing-h3{
  padding: 2%;
 
 }
 
 
 .package-rupess, .package-h3, .h3-website-pricing, .rupess-website-pricing, .Brand-Identity-pricing-h3{
     background-color: #000;
     border-radius: 5px;
 }
 
 .ul-package, .ul-website-pricing{
 height: 70%;
 line-height: 30px;
 padding: 2%;
 }
 
 
 
 .package{  
     padding: 2%;  
 }
 
 /* Website-Pricing */
 .website-pricing-container{
     padding: 2%;
 }
 
 .h3-website-pricing{
     color: #FFBF00;
     font-weight: bold;
 }
 
 .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing{
 height: 110%;
 }
 
 .rupess-website-pricing{
     padding: 2px;
 }
 
 .Website-Pricing, .graphic-design-pricing{
    margin-top: 5%;
 }


 /* graphic-design-pricing */
 
 .Brand-Identity-pricing{
     padding: 2%;
 }
 
 .Brand-Identity-pricing-h3{
     color: #FCE700;
     font-weight: bold;
 
 }
 
 /*---------------- pricing-section-end------------------- */
 
 
 
 /* -------------------contact-form---------------------- */
 
 #contact-form{
    position: relative;
 padding: 2%;
 background-image: url(../images/contact-abstract-bg-2.png);
 background-size: cover;
 /* parallex-effect */
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

 }
 .contact-form-main{
 /* glass-bg */
 background: none;
 border: 1px solid rgba(255, 255, 255, 1);
 border-radius: 10px;
 }
 
 .contact-form-input{
     border-radius: 5px;
     width: 99%;
     padding: 5px;
     margin: 5px 0;    
 }
 
 .contact-form-checkbox-container{
     display: flex;
     justify-content: start;
     padding: 11px;
 }
 
 .contact-form-checkbox{
     width: 20px;
 }
 
 .contact-form-checkbox, .contact-form-checkbox-label{
     padding: 0 10px;
     font-size: 18px;
    
 }
 
 .contact-form-select{
 width: 99%;
 background-color: #05011b;
 font-weight:300;
 color: #fff;
 border: 2px solid #fff;
 }
 

 .btn-donate {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hwb(194 38% 0%);
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    margin-bottom: 1%;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);
  }
  
  .btn-donate:hover {
    background-position: right top;
  }
  
  .btn-donate:is(:focus, :focus-within,:active) {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .btn-donate {
      transition: linear;
    }
  }

 /* -------------------contact-form-end---------------------- */
 

/* footer */
footer{
    width: 100%;
    background-color: #0d0d11;
    position: absolute;
    color: #fff;
}

.footer-contact-img{
    width: 5%;
    margin: 2%;
    border-radius: 5px;
}


.footer-box{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    text-align: start;
}

/* footer-social-media */
.footer-logo-social-icons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-logo{
    width: 30%;
}

.footer-social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}


.foot-social-button{
    width: 2%;
    border-radius: 10px;
    background-color: transparent;
    margin: 2%;
   
}

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

.foot-social-button:hover{
   /* From https://css.glass */
background: rgba(201, 196, 196, 0.04);
box-shadow: 0 4px 30px rgba(150, 145, 145, 0.1);
backdrop-filter: blur(3.4px);
-webkit-backdrop-filter: blur(3.4px);
border: 1px solid rgba(255, 255, 255, 0.932);
}

.footer-sub-hed-services{
    color: #6B728E;
    font-weight: bold;
    font-size: 18px;
}

/* terms-and-privacy */
#terms-and-privacy, .terms{
    padding: 2%;
    text-align: start;
}

.terms{
    border: 2px solid #fff;
    border-radius: 10px;
}

.terms-heading{
line-height: 30px;
}

.terms p{
    font-size: 80%;
    letter-spacing: 1px;
}

.terms-sub-head{
    font-weight: bold;
    color: #FEFCF3;
}


/* -----------------------------------------------------------media queries---------------------------------------------------- */


/* -----------------Extra small devices (phones, 767px, 600px and down)---------------------- */

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

    /* arrow */
.arrow-container{
    width: 100%;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: end;
    z-index: 50;
}

.arrow{
/*glass */
background: rgba(87, 197, 182, 0.51);
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgb(241, 245, 244);
display: flex;
justify-content: end;
margin: 2%;
width: 7%;
}

.arrow-img{
    object-fit: cover;
    width: 80%;
    height: auto;
}

/* ---------------------------------------- */



    /* logo */
    .logo-img {
        width: 20%;
        position: absolute;
        top: 0;
    }
    
    
    /* span-caps */
    .caps{
        font-size: 25px;
    }


    #Home {
        height: 70vh;
        padding: 2%;
    }

    .main-home{
        width: 100%;
    }

    .earth {
        width: 100%;
        height: 65%;
        left: -30%;  
          
    }

    .galaxy{
        width: 100vw;
        margin-left: -2%;
    }

    .main-h1{
        font-size: 135%;
        font-weight: bold;
        z-index: 20;
        line-height: 50px;
        top: 35%;
        left: 10%;
    }

    .scroll {
        width: 5%;
        border-radius: 100%;
    }

    /* why-website */

    #why-website{
        height: auto;
        margin: 2% 0;
    }


    .why-head h2{
       font-size: 1.5rem;
    }

    .why-text p{
       font-size: 70%;
       padding: 2%;
       line-height: 20px;
    }

    /* ---------------------learn-more-page--------------- */

    .why-website-subhead{
        font-size: 20px;
    }

    .whywebsite-contact-p p{
        font-size: 12px;
    }

    
    /* service */
     
    .service-icons{
        border-radius: 0%;
        margin: 5%;
        border: 1px solid #fff;
    }

     /* about-us */

     #about-us{
        margin: 10% 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
     }
      
     /* .we-build-websites-sub-head{
       font-weight: 600;
       letter-spacing: 2px;
       font-size: 1.5rem;
     }

     .about-us-p{
      font-size: 85%;  
     }

     .about-us-h3{
        font-weight: 600;
        letter-spacing: 2px;
        font-size: 1rem;
     } */

     .websites-sub-head .web-seo ,p{
        font-size: 80%;
        line-height: 20px;
     }
     .caps{
        font-size: 20px;
     }

     .web-seo-img-main{
     height: 100%;
     width: 100%;
    /* glass */
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
    }

     .web-seo-img{
        height: 300px;
        width: 100%;
        object-fit: contain;
     }

    .we-build-website-main-2 {
        display: flex;
        flex-direction: column-reverse;
    }

    /* sliding-images-home */
    .carousel-item .d-block{
        height: 150px;
        object-fit: fill;
    }

    /* pricing */

    #pricing-section-button{
        height: 50vh;
    }


     .pricing-button-container{
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
     }

     .price-button{
        width: 50%;
     }

    .pricing-h2, .pricing-name-h2{
        font-size: 260%;
        letter-spacing: 5px;
    }

    .pricing-name-h2{
        font-size: 200%;
    }
     
     .graphic-design-package, .standard-website-package, .Premium-Website-package, .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing, .logo-price, .social-media-post-price, .businesscard-price{
        background: none;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        height: auto;
     }

    .ul-package{
        font-size: 100%;
        letter-spacing: 1px;     
    }

    /* contact-form */

    .contact-form-main{
        background: none;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    .contact-form-submit-button{
        height: auto;
        width: 50vw;
        font-size: 65%;
        padding: 2%;
    }

    .contact-submit-button{
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

    .footer-box, .footer-logo-contact-box{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: start;
       border-top: 1px solid #fff ;     
    }

    .footer-logo-contact-box{
        display: flex;
        flex-direction: column;
    }

    .foot-social-button{
        width: 6%;
    }

    

    /* ------------------- logo page ----------------------- */
    .logo-text h2 {
        font-size: 30px;
    }
   
    .logo-text p {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .logo-main-img{
        height: 500px;
        width: 95%;
    }

    .logo-main-image{
        height: auto;
        width: 100%;
        object-fit: cover;
    }


   .logo-slide-image{
    display:none;
   }

   
   /* -------------- .business card page ------------- */

   #business-card-page{
    padding: 2%;
   }
     
   .business-card-text h2{
    font-size: 30px;
   }

   .business-card-text p{
    font-size: 15px;
    letter-spacing: 1px;
   }

   .business-card-img{
    height: 80%;
    width: 95%;
   }

   .buss-main-img{
    object-fit: cover;
   }

   .cards-hidden-mobile{
    display: none;
   }

   .cards-visible-mobile{
    margin: 10% 0 5%;
   }

   .cards-visible-mobile{
    width: 100%;
   }

   .cards-visible{
    width: 80%;
    height: 20vh;
   }

.cards-visible-img{

    animation: scrollarrow 2s linear infinite;
}

@keyframes scrollarrow {

    0%{
        background: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    50%{
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
    }
    100%{
        background: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }


  }

  /* contact letter in logo-page and business-card page */
   .contact-in-page{
    font-size: 15px;
   }


   /* ----------contact-form------------- */
   .contact-form-input{
    font-size: 11px;
   }

   /* ----------------footer------------- */
   .footer-contact-phone-mail-box{
    font-size: 13px;
   }

   .footer-box-ul{
    font-size: 13px;
   }

  /* ---------------- social-media-post-page -------------------- */

  .social-media-poster-text h2{
    font-size: 30px;
}

.social-media-poster-text p{
 font-size: 15px;
 letter-spacing: 1px;
 text-align: start;
}


.social-media-hidden{
    display: none;
}

.social-media-visible{
    height: auto;
    width: 50%;
    margin: 2% 0;
}

.social-media-visible-img{
    height: auto;
    width: 100%;
    object-fit: contain;
}


/* -------------------- WebDesignandDevelopment-hidden--------------------- */

.WebDesignandDevelopment-hidden{
    display: none;
}

.splash-web-prev-3 {
    height: 133%;
    width: 97.5%;
}

.web-prev-3-page2-text-box, .web-prev-3-page2-img-box{
    font-size: 15px;
    height: 40vh;
 
}

.web-prev-3-page2-text-box{
    height: auto;
}

.web-prev-3-page2-img{
object-fit: cover;
}


.web-prev-3-page3-box{
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* preview-button */
.website-pricing-button{
    height: 50px;
    width: 60%;
    border-radius: 10px;
}

.webdesign-pricing-button-text{
    font-size: 12px;
    line-height: 17px;
}

/* pricing */

.website-pricing-standard{
    height: auto;
}

.website-pricing-ul-box{
    font-size: 15px;
    font-weight: 500;
    height: auto;
}


/* ------------------web-design-and-development-basic-website--------------- */

#Basic-web-page-home{
    height: 50vh;
}

.Basic-web-page-home-h1{
    font-size: 50px;
}

.Basic-web-page-home-rec-box{
    height: 2px;
}

.Basic-web-page-home-main-img-box{
    margin-top: 15%;
}

.Basic-web-page-home-img {
    height: 35vh;
    width: 60vw;
}

#Basic-web-page-services, #web-1-2-page{
    border-top: 2px solid #000;
}

.Basic-web-page-services-h2, .web-1-2-page-about-us-h2{
    margin: 5%;
    font-size: 40px;
    letter-spacing: 2px;
}

.web-prev-1-2-main-page{
    display: flex;
    flex-direction: column-reverse;
}

.web-prev-1-2-3, .web-prev-1-3-main-page{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Basic-web-page1-2-img-box, .web-prev-1-2-main-p{
    width: 100%;
    padding: 2%;
}

.basic-web-1-3-img{
    width: 70%;
    margin: 5% 1%;
}
.websites-demo{
    background-color: #0d0d11;
}

.website-pricing-basic, .website-pricing-standard, .website-pricing-premium{
    border: 2px solid;
    margin: 5px;
}

.website-pricing-basic-main-preview-a{
    font-size: 15px;
}

.website-pricing-basic-main-preview{
    height: 100%;
}



/* ------------------web-design-and-development-standard-website--------------- */

.standard-web-page-intro-h1{
    margin-top: 50%;
    font-size: 65px;
    width: 100%;
}

#standard-web-page-web-prev2-home-page {
    background-image: url(../images/web-prev-2-home.png);
    height: 50vh;
    width: 100%;       
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}


.standard-web-home-h1 {
    color: #fff;
    font-size: 40px;
    width: 90%;
    text-shadow: -1px 0px 9px rgb(247, 124, 9);
}

.web-prev2-2page-main-box{
    display: flex;
    flex-direction: column;
}

.web-prev2-page-2-text, .standard-web-web-prev2-page-2-text-p, .standard-web-web-prev2-page-2-img-box{
    width: 100%;
}

.standard-web-web-prev2-page-2-text-p p, .standard-web-web-prev2-page-3-text-p p{
    font-size: 12px;
    line-height: 18px;
}

.standard-social-media-post-main-box{
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.standard-social-media-post-img-box{
    width: 90%;
    padding: 2%;
    border: 2px solid #fff;

}

.standard-social-media-post-img{
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ------------------web-design-and-development-premium-website--------------- */

.premium-h2, .scroll-animation-type-h2, .premium-carousel-section-h2{
    font-size: 30px;
}

.scroll-animation-type-container{
    width: 100%;
    display: flex;
    flex-direction: column;
}


.scroll-animation-type-img-box, .scroll-animation-type-p, .scroll-animation-type-main-img{
    width: 100%;
    text-align: start;
    padding: 1%;
}

.scroll-animation-type-p p{
    font-size: 13px;
    line-height: 20px;
}

.scroll-animation-type-main-img-mobile{
    display: flex;
    flex-direction: column-reverse;
    padding: 2%;
}

.carousel-inner-premium{
    height: auto;
}

.carousel-inner-premium-img{
    height: 300px;
    object-fit: cover;
}

.premium-logo-bcardimg-box{
    height: auto;
}

.premium-logo-bcard-img{
    height: 200px;
    object-fit: contain;
}

.premium-logo-bcard-box, .premium-logo-bcard-img{
    width: 100%;
    padding: 2%;
}
.premium-logo-bcard-img, .premium-social-media-post-img{
    border: 1px solid #fff;

}

.premium-social-media-post-img-box{
    padding: 2%;
}

/* terms-and-privacy */

.terms-heading{
line-height: 30px;
}

.terms p{
    font-size: 70%;
    line-height: 25px;
}

}

/* -----------------------------------------------------------------------mobile-landscape------------------------------------------------- */




/*------------------------------------------- Medium devices landscape tablets(min-width: 768px) and (max-width: 1180px )-----------------------------------------------------------------------*/

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

/* arrow */
 .arrow-container{
    width: 100%;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: end;
    z-index: 50;
}

.arrow{
/*glass */
background: rgba(87, 197, 182, 0.51);
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgb(241, 245, 244);
display: flex;
justify-content: end;
margin: 2%;
width: 7%;
}

.arrow-img{
    object-fit: cover;
    width: 80%;
    height: auto;
}


    /* nav-bar logo */
    .logo-img {
        width: 12%;
        position: absolute;
        top: 0;
    }
    
    .nav-bg-main{
        height: auto;
    }
    
    /* span-caps */
    .caps{
        font-size: 25px;
    }


    #Home {
        height: 70vh;
        padding: 2%;
    }

    .main-home{
        width: 100%;
    }

    .earth {
        width: 70%;
        height: 60%;
        left: -30%;  
          
    }

    .galaxy{
        width: 100vw;
        margin-left: -2%;
    }

    .main-h1{
        font-size: 2.5rem;
        font-weight: bold;
        z-index: 20;
        line-height: 70px;
        top: 30%;
        left: 10%;
    }

    .scroll {
        width: 5%;
        border-radius: 100%;
    }

    /* why-website */

    #why-website{
        margin: 2% 0;
        height: auto;
    }



    .why-head h2{
       font-size: 1.5rem;
    }

    .why-text p{
       font-size: 13px;
       padding: 2%;
       line-height: 25px;
    }




    /* ---------------------learn-more-page--------------- */

    .why-website-subhead{
        font-size: 20px;
    }
     

    .why-web-card p{
        font-weight: normal;
        font-size: 16px;
        text-align: start;
    }


    .whywebsite-contact-p p{
        font-size: 16px;
    }

    
    /* service */
     
    .service-icons{
        margin: 2%;
        width: 45%;
        border-radius: 0%;
        border: 1px solid #fff;
    }

     /* about-us */

     #about-us{
        margin: 10% 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
     }
      
     .we-build-websites-sub-head{
       font-weight: 600;
       letter-spacing: 2px;
       font-size: 1.5rem;
     }

     .about-us-p{
      font-size: 1rem;  
     }

     .about-us-h3{
        font-weight: 600;
        letter-spacing: 2px;
        font-size: 1rem;
     }

     .web-seo-img, .web-seo{
        width: 100%;
     }

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

    .we-build-website-main-2 {
        display: flex;
        flex-direction: column-reverse;
    }

    /* pricing */

    .pricing-button-container{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
     }

     .price-button{
        width: 80%;
     }



    .pricing-h2, .pricing-name-h2{
        font-size: 260%;
        letter-spacing: 5px;
    }

    .pricing-name-h2{
        font-size: 200%;
    }
     
     .graphic-design-package, .standard-website-package, .Premium-Website-package, .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing, .logo-price, .social-media-post-price, .businesscard-price{
        background: none;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        height: auto;
     }

    .ul-package{
        font-size: 1.2rem;
        letter-spacing: 1px;     
    }

    /* contact-form */
#contact-form{
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

    .contact-form-main{
        background: none;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    .contact-form-submit-button{
        height: auto;
        width: 50vw;
        font-size: 65%;
        padding: 2%;
    }

    .contact-submit-button{
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

   .contact-form-input{
    font-size: 15px;
    font-weight:400;
    letter-spacing:2px;
    color: #000;
    opacity: 1;
   }

   .contact-form-select{
    color: #fff;
   }
   


   /* ----------------footer------------- */
   .footer-contact-phone-mail-box{
    font-size: 13px;
   }

   .footer-box-ul{
    font-size: 13px;
   }

    
    .footer-box, .footer-logo-contact-box{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: start;
       border-top: 1px solid #fff ;     
    }

    .footer-logo-contact-box{
        display: flex;
        flex-direction: column;
    }

    .foot-social-button{
        width: 6%;
    }

      /* contact letter in logo-page and business-card page */
   .contact-in-page{
    font-size: 15px;
   }

    /* ------------------- logo page ----------------------- */
    .logo-text h2 {
        font-size: 30px;
    }
   
    .logo-text p {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .logo-main-img{
        height: 500px;
        width: 95%;
    }

    .logo-main-image{
        height: auto;
        width: 100%;
        object-fit: cover;
    }

   .logo-slide-image{
    display:none;
   }

   
   /* -------------- .business card page ------------- */

   #business-card-page{
    padding: 2%;
   }
     
   .business-card-text h2{
    font-size: 30px;
   }

   .business-card-text p{
    font-size: 15px;
    letter-spacing: 1px;
   }

   .business-card-img{
    height: 40%;
    width: 95%;
   }

   .buss-main-img{
    object-fit: cover;
   }

   .cards-hidden-mobile{
    display: none;
   }

   .cards-visible-mobile{
    margin: 10% 0 5%;
   }

   .cards-visible-mobile{
    width: 100%;
   }

   .cards-visible{
    width: 80%;
    height: 30vh;
   }

.cards-visible-img{

    animation: scrollarrow 2s linear infinite;
}

@keyframes scrollarrow {

    0%{
        background: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    50%{
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
    }
    100%{
        background: 0px 0px 5px 2px #fff, 0 0 20px 2px #D6E5FA;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }


  }

  

  /* ---------------- social-media-post-page -------------------- */

  .social-media-poster-text h2{
    font-size: 30px;
}

.social-media-poster-text p{
 font-size: 15px;
 letter-spacing: 1px;
 text-align: start;
}


.social-media-hidden{
    display: none;
}

.social-media-visible{
    height: auto;
    width: 50%;
    margin: 2% 0;
}

.social-media-visible-img{
    height: auto;
    width: 100%;
    object-fit: contain;
}




/* -------------------- WebDesignandDevelopment-hidden--------------------- */

.WebDesignandDevelopment-hidden{
    display: none;
}


/* preview-button */
.website-pricing-button{
    height: 50px;
    width: 60%;
    border-radius: 10px;
}

.webdesign-pricing-button-text{
    font-size: 15px;
    line-height: 17px;
    font-weight: bold;
}

/* pricing */

.website-pricing-standard{
    height: auto;

}

.website-pricing-ul-box{
    font-size: 18px;
    font-weight: 500;
    height: auto;
}


/* ------------------web-design-and-development-basic-website--------------- */

#Basic-web-page-home{
    height: auto;
    margin-bottom: 0;
}

.Basic-web-page-home-h1{
    font-size: 50px;
}

.Basic-web-page-home-rec-box{
    height: 2px;
}

.Basic-web-page-home-main-img-box{
    margin-top: 15%;
}

.Basic-web-page-home-img {
    height: 35vh;
    width: 60vw;
}

#Basic-web-page-services{
    margin-top: 0;
  
}

#Basic-web-page-services, #web-1-2-page{
    border-top: 2px solid #000;
}

.Basic-web-page-services-h2, .web-1-2-page-about-us-h2{
    margin: 5%;
    font-size: 40px;
    letter-spacing: 2px;
}

.web-prev-1-2-main-page{
    display: flex;
    flex-direction: column-reverse;
}

.web-prev-1-2-3, .web-prev-1-3-main-page{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Basic-web-page1-2-img-box, .web-prev-1-2-main-p{
    width: 100%;
    padding: 2%;
}

.basic-web-1-3-img{
    width: 50%;
    margin: 5% 1%;
}
.websites-demo{
    background-color: #0d0d11;
}

.website-pricing-basic, .website-pricing-standard, .website-pricing-premium{
    border: 2px solid;
    margin: 5px;
}

.website-pricing-basic-main-preview-a{
    font-size: 15px;
}

.website-pricing-basic-main-preview{
    height: 100%;
}



/* ------------------web-design-and-development-standard-website--------------- */

.standard-web-page-intro-h1{
    margin-top: 35%;
    font-size: 70px;
    width: 100%;
}

#standard-web-page-web-prev2-home-page {
    background-image: url(../images/web-prev-2-home.png);
    height: 50vh;
    width: 100%;       
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}


.standard-web-home-h1 {
    color: #fff;
    font-size: 70px;
    width: 90%;
    text-shadow: -1px 0px 9px rgb(247, 124, 9);
}

.web-prev2-2page-main-box{
    display: flex;
    flex-direction: column;
}

.web-prev2-page-2-text, .standard-web-web-prev2-page-2-text-p, .standard-web-web-prev2-page-2-img-box{
    width: 100%;
}

.standard-web-web-prev2-page-2-text-p p, .standard-web-web-prev2-page-3-text-p p{
    font-size: 12px;
    line-height: 18px;
}

.standard-social-media-post-main-box{
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.standard-social-media-post-img-box{
    width: 60%;
    padding: 2%;
    border: 2px solid #fff;

}

.standard-social-media-post-img{
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ------------------web-design-and-development-premium-website--------------- */

.premium-h2, .scroll-animation-type-h2, .premium-carousel-section-h2{
    font-size: 30px;
}

.scroll-animation-type-container{
    width: 100%;
    display: flex;
    flex-direction: column;
}


.scroll-animation-type-img-box, .scroll-animation-type-p, .scroll-animation-type-main-img{
    width: 100%;
    text-align: start;
    padding: 1%;
}

.scroll-animation-type-p p{
    font-size: 13px;
    line-height: 20px;
}

.scroll-animation-type-main-img-mobile{
    display: flex;
    flex-direction: column-reverse;
    padding: 2%;
}

.carousel-inner-premium{
    height: auto;
}

.carousel-inner-premium-img{
    height: 300px;
    object-fit: cover;
}


.premium-logo-bcardimg-box{
    height: auto;
}

.premium-logo-bcard-img{
    height: 200px;
    object-fit: contain;
}

.premium-logo-bcard-box, .premium-logo-bcard-img{
    width: 100%;
    padding: 2%;
}
.premium-logo-bcard-img, .premium-social-media-post-img{
    border: 1px solid #fff;

}

.premium-social-media-post-img-box{
    padding: 2%;
}

}




/*------------------------- Medium devices landscape tablets and laptops(min-width: 1180px) ------------------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1180px ) {
    /* nav-bar logo */
    .logo-img {
        width: 8%;
       
    }
    
    .nav-bg-main{
        height: auto;
    }
    
    /* span-caps */
    .caps{
        font-size: 25px;
    }


    #Home {
        height: 70vh;
        padding: 2%;
    }

    .main-home{
        width: 100%;
    }

    .earth {
        width: 48%;
        height: 80%;
        left: -18%;  
          
    }

    .galaxy{
        width: 100vw;
        margin-left: -2%;
    }

    .main-h1{
        font-size: 3rem;
        font-weight: bold;
        z-index: 20;
        line-height: 70px;
        top: 30%;
        left: 25%;
    }

    .scroll {
        width: 3%;
    }

    /* about-us */
    .we-build-website-main-2{
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
    }

    .web-seo-img-main{
        display: flex;
        align-content: center;
        justify-content: center; 
    }

    .web-seo-img-main, .web-seo{
        width: 50%;
    }

    .web-seo-img-main{
      /* glass-bg */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);
border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .web-seo-img {
        width: 100%;
    }


    
    /* pricing */

    .graphic-design-package, .standard-website-package, .Premium-Website-package, .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing, .logo-price, .social-media-post-price, .businesscard-price{
        height: 110%;
        }

        .ul-package, .ul-website-pricing{
            font-size: 1rem;
        }




/* web-design-and-development-pricing */
      
    .Basic-website-price, .standard-website-pricing, .Premium-Website-pricing{
        height: 110%;
       
        }

        .web-design-and-development-pricing{
            display: flex;
            align-content: center;
            justify-content: center; 
        }

        .website-pricing-basic, .website-pricing-standard, .website-pricing-premium{
            width: 30%;
        }

        .website-pricing-ul-box {
            height: 60vh;
            font-size: 1rem;
        }

          /* basic-website */

        .Basic-web-page-home-main-img-box {
            /* display: flex;
            justify-content: flex-end; */
            padding: 2%;
            margin-top: -2%;
            margin-right: 6%;
        }

        .Basic-web-page-home-img {
            height: 45vh;
            width: 45%;
        }
        
        .Basic-web-page-home-main-img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        
        }

        .basic-web-prev-web-1-2-page, .web-prev-1-2-3{
            display: flex;
            flex-direction: row;
        }

        .Basic-web-page1-2-img-box, .web-prev-1-2-main-p{
            width: 100%;
        }

        .web-prev-1-3-main-page{
            display: flex;
            flex-direction: row;
        }

        .basic-web-1-3-img{
            width: 27%;
        }

       /* standard-website */
       .standard-web-page-intro-h1{
        margin-top: 25%;
        font-size: 100px;
          /* width: 100%; */
    }
    
    .web-prev2-2page-main-box{
        display: flex;
        flex-direction: row;
    }

    .web-prev2-page-2-text, .standard-web-web-prev2-page-2-img-box{
        width: 50%;
    }

    .standard-social-media-post-img-box{
        width: 40%;
        margin: 2%;
    }


    /* .Premium-Website */

    .scroll-animation-type-container, .premium-logo-bcard-main-box{
        display: flex;
        flex-direction: row;
    }

    .premium-social-media-post-main-box, .premium-logo-bcard-main-box{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .premium-social-media-post-img-box{
        width: 30%;
    }

    .premium-logo-bcardimg-box, .premium-logo-bcard-box{
        width: 40%;
    }

    /* logo-page & business-card-page */
    .logo-home-img-text, .business-card-text-img-box{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-text, .logo-main-img, .business-card-text, .business-card-img{
        width: 50%;
    }

    .businesscards-visible-box, .cards-visible, .cards-visible-img{
        width: 100%;
        height: 47vh;
        object-fit: cover;
    }

    /* pricing */
    

    /* footer */
    .foot-social-button{
        width: 3%;
    }




}