.btn-danger { --bs-btn-color: var(--btn-primary-color); --bs-btn-bg: var(--btn-primary-bg); --bs-btn-border-color: var(--btn-primary-border); --bs-btn-hover-color: var(--btn-primary-hover-color); --bs-btn-hover-bg: var(--btn-primary-hover-bg); --bs-btn-hover-border-color: var(--btn-primary-hover-border); --bs-btn-focus-shadow-rgb: 52, 122, 254; --bs-btn-active-color: var(--btn-primary-hover-color); --bs-btn-active-bg: var(--btn-primary-hover-bg); --bs-btn-active-border-color: var(--btn-primary-color); --bs-btn-active-shadow: unset; --bs-btn-disabled-color: var(--btn-primary-hover-color); --bs-btn-disabled-bg: var(--btn-primary-bg); --bs-btn-disabled-border-color: var(--btn-primary-bg); } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--svg-illustration-yellow-1); --bs-btn-border-color: var(--svg-illustration-yellow-1); --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--svg-illustration-yellow-2); --bs-btn-hover-border-color: var(--svg-illustration-yellow-1); --bs-btn-active-color: #000; --bs-btn-active-bg: var(--svg-illustration-yellow-2); --bs-btn-active-border-color: var(--svg-illustration-yellow-1); --bs-btn-disabled-bg: var(--svg-illustration-yellow-1); --bs-btn-disabled-border-color: var(--svg-illustration-yellow-1); } .btn-danger:hover{ background: var(--btn-primary-hover-bg); } .btn-warning:hover{ background: var(--svg-illustration-yellow-2); } .text-danger { color: var(--brand-primary) !important; } .card-body { padding: 0; } .section-title { font-size: 36px; } body { font-feature-settings: "ss02"; font-variation-settings: "dots" 4; overflow: auto; } p { line-height: 32px; } a { text-decoration: none; } .flip { transform: scaleX(-1); } .bg-primary { background: var(--primary-block-bg-h) !important; } .bg-primary-flat { background: var(--brand-primary) !important; } .btn { font-family: var(--font-global); } .yekanbakh { font-feature-settings: normal; font-family: var(--font-alt); } .contain-sub-1__title, .contain-sub-1__description, .contain-mega-menu__title, .contain-mega-menu__description, h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { font-family: var(--font-alt); font-feature-settings: normal; } .contain-mega-menu__title, .contain-sub-1__title { font-weight: 800; margin-bottom: 5px; } .home-slide, .features-slide, .blog-slider { width: 100%; height: auto; overflow: hidden; } .home-slide .swiper-slide { padding: 115px; } .preloader-img { width: 364px; } .navbar-box { height: 90px; box-shadow: none; border-bottom: 1px solid var(--gray-lighter-3); } .navbar-nav { height: 90px; } .home-slide .swiper-pagination-bullet { border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); width: 20rem; padding: 10px 40px; height: auto; text-align: center; line-height: 20px; font-size: 12px; color: #000; opacity: 1; background: #fff; transition: 0.1s ease; } .pagination-title { font-size: 20px; text-align: center; } .pagination-icon { width: 48px; } .home-slide .swiper-pagination-bullet-active { color: var(--gray-darker); background: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), inset 0 0 0 2px var(--brand-primary); transform: translateY(-5px); transition: transform 0.1s cubic-bezier(0.45, 0, 0.55, 1); } .autoplay-progress { position: absolute; left: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--brand-primary); } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: var(--brand-primary); fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } .contain-sub-1__content li:hover > .contain-sub-1__link, .contain-mega-menu__list li:hover > .contain-mega-menu__link { background-color: var(--brand-primary-lighter-4); } .contain-sub-1__content li:hover .contain-sub-1__title, .contain-sub-1__content li:hover .contain-sub-1__description, .contain-mega-menu__list li:hover .contain-mega-menu__title, .contain-mega-menu__list li:hover .contain-mega-menu__description { color: var(--brand-primary); } .contain-sub-1__content li:hover .contain-sub-1__svg path, .contain-mega-menu__list li:hover svg circle, .contain-mega-menu__list li:hover svg ellipse, .contain-mega-menu__list li:hover svg path { stroke: #fff; } .contain-sub-1__content li:hover #fanap, .contain-sub-1__content li:hover #pishgaman, .contain-mega-menu__list li:hover #domain-transfer { background: #00b7ec !important; } .contain-sub-1__content li:hover #respina, .contain-sub-1__content li:hover #nl, .contain-sub-1__content li:hover #ir-d, .contain-sub-1__content li:hover #nl-d { background: #383490 !important; } .contain-sub-1__content li:hover #shatel, .contain-sub-1__content li:hover #gb, .contain-mega-menu__list li:hover #domain-search { background: #f79009 !important; } .contain-sub-1__content li:hover #fanava, .contain-sub-1__content li:hover #wp-gb, .contain-mega-menu__list li:hover #domain-si { background: #f04438 !important; } .contain-mega-menu__list li:hover #domain-su { background: #12b76a !important; } .contain-sub-1__img, .contain-mega-menu__img { padding: 10px; border-radius: 10px; } .contain-sub-1__badge { position: absolute; width: 16px; top: 0; right: 0; border-radius: 100%; } .navbar .nav-link { padding: 15px 0; } .contain-mega-menu:hover .contain-mega-menu__content { top: 70px; } .contain-sub-1__content-xl > li { border-bottom: 1px solid var(--gray-lighter-4); } .nav-link { color: var(--app-nav-top-menu-link-color); } .nav-link:hover { color: var(--ui-nav-link-hover-color) !important; } .client { margin-right: 8rem; } /* Menu */ .line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); } .line1 { stroke-dasharray: 60 207; stroke-width: 6; } .line2 { stroke-dasharray: 60 60; stroke-width: 6; } .line3 { stroke-dasharray: 60 207; stroke-width: 6; } .opened .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; } .opened .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; } .opened .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; } .home-slide__title { font-size: 46px; } .home-slide__list, .features .item { display: flex; flex-direction: column; gap: 5px; color: var(--text-body-color); margin-bottom: 40px; list-style: none; } .features .item { flex-direction: row; margin-bottom: 0; } .home-slide-list__item::before, .features .item::before { content: url("../img/svg/check.svg"); vertical-align: text-top; margin-left: 7px; } .btn-arrow__icon { right: unset; left: 0; } .btn-arrow:hover .btn-arrow__text { padding-right: unset; padding-left: 20px; } #whois { line-height: 18px; color: var(--gray-darker); padding: 16px; width: 100%; background: #fff; height: 58px; border: none; font-size: 16px; border-radius: 16px; font-weight: 300; } #whois:focus { border: 2px solid var(--brand-primary-darker); outline: none; } #home-search-domain-btn { padding: 14px 24px 14px 44px; background-image: url("../img//svg/domain-search.svg"); background-repeat: no-repeat; background-position: 12px; } .domain { color: #fff; } .domain .elipse { display: inline-block; width: 8px; height: 8px; border-radius: 100%; margin-right: 0; } .pricing-title { font-size: 40px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--brand-primary); } .nav-pills .nav-link.active:hover, .nav-pills .show > .nav-link { color: #fff !important; } .nav-pills .nav-link.active .pricing-nav-pills__icon path { stroke: #fff; } .nav-pills .nav-link.active .pricing-nav-pills__icon-2 path { fill: #fff; } .pricing-nav-pills .nav { padding: 5px 3px; } .pricing-item { background: var(--brand-primary-lighter-4); color: var(--brand-primary); font-size: 16px; margin: 0 10px; } .nav.nav-pills li:last-child, .nav.nav-pills li:first-child { margin: 0; } .action-box .action { display: inline-block; background: var(--brand-primary-lighter-4); padding: 12px 24px; border-radius: 16px; } .action-box .action .start-from { font-size: 12px; font-weight: 600; line-height: 40px; justify-content: center; align-items: center; } .action-box .action .number { margin: 0 8px; font-size: 40px; font-weight: 800; line-height: 40px; justify-content: center; align-items: center; } .action-box .action .currency { font-size: 12px; font-weight: 600; line-height: 20px; justify-content: center; align-items: center; } .action-box .action .button { background: var(--btn-primary-bg); color: var(--btn-primary-color); padding: 8px 12px; font-size: 14px; border-radius: 12px; position: relative; z-index: 99; border: 5px solid var(--brand-primary-lighter-3); line-height: 25px; } .badge { display: inline-block; font-size: 12px; font-weight: 400; line-height: 15px; min-width: 16px; min-height: 16px; position: absolute; bottom: calc(100% - 8px); border-radius: 7px 7px 0 7px; } .svg-icon { margin-bottom: 1.5rem; } .section-shape { position: absolute; width: var(--section-sides-graphic-shape-width); height: var(--section-sides-graphic-shape-height); top: 10rem; left: 0; display: block; z-index: 1; } .section-shape svg, .section-shape svg { height: auto; bottom: 0; } .about-lottie { position: relative; z-index: 2; } .features-slide { cursor: grab; } .features-card { padding: 40px 30px; background-color: #fff; border-radius: 15px; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: 0.3s ease; } .icon-box { padding: 15px; width: 70px; height: 70px; background-color: #f9fafb; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--brand-secondary); } .features-text { margin-top: 15px; color: #333; font-size: 16px; font-weight: 600; text-align: center; } .features-swiper-pagination, .blog-slider-pagination { display: flex; justify-content: center; } .features-swiper-pagination .swiper-pagination-bullet, .blog-slider-pagination .swiper-pagination-bullet { width: 13px; height: 13px; transition: 0.3s ease; } .features-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .blog-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--brand-primary); width: 32px; border-radius: 10px; } .features-tooltip { position: absolute; background: var(--brand-primary-lighter-3); color: var(--brand-primary); text-align: center; font-size: 12px; font-weight: 600; border-radius: 10px; bottom: -80px; right: 0; line-height: 20px; padding: 8px; z-index: 5; opacity: 0; transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .features-card:hover { background-color: #fff; box-shadow: none; } .features-slide .swiper-slide:hover .features-tooltip { opacity: 1; bottom: -16px; } @keyframes moveOnX-5px { 0% { transform: translateX(0); } 25% { transform: translateX(4px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } } .services { padding: 80px 56px 20px 0; backdrop-filter: blur(6px); background: rgba(208, 45, 20, 0.15); border-radius: 24px; } .cload-1 { width: 325px; height: 190px; background: url("../img/svg/cloud-red-1.svg") center no-repeat; background-size: contain; position: absolute; left: -70px; top: 15%; animation: 2s linear infinite moveOnX-5px; z-index: -1; } .cload-2 { width: 325px; height: 190px; background: url("../img/svg/cloud-red-1.svg") center no-repeat; background-size: contain; position: absolute; right: -70px; top: 50%; animation: 2s linear infinite moveOnX-5px; z-index: -1; } .services__subtitle { font-weight: 700; font-size: 22px; color: var(--text-body-color); } .services-features__text { font-size: 14px; line-height: 23px; } .products-desktop { display: flex; flex-direction: column; gap: 15px; } .products-desktop .product { box-shadow: 0 12px 6px 0 #b0e9f91a; background: #fff; height: 90px; width: 82%; border-radius: 24px; margin: auto; display: flex; padding: 0 20px; justify-content: space-between; transition: 0.3s ease; } .products-desktop .product.popular { box-shadow: 0 12px 6px 0 #b0e9f91a; background: var(--svg-illustration-yellow-2); width: 88%; height: 90px; border-radius: 24px; margin: auto; display: flex; padding: 0 20px; justify-content: space-between; position: relative; transition: 0.3s ease; } .products-desktop .product .right, .products-desktop .product .left { display: flex; align-items: center; } .products-desktop .product .right .icon { height: 35px; width: 50px; display: flex; align-items: center; justify-content: center; } .products-desktop .product .right .title { font-weight: 700; font-size: 20px; } .products-desktop .product .left .start-at { font-weight: 700; font-size: 12px; color: #000; } .products-desktop .product .left .price { font-weight: 900; font-size: 40px; color: #344054; margin: 0 15px; } .products-desktop .product .left .toman { font-weight: 700; font-size: 12px; color: #344054; } .products-desktop .product .left .monthly { font-weight: 400; font-size: 12px; color: #98a2b3; } .products-desktop .product .left .btn { background-color: var(--svg-illustration-yellow-1); display: flex; justify-content: center; align-items: center; border-radius: 100px; width: 30px; height: 30px; margin: 0 30px 0 10px; transition: 0.3s ease; } .products-desktop .product.popular .popularbadge { background-color: var(--brand-secondary); padding: 8px 10px; height: fit-content; font-size: 12px; font-weight: 500; color: #fff; border-radius: 20px 20px 20px 0; position: absolute; right: -32px; top: -12px; } .products-desktop .product.popular::before { content: ""; display: block; background-color: var(--svg-illustration-yellow-1); width: 94%; height: 80px; position: absolute; bottom: -7px; right: 3%; opacity: 0.2; border-radius: 20px; z-index: -1; } .products-desktop .product.popular .left .btn, .products-desktop .product.popular .left .monthly, .products-desktop .product.popular .left .price, .products-desktop .product.popular .left .start-at, .products-desktop .product.popular .left .toman, .products-desktop .product.popular .right .title { color: #fff; } .products-desktop .product:not(.popular):hover .monthly, .products-desktop .product:not(.popular):hover .price, .products-desktop .product:not(.popular):hover .start-at, .products-desktop .product:not(.popular):hover .title, .products-desktop .product:not(.popular):hover .toman{ color: #fff; } .products-desktop .product:not(.popular):hover .fill-1{ fill: #fafafa; } .products-desktop .product:not(.popular):hover .fill-2, .products-desktop .product:not(.popular):hover .fill-3, .products-desktop .product:not(.popular):hover .fill-4{ fill: #fff; } .products-desktop .product:not(.popular):hover{ background: var(--brand-primary); } .services-features-card .head{ width: 50px; background: #fff; border-radius: 50%; padding: 5px; } .services-features-title{ text-align: unset; } .security-title{ font-size: 36px; } .support{ margin-bottom: 90px; border-radius: 20px; background: rgba(208, 45, 20, 0.15); } .security-lottie-wrapper { width: 500px; } .support-lottie-wrapper{ width: 250px; } .support-content{ padding: 48px; } .support-title{ font-size: 36px; color: #18163c; } .support-subtitle{ color: var(--gray-darker); } .support-content .features .item { font-size: 14px; } .action svg { width: 26px; height: 26px; margin-left: 7px; } .blog-section{ margin-bottom: 80px; padding-bottom: 20px; } .blog-box{ margin-top: 48px; } .blog-item { padding: 24px; border-radius: 24px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); background: #fff; border: 1px solid; border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0) 91.88%, rgba(60, 87, 136, .1) 100%); transition: background-color .3s ease-in-out; position: relative; min-height: 170px; } .blog-item:hover { background: var(--brand-primary-lighter-4) } .blog .read-more { position: absolute; left: 24px; bottom: 24px; width: 24px; height: 24px; display: block; background: #f2f4f7; border-radius: 100%; text-align: center; } .blog .action { font-size: 13px; font-weight: 600; color: #475467; position: absolute; bottom: 24px; right: 24px; } .blog-name { font-size: 16px; } .blog-subname { font-size: 13px; color: var(--text-body-color); line-height: 20px; } .blog-slider .swiper-slide { padding-bottom: 10px; } .blog-item .action svg { width: 20px; } .read-more svg { width: 12px; }