html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}



@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/IRANSansWeb_Black.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/IRANSansWeb_Bold.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/IRANSansWeb_Medium.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/IRANSansWeb_Light.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/IRANSansWeb_UltraLight.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/IRANSansWeb.woff') format('woff')
}


body {
    background-color: #eee;
    font: 100%/1.6 IRANSans;
}


header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 1030;
    background: linear-gradient(to bottom, rgba(0,0,0, 0.6), transparent);
}


section {
    padding: 100px 0;
    overflow: hidden;
}

p {
    font-weight: 300;
}

.logo {
    width: 100px;
}


.h1 {
    font-weight: 900;
    font-size: 24px;
    color: #fff;
}

.h2 {
    font-size: 24px;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.home-area {
    position: relative;
    color: #fff;
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}

@media (max-width:578px) {


    .home-area {
        background-image: url(../img/mobile.png);
        background-size: contain;
        background-position: top center;
    }

   
    p,h2{
        text-align:center;
    }
}



.home-area::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    opacity: .9;
    background: #6332f0;
  background: radial-gradient(circle, rgb(21, 30, 45) 0%, rgb(21, 30, 45) 0%, rgb(21, 30, 45) 67%);
}

.socials div {
    transition: all 0.3s ease;
}

  .socials div:hover {
  background: rgb(162, 135, 62);
  transform: scale(1.1);
}

.swiper-overflow-inherit {
    overflow: inherit;
}

.swiper-pagination-white .swiper-pagination-bullet {
    border: 1px solid #fff;
    background: transparent;
}

    .swiper-pagination-white .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #fff;
    }

.swiper-arrow-style-01 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #08052f;
    z-index: 1;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 10px;
    transition: ease all 0.35s;
    font-size: 26px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
}

    .swiper-arrow-style-01.swiper-button-disabled {
        opacity: 0.5 !important;
        pointer-events: none;
    }

    .swiper-arrow-style-01:hover {
        background: rgba(114, 48, 205, 1);
        color: #fff;
    }

.swiper-hover-arrow .swiper-arrow-style-01 {
    opacity: 0;
}

.swiper-hover-arrow:hover .swiper-arrow-style-01 {
    opacity: 1;
}

.swiper-arrow-style-01.swiper-prev {
    left: 10px;
    right: auto;
}





@media (max-width: 576px) {
    section .container {
        padding-top: 1rem;
    }


    .logo img {
      width: 113px;
    margin-right: 145px;
    display: block;
    text-align: ;
    margin-bottom: 40px;
    margin-top: 35px;
  }
		
    }

    .h2 {
        font-size: 18px;
    }
}