*{
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;


}
:root {
    --main-font-dark: #333;
    --main-bg-color: #eee;
    --context-bg-color: #2229;
    --border-radius-default: 20px;
    --main-blue:#00fe;
    --default-margin-top:150px;
}

body{
    width: 100vw;
    position: relative;
    margin: 0;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    overflow-x: hidden;
    background-color:var(--main-bg-color) ;
    background-image: url("./assets/network-nodes.jpg");
    background-size: contain;
    background-repeat: repeat;


}
article{
    margin: auto;
    width:70%;
    background-color:var(--context-bg-color);
    color: white;
}
article>*{
    padding: 20px;
}
.phone-popup{
    width: 12%;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;

}
.phone-popup:hover{
     animation: popup-shake 1s forwards;

 }
.popup-menu{
    position: fixed;
    right: 0;
    bottom: 0;
    margin-right: 10px;
    margin-bottom: 100px;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    width: 12%;
    height:200px;
    color: white;
    display: none;
}
/*conatct-us*/
.popup-menu-contactus{
    margin: auto;
    width: 30%;
    position: unset;
    height: 50vh;
    z-index: 999;
    display: flex;
}
/*...*/
.popup-menu-active{
    display: flex;
}
.popup-submenu{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;

}
.popup-submenu>*{
    border-radius: var(--border-radius-default);
    text-align: center;
    padding: 10px;

}
.popup-submenu-icon{
    width: 20%;
}
.popup-submenu-icon>a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pop-up-submneu-text{
    width: 75%;

}
.instagram-popup>*{
    background-color: darkviolet;
}
.whatsapp-popup>*{
    background-color: limegreen;
}
.call-popup>*{
    background-color: cornflowerblue;
}

.popup-icon{
     transition: all 0.2s;
     background-color: cornflowerblue;
     border-radius: 50%;
    width:60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-left: 10px;

 }

.phone-popup:hover .popup-icon{
    background-color: darkorange;
}
.popup-icon i{
    font-size: 20px;
}
.phone-popup:hover i{
    font-size: 30px;

}
.contact-us-popup{
    color: white;
    border-radius: var(--border-radius-default);
    padding: 10px;
    background-color: var(--context-bg-color);
}

a{
     text-decoration: none;
     color: white;
    width:100%;
 }
.header{
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: var(--main-blue);
    max-height: 100px;

}
.nav{
    width:100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 80px;
}
.logo{
    width: 20%;
    min-width:70px;
    max-width: 100px;
}
.logo>img{
    width: 100%;
    border-radius: 50%;

}
.menu{
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.menu-item{
    position: relative;
    padding: 5px;
}
.menu-item:hover ::after{
    content:"";
    width:100%;
    border: 1px solid white;
    position: absolute;
    top:140%;
    left:0;
    color: white;
}
.slide-btn{
    width: 50px;
    height: 50px;
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff05;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border-radius: 50%;
    cursor: pointer;
}
.back-btn{
    left: 5%;

}
.forward-btn{
    left: 93%;

}
.slider-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.slider{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.images-wrapper{
    width: 300%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.7s;
    will-change: transform;

}
.image-slide{
    width: 33.33%;
    height: 90vh;
    background-size: cover;
    background-position: top;
    opacity: 0;
    transition: all 1.2s;
}
.active{
    opacity: 1;
}
#first-slide{
    background-image: url("/assets/slider images/3d-earth-graphic-symbolizing-global-trade-illustration/Vector_2646.jpg");

}
#second-slide{
    background-image: url("/assets/slider images/futuristic-smart-city-with-5g-global-network-technology.jpg");
}
#third-slide{
    background-image: url("/assets/slider images/laptop-which-there-is-world-people-drawn.jpg");
    background-position: center;
}
.our-services{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    color: var(--main-font-dark);
    margin-top: 300px;
    margin-bottom: 300px;

}
.our-service-text{
    font-size: 50px;
}
.cards-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.service-card{
    width:25%;
    margin:0 10px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 10px;
    background-color: white;
    transition: all 0.5s;

}
.service-card:hover{
    color: white;
    background-image: linear-gradient(to bottom right, #00fd,#00ff);
}
.service-card:hover .cards-icon{
    color: white;
}
.cards-icon{
    color:darkblue;
    font-size: 50px;
    transition: all 0.5s;
}
.enhance-business{
    /*background-image: url("./assets/network-nodes.jpg");*/
    /*background-size: cover;*/
    /*background-position: center;*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.dev-img{
    width: 25%;
    border-radius: var(--border-radius-default);
}
.dev-img img{
    width: 100%;
    height: auto;
    border-radius: 10%;

}
.enhance-context{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 50%;
    background-color: var(--context-bg-color);
    color: white;
    border-radius: var(--border-radius-default);
    text-align: center;
    margin-right: 20px;
}
.enhance-context>*{
    padding: 20px;
}
.progress-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.progress-context{
    width:20%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.gray-progress{
    width: 70%;
    height: 30px;
    border-radius: 10px;
    background-color: #000;
    direction: ltr;
    margin-bottom: 10px;
}
.green-progress{
    width: 99%;
    height: 100%;
    text-align: center;
    color: white;
    background-color: #5f5;
    border-radius: 10px 0 0  10px ;

}
.network{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 200px;

}
.network-image{
    width: 25%;
}
.network-image img{
    width: 100%;
    border-radius: var(--border-radius-default);
}

.network-context{
    width: 50%;
    background-color: var(--context-bg-color);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    color: white;
    border-radius: var(--border-radius-default);
    margin-left:20px;
}
.network-context>*{
    padding: 20px;
}
.crm{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 200px;


}
.crm-image{
    width: 25%;
}
.crm-image img{
    width: 100%;
    border-radius: var(--border-radius-default);
}

.crm-context{
    width: 50%;
    background-color: var(--context-bg-color);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    color: white;
    border-radius: var(--border-radius-default);
    margin-right:20px;
}
.crm-context>*{
    padding: 20px;
}
.counter-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    background-image: linear-gradient(to bottom right, #00f,#00f);
    border-radius: 5px;
    color: white;
    margin: auto;
    position: absolute;
    top: -150px;
}
.counter-item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    font-size: 15px;
    flex-direction: column;
}
.counter-item i{
    font-size: 50px;
}
.counter-item>*{
    margin-bottom: 10px;
    padding: 20px;
}
.with-you-title{
    color: white;
    text-align: center;
}
.with-you-title>h2{
    margin-bottom: 20px;
}
.weblog{
    width: 100%;
    /*height: 80vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 200px;
    margin-bottom: 200px;
}
.weblog-title{
    color: var(--main-font-dark);
    margin-bottom: 20px;
    /*font-size: 50px;*/
}
.weblog-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    background-color: var(--context-bg-color);

}
.weblog-card{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    width: 20%;
    height: 50vh;
    margin-right:20px;
    margin-left: 20px;
}
.weblog-card *{
    text-align: center;
    width: 100%;
    color: white;
}
.weblog-image{
    overflow: hidden;
}
.weblog-image img{
    width: 100%;
    height: auto;
    transition: all 0.3s;

}
.weblog-image img:hover{
    transform: scale(1.2);
}
.weblog-card a{
    color: #fff;
}
.final-talk{
    width: 70%;
    color:var(--main-font-dark);
    margin: auto;
    margin-bottom: 200px;

}
.qa {
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    border-radius: 15px;
}

.qa-item {
    width: 100%;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid lightgray;
    border-bottom: none;
    height: auto;
    padding: 20px;
    overflow: hidden;
}

.qa .qa-item:last-child {
    border-bottom: 1px solid lightgray;
}

.question {
    width: 100%;
    color: cadetblue;
    cursor: pointer;
    font-weight: bold;
}

.answer {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    color: var(--main-font-dark);
    padding-top: 10px;
    transition: max-height 0.5s ease;
}

.active-answer {
    max-height: 300px; /* بسته به محتوای جواب */
}


.footer{
    width: 100%;
    min-height: 50vh;
    background-color: var(--main-blue);
    color: white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: var(--default-margin-top);


}

.footer-column{
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 15%;
}
.about{
    justify-content: space-evenly;
 }
.footer-title{
     margin-bottom: 20px;
    font-size: 25px;
 }
.footer-items{
    height: 25vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;

}
.footer>.logo{
    width: 100%;
}
.footer img{
    width: 100%;
    border-radius: 50%;
}
.footer-contact-us-items{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    flex-direction: column;

}
.contact-item , .social-media{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
/*about-us-page    */
.about-us-header-image{
    width: 100%;
    height: 60vh;
    background-color: #777;
    background-image: url("/assets/about-us.jpg");
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;

}
.about-us-second{

    margin: auto;
    margin-top: 150px;
    width: 60%;
}
.about-us-second img{
    width: 100%;

}
.about-us-main-context{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    margin-bottom: 150px;

}
.about-us-context{
    width: 50%;
    border-radius: var(--border-radius-default);
    background-color: var(--context-bg-color);
    color: white;
}
.about-us-context>*{
    padding: 20px;

}
.about-us-logo{
    width: 20%;
    margin-left: 50px;

}
.about-us-logo img{
    width: 100%;
    border-radius: 50%;
}
.about-us-counter-wrapper{
    position: unset;
    top: 0;
    margin-top: 0;
}
.our-team{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--context-bg-color);
    color: white;
    margin-top: var(--default-margin-top);
}
.our-team>*{
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.our-team-item{
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.our-team-item img{
    border-radius: 50%;
    border: 5px solid rebeccapurple;
    width: 95%;

}
.our-team-item-name {
    font-size: 20px;

}
/*work-samples-page*/
.gallery{
    margin:auto;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}
.gallery-img{
    width: 20%;
    overflow: hidden;
}
.gallery-img img{
    width: 100%;
    transition: all 0.3s ;


}
.gallery-img>img:hover{
    transform: scale(1.2);
}
/*articles    */
.center {
    text-align: center;
}
.center>img{
    width: 70%;
}
hr {
    border: none;
    border-bottom: 1px solid #ddd;
    margin: 40px 0;
}
@keyframes popup-shake {
    25%{
        rotate: 30deg;
    }
    50%{
        rotate: -30deg;
    }
    75%{
        rotate: 30deg;

    }
    to{
        rotate: 0;
    }
}
@media screen and (max-width: 800px) {
    body{
        width:100vw;
    }
    body>*{
        padding: 5px;
    }
    .nav{
        flex-direction: column;
    }
    .menu{
        flex-direction: column;
    }
    .menu{
        display: none;
    }
    .slider-container{
        display: none;
    }
    .cards-wrapper{
        flex-direction: column;
    }
    .service-card{
        width: 100%;
    }
    .enhance-business{
        margin-bottom: 200px;
        margin-top: 200px;
        flex-direction: column;
    }
    .enhance-business>*{
        width: 100%;
        padding: 20px;
    }
    .network{
        flex-direction: column;

    }
    .network>*{
        width: 100%;
        padding: 20px;
    }
    .crm{
        flex-direction: column;

    }
    .crm>*{
        width: 100%;
        padding: 20px;
    }
    .counter-wrapper{
        position: unset;
    }
    .weblog-container{
        flex-wrap: wrap;
    }
    .weblog-container{
        margin:20px;
    }
    .weblog-card{
        width: 100%;
    }
    .weblog-card>*{
        padding: 20px;
    }
    .footer{
        flex-wrap: wrap;
    }
    .footer-column{
        width: 100%;

    }
    .about-us-second{
        margin-bottom: 200px;
    }
    .about-us-main-context{
        flex-direction: column;
        margin:150px 20px 150px 20px;
    }
    .about-us-main-context>*{
        width: 100%;
        padding: 20px;
    }
    .our-team-item{
        width: 60%;
        margin-bottom: 20px;
    }
    .our-team-members{
        flex-direction: column;
    }
    .gallery{
        width: 100%;
    }
    .gallery-img{
        width: 45%;
        margin: 10px;
    }
    .pop-up-submneu-text{
        display: none;
    }
    .contact-us-popup{
        display: none;
    }
    .popup-menu-contactus .pop-up-submneu-text{
        display: block;
    }
    .popup-submenu-icon{
        border-radius: 50%;
    }
    .popup-menu{
        width: 50%;
    }

}