* {
    margin: 0;
    padding: 0;
}

section {
    padding: 40px 40px;
    position: relative;
}

.other-sect {
    padding-top: 105px;
}

@media (max-width:960px) {
    section {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.contact-nav .left-content a {
    text-decoration: none;
    color: white;
}

.cart-container {
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
}

.inner-cart {
    position: relative;
    width: 70%;
    margin: 0 auto;
    background-color: white;
    padding: 10px;
    height: 500px;
    border: 1px solid #ccc;
    margin-top: -100%;
    transition: all ease-in-out 0.8s;
    box-shadow: 0 40px 40px 0 rgba(0, 0, 0, 0.9);
}

@media (max-width:960px) {
    .inner-cart {
        padding-bottom: 180px;
    }
}

.cart-item {
    border-bottom: 1px solid #ccc;
    color: #202296;
    padding: 5px 10px;
    position: relative;
    border-radius: 20px;
}

.cart-item p {
    margin-bottom: 0px;
}

.cart-item .trash {
    position: absolute;
    right: 10px;
    top: 15px;
    background-color: transparent;
    border: none;
    color: red;
}

.cart-container.active {
    top: 0;
}

.cart-container.active .inner-cart {
    margin-top: 0;
}

@media (max-width:960px) {
    .inner-cart {
        width: 100%;
    }
}

.inner-cart .fixed_top {
    width: 100%;
    position: absolute;
    left: 0;
    box-sizing: border-box;
    top: 0;
    background-color: rgb(5, 5, 92);
    padding: 10px 10px;
    z-index: 9999;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    color: white;
}

.send_message {
    background-color: rgb(5, 5, 92);
    border: none;
    padding: 5px 15px;
    color: #fff;
    margin-bottom: 10px;
}

.send_message:hover {
    background-color: rgb(30, 30, 168);
}

@media (max-width:960px) {
    .send_message {
        width: 100%;
    }
}

.inner-inner-cart {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 60px 0;
}

.inner-inner-cart::-webkit-scrollbar {
    width: 10px;
    background-color: white;
}

.inner-inner-cart::-webkit-scrollbar-thumb {
    background-color: #b11010;
    width: 10px;
}

.fixed_bottom {
    width: 100%;
    position: absolute;
    left: 0;
    box-sizing: border-box;
    bottom: 0;
    background-color: white;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.fixed_bottom .cart-btn {
    width: 100%;
}

@media (max-width:960px) {
    .fixed_bottom {
        flex-wrap: wrap;
    }
}

.tag {
    color: blue;
}

.tag.sect {
    text-align: center;
    font-size: 20px;
}

.title-underline {
    height: 2px;
    width: 100px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: 140px;
    transform: translate(-50%, -50%);
}

/*-------Nav------*/
nav {
    background: linear-gradient(60deg, rgb(5, 5, 92) 18%, rgb(255, 255, 255) 19%);
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.6);
    border-bottom: 4px solid rgb(25, 25, 168);
    z-index: 999;
    padding: 5px 20px;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all ease-in-out 1s;
    top: 40px;
}

nav.active {
    top: 0;
}

nav .logo {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 150px;
    text-align: center;
    text-decoration: none;
    color: white;
}

nav .logo img {
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

nav .logo:hover {
    color: white;
}

.whatsapp {
    display: none;
}

.contact-nav {
    background-color: rgb(5, 5, 92);
    color: white;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.contact-nav i {
    margin-right: 10px;
    color: white;
}

nav .list {
    display: flex;
    gap: 20px;
}

nav .list li {
    list-style: none;
}

nav .list li a {
    color: rgb(5, 5, 92);
    text-decoration: none;
    font-weight: 700;
}

nav .list li a i {
    font-size: 15px;
    font-weight: 550;
}

nav .btn-login:hover {
    background-color: rgb(33, 33, 192);
}

nav .cart {
    display: flex;
    gap: 20px;
    list-style: none;
    align-items: center;
}

nav .cart a {
    color: rgb(5, 5, 92);
    text-decoration: none;
    font-weight: 700;
}

nav .btn-login {
    background-color: rgb(159, 159, 179);
    color: white;
    padding: 10px 30px;
    top: 20px;
    border-radius: 50px;
    transition: all ease-in-out 0.5s;
    display: block;
}


nav .hover {
    position: relative;
}

nav .hover-container {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 9999;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    left: -20px;
    width: 180px;
    top: 25px;
    border-radius: 10px;
}

nav .hover-container.active {
    display: block;
}

@media (max-width:1200px) {
    nav {
        background: linear-gradient(120deg, rgb(5, 5, 92) 20%, rgb(255, 255, 255) 21%);
    }
}

@media (max-width:960px) {
    nav {
        background: linear-gradient(120deg, rgb(5, 5, 92) 26%, rgb(255, 255, 255) 27%);
    }

    @keyframes float {
        0% {
            rotate: 90deg;
        }

        100% {
            rotate: -90deg;
        }
    }

    .whatsapp {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 40px;
        right: 10px;
        background-color: green;
        text-decoration: none;
        color: white;
        font-size: 30px;
        z-index: 9999;
        width: 60px;
        height: 60px;
        border-radius: 50px;
        animation: float 5s 5s infinite linear;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .whatsapp:hover {
        color: white;
    }
}

@media (max-width:840px) {
    nav {
        background: linear-gradient(120deg, rgb(5, 5, 92) 30%, rgb(255, 255, 255) 31%);
    }

    .contact-nav h6 span {
        font-size: 13px;
    }
}

@media (min-width:0px) and (max-width:740px) {
    nav .logo {
        margin-left: -40px;
    }

    nav .logo h6 {
        font-size: 15px;
    }

    nav .logo img {
        width: 30px;
        height: 30px;
    }

    nav {
        background: linear-gradient(120deg, rgb(5, 5, 92) 33%, rgb(255, 255, 255) 34%);
    }

    .contact-nav span {
        display: none;
    }
}



@media (max-width:1100px) {

    nav .list {
        display: none;
    }

    nav .list.active {
        display: block;
        gap: 20px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 88px;
        background-color: rgb(5, 5, 92);
        padding-top: 20px;
        z-index: 9999;
        box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.5);
    }

    nav .list.active #hover-me-nav{
                position: absolute;
                top: 10px;
                right: 130px;
        width: fit-content;
    }

    nav .list.active li {
        margin-bottom: 20px;
    }

    nav .list.active li a {
        color: #fff;
    }

        nav .list.active #hover-me-nav-cont{
        display: block;
        background-color: rgb(5, 5, 92);
    }

    nav .list.active .other-hide{
        display: none   ;
    }

    nav .list.login-list {
        display: none;
        right: 60px;
    }

    nav .toggle {
        display: block;
        cursor: pointer;
        margin-top: 5px;
    }

    nav .toggle .bar {
        width: 30px;
        height: 3px;
        background-color: rgb(5, 5, 92);
        margin-bottom: 5px;
        display: block;
        transition: all ease 0.5s;
    }

    nav .toggle.active .bar {
        background-color: red;
    }

    nav .toggle.active :nth-child(1) {
        transform: rotate(-45deg) translate(-8px, 7px);
    }

    nav .toggle.active :nth-child(2) {
        opacity: 0;
    }

    nav .toggle.active :nth-child(3) {
        transform: rotate(45deg) translate(-4px, -2px);
    }

    .contact-nav h6 {
        text-align: center;
    }

    .contact-nav h6 span {
        display: none;
    }

    .logo span {
        display: none;
    }

    .cart {
        position: absolute;
        right: 10px;
    }

    .btn-login span {
        display: none;
    }

    nav .btn-login {
        padding: 5px 15px;
    }

    nav .cart {
        gap: 10px;
    }
}

/*-------Nav------*/

/*-------Hero------*/

.hero {
    min-height: calc(100vh - 40px);
    padding-top: 180px;
    background-color: #f5efef;
    display: flex;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0.9) 80%), url('../img/0x0.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero .discount {
    color: blue;
}

.hero .home-text {
    margin-top: 20px;
    font-size: 80px;
    color: rgb(5, 5, 92);
    margin-bottom: 80px;
}

.hero .home-text span {
    color: goldenrod;
}

.hero .learn-more {
    background-color: rgb(5, 5, 92);
    color: white;
    padding: 10px 80px;
    border-radius: 50px;
    text-decoration: none;
}

.hero aside {
    width: 100%;
}

@keyframes hero_img {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        margin-right: 0;
        transform: scale(1.0);
    }
}

.hero aside.rigt-column img {
    width: 100%;
    height: 100%;
    margin-top: -40px;
    animation: hero_img 3s;
}

.hero aside.left-column {
    padding-bottom: 40px;
}

@keyframes home-content {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hero .learn-more {
    animation: home-content 3s;
}

.hero .home-text {
    animation: home-content 3s;
}

@media (max-width:960px) {
    .hero {
        flex-wrap: wrap;
    }

    .hero .home-text {
        font-size: 50px;
    }
}

/*-------Hero------*/

/*-------Services------*/

.services .web-services-container {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@keyframes web-service {
    0% {
        opacity: 0;
        scale: 0;
        background-color: black;
        border: 10px solid rgb(0, 0, 146);
        transform: translateY(100PX);
    }

    25% {
        scale: 0.25;
    }

    50% {
        scale: 0.50;
    }

    75% {
        scale: 0.75;
    }

    100% {
        opacity: 1;
        scale: 1;
        background-color: rgb(255, 255, 255);
        transform: translateY(0);
    }
}

.web-service {
    width: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
    color: white;
    background-color: rgb(255, 255, 255);
    border: 0px solid rgb(5, 5, 92);
    position: relative;
    padding-right: 35px;
    margin-bottom: 40px;
    z-index: 0;
    transition: all ease-in-out 00.5s;
    animation: web-service both;
    animation-timeline: view();
    animation-range: 0% cover 30%;
}


.web-service:hover {
    transform: scale(1.04);
    z-index: 1;
}

.web-service .web-body .web-price {
    text-align: center;
    margin-top: 80px;
}

.web-header {
    text-align: center;
    width: 100%;
    padding: 5px 20px;
    background-color: rgb(76, 76, 207);
    position: absolute;
    top: 0;
}

.web-footer {
    width: 100%;
    padding: 5px 5px;
    padding-top: 15px;
    background-color: rgb(255, 255, 255);
    display: flex;
    gap: 5px;
}

.web-footer button {
    padding: 5px 20px;
    width: 100%;
    border: none;
    border-radius: 2px;
    background-color: rgb(76, 76, 207);
    color: white;
}

.web-body {
    color: rgb(5, 5, 92);
}

.web-body .service-list {
    list-style: none;
}

.web-body .service-list li {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
}

.web-body .service-list:last-child {
    margin-bottom: 80px;
}

.web-body .service-list li i {
    margin-right: 0px;
}

.web-body h1 {
    margin: 40px 0;
}

.web-footer {
    position: absolute;
    bottom: 0;
}

.web-footer button:hover {
    background-color: rgb(133, 133, 255);
    color: white;
}

@media (min-width:750px) and (max-width:1000px) {
    .services .web-services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .web-service {
        margin-bottom: 10px;
    }

    .web-service .web-footer button span {
        display: none;
    }
}

@media (min-width:0) and (max-width:740px) {
    .services .web-services-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .web-service {
        margin-bottom: 10px;
    }

    .web-service .web-footer button span {
        display: none;
    }
}

@media (max-width:1200px) {
    .web-service .web-footer button span {
        display: none;
    }
}

/*-------Services------*/

/*-------About Us------*/

.about-us {
    background-color: #fcfafa;
}

.about-us-container {
    width: 100%;
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    overflow: hidden;
    perspective: 1000px;
}

@keyframes spin {
    from {
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }

    to {
        transform-style: preserve-3d;
        transform: rotateY(180deg);
    }
}

.card-about {
    border: 3px solid rgb(142, 142, 184);
    width: 100%;
    background-color: white;
    transition: all ease-in-out 0.6s;
    transform-style: preserve-3d;
}

.card-about .back {
    transform: rotateY(180deg);
}

.card-about .front,
.card-about .back {
    backface-visibility: hidden;
    width: 100%;
    padding: 40px 20px;
}

.card-about .front {
    background-color: rgb(11, 76, 138);
    color: white;
    height: 100%;
}

.card-about .back {
    position: absolute;
    top: 0;
    height: 100%;
}

.card-about .back img {
    width: 100%;
    height: 100%;
}

.card-about .icon {
    margin: 0 auto;
    width: fit-content;
    background-color: rgb(5, 5, 92);
    border-radius: 5px;
}

.card-about .icon i {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    transform: translate(-10px, -10px);
    background-color: rgb(16, 89, 148);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: white;
}

.about-title {
    text-align: center;
    margin: 30px 0;
}

@media (min-width: 0px) and (max-width:740px) {
    .about-us-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width:741px) and (max-width:1200px) {
    .about-us-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*-------About Us------*/


/*-------Contact Us------*/

.contact-container {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.contct-item {
    padding: 20px 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    animation: web-service both;
    animation-timeline: view();
    animation-range: 0% cover 25%;
}

.contct-item i {
    font-size: 40px;
    padding: 20px;
    border-radius: 10px;
    color: white;
    display: flex;
    align-items: center;
}

.contct-item p a {
    text-decoration: none;
    color: black;
}

.contct-item.last-contact {
    display: grid;
}

.icons-inn {
    display: flex;
    gap: 10px;
}

.contct-item.last-contact a {
    text-decoration: none;
}

.contct-item.last-contact a i {
    padding: 5px;
    background-color: #ccc;
    font-size: 20px;
    margin-top: -30px;
    width: fit-content;
}

.contact-us-form {
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    border-radius: 20px;
}

.contact-us-form h1 {
    text-align: center;
}

.contact-us-form input {
    width: 100%;
    outline: none;
    border: none;
    padding: 10px 20px;
}

.contact-us-form textarea {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    border: none;
    outline: none;
    padding: 10px 20px;
}

.top-inputs {
    width: 100%;
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

.iiin {
    width: 100%;
}

.input-mother {
    margin-bottom: 20px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
}

.input-mother:focus-within {
    border: 2px solid rgb(135, 119, 223);
    box-shadow: 0 0 0 2px #51a7e8;
}

@media (min-width:0px) and (max-width:740px) {
    .contact-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .contct-item.last-contact a i {
        margin-top: -20px;
    }

    .top-inputs {
        flex-wrap: wrap;
    }

    .right-inputs {
        margin-top: -30px;
    }

    .contact-us-form {
        padding: 10px;
    }
}

@media (min-width:741px) and (max-width:1300px) {
    .contact-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*-------Contact Us------*/

/*-------Footer------*/
.footer {
    background-color: rgb(46, 46, 46);
    padding: 30px 50px;
    padding-bottom: 5px;
}

.footer hr {
    background-color: #ccc;
}

.inner-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    justify-content: space-between;
}

@media (max-width:1200px) {
    .inner-footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:960px) {
    .inner-footer {
        grid-template-columns: repeat(1, 1fr);
    }
}

.inner-footer .item-footer {
    color: #ccc;
}

.inner-footer .item-footer h6 {
    color: white;
    font-weight: bold;
}

.item-footer .social-links {
    display: flex;
    gap: 20px;
}

.bottom-footer h2 {
    color: #ccc;
    text-align: center;
}

.bottom-footer p {
    text-align: center;
    color: #adadad;
}

.item-footer.linked {
    text-align: start;
}

.item-footer.linked a {
    text-decoration: none;
    color: #ccc;
}

.item-footer.linked a:hover {
    color: white;
}

.item-footer.linked li {
    list-style: none;
}

.footer form {
    width: 100%;
}

.footer form input[type="submit"] {
    margin-top: 5px;
    width: 100%;
    padding: 5px 0;
    background-color: #51a7e8;
    transition: all ease-in-out 0.5s;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.footer form input[type="submit"]:hover {
    background-color: #48249c;
    color: #ccc;
}

.input-conatiner {
    width: 100%;
    background-color: white;
    border: 3px solid rgb(233, 211, 11);
    overflow: hidden;
}

.input-conatiner:focus-within {
    border: 3px solid rgb(233, 211, 11);
    box-shadow: 0 0 10px white;
}

.input-conatiner input {
    outline: none;
    border: none;
    padding: 5px 10px;
    width: 100%;

}

/*-------Footer------*/