body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0px;
    padding: 0px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.logo {
    display: block;
    position: absolute;
    top: 11px;
    left: 119px;
}

.logo img {
    width: 25px;
    /* border-radius: 5px; */
    mix-blend-mode: darken;
}


.navbar {
    /* border: 2px solid red; */
    /* background-color: rgb(244 244 244 / 80%); */
    background-color: #f5f5f7;;
    display: block;
    width: 100%;
    text-align: center;
}

.navright {
    position: absolute;
    right: 50px;
    top: 18px;
    display: inline-block;
}

.navright img {
    /* border: 2px solid red; */
    width: 17px;
    mix-blend-mode: darken;
}

.nav {
    display: inline-block;
}

.nav li {
    display: inline-block;
    font-size: 14px;
}

.nav li a {
    color: grey;
    text-decoration: none;
    padding: 17px 23px;
    mix-blend-mode: darken;
}

.navbar:hover {
    background-color: rgba(0, 0, 0, 0.292);
    color: rgb(255, 255, 255);
}

/* dropdown */

.dropdown {
    display: none;
    
}

 ul li:hover .dropdown {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -4.4cm;
    margin-top: 0.3cm;
    width: 99%;
    text-align: left;
}

.dropdown ul {
    margin: 0;
    padding: 50px;
}

.dropdown ul li {
    display: block;
    padding-left: 120px;
}



/* dropdown-1 */
.dropdown-1 {
    display: none;

}

ul li:hover .dropdown-1 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -6.0cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;
}

.dropdown-1 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-1 ul li {
    display: block;
    padding-left: 120px;
}


/* dropdown-2 */
.dropdown-2 {
    display: none;
}

ul li:hover .dropdown-2 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -8.1cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;
}

.dropdown-2 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-2 ul li {
    display: block;
    padding-left: 120px;
}


/* dropdown-3 */
.dropdown-3 {
    display: none;
}

ul li:hover .dropdown-3 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -10.0cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;
}

.dropdown-3 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-3 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-4 */
.dropdown-4 {
    display: none;
}

ul li:hover .dropdown-4 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -12.3cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-4 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-4 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-5 */
.dropdown-5 {
    display: none;
}

ul li:hover .dropdown-5 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -14.6cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-5 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-5 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-6 */
.dropdown-6 {
    display: none;
}

ul li:hover .dropdown-6 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -17.1cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-6 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-6 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-7 */
.dropdown-7 {
    display: none;
}

ul li:hover .dropdown-7 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -20.3cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-7 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-7 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-8 */
.dropdown-8 {
    display: none;
}

ul li:hover .dropdown-8 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -23.7cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-8 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-8 ul li {
    display: block;
    padding-left: 120px;
}

/* dropdown-9 */
.dropdown-9 {
    display: none;
}

ul li:hover .dropdown-9 {
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #000000;
    color: white;
    margin-left: -26.8cm;
    margin-top: 0.3cm;
    width: 100%;
    text-align: left;

}

.dropdown-9 ul {
    margin: 0;
    padding: 50px;
}

.dropdown-9 ul li {
    display: block;
    padding-left: 120px;
}






#box {
    height: 100%;
    width: 35%;
    margin-left: 33%;
    /* border: 2px solid red; */
}

.container {
    height: 100%;
    text-align: center;
    width: 100%;
}

.items {

    height: 100%;
    width: 100%;
    /* border: 2px solid red; */
    /* background-color: rgb(244 244 244 / 80%); */
    background-color: #f5f5f7;;
    /* position: absolute; */
}

.box {
    margin-left: 84px;
    font-size: 19px;
    width: 40%;
    padding-left: 33px;
    padding-top: 54px;
    /* border: 2px solid red; */
    transition: 0.5s;
    /* animation: text 3s 1; */

}

.box h1:hover {
    -webkit-text-stroke: 1px #4f4f4f;
    color: transparent;
}

.store {
    display: block;
    width: 100%;
    /* border: 2px solid red; */
    mix-blend-mode: darken;
}

.store0 {
    display: flex;
    padding: 25px;
    padding-left: 73px;
    text-align: center;
    /* border: 2px solid red; */
    mix-blend-mode: darken;

}

.store0 li {
    display: inline-block;
    font-size: 12px;
    padding: 11px;
    /* border: 2px solid red; */

}

.store0 li img {
    width: 100px;
    height: 67px;
}

.store0 li a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 0px 1px;

}

#box1 {
    /* border: 2px solid red; */
    height: 100%;
}

#text {
    height: 100%;
    width: 100%;
    font-size: 20px;
}

#text h3 {
    /* border: 2px solid red ; */
    width: 41%;
    margin-left: 114px;
}

#services {
    display: flex;
    margin: 34px;
    margin-left: 101px;
}

/* #services .product1 {
    border: 2px solid rgb(0, 0, 0);
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store.jpeg') center/cover;
}

.h-primary1 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product1 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
} */

#services .product2 {
    border: 2px solid rgb(0, 0, 0);
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store1.jpeg') center/cover;
}

.h-primary2 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product2 #s1 {

    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product3 {
    border: 2px solid rgb(0, 0, 0);
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store2.jpeg') center/cover;
}

.h-primary3 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
    margin-right: -38px;
}

#services .product3 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product4 {
    border: 2px solid rgb(0, 0, 0);
    color: white;
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store4.jpeg') center/cover;
}

.h-primary4 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product4 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product5 {
    border: 2px solid rgb(0, 0, 0);
    color: white;
    width: 182px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store5.jpeg') center/cover;
}

.h-primary5 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -13px;
}

#services .product5 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#box2 {
    /* border: 2px solid red; */
    height: 100%;
}

#text {
    height: 100%;
    width: 100%;
    font-size: 20px;
}

#text h3 {
    /* border: 2px solid red ; */
    width: 40%;
    margin-left: 114px;
}

#services {
    display: flex;
    margin: 34px;
    margin-left: 101px;
}

#services .product6 {
    border: 2px solid rgb(0, 0, 0);
    width: 295px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('man1.jpeg') center/cover;
}

.h-primary6 {
    font-size: 1.2rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product6 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product7 {
    border: 2px solid rgb(0, 0, 0);
    color: white;
    width: 291px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('man2.jpeg') center/cover;
}

.h-primary7 {
    font-size: 17px;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product7 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product8 {
    border: 2px solid rgb(0, 0, 0);
    width: 290px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('man3.jpeg') center/cover;
}

.h-primary8 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product8 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

/* #services .product4 {
    border: 2px solid rgb(0, 0, 0);
    color: white;
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store4.jpeg') center/cover;
}

.h-primary {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product4 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
} */

/* #services .product5 {
    border: 2px solid rgb(0, 0, 0);
    color: white;
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store5.jpeg') center/cover;
}

.h-primary {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product5 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
} */






#box3 {
    /* border: 2px solid red; */
    height: 100%;
}

#text {
    height: 100%;
    width: 100%;
    font-size: 20px;
}

#text h3 {
    /* border: 2px solid red ; */
    width: 52%;
    margin-left: 114px;
}

#services1 {
    display: flex;
    margin: 34px;
    margin-left: 101px;
}

/* #services1 .product1 {
    border: 2px solid rgb(0, 0, 0);
    width: 224px;
    height: 321px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store.jpeg') center/cover;
}

.h-primary1 {
    font-size: 1.3rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services1 .product1 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
} */

#services1 .product9 {
    border: 2px solid rgb(0, 0, 0);
    width: 306px;
    height: 142px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;

}

.product9 img {
    width: 54px;
    height: 50px;
    margin-left: -20px;
    margin-top: -16px;
}

.h-primary9 {
    padding-top: 0px;
    margin-top: -9px;
    font-size: 1.3rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;
}


#services1 .product10 {
    border: 2px solid rgb(0, 0, 0);
    width: 306px;
    height: 142px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;

}

.product10 img {
    width: 54px;
    height: 50px;
    margin-left: -20px;
    margin-top: -16px;
}

.h-primary10 {
    padding-top: 0px;
    margin-top: 0px;
    font-size: 1.3rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;

}


#services1 .product11 {
    border: 2px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    width: 306px;
    height: 142px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;

}

.product11 img {

    width: 26px;
    height: 27px;
    margin-left: -13px;
    margin-top: -16px;
}

.h-primary11 {
    margin-top: 6px;
    margin-right: -27px;
    font-size: 1.2rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;
}


#services1 .product12 {
    border: 2px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    width: 306px;
    height: 142px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;

}

.product12 img {

    width: 62px;
    height: 59px;
    margin-left: -23px;
    margin-top: -26px;
}

.h-primary12 {
    margin-top: -8px;
    margin-right: -27px;
    font-size: 1.2rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;
}

/* #box4{
    border: 2px solid red;
    height: 100%;

} */
#box4 {
    /* border: 2px solid red; */
    height: 100%;
}

#text {
    height: 100%;
    width: 100%;
    font-size: 20px;

}

#text h3 {
    /* border: 2px solid red ; */
    width: 40%;
    margin-left: 114px;
}

#services {
    display: flex;
    margin: 34px;
    margin-left: 101px;
}

#services .product13 {
    border: 2px solid rgb(0, 0, 0);
    /* display: inline-block; */
    color: white;
    width: 345px;
    height: 363px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store-card-50-tv-services-202404.jpeg') center/cover;
}

.h-primary13 {
    font-size: 1.8rem;
    padding: 27px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product13 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

#services .product14 {
    border: 2px solid rgb(0, 0, 0);
    /* color: white; */
    /* display: inline-block; */
    width: 345px;
    height: 363px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store-card-50-subscriptions-202108\ 1235.jpeg') center/cover;
}

.h-primary14 {
    font-size: 1.8rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;
}



#services .product15 {
    border: 2px solid rgb(0, 0, 0);
    width: 122px;
    height: 363px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('store-card-50-applecare-202309123512.jpeg') center/cover;
}

.h-primary15 {

    font-size: 1.8rem;
    padding: 0px;
    padding-left: 1px;
    margin-left: -10px;
}

/* #services .product15 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
} */

#services .product16 {
    border: 2px solid rgb(0, 0, 0);
    /* display: inline-block; */
    /* color: white; */
    width: 295px;
    height: 390px;
    padding: 37px;
    margin: 3px 10px;
    border-radius: 23px;
    background: url('faltu.jpeg') center/cover;
}

.h-primary16 {
    font-size: 1.7rem;
    padding: 15px;
    padding-left: 1px;
    margin-left: -10px;
}

#services .product16 #s1 {
    font-size: 0.85rem;
    margin: -24px;
    margin-left: -10px;
}

.footer {
    /* border: 2px solid red; */
    /* height: 1980px; */
    width: 100%;
}

.text23 {
    /* border: 2px solid red; */
    height: 100%;
    width: 89%;
    margin: 20px 97px;
}

.text23 h3 {
    /* border: 2px solid red; */
    margin: 4px 26px;
    padding: 10px;
    font-size: 1.6rem;
}

.btn-3 {
    display: block;
    width: 100%;
    margin-left: 26px;

}

#button {
    display: inline-block;
    padding: 10px 9px;
    border: 1px solid rgba(0, 0, 0, 0.521);
    /* background-color: #64646400; */
    color: #383838;
    margin: 9px;
    border-radius: 20px;
    /* box-shadow: 8px 6px 22px rgb(0, 0, 0); */
    cursor: pointer;
}

#button:hover {
    background-color: black;
    color: white;
}

.footerindex {
    /* border: 2px solid red; */
    margin: 23px;
    padding: 20px 100px;
    font-size: 0.89rem;
    color: #696969;
}

.footerindex p a {
    color: #06c;
}

.footerindex2 {
    display: flex;
    /* border: 2px solid rgb(187, 130, 7); */
    height: 40%;
    width: 70%;
    margin: -3px 0px 25px 86px;
}

.footerindex2 img {
    height: 15px;
    width: 15px;

}

#footerindex2text {
    margin-left: 14px;
    font-size: 15px;
    color: #696969;
}

.footercontent {
    width: 0;
    height: 0;
    padding: 10px;
}

.footercontent h4 {
    position: absolute;
    left: 20%;
    width: 120px;
    margin: 23px 9px;
}

.footercontent ul {
    display: inline-block;
}

.footercontent li a {
    color: grey;
    text-decoration: none;
    padding: 17px 23px;
    mix-blend-mode: darken;
}

.main-footer {
    display: flex;
    justify-content: space-around;
}

.footer li {
    list-style: none;
}

.footer ul li a {
    text-decoration: none;
    color: #696969;
}

.footer ul li p {
    font-size: 11px;

}

.footer ul li {
    margin-bottom: 9px;
    width: 132px;
}


.footer-line p {
    font-size: 13px;
    position: relative;
    width: 500px;
    left: 126px;
    color: #696969;
}

.footer-line a {
    color: #06c;
}

.copyright-content a {
    text-decoration: none;
}


@keyframes box {
    0% {
        color: black;
        margin-bottom: -40px;
    }

    30% {
        letter-spacing: 25px;
        margin-bottom: -40px;
    }

    85% {
        letter-spacing: 8px;
        margin-bottom: -40px;
    }
}