@charset "UTF-8";
.sec-contact-goharnahal .contact-form {
  padding: 20px 15px 20px 40px;
}

.sec-contact-goharnahal .contact-details {
  position: relative;
  padding: 20px 40px 20px 15px;
}

.sec-contact-goharnahal .contact-details::before {
  content: "";
  width: 1px;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  opacity: 0.12;
}

.sec-contact-goharnahal .contact-details .head-tell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.sec-contact-goharnahal .contact-details .head-tell .title-head {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0;
}

.sec-contact-goharnahal .contact-details .row-tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sec-contact-goharnahal .contact-details .fullname {
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
}

.sec-contact-goharnahal .contact-details .tel-number {
  font-size: 18px;
  font-weight: 800;
  color: var(--maincolor);
  direction: ltr;
}

.sec-contact-goharnahal .tab-contents hr.spacing {
  background-image: none;
  border-top: 1px solid rgba(155, 164, 180, 0.5);
  opacity: 0.3;
  margin: 20px 0;
}

.sec-contact-goharnahal .contact-details .head-address {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.sec-contact-goharnahal .contact-details .head-address .title-head {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0;
}

.sec-contact-goharnahal .contact-details .head-address .btn-google-map {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 700;
  color: var(--blackcolor);
}

.sec-contact-goharnahal .contact-details .head-address .btn-google-map > img {
  width: 22px;
  margin-right: 10px;
}

.sec-contact-goharnahal .contact-details .head-address .btn-google-map:hover > img {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}
.sec-contact-goharnahal .contact-details .list-address .map-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-contact-goharnahal .contact-details .list-address .item-adrs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

.sec-contact-goharnahal .contact-details .list-address .item-adrs:not(:last-child) {
  margin: 0 0 30px;
}

.sec-contact-goharnahal .contact-details .list-address .item-adrs .title {
  font-size: 16px;
  font-weight: 800;
  color: var(--blackcolor);
  margin: 0 0 5px;
  transition: all 0.3s;
}

.sec-contact-goharnahal .contact-details .list-address .item-adrs:hover .title {
  color: var(--maincolor);
}

.sec-contact-goharnahal .contact-details .list-address .item-adrs .text {
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
  margin: 0;
}

.sec-contact-goharnahal .box-map {
  background-color: var(--lightcolor);
  width: 100%;
  height: 400px;
  border-radius: 25px;
  overflow: hidden;
  margin-top: 40px;
}

.sec-contact-goharnahal .box-map iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  filter: grayscale(1);
}

.sec-contact-goharnahal .contact-details .socials-website .title-sc {
  font-size: 18px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0 0 20px;
}

.sec-contact-goharnahal .contact-details .socials-website .list-sc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc.active {
  margin: 0 5px;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc .box-icon {
  background: rgba(155, 164, 180, 0.5);
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 25px;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc.active .box-icon {
  background-color: var(--maincolor);
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: right;
  width: 0;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: all 0.3s;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc.active .text {
  width: 220px;
  opacity: 1;
  visibility: visible;
  margin-right: 15px;
  transition-delay: 0.2s;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--maincolor);
  margin: 0;
}

.sec-contact-goharnahal .contact-details .socials-website .item-sc .desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
}

.head-sec-gohar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  z-index: 100;
}

.head-sec-gohar .content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.head-sec-gohar .content .shape {
  height: 50px;
  margin-left: 20px;
}

.head-sec-gohar .content .text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.head-sec-gohar .content .title {
  font-size: 18px;
  font-weight: 800;
  color: var(--blackcolor);
  margin: 0 0 0 15px;
}

.head-sec-gohar .content .title > strong {
  position: relative;
  font-weight: 800;
  color: var(--maincolor);
}

.head-sec-gohar .content .title > strong::after {
  content: "";
  background: url("../images/site/underline.svg") no-repeat center center/contain;
  width: 130%;
  height: 10px;
  position: absolute;
  bottom: -10px;
  right: -10%;
}

.head-sec-gohar .content .desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
}

.sec-news-goharnahal .sec-gohar-news {
  margin-top: 0;
  font-size: 15px;
  line-height: 30px;
}

.sec-news-goharnahal .sec-gohar-news .item-news {
  margin-bottom: 30px;
}

.sec-gohar-news {
  position: relative;
  margin-top: 80px;
  width: 100%;
}

.sec-gohar-news .item-news {
  transition: all 0.3s;
}

.sec-gohar-news .row:hover .item-news {
  filter: blur(3px) opacity(0.5);
}

.sec-gohar-news .row .item-news:hover {
  filter: none;
}

.sec-gohar-news .item-news .image-news {
  display: flex;
  width: 100%;
  height: 300px;
  border-radius: 25px;
  overflow: hidden;
}

.sec-gohar-news .item-news .image-news > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.sec-gohar-news .item-news:hover .image-news > img {
  transform: scale(1.1);
}

.sec-gohar-news .item-news .title-news {
  display: -webkit-box;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-align: right;
  margin: 20px 0 15px;
}

.sec-gohar-news .item-news .title-news > a {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  transition: all 0.3s;
}

.sec-gohar-news .item-news:hover .title-news > a {
  color: var(--maincolor);
}

.sec-gohar-news .item-news .desc-news {
  display: -webkit-box;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: var(--textcolor);
  text-align: right;
  line-height: 30px;
  margin: 0;
}

.sec-gohar-news .item-news .options-news {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.sec-gohar-news .item-news .options-news .item-op {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 400;
  color: var(--blackcolor);
}

.sec-gohar-news .item-news .options-news .item-op > i {
  font-size: 22px;
  color: var(--textcolor);
  margin-left: 8px;
}

.sec-gohar-news .item-news .options-news .item-op > span {
  display: flex;
  padding-top: 5px;
}

/*---------------------- /Section Gohar News ---------------------*/
.sec-news-details + .sec-gohar-news {
  margin-bottom: 100px;
}

.sec-news-details .content-news {
  padding-left: 50px;
}

.sec-news-details .content-news .title-main {
  font-size: 25px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0;
}

.sec-news-details .content-news .image-news {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 30px;
  overflow: hidden;
  margin: 20px 0;
}

.sec-news-details .content-news .image-news > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-news-details .content-news .image-news .btn-like-news {
  background-color: rgba(255, 255, 255, 0.3);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 22px;
  color: var(--whitecolor);
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  transition: all 0.3s;
}

.sec-news-details .content-news .image-news .btn-like-news.active {
  background-color: var(--whitecolor);
  color: var(--redcolor);
}

.sec-news-details .content-news .other-desc-news p {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: justify;
  color: var(--blackcolor);
  margin: 0;
}

.sec-news-details .content-news .other-desc-news p a {
  font-weight: 700;
  color: var(--maincolor);
  text-decoration: underline !important;
}

.sec-news-details .content-news .other-desc-news .short-quote {
  position: relative;
  background-color: var(--whitecolor);
  padding: 20px 20px 20px 100px;
  border-radius: 25px;
  margin: 20px 0 30px;
}

.sec-news-details .content-news .other-desc-news .short-quote::before {
  content: "\e953";
  font-family: "icomoon";
  font-size: 50px;
  color: var(--textcolor);
  position: absolute;
  bottom: 5px;
  left: 25px;
  transform: scale(-1);
  opacity: 0.2;
}

.sec-news-details .content-news .other-desc-news .short-quote p {
  font-size: 14px;
  line-height: 35px;
  color: var(--textcolor);
}

.sec-news-details .content-news .other-desc-news h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0 0 15px;
}

.sec-news-details .content-news .other-desc-news .banner-desc {
  position: relative;
  background-color: var(--subcolor);
  height: 200px;
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 40px;
  overflow: hidden;
  margin: 40px 0;
}

.sec-news-details .content-news .other-desc-news .banner-desc::before {
  content: "";
  width: 600px;
  height: 600px;
  position: absolute;
  right: -150px;
  bottom: -400px;
  border-radius: 500px;
  opacity: 0.6;
  background: var(--maincolor);
  filter: blur(1000px);
}

.sec-news-details .content-news .other-desc-news .banner-desc .details {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sec-news-details .content-news .other-desc-news .banner-desc .svg-fruit {
  width: 90px;
  height: 90px;
  margin-left: 30px;
  flex-shrink: 0;
}

.sec-news-details .content-news .other-desc-news .banner-desc .path-color {
  fill: var(--yellowcolor);
  stroke: var(--yellowcolor);
}

.sec-news-details .content-news .other-desc-news .banner-desc .content .title {
  font-size: 25px;
  font-weight: 200;
  color: var(--whitecolor);
  margin: 0 0 5px;
}

.sec-news-details .content-news .other-desc-news .banner-desc .content .title > strong {
  font-weight: 800;
}

.sec-news-details .content-news .other-desc-news .banner-desc .content .desc {
  font-size: 16px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
  line-height: normal;
}

.sec-news-details .content-news .other-desc-news .banner-desc .btn-link-banner {
  background-color: var(--yellowcolor);
  display: flex;
  height: 70px;
  padding: 25px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0px 4px 30px 0px rgba(244, 206, 20, 0.4);
  font-size: 16px;
  font-weight: 700;
  color: var(--subcolor);
  border: none;
  flex-shrink: 0;
  transition: all 0.3s;
}

.sec-news-details .content-news .other-desc-news .banner-desc .btn-link-banner:hover {
  background-color: var(--whitecolor);
  box-shadow: 0px 4px 30px 0px rgba(255, 255, 255, 0.4);
}

.sec-news-details .content-news .other-desc-news .banner-desc .btn-link-banner .arrow-left {
  background-color: var(--whitecolor);
  padding: 5px;
  height: 22px;
  border-radius: 100px;
  margin-right: 10px;
  font-size: 24px;
  color: var(--subcolor);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.sec-news-details .content-news .other-desc-news .banner-desc .btn-link-banner:hover .arrow-left {
  background-color: var(--subcolor);
  color: var(--whitecolor);
}

.sec-news-details .content-news hr.spacing {
  width: 100%;
  height: 1px;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  opacity: 0.12;
  margin: 60px 0;
}

.sec-news-details .content-news .row-head-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.sec-news-details .content-news .title-head-section {
  background-color: var(--maincolor);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0px 5px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  color: var(--whitecolor);
  margin: 0 0 40px;
}

.sec-news-details .content-news .row-head-between .title-head-section {
  margin: 0;
}

.sec-news-details .content-news .row-head-between .desc-head-section {
  font-size: 16px;
  font-weight: 700;
  color: var(--textcolor);
}

.sec-news-details .cart-details {
  position: sticky;
  top: 30px;
  align-self: flex-start;
}

.sec-news-details .cart-details .accordion-news {
  background-color: var(--whitecolor);
  border-radius: 25px;
  box-shadow: none;
}

.sec-news-details .cart-details .accordion-news .accordion-news-header {
  padding: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-news-details .cart-details .accordion-news .accordion-news-header .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--textcolor);
  margin: 0;
}

.sec-news-details .cart-details .accordion-news .accordion-news-header .box-icon {
  display: flex;
  font-size: 20px;
  color: var(--textcolor);
  transition: all 0.4s;
}

.sec-news-details .cart-details .box-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: auto;
  padding: 5px 0;
  border-radius: 30px;
  margin-top: -20px;
}

.sec-news-details .cart-details .box-details .item-dts {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
}

.sec-news-details .cart-details .box-details .item-dts:last-child {
  border-bottom: none;
}

.sec-news-details .cart-details .box-details .item-dts .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--blackcolor);
}

.sec-news-details .cart-details .box-details .item-dts .content {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--textcolor);
}

.sec-news-details .cart-details .box-details .item-dts .content > i {
  font-size: 20px;
}

.sec-news-details .cart-details .box-details .item-dts .content > span {
  padding-top: 2px;
}

.sec-news-details .cart-details .btn-list-comments {
  border-radius: 25px;
}

.sec-other-contents .head-sticky .form-control-search {
  width: 400px;
  height: 70px;
  padding: 10px 20px;
  text-align: right;
  border-radius: 20px !important;
  border: 2px solid rgba(155, 164, 180, 0.2);
  background-color: var(--whitecolor);
  font-size: 14px;
  font-weight: 700;
  color: var(--blackcolor);
  box-shadow: none;
  transition: all 0.3s;
}

.sec-other-contents .head-sticky .form-control-search:focus {
  border-color: var(--maincolor);
}

.sec-other-contents .head-sticky .form-control-search::placeholder {
  font-size: 14px;
  font-weight: 600;
  color: var(--textcolor);
  opacity: 0.5;
}

.sec-other-contents .head-sticky .btn-confirm-search {
  background-color: var(--maincolor);
  position: absolute;
  top: 10px;
  left: 10px;
  height: 50px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px !important;
  color: var(--whitecolor);
  transition: all 0.3s;
  border: none;
}

/*---------------------- Bread Crumb ---------------------*/
.sec-breadcrumb {
  margin-bottom: 40px;
}

.outer-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.outer-breadcrumb .breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.outer-breadcrumb .breadcrumb .breadcrumb-item,
.outer-breadcrumb .breadcrumb .breadcrumb-item > a {
  font-size: 13px;
  font-weight: 600;
  color: var(--blackcolor);
  transition: all 0.3s;
}

.outer-breadcrumb .breadcrumb .breadcrumb-item > a:hover {
  color: var(--maincolor);
}

.outer-breadcrumb .breadcrumb .breadcrumb-item {
  font-weight: 400;
  color: var(--textcolor);
  padding: 0;
}

.outer-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\e91e";
  font-family: "icomoon";
  font-size: 15px;
  display: inline-block;
  padding: 0 10px;
  color: var(--textcolor);
  opacity: 0.5;
  line-height: 1.1;
}

.outer-breadcrumb .btn-share-page {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row-reverse;
  font-size: 12px;
  font-weight: 600;
  color: var(--blackcolor);
  flex-shrink: 0;
  transition: all 0.3s;
}

.outer-breadcrumb .btn-share-page:hover {
  color: var(--maincolor);
}

.outer-breadcrumb .btn-share-page > i {
  font-size: 20px;
  color: var(--textcolor);
  margin-right: 10px;
  transition: all 0.3s;
}

.outer-breadcrumb .btn-share-page:hover > i {
  color: var(--subcolor);
}

/*---------------------- /Bread Crumb ---------------------*/
/*---------------------- Comments ---------------------*/
.sec-news-details .content-news .row-head-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.sec-news-details .content-news .title-head-section {
  background-color: var(--maincolor);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0px 5px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  color: var(--whitecolor);
  margin: 0 0 40px;
}

.sec-news-details .content-news .row-head-between .title-head-section {
  margin: 0;
}

.sec-news-details .content-news .row-head-between .desc-head-section {
  font-size: 16px;
  font-weight: 700;
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .item-comment,
.sec-news-details .content-news .item-comment,
.sec-profile-page .box-outer-profile .item-comment {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}

.sec-other-contents .tab-comments .item-comment.answer,
.sec-news-details .content-news .item-comment.answer {
  padding-right: 80px;
}

.sec-other-contents .tab-comments .box-comment,
.sec-news-details .content-news .box-comment,
.sec-profile-page .box-outer-profile .box-comment {
  position: relative;
  background-color: var(--lightcolor);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  padding: 20px;
  gap: 30px;
  border-radius: 30px;
  z-index: 100;
}

.sec-news-details .content-news .box-comment {
  background-color: var(--whitecolor);
}

.sec-other-contents .tab-comments .item-comment.answer .box-comment,
.sec-news-details .content-news .item-comment.answer .box-comment {
  background-color: var(--whitecolor);
  box-shadow: 0px 4px 100px 0px rgba(69, 71, 75, 0.1);
}

.sec-other-contents .tab-comments .item-comment.answer::before,
.sec-news-details .content-news .item-comment.answer::before {
  content: "";
  position: absolute;
  top: -40px;
  right: 40px;
  width: 1px;
  height: 37px;
  background: rgb(155, 164, 180);
  background: -moz-linear-gradient(0deg, rgba(155, 164, 180, 0.4) 0%, rgba(155, 164, 180, 0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(155, 164, 180, 0.4) 0%, rgba(155, 164, 180, 0) 100%);
  background: linear-gradient(0deg, rgba(155, 164, 180, 0.4) 0%, rgba(155, 164, 180, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9ba4b4", endColorstr="#9ba4b4", GradientType=1);
}

.sec-other-contents .tab-comments .item-comment.answer::after,
.sec-news-details .content-news .item-comment.answer::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 40px;
  width: 90px;
  height: 50px;
  border-bottom-right-radius: 30px;
  border-right: 1px solid var(--textcolor);
  border-bottom: 1px solid var(--textcolor);
  opacity: 0.4;
}

.sec-other-contents .tab-comments .result-ratings,
.sec-news-details .content-news .result-ratings,
.modal-goharnahal .modal-form-comment .result-ratings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  background-color: var(--whitecolor);
  width: 400px;
  padding: 20px;
  border-radius: 20px;
  flex-shrink: 0;
}

.sec-other-contents .tab-comments .result-ratings .item-rate,
.sec-news-details .content-news .result-ratings .item-rate,
.modal-goharnahal .modal-form-comment .result-ratings .item-rate {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid rgba(155, 164, 180, 0.2);
}

.sec-other-contents .tab-comments .result-ratings .item-rate:last-child,
.sec-news-details .content-news .result-ratings .item-rate:last-child,
.modal-goharnahal .modal-form-comment .result-ratings .item-rate:last-child {
  border-bottom: none;
}

.sec-other-contents .tab-comments .result-ratings .rating-gohar,
.sec-news-details .content-news .result-ratings .rating-gohar,
.modal-goharnahal .modal-form-comment .result-ratings .rating-gohar {
  gap: 10px;
}

.sec-other-contents .tab-comments .result-ratings .br-theme-bars-gohar .br-widget,
.sec-news-details .content-news .result-ratings .br-theme-bars-gohar .br-widget,
.modal-goharnahal .modal-form-comment .result-ratings .br-theme-bars-gohar .br-widget {
  width: 100px;
}

.sec-other-contents .tab-comments .result-ratings .br-theme-bars-gohar .br-widget a,
.sec-news-details .content-news .result-ratings .br-theme-bars-gohar .br-widget a,
.modal-goharnahal .modal-form-comment .result-ratings .br-theme-bars-gohar .br-widget a {
  width: 5px;
  height: 5px;
}

.sec-other-contents .tab-comments .result-ratings .br-theme-bars-gohar .br-widget .br-current,
.sec-news-details .content-news .result-ratings .br-theme-bars-gohar .br-widget .br-current,
.modal-goharnahal .modal-form-comment .result-ratings .br-theme-bars-gohar .br-widget .br-current {
  width: 12px;
  height: 12px;
}

.sec-other-contents .tab-comments .result-ratings .rating-gohar .counts,
.sec-news-details .content-news .result-ratings .counts,
.modal-goharnahal .modal-form-comment .result-ratings .counts {
  gap: 3px;
}

.sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .all,
.sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .value,
.sec-news-details .content-news .result-ratings .counts .all,
.sec-news-details .content-news .result-ratings .counts .value,
.modal-goharnahal .modal-form-comment .result-ratings .counts .all,
.modal-goharnahal .modal-form-comment .result-ratings .counts .value {
  font-size: 22px;
}

.sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .slash,
.sec-news-details .content-news .result-ratings .counts .slash,
.modal-goharnahal .modal-form-comment .result-ratings .counts .slash {
  font-size: 18px;
}

.sec-other-contents .tab-comments .result-ratings .rating-gohar .title-rating,
.sec-news-details .content-news .result-ratings .rating-gohar .title-rating {
  width: 100%;
  color: var(--blackcolor);
}

.sec-other-contents .tab-comments .details-comment,
.sec-news-details .content-news .details-comment,
.sec-profile-page .box-outer-profile .details-comment {
  padding: 15px 0;
}

.sec-other-contents .tab-comments .item-comment.answer .details-comment, .sec-news-details .content-news .item-comment.answer .details-comment {
  padding: 0;
  width: 100%;
}

.sec-other-contents .tab-comments .details-comment .head,
.sec-news-details .content-news .details-comment .head,
.sec-profile-page .box-outer-profile .details-comment .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 15px;
  border-bottom: 1px solid rgba(155, 164, 180, 0.2);
}

.sec-other-contents .tab-comments .item-comment.answer .head,
.sec-news-details .content-news .item-comment.answer .details-comment .head {
  padding: 0 0 15px;
}

.sec-other-contents .tab-comments .details-comment .user-info,
.sec-news-details .content-news .details-comment .user-info,
.sec-profile-page .box-outer-profile .details-comment .user-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sec-other-contents .tab-comments .details-comment .user-info .image,
.sec-news-details .content-news .details-comment .user-info .image,
.sec-profile-page .box-outer-profile .details-comment .user-info .image {
  width: 52px;
  height: 52px;
  border-radius: 500px;
  border: 2px solid rgba(155, 164, 180, 0.2);
  background-clip: padding-box;
  margin-left: 15px;
  overflow: hidden;
}

.sec-other-contents .tab-comments .details-comment .user-info .image > img,
.sec-news-details .content-news .details-comment .user-info .image > img,
.sec-profile-page .box-outer-profile .details-comment .user-info .image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-other-contents .tab-comments .details-comment .user-info .info,
.sec-news-details .content-news .details-comment .user-info .info,
.sec-profile-page .box-outer-profile .details-comment .user-info .info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.sec-other-contents .tab-comments .details-comment .user-info .fullname,
.sec-news-details .content-news .details-comment .user-info .fullname,
.sec-profile-page .box-outer-profile .details-comment .user-info .fullname {
  font-size: 16px;
  font-weight: 700;
  color: var(--blackcolor);
}

.sec-other-contents .tab-comments .details-comment .user-info .status,
.sec-news-details .content-news .details-comment .user-info .status,
.sec-profile-page .box-outer-profile .details-comment .user-info .status {
  font-size: 14px;
  font-weight: 600;
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .details-comment .desc,
.sec-news-details .content-news .details-comment .desc,
.sec-profile-page .box-outer-profile .details-comment .desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  color: var(--blackcolor);
  text-align: justify;
  margin: 20px 0;
}

.sec-other-contents .tab-comments .item-comment.answer .details-comment .desc,
.sec-news-details .content-news .item-comment.answer .details-comment .desc {
  margin: 20px 0 0;
}

.sec-other-contents .tab-comments .details-comment .options,
.sec-news-details .content-news .details-comment .options,
.sec-profile-page .box-outer-profile .details-comment .options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-other-contents .tab-comments .details-comment .btn-answer,
.sec-news-details .content-news .details-comment .btn-answer,
.sec-profile-page .box-outer-profile .details-comment .btn-answer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .details-comment .btn-answer > i,
.sec-news-details .content-news .details-comment .btn-answer > i,
.sec-profile-page .box-outer-profile .details-comment .btn-answer > i {
  font-size: 20px;
}

.sec-other-contents .tab-comments .details-comment .viewpoint,
.sec-news-details .content-news .details-comment .viewpoint,
.sec-profile-page .box-outer-profile .details-comment .viewpoint {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
}

.sec-other-contents .tab-comments .details-comment .viewpoint .text,
.sec-news-details .content-news .details-comment .viewpoint .text,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .text {
  font-size: 14px;
  font-weight: 500;
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .details-comment .viewpoint .result,
.sec-news-details .content-news .details-comment .viewpoint .result,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .result {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}

.sec-other-contents .tab-comments .details-comment .viewpoint .btn-like,
.sec-other-contents .tab-comments .details-comment .viewpoint .btn-dislike,
.sec-news-details .content-news .details-comment .viewpoint .btn-like,
.sec-news-details .content-news .details-comment .viewpoint .btn-dislike,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-like,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-dislike {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--maincolor);
}

.sec-other-contents .tab-comments .details-comment .viewpoint .btn-dislike,
.sec-news-details .content-news .details-comment .viewpoint .btn-dislike,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-dislike {
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .details-comment .viewpoint .btn-like > i,
.sec-other-contents .tab-comments .details-comment .viewpoint .btn-dislike > i,
.sec-news-details .content-news .details-comment .viewpoint .btn-like > i,
.sec-news-details .content-news .details-comment .viewpoint .btn-dislike > i,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-like > i,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-dislike > i {
  font-size: 24px;
}

.sec-other-contents .tab-comments .details-comment .viewpoint .btn-dislike > i,
.sec-news-details .content-news .details-comment .viewpoint .btn-dislike > i,
.sec-profile-page .box-outer-profile .details-comment .viewpoint .btn-dislike > i {
  transform: scaleX(-1);
}

.sec-other-contents .tab-comments .row-add-comment,
.sec-news-details .content-news .row-add-comment {
  margin-top: 100px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.sec-news-details .tab-comments .form-comment {
  width: 100%;
}

.sec-other-contents .tab-comments .form-comment .head-form,
.sec-news-details .content-news .form-comment .head-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.sec-other-contents .tab-comments .form-comment .head-form .title,
.sec-news-details .content-news .form-comment .head-form .title {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0;
}

.sec-other-contents .tab-comments .form-comment .head-form .btn-logout,
.sec-news-details .content-news .form-comment .head-form .btn-logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--textcolor);
  transition: all 0.3s;
}

.sec-other-contents .tab-comments .form-comment .head-form .btn-logout:hover,
.sec-news-details .content-news .form-comment .head-form .btn-logout:hover {
  color: var(--maincolor);
  gap: 6px;
}

.sec-other-contents .tab-comments .form-comment .head-form .btn-logout > i,
.sec-news-details .content-news .form-comment .head-form .btn-logout > i {
  font-size: 20px;
}

.sec-other-contents .tab-comments .form-comment .row-form-comment,
.sec-news-details .content-news .form-comment .row-form-comment {
  margin: 0 -10px;
}

.sec-other-contents .tab-comments .form-comment .form-group,
.sec-news-details .content-news .form-comment .form-group {
  margin: 0 0 20px;
  padding: 0 10px;
}

.sec-other-contents .tab-comments .form-comment .form-control,
.sec-news-details .content-news .form-comment .form-control {
  width: 100%;
  height: 70px;
  padding: 10px 25px;
  text-align: right;
  border-radius: 20px;
  border: 2px solid rgba(155, 164, 180, 0.2);
  background-color: var(--whitecolor);
  font-size: 16px;
  font-weight: 700;
  color: var(--blackcolor);
  box-shadow: none;
  transition: all 0.3s;
}

.sec-other-contents .tab-comments .form-comment .form-control:focus,
.sec-news-details .content-news .form-comment .form-control:focus {
  border-color: var(--maincolor);
}

.sec-other-contents .tab-comments .form-comment .form-control::placeholder,
.sec-news-details .content-news .form-comment .form-control::placeholder {
  font-size: 14px;
  font-weight: 600;
  color: var(--textcolor);
  opacity: 0.5;
}

.sec-other-contents .tab-comments .form-comment textarea.form-control,
.sec-news-details .content-news .form-comment textarea.form-control {
  height: 125px;
  padding: 25px;
}

.sec-other-contents .tab-comments .form-comment .bottom-form,
.sec-news-details .content-news .form-comment .bottom-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.sec-other-contents .tab-comments .form-comment .message-form,
.sec-news-details .content-news .form-comment .message-form {
  font-size: 14px;
  font-weight: 700;
  color: var(--textcolor);
}

.sec-other-contents .tab-comments .form-comment .btn-send-form,
.sec-news-details .content-news .form-comment .btn-send-form {
  background-color: var(--maincolor);
  display: flex;
  height: 70px;
  padding: 25px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0px 4px 30px 0px rgba(55, 151, 119, 0.4);
  font-size: 16px;
  font-weight: 600;
  color: var(--whitecolor);
  border: none;
  flex-shrink: 0;
  transition: all 0.3s;
}

.sec-other-contents .tab-comments .form-comment .btn-send-form:hover,
.sec-news-details .content-news .form-comment .btn-send-form:hover {
  background-color: var(--subcolor);
  box-shadow: 0px 4px 30px 0px rgba(0, 69, 61, 0.4);
}

.sec-other-contents .tab-comments .form-comment .btn-send-form .arrow-left,
.sec-news-details .content-news .form-comment .btn-send-form .arrow-left {
  background-color: var(--whitecolor);
  padding: 5px;
  height: 22px;
  border-radius: 100px;
  margin-right: 10px;
  font-size: 24px;
  color: var(--maincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.sec-other-contents .tab-comments .form-comment .btn-send-form:hover .arrow-left,
.sec-news-details .content-news .form-comment .btn-send-form:hover .arrow-left {
  background-color: var(--yellowcolor);
  color: var(--subcolor);
}

.sec-other-contents .tab-comments .rating-form .title-head-rating,
.modal-goharnahal .modal-form-comment .rating-form .title-head-rating {
  font-size: 16px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0 0 40px;
}

.sec-other-contents .tab-comments .rating-form .result-ratings,
.modal-goharnahal .modal-form-comment .rating-form .result-ratings {
  box-shadow: 0px 4px 100px 0px rgba(69, 71, 75, 0.1);
}

.content-pages .sec-header-product .cart-details .btn-download-catalog,
.sec-news-details .cart-details .btn-list-comments {
  background-color: var(--whitecolor);
  height: 90px;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-top: 20px;
  transition: all 0.3s;
}

.content-pages .sec-header-product .cart-details .btn-download-catalog:hover,
.sec-news-details .cart-details .btn-list-comments:hover {
  box-shadow: 0px 4px 100px 0px rgba(69, 71, 75, 0.1);
}

.content-pages .sec-header-product .cart-details .btn-download-catalog .content,
.sec-news-details .cart-details .btn-list-comments .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

.content-pages .sec-header-product .cart-details .btn-download-catalog .title,
.sec-news-details .cart-details .btn-list-comments .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0;
}

.content-pages .sec-header-product .cart-details .btn-download-catalog .desc,
.sec-news-details .cart-details .btn-list-comments .desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--textcolor);
}

.content-pages .sec-header-product .cart-details .btn-download-catalog > i,
.sec-news-details .cart-details .btn-list-comments > i {
  font-size: 28px;
  color: var(--maincolor);
}

/*---------------------- /Comments ---------------------*/
/*---------------------- Page ---------------------*/
.sec-other-contents .tab-contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--whitecolor);
  border-radius: 50px;
  padding: 30px;
  margin-bottom: 100px;
}
.sec-other-contents .tab-contents .head-normal {
  width: 100%;
  margin-bottom: 10px;
}
.sec-other-contents .tab-contents .head-normal h1 {
  font-size: 20px;
  font-weight: 600;
}

.sec-other-contents .tab-contents .head-sticky {
  position: sticky;
  width: 100%;
  align-self: flex-start;
  top: 0;
  z-index: 1020;
  background-color: var(--lightcolor);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px 15px 30px;
  border-radius: 25px;
  margin-bottom: 60px;
  transition: all 0.3s;
}

.sec-other-contents .tab-contents .head-sticky.fixed {
  border-radius: 0 0 25px 25px;
  box-shadow: 0px 4px 100px 0px rgba(69, 71, 75, 0.3);
}

.sec-other-contents .head-sticky .list-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
}

.sec-other-contents .head-sticky .list-tabs .item-tab {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--blackcolor);
  padding: 15px 0;
  transition: all 0.3s;
}

.sec-other-contents .head-sticky .list-tabs .item-tab.active {
  background-color: var(--whitecolor);
  border-radius: 15px;
  padding: 15px 30px;
  box-shadow: 0px 4px 100px 0px rgba(69, 71, 75, 0.1);
  font-weight: 700;
  color: var(--maincolor);
}

.sec-other-contents .head-sticky .list-tabs .item-tab::after {
  content: "";
  width: 0;
  height: 4px;
  background-color: var(--maincolor);
  border-radius: 100px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0.2s;
}

.sec-other-contents .head-sticky .list-tabs .item-tab.active::after {
  width: 60px;
  opacity: 1;
  visibility: visible;
}

.sec-other-contents .tab-contents .row-head-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.sec-other-contents .tab-contents .title-head-section {
  background-color: var(--maincolor);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0px 5px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  color: var(--whitecolor);
  margin: 0 0 40px;
}

.sec-other-contents .tab-contents .row-head-between .title-head-section {
  margin: 0;
}

.sec-other-contents .tab-contents .row-head-between .desc-head-section {
  font-size: 16px;
  font-weight: 700;
  color: var(--textcolor);
}

.sec-other-contents .tab-contents hr.spacing {
  width: 100%;
  height: 1px;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  opacity: 0.12;
  margin: 60px 0;
}

.sec-other-contents .tab-contents .section {
  width: 100%;
}

.sec-other-contents .tab-contents .box-desc {
  position: relative;
  height: 950px;
  overflow: hidden;
}

.sec-other-contents .tab-contents .box-desc {
  height: auto !important;
}

.sec-other-contents .tab-contents .box-desc.show {
  height: auto;
  padding-bottom: 40px;
}

.sec-other-contents .tab-contents .box-desc.show::after {
  display: none;
}

.sec-other-contents .tab-contents .box-desc h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 0 0 15px;
}

.sec-other-contents .tab-contents .box-desc p {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  text-align: justify;
  color: var(--blackcolor);
  margin: 0;
}

.sec-other-contents .tab-contents .box-desc p a {
  font-weight: 700;
  color: var(--maincolor);
  text-decoration: underline !important;
}

.sec-other-contents .tab-contents .box-desc .banner-desc {
  position: relative;
  background-color: var(--subcolor);
  height: 200px;
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 40px;
  overflow: hidden;
  margin: 40px 0;
}

.sec-other-contents .tab-contents .box-desc .banner-desc::before {
  content: "";
  width: 600px;
  height: 600px;
  position: absolute;
  right: -150px;
  bottom: -400px;
  border-radius: 500px;
  opacity: 0.6;
  background: var(--maincolor);
  filter: blur(1000px);
}

.sec-other-contents .tab-contents .box-desc .banner-desc .details {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .svg-fruit {
  width: 90px;
  height: 90px;
  margin-left: 30px;
  flex-shrink: 0;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .path-color {
  fill: var(--yellowcolor);
  stroke: var(--yellowcolor);
}

.sec-other-contents .tab-contents .box-desc .banner-desc .content .title {
  font-size: 28px;
  font-weight: 200;
  color: var(--whitecolor);
  margin: 0 0 5px;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .content .title > strong {
  font-weight: 800;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .content .desc {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
  line-height: normal;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .btn-link-banner {
  background-color: var(--yellowcolor);
  display: flex;
  height: 70px;
  padding: 25px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0px 4px 30px 0px rgba(244, 206, 20, 0.4);
  font-size: 16px;
  font-weight: 700;
  color: var(--subcolor);
  border: none;
  flex-shrink: 0;
  transition: all 0.3s;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .btn-link-banner:hover {
  background-color: var(--whitecolor);
  box-shadow: 0px 4px 30px 0px rgba(255, 255, 255, 0.4);
}

.sec-other-contents .tab-contents .box-desc .banner-desc .btn-link-banner .arrow-left {
  background-color: var(--whitecolor);
  padding: 5px;
  height: 22px;
  border-radius: 100px;
  margin-right: 10px;
  font-size: 24px;
  color: var(--subcolor);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.sec-other-contents .tab-contents .box-desc .banner-desc .btn-link-banner:hover .arrow-left {
  background-color: var(--subcolor);
  color: var(--whitecolor);
}

.sec-other-contents .tab-contents .box-desc .btn-more-description {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  z-index: 2000;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blackcolor);
  opacity: 0.5;
}

.sec-other-contents .tab-contents .box-desc .btn-more-description::before {
  content: "نمایش بیشتر";
}

.sec-other-contents .tab-contents .box-desc.show .btn-more-description::before {
  content: "نمایش کمتر";
}

.sec-other-contents .tab-contents .box-desc .btn-more-description > i {
  font-size: 18px;
  transition: all 0.3s;
}

.sec-other-contents .tab-contents .box-desc.show .btn-more-description > i {
  transform: rotate(180deg);
}

.sec-other-contents .tab-specification .row-specif {
  margin: 0 -7.5px;
  gap: 15px 0;
}

.sec-other-contents .tab-specification .item-specif {
  padding: 0 7.5px;
}

.sec-other-contents .tab-specification .box-specif {
  background-color: var(--lightcolor);
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-other-contents .tab-specification .box-specif .label {
  font-size: 16px;
  font-weight: 700;
  color: var(--textcolor);
  text-align: right;
}

.sec-other-contents .tab-specification .box-specif .text {
  font-size: 16px;
  font-weight: 600;
  color: var(--blackcolor);
  text-align: left;
}

.sec-other-contents .tab-faqlist .list-accordian .accordion-item {
  background-color: var(--lightcolor);
  margin-bottom: 20px;
}

.sec-other-contents .tab-faqlist .list-accordian .accordion-item .accordion-header .title {
  font-size: 16px;
}

.sec-other-contents .tab-faqlist .list-accordian .accordion-item .accordion-header .box-icon {
  font-size: 22px;
}

.sec-other-contents .tab-faqlist .list-accordian .accordion-item:last-child {
  margin-bottom: 0;
}

.sec-other-contents .tab-faqlist .list-accordian .accordion-item.active {
  background-color: var(--whitecolor);
}

/*---------------------- /Page ---------------------*/
/*---------------------- Pagination ---------------------*/
.pagination-goharnahal {
  width: 100%;
  margin-top: 40px;
}

.pagination-goharnahal .pagination {
  padding: 0;
  margin: 0;
  gap: 10px;
}

.pagination-goharnahal .page-item .page-link {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  background-color: var(--lightcolor);
  color: var(--graycolor);
  border: 1px solid var(--bordercolor);
  box-shadow: none;
  transition: all 0.3s;
}

.sec-search-products .pagination-goharnahal .page-item .page-link {
  background-color: var(--whitecolor);
}

.pagination-goharnahal .page-item .page-link:hover {
  background-color: var(--maincolor);
  color: var(--whitecolor);
}

.pagination-goharnahal .page-item.active .page-link {
  background-color: var(--yellowcolor);
  border-color: var(--yellowcolor);
  color: var(--subcolor);
  font-weight: bold;
}

.pagination-goharnahal .page-item.disabled .page-link {
  opacity: 0.4;
}

/*---------------------- /Pagination ---------------------*/
@media only screen and (min-width: 0px) and (max-width: 640px) {
  .sec-news-details .content-news {
    padding-left: 10px;
    padding-right: 10px;
  }
  .sec-news-details .content-news .title-main {
    font-size: 18px;
  }
  .sec-news-details .content-news .other-desc-news .short-quote {
    padding: 20px;
    margin: 20px 0 20px;
  }
  .sec-news-details .cart-details {
    margin-top: 30px;
  }
  .sec-news-details + .sec-gohar-news {
    margin-bottom: 40px;
    margin-top: 40px;
  }
  .sec-news-details + .sec-gohar-news .head-sec-gohar {
    margin-bottom: 20px;
    width: 100%;
  }
  .sec-news-details + .sec-gohar-news .row {
    width: 100%;
    margin: 0;
  }
  .sec-news-details + .sec-gohar-news .row .item-news {
    width: 100%;
    padding: 0;
    margin-bottom: 40px;
  }
}
:root {
  --primary-50: #F9EBED;
  --primary-100: #F8E7E8;
  --primary-200: #F5DDDF;
  --primary-300: #F6D0D3;
  --primary-400: #F4C5CA;
  --primary-500: #F2BBC0;
  --neutral-50: #FAFAFA;
  --neutral-100: #FFFFFF;
  --neutral-200: #E3E3E3;
  --neutral-300: #C6C6C6;
  --neutral-400: #AAAAAA;
  --neutral-500: #8D8D8D;
  --neutral-600: #717171;
  --neutral-700: #545454;
  --neutral-800: #383838;
  --neutral-900: #1B1B1B;
  --minttulip-50: #EEF7F4;
  --minttulip-100: #E5F3EF;
  --minttulip-200: #D4EBE5;
  --minttulip-300: #BFE7DD;
  --minttulip-400: #ADE0D3;
  --minttulip-500: #9BD9C9;
  --disabledcolor: #99b9ae;
  --yellowcolor: #F4CE14;
  --blackcolor: #45474B;
  --maincolor: #001042;
  --subcolor: #000F57;
  --bluecolor: #1C40F2;
  --lightbluecolor: #0082F8;
  --lightgreen: #0AE977;
  --redcolor: #FF0766;
  --textcolor: #666666;
  --lightcolor: #F5F7F8;
  --light2color: #F4F4F4;
  --bordercolor: #EAEAEA;
  --whitecolor: #FFFFFF;
  --easeoutcubic: cubic-bezier(.215, .61, .355, 1);
}

/*---------------------- Public Style ---------------------*/
/*---------------------- Public Style ---------------------*/
body {
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body.home-page {
  background-color: var(--whitecolor);
}
body.inner-page {
  background-color: var(--lightcolor);
}

body.overhide {
  overflow: hidden;
}

* {
  font-family: IRANSans;
  outline: medium none !important;
  text-decoration: none !important;
}

.ltr {
  direction: ltr;
}

.font-weight-900 {
  font-weight: 900;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-500 {
  font-weight: 500;
}

.container {
  max-width: 100%;
  padding: 0 200px;
}

::selection {
  background-color: var(--maincolor);
  color: var(--white);
}

/*---------------------- Colors ---------------------*/
.text-main {
  color: var(--maincolor);
}

.text-maingreen {
  color: var(--maingreen);
}

.text-lightgreen {
  color: var(--lightgreen);
}

.text-color {
  color: var(--textcolor);
}

.text-darkgray {
  color: var(--darkgrey);
}

.text-coolgray {
  color: var(--coolgray);
}

.text-lighttext {
  color: var(--lighttext);
}

.text-linecolor {
  color: var(--linecolor);
}

.text-light {
  color: var(--light);
}

.text-white {
  color: var(--white);
}

/*---------------------- /Colors ---------------------*/
/*---------------------- Backgrounds ---------------------*/
.bg-main {
  background-color: var(--maincolor);
}

.bg-maingreen {
  background-color: var(--maingreen);
}

.bg-lightgreen {
  background-color: var(--lightgreen);
}

.bg-textcolor {
  background-color: var(--textcolor);
}

.bg-darkgray {
  background-color: var(--darkgrey);
}

.bg-coolgray {
  background-color: var(--coolgray);
}

.bg-lighttext {
  background-color: var(--lighttext);
}

.bg-linecolor {
  background-color: var(--linecolor);
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-white {
  background-color: var(--white);
}

/*---------------------- /Backgrounds ---------------------*/
/*---------------------- Font Sizes ---------------------*/
.font-size-10 {
  font-size: 10px;
}

.font-size-12 {
  font-size: 12px;
}

.font-size-13 {
  font-size: 13px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

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

.font-size-20 {
  font-size: 20px;
}

.font-size-22 {
  font-size: 22px;
}

.font-size-24 {
  font-size: 24px;
}

.font-size-26 {
  font-size: 26px;
}

.font-size-28 {
  font-size: 28px;
}

.font-size-30 {
  font-size: 30px;
}

/*---------------------- /Font Sizes ---------------------*/
/*---------------------- Border Radius ---------------------*/
.rounded-2 {
  border-radius: 2px;
}

.rounded-4 {
  border-radius: 4px;
}

.rounded-6 {
  border-radius: 6px;
}

.rounded-8 {
  border-radius: 8px;
}

.rounded-10 {
  border-radius: 10px;
}

.rounded-12 {
  border-radius: 12px;
}

.rounded-14 {
  border-radius: 14px;
}

.rounded-16 {
  border-radius: 16px;
}

.rounded-18 {
  border-radius: 18px;
}

.rounded-20 {
  border-radius: 20px;
}

.rounded-22 {
  border-radius: 22px;
}

.rounded-24 {
  border-radius: 24px;
}

.rounded-26 {
  border-radius: 26px;
}

.rounded-28 {
  border-radius: 28px;
}

.rounded-30 {
  border-radius: 30px;
}

.rounded-lg {
  border-radius: 500px;
}

.rounded-circle {
  border-radius: 100%;
}

/*---------------------- /Border Radius ---------------------*/
.container {
  max-width: 100%;
  padding: 0 150px;
}

.hrs-cta .btn-ds-more {
  margin-bottom: 15px;
}
.hrs-cta .btn-ds-normal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 16, 69, 0.6901960784);
  transition: background-color 0.5s;
  background: #eee;
}

.btn-ds-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #0082F8, transparent) #1C40F2;
  border-radius: 20px;
  padding: 20px 30px;
  font-size: 18px;
  font-weight: bold;
  color: var(--whitecolor);
  margin-top: 50px;
  transition: background-color 0.5s;
}

.btn-ds-more:hover {
  background-color: var(--redcolor);
  color: var(--whitecolor);
}

.btn-ds-more.btn-red {
  background: linear-gradient(90deg, #ff7e5d, transparent) #ff0766;
}

.btn-ds-more.btn-red:hover {
  background-color: var(--bluecolor);
  color: var(--whitecolor);
}

.btn-ds-more > i {
  font-size: 28px;
  margin-right: 15px;
  transition: all 0.3s;
}

.btn-ds-more:hover > i {
  margin-right: 20px;
  animation: shadowarrow 0.4s linear infinite;
}

@keyframes shadowarrow {
  from {
    text-shadow: 60px 0 5px rgba(255, 255, 255, 0);
  }
  to {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
  }
}
.overlay-ds {
  background-color: rgba(0, 15, 87, 0.3);
  position: fixed;
  inset: 0;
  z-index: 99999;
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.overlay-ds.show {
  opacity: 1;
  visibility: visible;
}

.sidebar-all-products {
  background-color: var(--lightcolor);
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  right: -100%;
  width: 400px;
  z-index: 999999;
  box-shadow: -30px 0 80px rgba(0, 16, 66, 0.2);
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
}

.sidebar-all-products.show {
  right: 0;
  opacity: 1;
  visibility: visible;
}

.sidebar-all-products .head-sidebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-all-products .head-sidebar .title {
  font-size: 20px;
  font-weight: 900;
  color: var(--maincolor);
  flex-shrink: 0;
  margin: 0;
}

.sidebar-all-products .head-sidebar .close-sidebar-products {
  display: flex;
  font-size: 18px;
  color: var(--textcolor);
}

.sidebar-all-products .desc {
  font-size: 14px;
  color: var(--textcolor);
  text-align: center;
  line-height: 25px;
  margin: 30px 0;
}

.sidebar-all-products .list-products {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 20px;
  height: 85%;
  overflow-y: auto;
}

.sidebar-all-products .list-products .box-prd {
  width: calc(50% - 10px);
  height: 200px;
  background-color: var(--whitecolor);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 50px rgba(0, 16, 66, 0.05);
}

.sidebar-all-products .list-products .box-prd .box-icon {
  width: 70px;
  height: 70px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.sidebar-all-products .list-products .box-prd:hover .box-icon {
  transform: scale(1.1);
}

.sidebar-all-products .list-products .box-prd .box-icon > img {
  height: 35px;
}

.sidebar-all-products .list-products .box-prd .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--maincolor);
  margin: 0;
  transition: all 0.4s;
}

.sidebar-all-products .list-products .box-prd:hover .title {
  color: var(--bluecolor);
}

.search-box-ds {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  width: 30%;
  margin: 0 auto;
  z-index: 999999;
  background-color: var(--whitecolor);
  height: 60px;
  border-radius: 15px;
  box-shadow: 0 4px 50px rgba(0, 16, 66, 0.3);
  overflow: hidden;
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.search-box-ds.show {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.search-box-ds .input-search {
  border: none;
  box-shadow: none;
  width: 100%;
  height: 100%;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--textcolor);
}

.search-box-ds .btn-search {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 22px;
  color: var(--bluecolor);
}

/*---------------------- Tooltip ---------------------*/
.tooltip {
  z-index: 99999;
}

.tooltip-inner {
  background-color: var(--maincolor);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
}

.tooltip .arrow::before {
  border-bottom-color: var(--maincolor);
  border-top-color: var(--maincolor);
}

/*---------------------- /Tooltip ---------------------*/
/*---------------------- Header Main ---------------------*/
.header-main {
  position: relative;
  background: rgb(0, 16, 66);
  background: -moz-linear-gradient(0deg, rgb(0, 16, 66) 0%, rgb(0, 15, 87) 100%);
  background: -webkit-linear-gradient(0deg, rgb(0, 16, 66) 0%, rgb(0, 15, 87) 100%);
  background: linear-gradient(0deg, rgb(0, 16, 66) 0%, rgb(0, 15, 87) 100%);
}

.home-page .header-main {
  border-radius: 0 0 150px 0;
}
.home-page .header-main::before,
.home-page .header-main::after {
  content: "";
  background: url("../images/site/hero-shape.png") no-repeat center center/50px;
  width: 45px;
  height: 120px;
  position: absolute;
}
.home-page .header-main::before {
  left: 50px;
  top: 150px;
}
.home-page .header-main::after {
  right: 50px;
  bottom: 100px;
}

.inner-page .content-main {
  padding-top: 30px;
}

/*---------------------- Header Top ---------------------*/
.header-main .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.header-main .header-top .logo-main {
  width: 200px;
}

.header-main .header-top .options {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 15px;
}

.header-main .header-top .options .btn-ds {
  height: 50px;
  padding: 10px 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background-clip: padding-box;
  font-size: 16px;
  font-weight: bold;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.header-main .header-top .options .btn-panel {
  background-color: #111E60;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-main .header-top .options .btn-panel:hover {
  background-color: #03F8FB;
  color: var(--maincolor);
}

.header-main .header-top .options .btn-seo {
  background: linear-gradient(90deg, #0082F8, transparent) #1C40F2;
  background-size: 101%;
  border: 1px solid var(--bluecolor);
  transition: background-color 0.5s;
}

.header-main .header-top .options .btn-seo:hover {
  background-color: var(--redcolor);
}

.header-main .header-top .options .btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  direction: ltr;
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  margin-left: 15px;
  transition: all 0.3s;
}

.header-main .header-top .options .btn-call > i {
  font-size: 30px;
  margin-right: 10px;
}

/*---------------------- /Header Top ---------------------*/
/*---------------------- Header Menu ---------------------*/
.header-main .header-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-main .header-menu .navbar-digitalserver .navbar-nav {
  padding: 0;
}

.header-main .header-menu .navbar-digitalserver .nav-item {
  margin-left: 30px;
}

.header-main .header-menu .navbar-digitalserver .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: normal;
  color: var(--whitecolor);
  padding: 20px 0;
  transition: all 0.3s;
}

.header-main .header-menu .navbar-digitalserver .nav-link::before {
  content: "";
  background-color: #03F8FB;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s;
}

.header-main .header-menu .navbar-digitalserver .nav-link:hover::before,
.header-main .header-menu .navbar-digitalserver .dropdown.show .nav-link::before {
  top: 10px;
  opacity: 1;
  transform: scale(1);
}

.header-main .header-menu .navbar-digitalserver .nav-link:hover,
.header-main .header-menu .navbar-digitalserver .dropdown.show .nav-link {
  color: #03F8FB;
}

.header-main .header-menu .navbar-digitalserver .nav-link::after {
  display: none;
}

.header-main .header-menu .navbar-digitalserver .nav-link > i {
  font-weight: 300;
  font-size: 8px;
  margin-right: 6px;
  opacity: 0.5;
  transition: all 0.4s;
}

.header-main .header-menu .navbar-digitalserver .nav-link:hover > i,
.header-main .header-menu .navbar-digitalserver .dropdown.show .nav-link > i {
  transform: scaleY(-1);
}

.header-main .navbar-digitalserver .dropdown .dropdown-menu {
  display: flex;
  flex-direction: column;
  width: 250px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  position: absolute;
  background: var(--white);
  box-shadow: 0px 0px 15px 0px rgba(44, 62, 80, 0.03);
  border: none;
  padding: 15px 13px;
  border-radius: 20px;
  z-index: 1022;
  top: 70px;
  right: -10px;
}
.header-main .navbar-digitalserver .dropdown .dropdown-menu .dropdown-item.active, .header-main .navbar-digitalserver .dropdown .dropdown-menu .dropdown-item:active {
  color: inherit;
  background-color: inherit;
}

.header-main .navbar-digitalserver .dropdown.show .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: 60px;
}

.header-main .navbar-digitalserver .dropdown .dropdown-menu::before {
  content: "";
  position: absolute;
  background-image: url("../images/site/before-sub-menu.svg") !important;
  background-position: center center;
  background-repeat: no-repeat;
  width: 26px;
  top: -17px;
  height: 40px;
  right: 25px;
  z-index: 1022;
  box-shadow: none;
}

.header-main .navbar-digitalserver .dropdown .dropdown-menu a {
  color: var(--textcolor);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  width: 100%;
  display: flex;
  justify-content: right;
  border-radius: 10px;
  transition: all 0.4s;
}

.header-main .navbar-digitalserver .dropdown .dropdown-menu a:hover {
  background-color: var(--lightcolor);
  color: var(--bluecolor);
  font-weight: bold;
  padding: 8px 10px 8px 0;
}

.header-main .header-menu .other-menu {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.header-main .header-menu .other-menu .btn-all-products {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 500;
  color: var(--whitecolor);
  margin-right: 20px;
  transition: all 0.3s;
}

.header-main .header-menu .other-menu .btn-all-products:hover {
  color: #03F8FB;
}

.header-main .header-menu .other-menu .btn-all-products > i {
  font-size: 25px;
  margin-right: 10px;
}

.header-main .header-menu .other-menu .btn-search {
  display: flex;
  font-size: 23px;
  color: var(--lightbluecolor);
  transition: all 0.3s;
}

.header-main .header-menu .other-menu .btn-search:hover {
  color: #03F8FB;
}

.header-main .header-top .options .box-icon-menu {
  background-color: #03F8FB;
  width: 45px;
  height: 45px;
  border-radius: 100px;
  display: none;
  align-items: center;
  justify-content: center;
}

.header-main .header-top .options .hamburger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.header-main .header-top .options .hamburger-box {
  width: 20px;
  height: 22px;
}

.header-main .hamburger--slider .hamburger-inner {
  top: 5px;
}

.header-main .hamburger-inner,
.header-main .hamburger-inner::before,
.header-main .hamburger-inner::after {
  width: 22px;
  height: 3px;
  border-radius: 100px;
  background-color: var(--maincolor);
}

.header-main .hamburger--slider .hamburger-inner::before {
  top: 7px;
}

.header-main .hamburger--slider .hamburger-inner::after {
  top: 14px;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--maincolor);
}

.header-main .hamburger.is-active:hover {
  opacity: 1;
}

.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-main .navbar-digitalserver .head-sidebar {
  display: none;
  align-items: center;
  justify-content: space-between;
}

.header-main .navbar-digitalserver .head-sidebar .title {
  font-size: 20px;
  font-weight: 900;
  color: var(--maincolor);
  flex-shrink: 0;
  margin: 0;
}

.header-main .navbar-digitalserver .head-sidebar .close-sidebar-navbar {
  display: flex;
  font-size: 18px;
  color: var(--textcolor);
}

.header-main .navbar-digitalserver .options {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin: 20px 0 10px;
}

.header-main .navbar-digitalserver .options .btn-ds {
  width: 48%;
  height: 45px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background-clip: padding-box;
  font-size: 14px;
  font-weight: bold;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.header-main .navbar-digitalserver .options .btn-panel {
  background-color: #111E60;
}

.header-main .navbar-digitalserver .options .btn-seo {
  background: linear-gradient(90deg, #0082F8, transparent) #1C40F2;
  background-size: 101%;
  transition: background-color 0.5s;
}

/*---------------------- /Header Menu ---------------------*/
/*---------------------- Header Services ---------------------*/
.header-main .header-services {
  margin-top: 100px;
  /* padding-bottom: 200px; */
}

.header-main .header-services .about-services .title-about {
  font-size: 40px;
  font-weight: 900;
  line-height: 60px;
  color: var(--whitecolor);
  margin: 0 0 30px;
  min-height: 120px;
}

.header-main .header-services .about-services .desc {
  font-size: 20px;
  font-weight: lighter;
  line-height: 40px;
  color: var(--whitecolor);
  margin: 0;
  min-height: 80px;
}

.header-main .header-services .services-box {
  position: relative;
}

.header-main .header-services .services-box::after {
  content: "";
  width: 300px;
  height: 300px;
  background: rgb(0, 15, 87);
  background: -moz-linear-gradient(90deg, rgb(0, 15, 87) 0%, rgba(0, 15, 87, 0) 100%);
  background: -webkit-linear-gradient(90deg, rgb(0, 15, 87) 0%, rgba(0, 15, 87, 0) 100%);
  background: linear-gradient(90deg, rgb(0, 15, 87) 0%, rgba(0, 15, 87, 0) 100%);
  position: absolute;
  left: -30px;
  bottom: -20px;
  z-index: 10;
}

.header-main .header-services .swiper-services {
  position: relative;
  width: 125%;
  margin: 70px 0;
}

.header-main .header-services .swiper-services .box-srv {
  height: 250px;
  background-color: var(--whitecolor);
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-main .header-services .swiper-services .box-srv .box-icon {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.header-main .header-services .swiper-services .box-srv:hover .box-icon {
  transform: scale(1.1);
}

.header-main .header-services .swiper-services .box-srv .box-icon > img {
  height: 45px;
}

.header-main .header-services .swiper-services .box-srv .title {
  font-size: 20px;
  font-weight: bold;
  color: var(--maincolor);
  margin: 0;
  transition: all 0.4s;
}

.header-main .header-services .swiper-services .box-srv:hover .title {
  color: var(--bluecolor);
}

.header-main .header-services .domain-services {
  position: relative;
}

.header-main .header-services .domain-services::before {
  content: "";
  width: 150px;
  height: 150px;
  border-radius: 300px;
  background: rgb(28, 64, 242);
  background: -moz-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: -webkit-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  position: absolute;
  top: 9px;
  right: 15px;
}

@-webkit-keyframes animationOne {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}
@-moz-keyframes animationOne {
  0% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -moz-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}
@-o-keyframes animationOne {
  0% {
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -o-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}
@keyframes animationOne {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(15px, -15px);
    -moz-transform: translate(15px, -15px);
    -o-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
  }
}
.header-main .header-services .domain-services .hero-image-wrapper {
  overflow: hidden;
  position: relative;
}
.header-main .header-services .domain-services img {
  max-width: 100%;
  position: relative;
  bottom: -32px;
}

.header-main .header-services .domain-search {
  position: relative;
  background-color: var(--whitecolor);
  width: 100%;
  border-radius: 50px;
  padding: 30px;
  box-shadow: 0 12px 50px rgba(125, 125, 125, 0.15);
  bottom: -75px;
  z-index: 100;
}

.header-main .header-services .domain-search .title-main {
  font-size: 25px;
  font-weight: bold;
  color: var(--maincolor);
  margin: 10px 0 30px;
}

.header-main .header-services .domain-search .search-box {
  position: relative;
}

.header-main .header-services .domain-search .search-box .form-control {
  background-color: var(--whitecolor);
  width: 100%;
  height: 70px;
  border-radius: 20px;
  border: 1px solid var(--bordercolor);
  box-shadow: none !important;
  padding: 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--maincolor);
  transition: all 0.3s;
}

.header-main .header-services .domain-search .search-box .form-control:focus {
  border-color: var(--maincolor);
}

.header-main .header-services .domain-search .search-box .form-control::placeholder {
  color: var(--maincolor);
  opacity: 0.3;
}

.header-main .header-services .domain-search .search-box .btn-search {
  background-color: var(--bluecolor);
  width: 90px;
  height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--whitecolor);
  position: absolute;
  top: 10px;
  left: 10px;
  border: none;
}

.header-main .header-services .domain-search .offer-domains {
  margin: 40px 0;
}

.header-main .header-services .domain-search .offer-domains .title-ofd {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: bold;
  color: var(--redcolor);
  margin: 0 0 15px;
}

.header-main .header-services .domain-search .offer-domains .title-ofd > i {
  font-size: 30px;
  margin-left: 10px;
}

.header-main .header-services .domain-search .offer-domains .list-ofd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.header-main .header-services .domain-search .offer-domains .item-ofd {
  width: 35%;
  height: 40px;
  border-radius: 200px;
  background-color: var(--light2color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.header-main .header-services .domain-search .offer-domains .item-ofd:hover {
  background-color: var(--lightcolor);
}

.header-main .header-services .domain-search .offer-domains .item-ofd .price {
  font-size: 16px;
  font-weight: normal;
  color: var(--textcolor);
}

.header-main .header-services .domain-search .offer-domains .item-ofd .domain {
  font-size: 16px;
  font-weight: 900;
  color: var(--maincolor);
  margin-right: 10px;
  transition: all 0.3s;
}

.header-main .header-services .domain-search .offer-domains .item-ofd:hover .domain {
  color: var(--bluecolor);
}

.header-main .header-services .domain-search .other-domains .title-otd {
  position: relative;
  text-align: center;
  margin: 0;
}

.header-main .header-services .domain-search .other-domains .title-otd::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(0, 16, 66, 0.15);
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
}

.header-main .header-services .domain-search .other-domains .title-otd > span {
  position: relative;
  display: inline-block;
  background-color: var(--whitecolor);
  padding: 5px 25px;
  font-size: 16px;
  font-weight: bold;
  color: var(--maincolor);
  z-index: 10;
}

.header-main .header-services .domain-search .other-domains .list-otd {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 5px;
  column-gap: 20px;
}

.header-main .header-services .domain-search .other-domains .item-otd {
  direction: ltr;
  font-size: 18px;
  font-weight: 500;
  color: var(--textcolor);
  transition: all 0.3s;
}

.header-main .header-services .domain-search .other-domains .item-otd:hover {
  color: var(--bluecolor);
}

.header-main .header-services .domain-search .swiper-banners {
  width: 100%;
  height: 200px;
  background-color: var(--lightcolor);
  border-radius: 25px;
  margin-top: 40px;
}

.header-main .header-services .domain-search .swiper-banners .box-bnr > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-main .header-services .domain-search .swiper-banners .swiper-pagination-bullet {
  background-color: var(--whitecolor);
  opacity: 1;
  border-radius: 100px;
  transition: all 0.3s;
}

.header-main .header-services .domain-search .swiper-banners .swiper-pagination-bullet-active {
  background-color: var(--bluecolor);
  width: 30px;
}

/*---------------------- /Header Services ---------------------*/
/*---------------------- /Header Main ---------------------*/
/*---------------------- Content Main ---------------------*/
/*---------------------- Section Seo ---------------------*/
.content-main .sec-seo-counseling {
  padding: 100px 0;
  background: var(--lightcolor);
}
.content-main .sec-seo-counseling .image-sec {
  position: relative;
  display: flex;
}

.content-main .sec-seo-counseling .content-sec {
  padding-left: 30px;
}

.content-main .sec-seo-counseling .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 30px;
}

.content-main .sec-seo-counseling .title-sec > strong {
  color: var(--redcolor);
}

.content-main .sec-seo-counseling .desc-sec {
  font-size: 20px;
  font-weight: 300;
  color: var(--textcolor);
  line-height: 40px;
  margin: 0;
}

.content-main .sec-seo-counseling .desc-sec > br {
  display: block;
  margin: 10px 0;
}

.content-main .sec-seo-counseling .image-sec .image-wrapper {
  width: 460px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
}
.content-main .sec-seo-counseling .image-sec .image-wrapper img {
  width: 460px;
  height: 350px;
  object-fit: cover;
}

.image-wrapper {
  position: relative; /* ضروری برای جای‌گیری ::before */
  display: inline-block; /* یا block، برای اینکه div اندازه عکس را بگیرد */
  border-radius: 12px; /* گرد کردن گوشه‌های کادر اصلی */
  overflow: hidden; /* ضروری تا گرادیان از گوشه‌ها بیرون نزند */
}

.image-wrapper:hover::after {
  opacity: 0;
}

/* شبه‌عنصر که نقش بوردر چرخان را بازی می‌کند */
.image-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* مرکزیت دقیق در والد */
  width: 105%; /* کمی بزرگتر از والد برای پوشش کامل */
  height: 105%;
  /* گرادیان مخروطی که می‌چرخد */
  background: conic-gradient(from 0deg, transparent 70%, #00d9ff, #ff00f5);
  z-index: 1; /* زیر عکس قرار می‌گیرد */
  /* انیمیشن چرخش */
  animation: spin 4s linear infinite;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  background: #fff;
  z-index: 3;
  opacity: 0.3;
  padding: 10px;
  border-radius: 27px;
  transition: all 0.35s ease;
}

/* استایل برای خود عکس */
.image-wrapper img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  padding: 3px;
}

/* انیمیشن چرخش */
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/*---------------------- /Section Seo ---------------------*/
/*---------------------- Section Plan Services ---------------------*/
.content-main .sec-plan-services {
  background-color: var(--lightcolor);
  padding: 100px 0;
}

.content-main .sec-plan-services .title-sec {
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 10px;
}

.content-main .sec-plan-services .title-sec > strong {
  color: var(--bluecolor);
}

.content-main .sec-plan-services .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--textcolor);
  line-height: 30px;
  margin: 0;
  text-align: center;
  width: 55%;
  margin: 0 auto;
}

.content-main .sec-plan-services .nav-tabs {
  border: none;
  padding: 0;
  margin: 50px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.content-main .sec-plan-services .nav-tabs .nav-item {
  margin: 0;
}

.content-main .sec-plan-services .nav-tabs .nav-link {
  background-color: var(--whitecolor);
  width: 250px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 20px;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: var(--maincolor);
  transition: all 0.3s;
}

.content-main .sec-plan-services .nav-tabs .nav-link > i {
  font-size: 28px;
}

.content-main .sec-plan-services .nav-tabs .nav-link.active {
  background-color: var(--bluecolor);
  color: var(--whitecolor);
  box-shadow: 0 12px 50px rgba(28, 64, 242, 0.3);
}

.content-main .sec-plan-services .change-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.content-main .sec-plan-services .change-plan .item-pln {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: var(--maincolor);
}

.content-main .sec-plan-services .change-plan .toggle {
  cursor: pointer;
  width: 90px;
  height: 40px;
  background-color: var(--lightcolor);
  border-radius: 200px;
  border: 2px solid var(--subcolor);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.content-main .sec-plan-services .change-plan .toggle .circle {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background: rgb(28, 64, 242);
  background: -moz-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: -webkit-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  transition: all 0.3s;
  transform: translateX(0);
}

.content-main .sec-plan-services .change-plan .toggle.active .circle {
  transform: translateX(-45px);
}

.content-main .sec-plan-services .list-plans {
  margin-top: 50px;
}

.content-main .sec-plan-services .list-plans .row {
  margin: 0 -20px;
}

.content-main .sec-plan-services .list-plans .col-item-plan {
  padding: 0 20px;
}

.content-main .sec-plan-services .list-plans .box-item-plan {
  position: relative;
  background-color: var(--whitecolor);
  border-radius: 40px;
  padding: 60px 40px;
  box-shadow: 0 12px 50px rgba(125, 125, 125, 0.1);
  overflow: hidden;
  transition: all 0.3s;
}
.content-main .sec-plan-services .list-plans .box-item-plan .box-icon {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}
.content-main .sec-plan-services .list-plans .box-item-plan .box-icon i {
  font-size: 48px;
}
.content-main .sec-plan-services .list-plans .box-item-plan .btn-ds-more {
  margin-top: 25px;
}
.content-main .sec-plan-services .list-plans .box-item-plan:hover {
  box-shadow: 0 30px 80px rgba(125, 125, 125, 0.3);
  margin-top: -20px;
  transform: scale(1.01);
}
.content-main .sec-plan-services .list-plans .box-item-plan:hover .btn-buy-service {
  box-shadow: rgba(28, 64, 242, 0.3) 0px 12px 50px;
  background: linear-gradient(90deg, rgb(0, 130, 248), transparent) rgb(28, 64, 242);
}
.content-main .sec-plan-services .list-plans .box-item-plan:hover .btn-ds-more {
  background-color: var(--redcolor);
  color: var(--whitecolor);
}
.content-main .sec-plan-services .list-plans .box-item-plan:hover .btn-ds-more > i {
  margin-right: 20px;
  animation: shadowarrow 0.4s linear infinite;
}

.content-main .sec-plan-services .list-plans .box-item-plan.active {
  box-shadow: 0 30px 80px rgba(125, 125, 125, 0.3);
}

.content-main .sec-plan-services .box-item-plan .title-pln {
  font-size: 25px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 40px;
}

.content-main .sec-plan-services .box-item-plan .price-pln .title {
  font-size: 18px;
  font-weight: 500;
  color: var(--bluecolor);
}

.content-main .sec-plan-services .box-item-plan .price-pln .price {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.content-main .sec-plan-services .box-item-plan .price-pln .number {
  font-size: 50px;
  font-weight: 900;
  color: var(--maincolor);
}

.content-main .sec-plan-services .box-item-plan .price-pln .toman {
  font-size: 20px;
  font-weight: normal;
  color: var(--maincolor);
  padding-bottom: 15px;
}

.content-main .sec-plan-services .box-item-plan .desc-pln {
  font-size: 20px;
  font-weight: 300;
  color: var(--textcolor);
  margin: 25px 0 40px;
}

.content-main .sec-plan-services .box-item-plan .list-features {
  height: 250px;
  overflow: hidden;
}

.content-main .sec-plan-services .box-item-plan .list-features.show {
  height: auto;
}

.content-main .sec-plan-services .box-item-plan .item-fts {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}

.content-main .sec-plan-services .box-item-plan .item-fts:last-child {
  margin-bottom: 0;
}

.content-main .sec-plan-services .box-item-plan .item-fts > i {
  position: relative;
  width: 25px;
  font-size: 25px;
  color: var(--bluecolor);
}

.content-main .sec-plan-services .box-item-plan .item-fts .text {
  font-size: 18px;
  font-weight: normal;
  color: var(--textcolor);
}

.content-main .sec-plan-services .box-item-plan .item-fts .text > strong {
  font-weight: bold;
}

.content-main .sec-plan-services .box-item-plan .view-more {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 25px;
  gap: 15px;
}

.content-main .sec-plan-services .box-item-plan .view-more > i {
  background-color: var(--light2color);
  width: 30px;
  height: 30px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--maincolor);
  transition: all 0.3s;
}

.content-main .sec-plan-services .box-item-plan .list-features.show + .view-more > i {
  transform: scaleY(-1);
}

.content-main .sec-plan-services .box-item-plan .view-more::after {
  content: "ویژگی های بیشتر";
  font-size: 18px;
  font-weight: 500;
  color: var(--maincolor);
}

.content-main .sec-plan-services .box-item-plan .list-features.show + .view-more::after {
  content: "ویژگی های کمتر";
}

.content-main .sec-plan-services .box-item-plan .btn-buy-service {
  background-color: var(--subcolor);
  width: 100%;
  height: 75px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--whitecolor);
  margin-top: 40px;
  transition: all 0.3s;
}

.content-main .sec-plan-services .box-item-plan .btn-buy-service:hover {
  background-color: var(--bluecolor);
  box-shadow: 0 12px 50px rgba(28, 64, 242, 0.3);
}

.content-main .sec-plan-services .list-plans .box-item-plan.active .btn-buy-service {
  background: linear-gradient(90deg, #0082F8, transparent) #1C40F2;
  box-shadow: 0 12px 50px rgba(28, 64, 242, 0.3);
}

.content-main .sec-plan-services .list-plans .box-item-plan.active .btn-buy-service:hover {
  background-color: var(--redcolor);
}

.content-main .sec-plan-services .list-plans .box-item-plan .popular {
  width: 400px;
  height: 60px;
  background: rgb(255, 7, 102);
  background: -moz-linear-gradient(90deg, rgb(255, 7, 102) 0%, rgb(255, 126, 93) 100%);
  background: -webkit-linear-gradient(90deg, rgb(255, 7, 102) 0%, rgb(255, 126, 93) 100%);
  background: linear-gradient(90deg, rgb(255, 7, 102) 0%, rgb(255, 126, 93) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--whitecolor);
  position: absolute;
  top: 80px;
  left: -95px;
  transform: rotate(-45deg);
  padding-bottom: 10px;
}

.content-main .sec-plan-services .tab-content {
  position: relative;
}

.content-main .sec-plan-services .circular-read {
  position: absolute;
  top: 20%;
  z-index: 99;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(28, 64, 242);
  background: -moz-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: -webkit-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  background: linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(3, 248, 251) 100%);
  right: 0;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: all 0.6s;
}

.content-main .sec-plan-services .circular-read.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.content-main .sec-plan-services .circular-read .text {
  width: 120px;
  flex-shrink: 0;
}

.content-main .sec-plan-services .circular-read .logo {
  position: absolute;
  width: 40px;
}

.content-main .sec-plan-services .circular-read text {
  fill: var(--whitecolor);
  font-size: 35px;
  text-transform: uppercase;
  font-variant-ligatures: none;
  letter-spacing: 6px;
  transform-origin: 250px 250px;
  animation: rotation 5s linear infinite;
}

.content-main .sec-plan-services .circular-read .textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}

.content-main .sec-plan-services .circular-read:hover .textcircle {
  transform: scale(0.9) rotate(90deg);
}

@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotationcontrary {
  to {
    transform: rotate(-360deg);
  }
}
/*---------------------- /Section Plan Services ---------------------*/
/*---------------------- Section Website Projects ---------------------*/
.content-main .sec-website-projects {
  margin: 150px 0;
  overflow: hidden;
}

.content-main .sec-website-projects .content-project {
  position: relative;
  background-color: var(--bluecolor);
  border-radius: 250px 0 0 50px;
  padding: 0 150px 0 200px;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.content-main .sec-website-projects .content-project::before {
  content: "";
  background: url("../images/logo/logo-single.svg") no-repeat center center/1066px;
  width: 1066px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -81%;
  opacity: 0.05;
}

.content-main .sec-website-projects .content-project .content-box {
  position: relative;
  z-index: 100;
}

.content-main .sec-website-projects .content-project .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--whitecolor);
  margin: 0 0 40px;
}

.content-main .sec-website-projects .content-project .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
  line-height: 40px;
  text-align: right;
}

.content-main .sec-website-projects .content-project .btn-ds-more {
  margin-top: 80px;
}

.content-main .sec-website-projects .list-projects {
  padding: 0;
  position: relative;
  z-index: 100;
}

.content-main .sec-website-projects .list-projects .swiper-website-projects {
  position: relative;
  width: 140%;
  right: -15%;
  padding: 50px 0;
}

.content-main .sec-website-projects .list-projects .box-prj {
  display: block;
  width: 100%;
  height: 650px;
  background-color: var(--whitecolor);
  border-radius: 40px;
  padding: 20px;
  box-shadow: 0 12px 50px rgba(125, 125, 125, 0.15);
}

.content-main .sec-website-projects .list-projects .box-prj .image-prj {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--light2color);
}

.content-main .sec-website-projects .list-projects .box-prj .image-prj > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: all 0.4s;
}

.content-main .sec-website-projects .list-projects:hover .box-prj .image-prj > img {
  filter: grayscale(1) opacity(0.5);
}

.content-main .sec-website-projects .list-projects .box-prj:hover .image-prj > img {
  filter: grayscale(0) opacity(1);
}

.content-main .sec-website-projects .list-projects .box-prj .content-prj {
  height: 300px;
  margin: 0 auto;
  position: absolute;
  bottom: -300px;
  right: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(360deg, rgb(0, 15, 87) 0%, rgba(237, 221, 83, 0) 60%);
  /* backdrop-filter: blur(10px); */
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: all 0.4s;
  overflow: hidden;
  /* position: relative; */
  padding-bottom: 30px;
}

.content-main .sec-website-projects .list-projects .box-prj:hover .content-prj {
  bottom: 0;
}

.content-main .sec-website-projects .list-projects .box-prj .content-prj .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--whitecolor);
  margin: 0 0 5px;
}

.content-main .sec-website-projects .list-projects .box-prj .content-prj .website {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
}

.content-main .sec-website-projects .swiper-website-projects .swiper-button {
  background-color: var(--bluecolor);
  width: 70px;
  height: 70px;
  border-radius: 20px;
  position: absolute;
  top: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  font-size: 18px;
  color: var(--whitecolor);
  transition: all 0.4s;
}

.content-main .sec-website-projects .swiper-website-projects .swiper-website-prev {
  left: 24%;
}

.content-main .sec-website-projects .swiper-website-projects .swiper-website-next {
  right: 24%;
  display: none;
}

.content-main .sec-website-projects .swiper-website-projects .swiper-button:hover {
  background-color: var(--subcolor);
}

/*---------------------- /Section Website Projects ---------------------*/
/*---------------------- Section Mail Server ---------------------*/
.content-main .sec-mailserver {
  padding-top: 0;
}

.content-main .sec-mailserver .title-sec > strong {
  color: var(--bluecolor);
}

/*---------------------- /Section Mail Server ---------------------*/
/*---------------------- Section Website Builder ---------------------*/
.content-main .sec-website-builder {
  position: relative;
  width: 100%;
  padding: 100px 0;
  background: rgb(28, 64, 242);
  background: -moz-linear-gradient(130deg, rgb(28, 64, 242) 0%, rgb(0, 16, 66) 100%);
  background: -webkit-linear-gradient(130deg, rgb(28, 64, 242) 0%, rgb(0, 16, 66) 100%);
  background: linear-gradient(130deg, rgb(28, 64, 242) 0%, rgb(0, 16, 66) 100%);
  overflow: hidden;
}

.content-main .sec-website-builder::before {
  content: "";
  background: url("../images/site/consult-bg.svg") no-repeat center center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.content-main .sec-website-builder .title-sec {
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  color: var(--whitecolor);
  z-index: 100;
  margin: 0 0 30px;
}

.content-main .sec-website-builder .title-sec > strong {
  display: block;
  color: #03F8FB;
}

.content-main .sec-website-builder .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  text-align: center;
  margin: 0;
}

.content-main .sec-website-builder .row-button {
  text-align: center;
}

.content-main .sec-website-builder .btn-ds-more {
  position: relative;
  background: linear-gradient(90deg, #03f8fb, transparent) #1C40F2;
  z-index: 100;
}

.content-main .sec-website-builder .btn-ds-more:hover {
  background-color: #FF0766;
}

.content-main .sec-website-builder .row {
  margin: 0 -20px;
}

.content-main .sec-website-builder .col-item-builder {
  padding: 0 20px;
}

.content-main .sec-website-builder .box-item-builder {
  background-color: var(--whitecolor);
  padding: 30px;
  border-radius: 30px;
  margin-top: 40px;
  text-align: center;
}

.content-main .sec-website-builder .box-item-builder .box-icon {
  background-color: var(--lightcolor);
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 45px;
  color: var(--bluecolor);
}

.content-main .sec-website-builder .box-item-builder .title {
  font-size: 20px;
  font-weight: bold;
  color: var(--maincolor);
  margin: 20px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-main .sec-website-builder .box-item-builder .desc {
  font-size: 16px;
  font-weight: 300;
  color: var(--textcolor);
  margin: 0;
  line-height: 30px;
  height: 90px;
  overflow: hidden;
}

.content-main .sec-website-builder .box-item-builder .logos-cst {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.content-main .sec-website-builder .box-item-builder .logos-cst .item-cst {
  width: 60px;
  height: 60px;
  border: 1px solid var(--bordercolor);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
}

.content-main .sec-website-builder .box-item-builder .logos-cst .item-cst > img {
  width: 100%;
}

/*---------------------- /Section Website Builder ---------------------*/
/*---------------------- Section Distinction ---------------------*/
.content-main .sec-distinction {
  background-color: var(--lightcolor);
  padding: 120px 0;
}

.content-main .sec-distinction .row {
  align-items: center;
  justify-content: space-between;
}

.content-main .sec-distinction .content-sec .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 30px;
}

.content-main .sec-distinction .content-sec .title-sec > strong {
  color: var(--bluecolor);
}

.content-main .sec-distinction .content-sec .desc-sec {
  font-size: 18px;
  font-weight: 500;
  color: var(--textcolor);
  margin: 0;
}

.content-main .sec-distinction .list-dst {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.content-main .sec-distinction .list-dst .item-dst {
  position: relative;
  cursor: pointer;
  width: 200px;
  height: 250px;
  padding: 15px 40px;
  background-color: var(--whitecolor);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0, 16, 66, 0.05);
  transition: all 0.4s;
}

.content-main .sec-distinction .list-dst .item-dst:nth-child(2) {
  top: -50px;
}

.content-main .sec-distinction .list-dst .item-dst:nth-child(4) {
  bottom: -50px;
}

.content-main .sec-distinction .list-dst .item-dst:hover {
  margin-top: -20px;
  transform: skew(4deg);
  box-shadow: 0 30px 80px rgba(0, 16, 66, 0.15);
}

.content-main .sec-distinction .list-dst .item-dst .box-icon {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.content-main .sec-distinction .list-dst .item-dst .box-icon > i {
  font-size: 45px;
}

.content-main .sec-distinction .list-dst .item-dst .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--maincolor);
  margin: 0;
  height: 55px;
  line-height: 25px;
  overflow: hidden;
}

/*---------------------- /Section Distinction ---------------------*/
/*---------------------- Section App Projects ---------------------*/
.content-main .sec-website-projects.sec-apps .content-project {
  background-color: var(--subcolor);
  border-radius: 0 250px 50px 0;
  padding: 0 200px 0 150px;
}

.content-main .sec-website-projects.sec-apps .content-project::before {
  right: auto;
  left: -81%;
}

.content-main .sec-website-projects.sec-apps .list-projects .swiper-app-projects {
  position: relative;
  width: 140%;
  left: 27%;
  padding: 50px 0;
}

.content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-button {
  background-color: var(--bluecolor);
  width: 70px;
  height: 70px;
  border-radius: 20px;
  position: absolute;
  top: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  font-size: 18px;
  color: var(--whitecolor);
  transition: all 0.4s;
}

.content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-app-prev {
  left: 24%;
  display: none;
}

.content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-app-next {
  right: 24%;
}

.content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-button:hover {
  background-color: var(--maincolor);
}

/*---------------------- /Section App Projects ---------------------*/
/*---------------------- Section News ---------------------*/
.content-main .sec-ds-news .head-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 50px;
}

.content-main .sec-ds-news .head-section .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 10px;
}

.content-main .sec-ds-news .head-section .title-sec > strong {
  color: var(--bluecolor);
}

.content-main .sec-ds-news .head-section .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--textcolor);
  width: 75%;
}

.content-main .sec-ds-news .head-section .btn-ds-more {
  margin: 0;
  background: var(--subcolor);
  flex-shrink: 0;
}

.content-main .sec-ds-news .head-section .btn-ds-more:hover {
  background: var(--redcolor);
}

.content-main .sec-ds-news .row {
  margin: 0 -20px;
}

.content-main .sec-ds-news .col-item-news {
  padding: 0 20px;
}

.content-main .sec-ds-news .box-item-news {
  width: 100%;
  background-color: var(--whitecolor);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0, 15, 87, 0.1);
  transition: all 0.4s;
}

.content-main .sec-ds-news .box-item-news:hover {
  box-shadow: 0 30px 80px rgba(0, 15, 87, 0.2);
}

.content-main .sec-ds-news .box-item-news .image-news {
  display: block;
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 50px 50px 0 120px;
  overflow: hidden;
}

.content-main .sec-ds-news .box-item-news .image-news::after {
  content: "";
  background-color: var(--bluecolor);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.content-main .sec-ds-news .box-item-news:hover .image-news::after {
  opacity: 0.6;
  visibility: visible;
}

.content-main .sec-ds-news .box-item-news .image-news > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.8s;
}

.content-main .sec-ds-news .box-item-news:hover .image-news > img {
  filter: grayscale(1);
  transform: scale(1.2) rotate(5deg);
}

.content-main .sec-ds-news .box-item-news .image-news .catagory {
  background-color: var(--bluecolor);
  width: 200px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  font-size: 18px;
  font-weight: bold;
  color: var(--whitecolor);
  transition: all 0.4s;
}

.content-main .sec-ds-news .box-item-news:hover .image-news .catagory {
  background-color: var(--redcolor);
}

.content-main .sec-ds-news .box-item-news .content-news {
  padding: 30px;
}

.content-main .sec-ds-news .box-item-news .title-news {
  margin: 0 0 15px;
}

.content-main .sec-ds-news .box-item-news .title-news > a {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: var(--maincolor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.4s;
}

.content-main .sec-ds-news .box-item-news:hover .title-news > a {
  color: var(--bluecolor);
}

.content-main .sec-ds-news .box-item-news .desc-news {
  font-size: 18px;
  font-weight: normal;
  color: var(--textcolor);
  line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-main .sec-ds-news .box-item-news .options {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 40px;
}

.content-main .sec-ds-news .box-item-news .options .item-op {
  background-color: var(--light2color);
  height: 40px;
  border-radius: 200px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: normal;
  color: var(--textcolor);
}

.content-main .sec-ds-news .box-item-news .options .item-op > i {
  font-size: 20px;
}

/*---------------------- /Section News ---------------------*/
/*---------------------- Section Customers ---------------------*/
.content-main .sec-customers {
  padding-top: 100px;
  padding-bottom: 100px;
  background: var(--whitecolor);
}

.content-main .sec-customers .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  margin: 0 0 10px;
  text-align: center;
}

.content-main .sec-customers .title-sec > strong {
  color: var(--bluecolor);
}

.content-main .sec-customers .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--textcolor);
  text-align: center;
}

.content-main .sec-customers .swiper-customers {
  position: relative;
  margin-top: 50px;
}

.content-main .sec-customers .swiper-customers::before,
.content-main .sec-customers .swiper-customers::after {
  content: "";
  width: 400px;
  height: 150px;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgb(255, 255, 255) 100%);
  background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgb(255, 255, 255) 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgb(255, 255, 255) 100%);
  position: absolute;
  top: 0;
  z-index: 100;
}

.content-main .sec-customers .swiper-customers::before {
  right: 0;
}

.content-main .sec-customers .swiper-customers::after {
  left: 0;
  transform: scaleX(-1);
}

.content-main .sec-customers .swiper-customers .swiper-wrapper {
  align-items: center;
}

.content-main .sec-customers .swiper-customers .swiper-slide {
  cursor: pointer;
}

.content-main .sec-customers .swiper-customers .swiper-slide img {
  width: 100%;
  transition: all 0.4s;
}

.content-main .sec-customers .swiper-customers:hover .swiper-slide img {
  filter: grayscale(1) opacity(0.2);
}

.content-main .sec-customers .swiper-customers .swiper-slide:hover img {
  filter: none;
}

/*---------------------- /Section Customers ---------------------*/
/*---------------------- /Content Main ---------------------*/
/*---------------------- Footer Main ---------------------*/
.footer-main {
  position: relative;
  background: rgb(0, 15, 87);
  background: -moz-linear-gradient(0deg, rgb(0, 15, 87) 0%, rgb(0, 16, 66) 100%);
  background: -webkit-linear-gradient(0deg, rgb(0, 15, 87) 0%, rgb(0, 16, 66) 100%);
  background: linear-gradient(0deg, rgb(0, 15, 87) 0%, rgb(0, 16, 66) 100%);
  padding: 100px 0;
  margin-top: 220px;
}

.footer-main::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 148px;
  left: 50%;
  top: -145px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  background: url("../images/site/curve-footer.svg") no-repeat top center/cover;
}

.footer-main .container {
  position: relative;
}

.footer-main .container::before,
.footer-main .container::after {
  content: "";
  background: url("../images/site/hero-shape.png") no-repeat center center/50px;
  width: 45px;
  height: 120px;
  position: absolute;
  z-index: 100;
}

.footer-main .container::before {
  right: 50px;
  top: -50px;
}

.footer-main .container::after {
  left: 50px;
  bottom: 150px;
}

.footer-main .page-scroll {
  position: absolute;
  top: -110px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111E60;
  font-size: 16px;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.footer-main .page-scroll:hover {
  background-color: var(--bluecolor);
}

.footer-main .linear {
  background: rgb(28, 64, 242);
  background: -moz-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(0, 130, 248) 25%, rgb(3, 248, 251) 50%, rgb(255, 7, 102) 75%, rgb(255, 126, 93) 100%);
  background: -webkit-linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(0, 130, 248) 25%, rgb(3, 248, 251) 50%, rgb(255, 7, 102) 75%, rgb(255, 126, 93) 100%);
  background: linear-gradient(90deg, rgb(28, 64, 242) 0%, rgb(0, 130, 248) 25%, rgb(3, 248, 251) 50%, rgb(255, 7, 102) 75%, rgb(255, 126, 93) 100%);
  background-size: 300% 300%;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  animation: animatelinear 3s ease infinite;
}

@keyframes animatelinear {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*---------------------- Footer Links ---------------------*/
.footer-main .links-site {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-main .links-site .item-links .title-lnk {
  font-size: 20px;
  font-weight: 900;
  color: var(--whitecolor);
  margin: 0 0 30px;
}

.footer-main .links-site .item-links .list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-main .links-site .item-links .list a {
  display: inline-flex;
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  opacity: 0.5;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.footer-main .links-site .item-links .list a:hover {
  opacity: 1;
  font-weight: 500;
  color: #03F8FB;
}

/*---------------------- /Footer Links ---------------------*/
/*---------------------- Footer Support ---------------------*/
.footer-main .support-banner {
  position: relative;
  margin: 60px 0;
  background: rgb(0, 130, 248);
  background: -moz-linear-gradient(45deg, rgb(0, 130, 248) 0%, rgb(28, 64, 242) 100%);
  background: -webkit-linear-gradient(45deg, rgb(0, 130, 248) 0%, rgb(28, 64, 242) 100%);
  background: linear-gradient(45deg, rgb(0, 130, 248) 0%, rgb(28, 64, 242) 100%);
  width: 100%;
  height: 250px;
  border-radius: 40px;
  overflow: hidden;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-main .support-banner::before {
  content: "";
  background: url("../images/site/shape.png") no-repeat center center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.footer-main .support-banner .content {
  position: relative;
  z-index: 100;
}

.footer-main .support-banner .content .title {
  font-size: 40px;
  font-weight: 900;
  color: var(--whitecolor);
  margin: 0 0 10px;
}

.footer-main .support-banner .content .desc {
  font-size: 20px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
}

.footer-main .support-banner .btn-ds-more {
  position: relative;
  z-index: 100;
  margin: 0;
}

/*---------------------- /Footer Support ---------------------*/
/*---------------------- Footer Info ---------------------*/
.footer-main .footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-main .footer-info .main-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.footer-main .footer-info .main-info .logo-main > img {
  width: 100px;
  flex-shrink: 0;
  margin-left: 40px;
}

.footer-main .footer-info .main-info .navbar-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 5px;
}

.footer-main .footer-info .main-info .navbar-links ul a {
  display: inline-flex;
  font-size: 18px;
  font-weight: 500;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.footer-main .footer-info .main-info .navbar-links ul a:hover {
  color: #03F8FB;
}

.footer-main .footer-info .main-info .navbar-links ul li:not(:last-child) a::after {
  content: "";
  display: inline-flex;
  margin: 0 15px;
  width: 1px;
  height: 25px;
  background-color: var(--whitecolor);
  opacity: 0.5;
}

.footer-main .footer-info .main-info .contact {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  opacity: 0.5;
  margin: 0;
}
.footer-main .footer-info .main-info .contact .office-phone {
  margin-right: 20px;
}

.footer-main .footer-info .certificates {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.footer-main .footer-info .certificates .item-crt {
  width: 120px;
  height: 120px;
  background-color: var(--whitecolor);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-main .footer-info .certificates .item-crt > img {
  width: 90px;
  transition: all 0.3s;
}

.footer-main .footer-info .certificates .item-crt:hover > img {
  transform: scale(0.9);
}

/*---------------------- /Footer Info ---------------------*/
/*---------------------- Footer Copyright ---------------------*/
.footer-main .footer-copyright {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-main .footer-copyright .copyright .text-main,
.footer-main .footer-copyright .copyright .designer {
  font-size: 18px;
  font-weight: 300;
  color: var(--whitecolor);
  margin: 0;
}

.footer-main .footer-copyright .copyright .text-main {
  opacity: 0.5;
  margin: 0 0 5px;
}

.footer-main .footer-copyright .copyright .designer > span {
  opacity: 0.5;
}

.footer-main .footer-copyright .copyright .designer > a {
  color: var(--whitecolor);
  font-weight: 500;
  transition: all 0.3s;
}

.footer-main .footer-copyright .copyright .designer > a:hover {
  color: #03F8FB;
}

.footer-main .footer-copyright .socials {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.footer-main .footer-copyright .socials .item-sc {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111E60;
  font-size: 20px;
  color: var(--whitecolor);
  transition: all 0.3s;
}

.footer-main .footer-copyright .socials .item-sc:hover {
  background-color: var(--bluecolor);
}

.footer-main .footer-aboutus {
  padding-bottom: 30px;
}
.footer-main .footer-aboutus h1, .footer-main .footer-aboutus h2 {
  color: var(--whitecolor);
  font-size: 18px;
}
.footer-main .footer-aboutus .about-content {
  color: var(--whitecolor);
  font-size: 14px;
  opacity: 0.6;
  font-weight: 300;
  line-height: 28px;
}
.footer-main .footer-aboutus .about-content a {
  color: var(--whitecolor);
}

/*---------------------- /Footer Copyright ---------------------*/
/*---------------------- /Footer Main ---------------------*/
/*---------------------- Responsives ---------------------*/
@media only screen and (min-width: 1700px) and (max-width: 1800px) {
  .container {
    padding: 0 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1700px) {
  .container {
    padding: 0 30px;
  }
  .header-main .header-menu .navbar-digitalserver .nav-item {
    margin-left: 25px;
  }
  .header-main .header-menu .navbar-digitalserver .nav-link,
  .header-main .header-menu .other-menu .btn-all-products {
    font-size: 15px;
  }
  .search-box-ds {
    width: 40%;
  }
  .header-main .header-services .about-services .title-about,
  .content-main .sec-seo-counseling .title-sec,
  .content-main .sec-plan-services .title-sec,
  .content-main .sec-website-projects .content-project .title-sec,
  .content-main .sec-website-builder .title-sec,
  .content-main .sec-distinction .content-sec .title-sec,
  .content-main .sec-ds-news .head-section .title-sec,
  .content-main .sec-customers .title-sec,
  .footer-main .support-banner .content .title {
    font-size: 35px;
    line-height: 48px;
  }
  .header-main .header-services .about-services .desc,
  .content-main .sec-seo-counseling .desc-sec,
  .content-main .sec-plan-services .desc-sec,
  .content-main .sec-website-projects .content-project .desc-sec,
  .content-main .sec-distinction .content-sec .desc-sec,
  .content-main .sec-ds-news .head-section .desc-sec,
  .content-main .sec-customers .desc-sec,
  .footer-main .support-banner .content .desc,
  .content-main .sec-website-builder .desc-sec {
    font-size: 18px;
    line-height: 35px;
  }
  .header-main .header-services .about-services .desc {
    padding-left: 100px;
  }
  .header-main .header-services .domain-search .title-main {
    font-size: 22px;
  }
  .header-main .header-services .domain-search .search-box .form-control {
    font-size: 14px;
  }
  .header-main .header-services .domain-search .search-box .btn-search {
    width: 80px;
    font-size: 14px;
  }
  .header-main .header-services .domain-search .offer-domains .title-ofd > i {
    font-size: 25px;
  }
  .header-main .header-services .domain-search .offer-domains .list-ofd {
    gap: 5px;
  }
  .header-main .header-services .domain-search .offer-domains .item-ofd .price {
    font-size: 12px;
  }
  .header-main .header-services .domain-search .offer-domains .item-ofd .domain {
    font-size: 14px;
    margin-right: 5px;
  }
  .header-main .header-services .domain-search .offer-domains .title-ofd {
    font-size: 16px;
  }
  .header-main .header-services .domain-search .other-domains .item-otd {
    font-size: 14px;
  }
  .header-main .header-services .domain-search .swiper-banners {
    height: 150px;
  }
  .header-main .header-services .swiper-services {
    width: 105%;
  }
  .header-main .header-services .swiper-services .box-srv {
    height: 200px;
  }
  .header-main .header-services .swiper-services .box-srv .box-icon {
    width: 80px;
    height: 80px;
  }
  .header-main .header-services .swiper-services .box-srv .box-icon > img {
    height: 40px;
  }
  .header-main .header-services .swiper-services .box-srv .title {
    font-size: 18px;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link {
    width: 220px;
    font-size: 16px;
    gap: 15px;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link > i {
    font-size: 25px;
  }
  .content-main .sec-plan-services .list-plans .row {
    margin: 0 -15px;
  }
  .content-main .sec-plan-services .list-plans .col-item-plan {
    padding: 0 15px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan {
    padding: 40px 30px;
  }
  .content-main .sec-plan-services .change-plan .item-pln {
    font-size: 16px;
  }
  .content-main .sec-plan-services .box-item-plan .title-pln {
    font-size: 22px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .title,
  .content-main .sec-plan-services .box-item-plan .item-fts .text,
  .content-main .sec-plan-services .box-item-plan .view-more::after {
    font-size: 16px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .number {
    font-size: 45px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .toman,
  .content-main .sec-plan-services .box-item-plan .desc-pln {
    font-size: 18px;
  }
  .content-main .sec-plan-services .box-item-plan .list-features {
    height: 235px;
  }
  .content-main .sec-plan-services .box-item-plan .btn-buy-service {
    height: 70px;
    font-size: 18px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan .popular {
    height: 55px;
    top: 50px;
    left: -120px;
    font-size: 20px;
  }
  .content-main .sec-website-projects .content-project {
    padding: 0 50px 0 150px;
  }
  .content-main .sec-website-projects.sec-apps .content-project {
    padding: 0 150px 0 50px;
  }
  .content-main .sec-ds-news .row {
    margin: 0 -15px;
  }
  .content-main .sec-ds-news .col-item-news {
    padding: 0 15px;
  }
  .content-main .sec-ds-news .box-item-news .image-news {
    height: 400px;
  }
  .content-main .sec-ds-news .box-item-news .title-news > a {
    font-size: 22px;
  }
  .content-main .sec-ds-news .box-item-news .desc-news {
    font-size: 16px;
  }
  .content-main .sec-customers .swiper-customers::before,
  .content-main .sec-customers .swiper-customers::after {
    width: 300px;
  }
  .footer-main .container::before {
    top: -140px;
  }
  .footer-main .links-site .item-links .title-lnk {
    font-size: 18px;
  }
  .footer-main .links-site .item-links .list a,
  .footer-main .footer-info .main-info .navbar-links ul a,
  .footer-main .footer-info .main-info .contact,
  .footer-main .footer-copyright .copyright .text-main,
  .footer-main .footer-copyright .copyright .designer {
    font-size: 16px;
  }
  .footer-main .container::after {
    bottom: 60%;
  }
  .content-main .sec-distinction {
    padding: 70px 0 120px;
  }
  .content-main .sec-distinction .content-sec {
    width: 100%;
    text-align: center;
  }
  .content-main .sec-distinction .list-dst {
    margin-top: 100px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}
/*---------------------- /Responsives ---------------------*/
.tabs-footer {
  position: fixed;
  background-color: var(--whitecolor);
  box-shadow: 0px -4px 30px 0px rgba(0, 69, 61, 0.4);
  border-radius: 20px 20px 0 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
}

.bottom-sheet-btn {
  background-color: #f6831f;
  height: 36px;
  align-items: center;
  padding: 0 25px 2px;
  font-size: 14px;
  color: #fff;
  margin: 5px 5px;
  border-radius: 4px;
  border: none;
  transition: all 0.4s;
  cursor: pointer;
}

.bottom-sheet-btn:hover {
  background-color: #333;
}

/* ساختار اصلی */
.about-services {
  position: relative;
  min-height: 200px; /* یک ارتفاع حداقلی برای جلوگیری از پرش صفحه */
}

.title-about {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a202c;
  margin-bottom: 1rem;
}

.desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0 auto;
}

/* کلاس‌های انیمیشن */
.fade-out {
  animation: fadeOut 0.5s forwards;
}

.fade-in-up {
  animation: fadeInUp 0.7s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* کلاس‌های انیمیشن چرخشی */
.flip-out {
  animation: flipOut 0.5s forwards;
  transform-origin: center center;
}

.flip-in {
  animation: flipIn 0.6s forwards;
  transform-origin: center center;
}

@keyframes flipOut {
  from {
    transform: rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipIn {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
/* برای حفظ پرسپکتیو سه‌بعدی */
.about-services {
  perspective: 1000px;
  position: relative;
  min-height: 200px;
}

/* استایل برای مکان‌نمای تایپ */
.title-about::after {
  content: "▋";
  animation: blink 0.7s infinite;
  color: #3182ce; /* رنگ مکان‌نما */
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
/*---------------------------------------------------*/
.hotspot {
  position: absolute;
  /* display: flex; */
  justify-content: center;
  /* align-items: center; */
  pointer-events: auto;
  z-index: 10;
  cursor: pointer;
}

.hotspot-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.hotspot-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.4);
  border-radius: 50%;
  animation: pulse 2s infinite;
  z-index: 0;
}

.hotspot-icon.has-dot::before {
  display: none;
}

.hotspot-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--pulse-color, red);
  position: relative;
}

.hotspot-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-color: var(--pulse-color, red);
  border-radius: 50%;
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.tooltip-box {
  position: absolute;
  background: #ffffff;
  color: #303030;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.24);
  /* inset: 0px auto auto 0px; */
  border: 0 solid #333;
}

.tooltip-box::after {
  content: "";
  position: absolute;
  border-style: solid;
}

/* نمایش پیش‌فرض */
.tooltip-box.show {
  opacity: 1;
  visibility: visible;
}

/* پوزیشن بالا */
.tooltip-top {
  bottom: 50px;
  right: 50%;
  transform: translateX(50%) translateY(10px);
}

.tooltip-top::after {
  top: 100%;
  right: 50%;
  transform: translateX(50%);
  border-width: 6px 6px 0 6px;
  border-color: #ffffff transparent transparent transparent;
}

/* پوزیشن پایین */
.tooltip-bottom {
  top: 50px;
  right: 50%;
  transform: translateX(50%) translateY(-10px);
}

.tooltip-bottom::after {
  bottom: 100%;
  right: 50%;
  transform: translateX(50%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #ffffff transparent;
}

/* پوزیشن چپ */
.tooltip-left {
  right: 45px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
}

.tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent #ffffff transparent transparent;
}

/* پوزیشن راست */
.tooltip-right {
  left: 45px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
}

.tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #ffffff;
}

/* حالت hover هم فعال باشه */
.hotspot:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------- Services -------------------------------------*/
/* General Styling for the Services Section */
.services-section {
  width: 100%;
  padding: 80px 20px;
  background-color: #ffffff; /* White background for the section */
  text-align: center;
  direction: rtl;
  font-family: "Vazirmatn", sans-serif;
}

.section-title {
  font-size: 2.5rem; /* 40px */
  font-weight: 700;
  margin-bottom: 50px;
  color: #1e293b; /* Dark Navy Blue - consistent with your header */
}

/* Flexbox container for horizontal layout */
.services-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Individual Service Card Styling - Light & Professional Look */
.service-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  padding: 35px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  flex-basis: 270px;
  flex-grow: 1;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: #2563eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
  background-color: var(--lightcolor);
}
.service-card:hover .btn-ds-more {
  background-color: var(--redcolor);
  color: var(--whitecolor);
}
.service-card:hover .btn-ds-more i {
  margin-right: 20px;
  animation: shadowarrow 0.4s linear infinite;
}

/* Icon Styling */
.service-card .box-icon {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.service-card .box-icon i {
  font-size: 48px;
}

/* Title in the card */
.service-card h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  color: #1e293b; /* Dark Navy Blue */
  margin-bottom: 15px;
}

/* Short description text */
.service-card p {
  font-size: 0.95rem; /* 15px */
  color: #475569; /* Softer grey for text */
  line-height: 1.7;
  margin-bottom: 25px;
  flex-grow: 1;
}

/* Call-to-Action Button - Styled like your header buttons */
.cta-button {
  display: inline-block;
  background-color: #2563eb; /* The exact blue from your header buttons */
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  border: 2px solid transparent;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #1d4ed8; /* A slightly darker blue for hover effect */
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  .services-container {
    flex-direction: column;
    align-items: center;
  }
  .service-card {
    width: 90%;
    max-width: 350px;
  }
}
/* استایل اصلی دکمه */
.play-button {
  width: 90px;
  height: 90px;
  background-color: #f37a24;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  top: calc(50% - 45px);
  left: calc(50% - 45px);
  z-index: 9;
}

/* این بخش کلیدی است.
         ما برای هر دو شبه‌عنصر ::before و ::after یک انیمیشن تعریف می‌کنیم.
         این یعنی ما "دو" عنصر برای انیمیشن داریم.
        */
.play-button::before,
.play-button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f37a24;
  border-radius: 50%;
  z-index: -1; /* پالس‌ها را به پشت دکمه اصلی می‌فرستد */
  /* اتصال انیمیشن به هر دو عنصر */
  animation: playpulse 2.5s infinite;
}

/* *** نکته اصلی اینجاست ***
         این خط فقط روی پالس "دوم" (یعنی ::after) اعمال می‌شود
         و شروع انیمیشن آن را 1.25 ثانیه به تاخیر می‌اندازد.
        */
.play-button::after {
  animation-delay: 1.25s;
}

/* تعریف انیمیشن پالس */
@keyframes playpulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8); /* اندازه نهایی پالس */
    opacity: 0;
  }
}
/*----------------------------------- /Services -------------------------------------*/
/*---------------------- Comments ---------------------*/
.content-main .sec-comments {
  margin-top: 80px;
  margin-bottom: 80px;
}
.content-main .sec-comments .head-title {
  width: 100%;
}
.content-main .sec-comments .head-title .title-sec {
  font-size: 40px;
  font-weight: 900;
  color: var(--maincolor);
  text-align: center;
}
.content-main .sec-comments .head-title .title-sec > strong {
  color: var(--bluecolor);
}
.content-main .sec-comments .head-title .desc-sec {
  font-size: 18px;
  font-weight: 300;
  color: var(--textcolor);
  text-align: center;
}

.content-main .sec-comments .swiper-comments {
  margin-top: 30px;
}

.content-main .sec-comments .swiper-comments .swiper-slide {
  padding: 20px 0;
}

.content-main .sec-comments .swiper-cmt {
  width: 60px;
  height: 60px;
  background-color: var(--whitecolor);
  border-radius: 100px;
  border: 1px solid var(--bordercolor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--subtextcolor);
  position: absolute;
  top: 45%;
  z-index: 10;
  transition: all 0.4s;
}

.content-main .sec-comments .swiper-cmt:hover {
  background-color: var(--maincolor);
  border-color: var(--maincolor);
  color: var(--blackcolor);
}

.content-main .sec-comments .swiper-cmt-next {
  right: -100px;
}

.content-main .sec-comments .swiper-cmt-prev {
  left: -100px;
}

.content-main .sec-comments .box-comment {
  position: relative;
  background-color: var(--lightcolor);
  border: 1px solid var(--lightcolor);
  border-radius: 30px;
  height: 410px;
  padding: 40px;
  transition: all 0.4s;
}

.content-main .sec-comments .swiper-slide-active .box-comment {
  background-color: var(--whitecolor);
  border-color: var(--bordercolor);
  box-shadow: 0px 0px 40px 0px rgba(32, 32, 32, 0.05);
}

.content-main .sec-comments .box-comment::after {
  content: "\e953";
  font-family: "icomoon";
  font-size: 50px;
  color: var(--bordercolor);
  position: absolute;
  left: 20px;
  top: 20px;
  line-height: 1;
  transition: all 0.4s;
}

.content-main .sec-comments .swiper-slide-active .box-comment::after {
  color: var(--maincolor);
}

.content-main .sec-comments .box-comment .info-person {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.content-main .sec-comments .box-comment .info-person .image {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-main .sec-comments .box-comment .info-person .box-image {
  position: absolute;
  width: 94%;
  height: 94%;
  right: 0;
  overflow: hidden;
}
.content-main .sec-comments .box-comment .info-person .box-image img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
}

.content-main .sec-comments .box-comment .info-person .image .polygon {
  width: 100%;
  height: 100%;
  fill: var(--whitecolor);
  transition: all 0.4s;
}

.content-main .sec-comments .swiper-slide-active .box-comment .info-person .image .polygon {
  fill: var(--bordercolor);
}

.content-main .sec-comments .box-comment .info-person .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 10px;
}

.content-main .sec-comments .box-comment .info-person .fullname {
  font-size: 18px;
  font-weight: 700;
  color: var(--textcolor);
}

.content-main .sec-comments .box-comment .info-person .company {
  font-size: 16px;
  font-weight: 400;
  color: var(--subtextcolor);
}

.content-main .sec-comments .box-comment .title-cmt {
  font-size: 20px;
  font-weight: 700;
  color: var(--blackcolor);
  margin: 20px 0 10px;
  line-height: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-main .sec-comments .box-comment .desc-cmt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  font-size: 16px;
  font-weight: 400;
  color: var(--textcolor);
  line-height: 30px;
  margin: 0;
}

/*---------------------- /Comments ---------------------*/
/*---------------------- Learning Site ---------------------*/
.content-main .learning-site {
  padding-top: 100px;
  background: var(--whitecolor);
  padding-bottom: 100px;
}

.content-main .learning-site .row {
  margin: 0 -20px;
}

.content-main .learning-site .box-details {
  background: linear-gradient(270deg, #114EAB 0%, #0F3C82 52.2%, #0B47A5 100%);
  border-radius: 15px;
  padding: 50px 60px;
  overflow: hidden;
}

.content-main .learning-site .box-details .learning-icons {
  position: relative;
}

.content-main .learning-site .box-details .learning-icons::before {
  content: "";
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background: #0652CB;
  filter: blur(50px);
  position: absolute;
  z-index: 0;
}

.content-main .learning-site .box-details .learning-icons .image-icon {
  position: relative;
  width: 230px;
  z-index: 10;
}

.content-main .learning-site .learning-info .title-lrn .workshop {
  width: 108px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
}

.content-main .learning-site .learning-info .desc-lrn {
  line-height: 22px;
}

.content-main .learning-site .learning-info .list-info {
  padding-left: 10px;
  padding-right: 10px;
}
.content-main .learning-site .learning-info .list-info .item-inf {
  position: relative;
  padding: 10px 0;
}
.content-main .learning-site .learning-info .list-info .item-inf .text-inf i {
  margin-left: 15px;
}
.content-main .learning-site .learning-info .button-row {
  padding-right: 10px;
  padding-left: 10px;
}

.content-main .learning-site .learning-info .item-inf::after {
  content: "";
  width: 89.5%;
  height: 1px;
  background-color: var(--white);
  opacity: 0.2;
  position: absolute;
  bottom: 0;
  left: 0;
}

.content-main .learning-site .learning-info .item-inf:last-child::after {
  display: none;
}

.content-main .learning-site .learning-info .item-inf > i {
  width: 20px;
  text-align: center;
}

.content-main .learning-site .learning-info .btn-register {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border-bottom: 3px solid #04D66B;
  background: var(--lightgreen);
  box-shadow: 0px 6px 25px -2px rgba(11, 42, 91, 0.8);
  color: var(--maincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  margin-top: 20px;
  transition: all 0.4s;
}

.content-main .learning-site .learning-info .btn-register:hover {
  background-color: var(--white);
  box-shadow: none;
}

.content-main .learning-site .questions-learning .view-all,
.content-main .learning-site .questions-learning .view-all > i {
  transition: all 0.4s;
  margin-right: 10px;
  font-size: 10px;
}

.content-main .learning-site .questions-learning .view-all:hover {
  color: var(--maingreen);
}

.content-main .learning-site .questions-learning .view-all:hover > i {
  margin-right: 10px;
}

.content-main .learning-site .questions-learning .row {
  margin: 0;
}

.content-main .learning-site .list-questions {
  list-style: none;
  margin-top: 30px;
  padding: 0;
  margin-bottom: 0;
}

.content-main .learning-site .list-questions .item-qst {
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.4s;
}
.content-main .learning-site .list-questions .item-qst i {
  margin-right: 10px;
  font-size: 10px;
}

.content-main .learning-site .list-questions .item-qst.active {
  background-color: var(--maincolor) !important;
}

.content-main .learning-site .list-questions .item-qst .head-qst,
.content-main .learning-site .list-questions .item-qst .title-qst,
.content-main .learning-site .list-questions .item-qst .view-answer {
  transition: all 0.4s;
  margin: 0;
}

.content-main .learning-site .list-questions .item-qst .head-qst {
  position: relative;
  padding: 16px 20px;
}

.content-main .learning-site .list-questions .item-qst.active .head-qst {
  padding: 25px 20px;
}

.content-main .learning-site .list-questions .item-qst .head-qst::after {
  content: "";
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(14, 64, 143, 0) 0%, #255CB1 100%);
  position: absolute;
  bottom: 0;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s;
}

.content-main .learning-site .list-questions .item-qst.active .head-qst::after {
  width: 94%;
  opacity: 1;
  visibility: visible;
}

.content-main .learning-site .list-questions .item-qst.active .title-qst {
  color: var(--white);
}

.content-main .learning-site .list-questions .item-qst.active .view-answer {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

.content-main .learning-site .list-questions .item-qst .answer-box {
  padding: 20px 20px 20px 80px;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.content-main .learning-site .list-questions .item-qst.active .answer-box {
  display: block;
  opacity: 1;
  visibility: visible;
}

.content-main .learning-site .list-questions .item-qst .answer-box .text-ans {
  line-height: 22px;
}

.content-main .learning-site .list-questions .item-qst .answer-box .ans {
  width: 40px;
  height: 20px;
  border-radius: 6px;
  background-color: var(--lightgreen);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--maincolor);
  margin-left: 2px;
}

/*---------------------- /Learning Site ---------------------*/
@media only screen and (min-width: 650px) and (max-width: 1024px) {
  .container {
    padding: 0 30px;
  }
  .search-box-ds {
    width: 80%;
  }
  .header-main::after {
    display: none;
  }
  .header-main .header-top .logo-main {
    width: 160px;
  }
  .header-main .header-top .options {
    gap: 10px;
  }
  .header-main .header-top .options .btn-ds {
    height: 45px;
    padding: 10px 25px;
    font-size: 14px;
  }
  .header-main .header-top .options .btn-call {
    display: none;
  }
  .header-main .header-top .options .box-icon-menu {
    display: flex;
  }
  .header-main .navbar-digitalserver .collapse {
    display: block;
    position: fixed;
    background: var(--lightcolor);
    right: -100%;
    top: 0;
    z-index: 999999;
    height: 100vh;
    overflow-y: auto;
    left: 0;
    width: 300px;
    margin: 0;
    box-shadow: -20px 0 25px -10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: all 0.4s;
  }
  .header-main .navbar-digitalserver .collapse::after {
    content: "";
    background: url("../images/logo/logo-single.svg") no-repeat center center/100px;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    filter: brightness(0) opacity(0.1);
  }
  .header-main .navbar-digitalserver .collapse.show {
    right: 0;
  }
  .header-main .header-menu .navbar .navbar-nav .nav-item {
    margin-left: 0;
  }
  .header-main .header-menu .navbar .navbar-nav .nav-link {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    text-align: right;
    color: var(--maincolor);
  }
  .header-main .header-menu .navbar .dropdown .dropdown-menu {
    right: auto;
    left: 0;
    box-shadow: 0px 0px 15px 20px rgba(44, 62, 80, 0.05);
  }
  .header-main .header-menu .navbar-digitalserver .nav-link::before {
    display: none;
  }
  .header-main .header-menu .navbar-digitalserver .dropdown.show .nav-link {
    color: var(--bluecolor);
  }
  .header-main .header-menu .navbar .dropdown.show .dropdown-menu {
    top: 45px;
    border-radius: 15px;
    width: 100%;
  }
  .header-main .navbar-digitalserver .head-sidebar,
  .header-main .navbar-digitalserver .options {
    display: flex;
  }
  .header-main .header-menu {
    padding-top: 20px;
  }
  .header-main .header-services {
    margin-top: 50px;
  }
  .header-main .header-services .about-services {
    text-align: center;
  }
  .header-main .header-services .about-services .title-about,
  .content-main .sec-seo-counseling .title-sec,
  .content-main .sec-plan-services .title-sec,
  .content-main .sec-website-projects .content-project .title-sec,
  .content-main .sec-website-builder .title-sec,
  .content-main .sec-distinction .content-sec .title-sec,
  .content-main .sec-ds-news .head-section .title-sec,
  .content-main .sec-customers .title-sec,
  .footer-main .support-banner .content .title {
    font-size: 30px;
    line-height: 45px;
  }
  .header-main .header-services .about-services .desc,
  .content-main .sec-seo-counseling .desc-sec,
  .content-main .sec-plan-services .desc-sec,
  .content-main .sec-website-projects .content-project .desc-sec,
  .content-main .sec-distinction .content-sec .desc-sec,
  .content-main .sec-ds-news .head-section .desc-sec,
  .content-main .sec-customers .desc-sec,
  .footer-main .support-banner .content .desc,
  .content-main .sec-website-builder .desc-sec {
    font-size: 18px;
    padding: 0;
    line-height: 35px;
  }
  .header-main .header-services .swiper-services {
    margin: 50px 0 0;
  }
  .header-main .header-services .swiper-services .box-srv {
    height: 220px;
  }
  .content-main .sec-seo-counseling .content-sec {
    order: 1;
  }
  .content-main .sec-seo-counseling .image-sec {
    text-align: center;
  }
  .content-main .sec-seo-counseling .image-sec > img {
    width: 70%;
    margin-bottom: 50px;
  }
  .content-main .sec-plan-services {
    padding-bottom: 0;
  }
  .content-main .sec-plan-services .desc-sec {
    width: 100%;
  }
  .content-main .sec-plan-services .nav-tabs {
    gap: 15px;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link {
    width: 230px;
    font-size: 16px;
    gap: 15px;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link > i {
    font-size: 25px;
  }
  .content-main .sec-plan-services .list-plans {
    margin-top: 0;
  }
  .content-main .sec-plan-services .list-plans .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 50px 0 100px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan {
    padding: 40px 30px;
  }
  .content-main .sec-plan-services .box-item-plan .title-pln {
    font-size: 22px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .title,
  .content-main .sec-plan-services .box-item-plan .item-fts .text,
  .content-main .sec-plan-services .box-item-plan .view-more::after {
    font-size: 16px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .number {
    font-size: 45px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .toman,
  .content-main .sec-plan-services .box-item-plan .desc-pln {
    font-size: 18px;
  }
  .content-main .sec-plan-services .box-item-plan .list-features {
    height: 235px;
  }
  .content-main .sec-plan-services .box-item-plan .btn-buy-service {
    height: 70px;
    font-size: 18px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan .popular {
    height: 55px;
    top: 70px;
    left: -110px;
    font-size: 20px;
  }
  .content-main .sec-website-projects {
    margin: 80px 0;
  }
  .content-main .sec-website-projects .row {
    margin: 0;
  }
  .content-main .sec-website-projects .content-project {
    padding: 50px 30px 200px 50px;
    height: auto;
    border-radius: 150px 0 0 50px;
  }
  .content-main .sec-website-projects .content-project .title-sec {
    margin-bottom: 20px;
  }
  .content-main .sec-website-projects .content-project .btn-ds-more {
    margin-top: 50px;
  }
  .content-main .sec-website-projects .list-projects .swiper-website-projects {
    width: 120%;
    right: 4%;
    margin-top: -25%;
  }
  .content-main .sec-website-builder .box-item-builder .box-icon {
    width: 90px;
    height: 90px;
    font-size: 40px;
  }
  .content-main .sec-website-builder .box-item-builder .title {
    font-size: 18px;
  }
  .content-main .sec-website-builder .box-item-builder .desc {
    font-size: 14px;
    line-height: 25px;
    height: 100px;
  }
  .content-main .sec-website-builder .box-item-builder .logos-cst .item-cst {
    width: 50px;
    height: 50px;
  }
  .content-main .sec-distinction {
    padding: 70px 0;
  }
  .content-main .sec-distinction .content-sec {
    width: 100%;
    text-align: center;
  }
  .content-main .sec-distinction .list-dst {
    margin-top: 100px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .content-main .sec-distinction .list-dst .item-dst:nth-child(4) {
    bottom: 0;
  }
  .content-main .sec-website-projects.sec-apps .content-project {
    order: 1;
    padding: 50px 80px 200px 30px;
    height: auto;
    border-radius: 0 150px 50px 0;
  }
  .content-main .sec-website-projects .list-projects {
    order: 2;
  }
  .content-main .sec-website-projects.sec-apps .list-projects .swiper-app-projects {
    width: 120%;
    left: 25%;
    margin-top: -25%;
  }
  .content-main .sec-ds-news .head-section {
    flex-direction: column;
  }
  .content-main .sec-ds-news .head-section .desc-sec {
    width: 100%;
  }
  .content-main .sec-ds-news .head-section .btn-ds-more {
    margin-left: auto;
  }
  .content-main .sec-ds-news .head-section {
    margin: 0;
  }
  .content-main .sec-ds-news .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 50px 0;
  }
  .content-main .sec-ds-news .box-item-news .image-news {
    height: 400px;
  }
  .content-main .sec-ds-news .box-item-news .image-news .catagory {
    width: 180px;
    height: 55px;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
  }
  .content-main .sec-ds-news .box-item-news .title-news > a {
    font-size: 20px;
  }
  .content-main .sec-ds-news .box-item-news .desc-news {
    font-size: 16px;
  }
  .content-main .sec-customers {
    margin-top: 50px;
  }
  .content-main .sec-customers .swiper-customers::before, .content-main .sec-customers .swiper-customers::after {
    width: 300px;
    height: 150px;
  }
  .content-main .sec-customers .swiper-customers .swiper-slide {
    padding: 0 20px;
  }
  .footer-main {
    padding-bottom: 50px;
  }
  .footer-main .links-site {
    overflow-x: auto;
  }
  .footer-main .links-site .item-links {
    width: 230px;
    flex-shrink: 0;
  }
  .footer-main .container::before {
    top: -150px;
    background-size: 45px;
  }
  .footer-main .links-site .item-links .title-lnk {
    font-size: 18px;
  }
  .footer-main .links-site .item-links .list a {
    font-size: 16px;
  }
  .footer-main .support-banner {
    padding: 0 30px;
    height: 200px;
  }
  .footer-main .support-banner .btn-ds-more {
    flex-shrink: 0;
    margin-right: 30px;
  }
  .footer-main .footer-info {
    flex-direction: column;
  }
  .footer-main .footer-info .main-info .logo-main > img {
    width: 90px;
  }
  .footer-main .footer-info .main-info .navbar-links ul a {
    font-size: 16px;
  }
  .footer-main .footer-info .main-info .navbar-links ul li:not(:last-child) a::after {
    height: 20px;
  }
  .footer-main .footer-info .main-info .contact {
    font-size: 16px;
  }
  .footer-main .footer-info .certificates {
    margin-top: 30px;
  }
  .footer-main .footer-copyright {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
  }
  .footer-main .footer-copyright .copyright {
    margin-top: 20px;
  }
  .footer-main .footer-copyright .copyright .text-main, .footer-main .footer-copyright .copyright .designer {
    font-size: 16px;
  }
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
  .container {
    padding: 0 15px;
  }
  .search-box-ds {
    width: 90%;
    top: 100px;
  }
  .home-page .header-main {
    border-radius: 0;
  }
  .home-page .header-main .header-services .domain-services img {
    max-width: 100%;
    position: relative;
    bottom: -17px;
  }
  .home-page .header-main .hrs-cta {
    margin-bottom: 20px;
  }
  .home-page .header-main .hrs-cta .btn-ds-more {
    margin-bottom: 15px;
  }
  .home-page .header-main .hrs-cta .btn-ds-normal {
    margin: 10px 0 0;
  }
  .header-main::before,
  .header-main::after,
  .header-main .header-top .options > .btn-ds,
  .header-main .header-top .options .btn-call {
    display: none;
  }
  .sidebar-all-products {
    width: 300px;
    padding: 20px;
  }
  .sidebar-all-products .head-sidebar .title {
    font-size: 18px;
  }
  .sidebar-all-products .list-products {
    gap: 15px;
  }
  .sidebar-all-products .desc {
    font-size: 12px;
  }
  .sidebar-all-products .list-products .box-prd {
    width: 47%;
    height: 150px;
    border-radius: 20px;
  }
  .sidebar-all-products .list-products .box-prd .box-icon {
    width: 50px;
    height: 50px;
  }
  .sidebar-all-products .list-products .box-prd .box-icon > img {
    height: 25px;
  }
  .sidebar-all-products .list-products .box-prd .title {
    font-size: 14px;
  }
  .header-main .header-top .logo-main {
    width: 160px;
  }
  .header-main .header-top .options .btn-ds {
    height: 45px;
    padding: 10px 25px;
    font-size: 14px;
  }
  .header-main .header-top .options .btn-call > i {
    font-size: 25px;
  }
  .header-main .header-top .options .btn-call {
    font-size: 16px;
  }
  .header-main .header-top .options .box-icon-menu {
    display: flex;
  }
  .header-main .navbar-digitalserver {
    position: absolute;
  }
  .header-main .navbar-digitalserver .collapse {
    display: block;
    position: fixed;
    background: var(--lightcolor);
    right: -100%;
    top: 0;
    z-index: 999999;
    height: 100vh;
    overflow-y: auto;
    left: 0;
    width: 300px;
    margin: 0;
    box-shadow: -20px 0 25px -10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: all 0.4s;
  }
  .header-main .navbar-digitalserver .collapse::after {
    content: "";
    background: url("../images/logo/logo-single.svg") no-repeat center center/100px;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    filter: brightness(0) opacity(0.1);
  }
  .header-main .navbar-digitalserver .collapse.show {
    right: 0;
  }
  .header-main .header-menu .navbar .navbar-nav .nav-item {
    margin-left: 0;
  }
  .header-main .header-menu .navbar .navbar-nav .nav-link {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    text-align: right;
    color: var(--maincolor);
  }
  .header-main .header-menu .navbar .dropdown .dropdown-menu {
    right: auto;
    left: 0;
    box-shadow: 0px 0px 15px 20px rgba(44, 62, 80, 0.05);
  }
  .header-main .header-menu .navbar-digitalserver .nav-link::before {
    display: none;
  }
  .header-main .header-menu .navbar-digitalserver .dropdown.show .nav-link {
    color: var(--bluecolor);
  }
  .header-main .header-menu .navbar .dropdown.show .dropdown-menu {
    top: 45px;
    border-radius: 15px;
    width: 100%;
  }
  .header-main .navbar-digitalserver .head-sidebar,
  .header-main .navbar-digitalserver .options {
    display: flex;
  }
  .header-main .header-menu {
    padding-top: 20px;
  }
  .header-main .header-menu .other-menu {
    width: 100%;
    justify-content: space-between;
  }
  .header-main .header-services {
    margin-top: 50px;
  }
  .header-main .header-services .about-services {
    text-align: center;
  }
  .header-main .header-services .about-services .title-about,
  .content-main .sec-seo-counseling .title-sec,
  .content-main .sec-plan-services .title-sec,
  .content-main .sec-website-projects .content-project .title-sec,
  .content-main .sec-website-builder .title-sec,
  .content-main .sec-distinction .content-sec .title-sec,
  .content-main .sec-ds-news .head-section .title-sec,
  .content-main .sec-customers .title-sec,
  .footer-main .support-banner .content .title {
    font-size: 25px;
    line-height: 38px;
  }
  .header-main .header-services .about-services .desc,
  .content-main .sec-seo-counseling .desc-sec,
  .content-main .sec-plan-services .desc-sec,
  .content-main .sec-website-projects .content-project .desc-sec,
  .content-main .sec-distinction .content-sec .desc-sec,
  .content-main .sec-ds-news .head-section .desc-sec,
  .content-main .sec-customers .desc-sec,
  .footer-main .support-banner .content .desc,
  .content-main .sec-website-builder .desc-sec {
    font-size: 14px;
    padding: 0;
    line-height: 28px;
  }
  .btn-ds-more {
    border-radius: 18px;
    padding: 15px 20px;
    font-size: 16px;
    width: 100%;
  }
  .header-main .header-services .about-services .title-about {
    margin-bottom: 15px;
    min-height: 80px;
  }
  .header-main .header-services .about-services .desc {
    min-height: 60px;
  }
  .header-main .header-services .services-box::after {
    display: none;
  }
  .header-main .header-services .swiper-services .box-srv {
    height: 200px;
    border-radius: 40px;
  }
  .header-main .header-services .swiper-services .box-srv .box-icon {
    width: 80px;
    height: 80px;
  }
  .header-main .header-services .swiper-services .box-srv .box-icon > img {
    height: 40px;
  }
  .header-main .header-services .swiper-services .box-srv .title {
    font-size: 18px;
  }
  .header-main .header-services .domain-services::before {
    width: 100px;
    height: 100px;
    top: -2px;
    right: 6px;
  }
  .header-main .header-services .domain-search {
    border-radius: 40px;
    padding: 20px;
  }
  .header-main .header-services .domain-search .title-main {
    font-size: 20px;
    text-align: center;
  }
  .header-main .header-services .domain-search .search-box .form-control {
    font-size: 14px;
  }
  .header-main .header-services .domain-search .search-box .btn-search {
    width: 80px;
    font-size: 14px;
  }
  .header-main .header-services .domain-search .offer-domains .title-ofd > i {
    font-size: 25px;
  }
  .header-main .header-services .domain-search .offer-domains .list-ofd {
    gap: 5px;
  }
  .header-main .header-services .domain-search .offer-domains .item-ofd .price {
    font-size: 12px;
  }
  .header-main .header-services .domain-search .offer-domains .item-ofd .domain {
    font-size: 14px;
    margin-right: 5px;
  }
  .header-main .header-services .domain-search .offer-domains .title-ofd {
    font-size: 16px;
  }
  .header-main .header-services .domain-search .other-domains .item-otd {
    font-size: 14px;
  }
  .header-main .header-services .domain-search .swiper-banners {
    height: 150px;
  }
  .header-main .header-services .swiper-services {
    margin: 50px 0 0;
  }
  .content-main .sec-seo-counseling {
    padding: 120px 0 50px;
  }
  .content-main .sec-mailserver {
    padding-top: 0;
  }
  .content-main .sec-seo-counseling .content-sec {
    order: 1;
  }
  .content-main .sec-seo-counseling .image-sec {
    text-align: center;
  }
  .content-main .sec-seo-counseling .image-sec > img {
    width: 90%;
    margin-bottom: 20px;
  }
  .content-main .sec-plan-services {
    padding: 50px 0 0;
  }
  .content-main .sec-plan-services .desc-sec {
    width: 100%;
  }
  .content-main .sec-plan-services .nav-tabs {
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link {
    width: 200px;
    height: 60px;
    border-radius: 15px;
    font-size: 14px;
    gap: 15px;
  }
  .content-main .sec-plan-services .nav-tabs .nav-link > i {
    font-size: 22px;
  }
  .content-main .sec-plan-services .change-plan .item-pln {
    font-size: 14px;
  }
  .content-main .sec-plan-services .change-plan .toggle {
    width: 80px;
    height: 35px;
  }
  .content-main .sec-plan-services .change-plan .toggle .circle {
    width: 22px;
    height: 22px;
  }
  .content-main .sec-plan-services .change-plan .toggle.active .circle {
    transform: translateX(-40px);
  }
  .content-main .sec-plan-services .list-plans {
    margin-top: 0;
  }
  .content-main .sec-plan-services .list-plans .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 50px 0 100px;
  }
  .content-main .sec-plan-services .list-plans .col-item-plan {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%;
    padding: 0 10px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan {
    padding: 30px 20px;
    border-radius: 30px;
  }
  .content-main .sec-plan-services .box-item-plan .title-pln {
    font-size: 20px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .title,
  .content-main .sec-plan-services .box-item-plan .item-fts .text,
  .content-main .sec-plan-services .box-item-plan .view-more::after {
    font-size: 14px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .number {
    font-size: 40px;
  }
  .content-main .sec-plan-services .box-item-plan .price-pln .toman,
  .content-main .sec-plan-services .box-item-plan .desc-pln {
    font-size: 16px;
  }
  .content-main .sec-plan-services .box-item-plan .list-features {
    height: 235px;
  }
  .content-main .sec-plan-services .box-item-plan .btn-buy-service {
    height: 65px;
    font-size: 16px;
  }
  .content-main .sec-plan-services .list-plans .box-item-plan .popular {
    height: 45px;
    top: 30px;
    left: -150px;
    font-size: 16px;
  }
  .content-main .sec-website-projects {
    margin: 0;
  }
  .content-main .sec-website-projects .row {
    margin: 0;
  }
  .content-main .sec-website-projects .content-project {
    padding: 50px 30px 150px 50px;
    height: auto;
    border-radius: 100px 0 0 50px;
  }
  .content-main .sec-website-projects .content-project .title-sec {
    margin-bottom: 20px;
  }
  .content-main .sec-website-projects .content-project .btn-ds-more {
    margin-top: 50px;
  }
  .content-main .sec-website-projects .list-projects .swiper-website-projects {
    width: 100%;
    right: 0;
    margin-top: -40%;
    padding: 50px 20px;
  }
  .content-main .sec-website-projects .swiper-website-projects .swiper-button {
    width: 50px;
    height: 50px;
    font-size: 12px;
    border-radius: 16px;
  }
  .content-main .sec-website-projects .swiper-website-projects .swiper-website-prev {
    left: 10%;
  }
  .content-main .sec-website-projects .swiper-website-projects .swiper-website-next {
    right: 10%;
    display: flex;
  }
  .content-main .sec-website-projects .list-projects .box-prj {
    height: 500px;
    padding: 10px;
    border-radius: 30px;
  }
  .content-main .sec-website-projects .list-projects .box-prj .image-prj {
    border-radius: 20px;
  }
  .content-main .sec-website-builder .box-item-builder {
    margin-top: 20px;
  }
  .content-main .sec-website-builder .box-item-builder .box-icon {
    width: 90px;
    height: 90px;
    font-size: 40px;
  }
  .content-main .sec-website-builder .box-item-builder .title {
    font-size: 18px;
  }
  .content-main .sec-website-builder .box-item-builder .desc {
    font-size: 14px;
    line-height: 25px;
    height: 100px;
  }
  .content-main .sec-website-builder .box-item-builder .logos-cst .item-cst {
    width: 50px;
    height: 50px;
  }
  .content-main .sec-distinction {
    padding: 50px 0 0;
  }
  .content-main .sec-distinction .content-sec {
    width: 100%;
    text-align: center;
  }
  .content-main .sec-distinction .list-dst {
    padding: 50px 20px 50px 0;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
  }
  .content-main .sec-distinction .list-dst .item-dst {
    flex-shrink: 0;
    width: 180px;
    height: 220px;
  }
  .content-main .sec-distinction .list-dst .item-dst:nth-child(2) {
    top: 0;
  }
  .content-main .sec-distinction .list-dst .item-dst:nth-child(4) {
    bottom: 0;
  }
  .content-main .sec-distinction .list-dst .item-dst:nth-child(5) {
    margin-left: 20px;
  }
  .content-main .sec-distinction .list-dst .item-dst .box-icon {
    width: 80px;
    height: 80px;
  }
  .content-main .sec-distinction .list-dst .item-dst .box-icon > i {
    font-size: 35px;
  }
  .content-main .sec-distinction .list-dst .item-dst .title {
    font-size: 16px;
  }
  .content-main .sec-website-projects.sec-apps {
    margin-top: 50px;
  }
  .content-main .sec-website-projects.sec-apps .content-project {
    order: 1;
    padding: 50px 80px 150px 30px;
    height: auto;
    border-radius: 0 150px 50px 0;
  }
  .content-main .sec-website-projects .list-projects {
    order: 2;
  }
  .content-main .sec-website-projects.sec-apps .list-projects .swiper-app-projects {
    width: 100%;
    left: 0;
    margin-top: -40%;
    padding: 50px 20px;
  }
  .content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-button {
    width: 50px;
    height: 50px;
    font-size: 12px;
    border-radius: 16px;
  }
  .content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-app-next {
    right: 10%;
  }
  .content-main .sec-website-projects.sec-apps .swiper-app-projects .swiper-app-prev {
    left: 10%;
    display: flex;
  }
  .content-main .sec-ds-news .head-section {
    flex-direction: column;
  }
  .content-main .sec-ds-news .head-section .desc-sec {
    width: 100%;
  }
  .content-main .sec-ds-news .head-section .btn-ds-more {
    margin-left: auto;
  }
  .content-main .sec-ds-news .head-section {
    margin: 0;
  }
  .content-main .sec-ds-news .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 50px 5px;
  }
  .content-main .sec-ds-news .col-item-news {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
  }
  .content-main .sec-ds-news .box-item-news {
    border-radius: 30px;
  }
  .content-main .sec-ds-news .box-item-news .image-news {
    border-radius: 30px 30px 0 120px;
  }
  .content-main .sec-ds-news .box-item-news .content-news {
    padding: 20px;
  }
  .content-main .sec-ds-news .box-item-news .image-news {
    height: 400px;
  }
  .content-main .sec-ds-news .box-item-news .image-news .catagory {
    width: 180px;
    height: 55px;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
  }
  .content-main .sec-ds-news .box-item-news .title-news > a {
    font-size: 20px;
  }
  .content-main .sec-ds-news .box-item-news .desc-news {
    font-size: 16px;
  }
  .content-main .sec-customers {
    margin-top: 50px;
  }
  .content-main .sec-customers .swiper-customers::before,
  .content-main .sec-customers .swiper-customers::after {
    display: none;
  }
  .content-main .sec-customers .swiper-customers .swiper-slide {
    padding: 0 30px;
  }
  .footer-main {
    padding-bottom: 50px;
  }
  .footer-main .page-scroll {
    width: 60px;
    height: 60px;
    font-size: 14px;
    top: -120px;
  }
  .footer-main .links-site {
    overflow-x: auto;
  }
  .footer-main .links-site .item-links {
    width: 200px;
    flex-shrink: 0;
  }
  .footer-main .container::before {
    top: -150px;
    background-size: 45px;
  }
  .footer-main .links-site .item-links .title-lnk {
    font-size: 16px;
  }
  .footer-main .links-site .item-links .list a {
    font-size: 14px;
  }
  .footer-main .support-banner {
    padding: 30px;
    height: auto;
    flex-direction: column;
    text-align: center;
    border-radius: 30px;
    margin: 30px 0;
  }
  .footer-main .support-banner .btn-ds-more {
    flex-shrink: 0;
    margin-top: 20px;
    width: 100%;
  }
  .footer-main .footer-info {
    flex-direction: column;
  }
  .footer-main .footer-info .main-info {
    flex-direction: column;
  }
  .footer-main .footer-info .main-info .logo-main > img {
    width: 70px;
    margin: 0 0 20px;
  }
  .footer-main .footer-info .main-info .navbar-links ul {
    flex-wrap: wrap;
  }
  .footer-main .footer-info .main-info .navbar-links ul a {
    font-size: 12px;
  }
  .footer-main .container::after {
    display: none;
  }
  .footer-main .footer-info .main-info .navbar-links ul li:not(:last-child) a::after {
    height: 18px;
    margin: 0 10px;
  }
  .footer-main .footer-info .main-info .contact {
    font-size: 12px;
    line-height: 25px;
  }
  .footer-main .footer-info .certificates {
    margin-top: 30px;
  }
  .footer-main .footer-copyright {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
  }
  .footer-main .footer-copyright .copyright {
    margin-top: 20px;
  }
  .footer-main .footer-copyright .copyright .text-main,
  .footer-main .footer-copyright .copyright .designer {
    font-size: 12px;
  }
  /*--------------------------- Product Page ----------------------------*/
  .content-pages {
    position: relative;
    padding-top: 30px;
  }
  .sec-breadcrumb {
    margin-bottom: 20px;
  }
  .outer-breadcrumb {
    flex-direction: column;
  }
  .outer-breadcrumb .breadcrumb {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-top: 6px;
    padding-bottom: 10px;
  }
  .outer-breadcrumb .breadcrumb .breadcrumb-item {
    flex-shrink: 0;
  }
  .outer-breadcrumb .breadcrumb .breadcrumb-item, .outer-breadcrumb .breadcrumb .breadcrumb-item > a {
    font-size: 11px;
  }
  .outer-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-size: 13px;
    padding: 0 6px;
  }
  .outer-breadcrumb .btn-share-page {
    margin-top: 15px;
    font-size: 11px;
  }
  .sec-features-gohar .row-features {
    margin: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: scroll;
    /* display: inline-block; */
    width: 100%;
  }
  .sec-other-contents .tab-contents {
    padding: 20px;
    border-radius: 30px;
    /*margin-top: 40px;*/
    margin-bottom: 50px;
  }
  .sec-other-contents .tab-contents .head-sticky {
    flex-direction: column;
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden;
    padding: 15px;
  }
  .sec-other-contents .head-sticky .list-tabs {
    margin-bottom: 15px;
    gap: 25px;
    overflow-x: auto;
    width: 100%;
  }
  .sec-other-contents .head-sticky .list-tabs .item-tab {
    font-size: 11px;
    padding: 10px 0;
    flex-shrink: 0;
  }
  .sec-other-contents .head-sticky .list-tabs .item-tab.active {
    padding: 10px 15px;
    border-radius: 12px;
  }
  .rating-gohar {
    gap: 10px;
  }
  .sec-other-contents .tab-contents .row-head-between {
    margin-bottom: 30px;
  }
  .sec-other-contents .tab-contents .title-head-section {
    font-size: 12px;
    margin: 0 0 30px;
  }
  .sec-other-contents .tab-contents .box-desc .btn-more-description, .sec-other-contents .tab-contents .row-head-between .desc-head-section {
    font-size: 11px;
  }
  .sec-other-contents .tab-comments .box-comment, .sec-news-details .content-news .box-comment, .sec-profile-page .box-outer-profile .box-comment {
    flex-direction: column;
    padding: 15px;
    border-radius: 16px;
    gap: 20px;
  }
  .sec-other-contents .tab-comments .details-comment, .sec-news-details .content-news .details-comment, .sec-profile-page .box-outer-profile .details-comment {
    padding: 0;
    width: 100%;
  }
  .sec-other-contents .tab-comments .details-comment .head, .sec-news-details .content-news .details-comment .head, .sec-profile-page .box-outer-profile .head {
    padding: 0 0 10px;
    flex-direction: column;
  }
  .sec-other-contents .tab-comments .details-comment .user-info, .sec-news-details .content-news .details-comment .user-info, .sec-profile-page .box-outer-profile .details-comment .user-info {
    margin-bottom: 5px;
  }
  .sec-other-contents .tab-comments .details-comment .user-info .image, .sec-news-details .content-news .details-comment .user-info .image, .sec-profile-page .box-outer-profile .details-comment .user-info .image {
    width: 40px;
    height: 40px;
  }
  .sec-other-contents .tab-comments .details-comment .user-info .fullname, .sec-news-details .content-news .details-comment .user-info .fullname, .sec-profile-page .box-outer-profile .details-comment .user-info .fullname {
    font-size: 12px;
  }
  .sec-other-contents .tab-comments .details-comment .user-info .status, .sec-news-details .content-news .details-comment .user-info .status {
    font-size: 11px;
  }
  .sec-other-contents .tab-comments .details-comment .desc, .sec-news-details .content-news .details-comment .desc, .sec-profile-page .box-outer-profile .details-comment .desc {
    font-size: 10px;
    line-height: 20px;
    margin: 10px 0;
  }
  .sec-other-contents .tab-comments .details-comment .options, .sec-news-details .content-news .details-comment .options, .sec-profile-page .box-outer-profile .details-comment .options {
    flex-direction: column;
    align-items: flex-start;
  }
  .sec-other-contents .tab-comments .details-comment .btn-answer, .sec-other-contents .tab-comments .details-comment .viewpoint .text, .sec-news-details .content-news .details-comment .btn-answer, .sec-news-details .content-news .details-comment .viewpoint .text, .sec-profile-page .box-outer-profile .details-comment .btn-answer, .sec-profile-page .box-outer-profile .details-comment .viewpoint .text {
    font-size: 11px;
  }
  .sec-other-contents .tab-comments .details-comment .btn-answer > i, .sec-news-details .content-news .details-comment .btn-answer > i, .sec-profile-page .box-outer-profile .details-comment .btn-answer > i {
    font-size: 14px;
  }
  .sec-other-contents .tab-comments .details-comment .viewpoint, .sec-news-details .content-news .details-comment .viewpoint, .sec-profile-page .box-outer-profile .details-comment .viewpoint {
    gap: 30px;
    margin-top: 15px;
    width: 100%;
    justify-content: center;
  }
  .sec-other-contents .tab-comments .details-comment .btn-answer, .sec-other-contents .tab-comments .details-comment .viewpoint .text, .sec-news-details .content-news .details-comment .btn-answer, .sec-news-details .content-news .details-comment .viewpoint .text, .sec-profile-page .box-outer-profile .details-comment .btn-answer, .sec-profile-page .box-outer-profile .details-comment .viewpoint .text {
    font-size: 11px;
  }
  .sec-other-contents .tab-comments .details-comment .viewpoint .result, .sec-news-details .content-news .details-comment .viewpoint .result, .sec-profile-page .box-outer-profile .details-comment .viewpoint .result {
    gap: 20px;
  }
  .sec-other-contents .tab-comments .result-ratings {
    width: 100%;
    gap: 0;
    padding: 0;
  }
  .sec-other-contents .tab-comments .result-ratings .item-rate {
    width: 100%;
    padding: 15px;
  }
  .sec-other-contents .tab-comments .result-ratings .rating-gohar {
    gap: 5px;
  }
  .sec-other-contents .tab-comments .result-ratings .br-theme-bars-gohar .br-widget {
    width: 70px;
  }
  .sec-other-contents .tab-comments .result-ratings .br-theme-bars-gohar .br-widget a {
    width: 3.5px;
    height: 3.5px;
    margin: 0 2px;
  }
  .sec-other-contents .tab-comments .result-ratings .rating-gohar .counts, .sec-news-details .content-news .result-ratings .counts, .modal-goharnahal .modal-form-comment .result-ratings .counts {
    gap: 3px;
  }
  .sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .all, .sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .value {
    font-size: 16px;
  }
  .sec-other-contents .tab-comments .result-ratings .rating-gohar .counts .slash {
    font-size: 12px;
  }
  .rating-gohar .title-rating {
    font-size: 10px;
  }
  .sec-other-contents .tab-contents hr.spacing {
    margin: 30px 0;
  }
  .sec-other-contents .tab-specification .row-specif {
    gap: 10px 0;
  }
  .sec-other-contents .tab-specification .box-specif {
    padding: 15px;
    border-radius: 16px;
  }
  .sec-other-contents .tab-specification .box-specif .label, .sec-other-contents .tab-specification .box-specif .text {
    font-size: 12px;
  }
  .sec-other-contents .tab-faqlist .list-accordian .accordion-item {
    margin-bottom: 10px;
  }
  .accordion-item .accordion-header {
    padding: 15px;
  }
  .accordion-item .accordion-header .title {
    font-size: 12px !important;
    line-height: 1.5;
  }
  .accordion-item .accordion-header .box-icon {
    font-size: 16px !important;
  }
  .sec-other-contents .tab-comments .item-comment, .sec-news-details .content-news .item-comment {
    margin-bottom: 15px;
  }
  .rating-gohar .counts .all, .rating-gohar .counts .value {
    font-size: 20px;
  }
  .rating-gohar .counts .slash {
    font-size: 16px;
  }
  .rating-gohar .counts .all, .rating-gohar .counts .value {
    font-size: 20px;
  }
  /*---------------------------- Box Product --------------------------*/
  .box-product-gohar {
    height: 460px;
    gap: 20px;
  }
  .box-product-gohar .image {
    height: 350px;
  }
  .box-product-gohar .content .title a {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .box-product-gohar .content .details-box {
    height: auto;
  }
  .box-product-gohar .content .details-box .desc {
    font-size: 12px;
    line-height: 22px;
  }
  .box-product-gohar .features {
    padding: 15px;
    height: 130px;
  }
  .box-product-gohar .features .item-fts .sub-title, .box-product-gohar .options .price .pr-title {
    font-size: 12px;
  }
  .box-product-gohar .options .price .pr-number {
    font-size: 25px;
  }
  .box-product-gohar .content .weather .status, .box-product-gohar .options .price .pr-number .unit, .box-product-gohar .features .item-fts .text, .sec-free-support .box-banner-gohar .form .btn-send-gohar {
    font-size: 14px;
  }
  .box-product-gohar .options .btns-option .btn-prd {
    width: 45px;
    height: 45px;
    border-radius: 15px;
    font-size: 20px;
  }
  /*-------------------------- Fixed cart product --------------------------*/
  .fixed-cart-product {
    padding: 20px 15px;
  }
  .fixed-cart-product .row {
    flex-direction: column;
    align-items: center;
  }
  .fixed-cart-product .about-product .image,
  .fixed-cart-product .about-product .content {
    display: none;
  }
  .fixed-cart-product .details-option {
    width: 100%;
    justify-content: space-between;
  }
  .fixed-cart-product .details-option .options .offer {
    display: none;
  }
  .fixed-cart-product .details-option .counter {
    padding: 0 10px;
  }
  .fixed-cart-product .details-option .counter .bsh-count {
    width: 18px;
    height: 18px;
    font-size: 14px;
  }
  .fixed-cart-product .details-option .counter .number {
    width: 25px;
    font-size: 14px;
  }
  .fixed-cart-product .details-option .btn-add-cart {
    padding: 0 15px;
  }
  .tabs-footer {
    display: flex;
  }
  .tabs-footer .item-tabft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
  }
  .tabs-footer .item-tabft.side-link {
    width: 40%;
    font-size: 13px;
    font-weight: 600;
    color: var(--darkcolor);
  }
  .tabs-footer .item-tabft.cart-link {
    width: 20%;
    font-size: 11px;
    font-weight: 600;
    color: var(--darkcolor);
  }
  .tabs-footer .item-tabft.cart-link .box-icon {
    position: relative;
    background-color: var(--maincolor);
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--whitecolor);
    margin-top: -25px;
    margin-bottom: 5px;
  }
  .tabs-footer .item-tabft.cart-link .box-icon .count {
    background-color: var(--yellowcolor);
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    position: absolute;
    top: -3px;
    right: 1px;
    z-index: 10;
    color: var(--subcolor);
  }
  .product-detail-wrapper {
    padding: 0 10px;
  }
  .content-pages .sec-header-product .details-product {
    padding: 20px 0;
  }
  .content-pages .sec-header-product .details-product .head-title-row .title {
    font-size: 14px;
  }
  .content-pages .sec-header-product .details-product .head-title-row .btn-more {
    font-size: 13px;
  }
  .content-pages .sec-header-product .details-product .product-name {
    font-size: 18px;
    line-height: 35px;
  }
  .sec-features-gohar .box-fts {
    width: 85%;
    flex-grow: 1;
    flex-basis: auto;
    flex-shrink: 0;
    margin-left: 10px;
  }
  .sec-contact-goharnahal .contact-form {
    padding: 20px 15px 20px 15px;
  }
  .sec-other-contents .tab-comments .form-comment .btn-send-form, .sec-news-details .content-news .form-comment .btn-send-form {
    width: 100%;
  }
  .sec-other-contents .tab-contents .head-normal {
    margin-bottom: 30px;
  }
  .content-main .send-address .box-select-address .item-ads, .content-main .box-select-send .list-sends .radio-snd {
    width: 100%;
    margin-left: 0;
  }
  .steps-page .confirm-order .wallet-off {
    flex-wrap: wrap;
  }
  .steps-page .confirm-order .wallet-off .wallet-payment {
    flex: 1 0 auto;
    width: 100%;
  }
  .steps-page .confirm-order .wallet-off .wallet-payment .lbl-wallet {
    text-align: right;
    font-size: 13px;
  }
  .steps-page .confirm-order .wallet-off .offer-code {
    width: 100%;
    margin-top: 20px;
  }
  .confirm-order .offer-code .input-group {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .sec-search-products .head-resault .form-group, .sec-search-products .head-resault .form-control-search, .sec-search-products .head-resault .sortby-box, .sec-other-contents .head-sticky .form-group, .sec-other-contents .head-sticky .form-control-search {
    width: 100% !important;
  }
  .hrs-cta .btn-ds-normal {
    margin-right: 0;
    margin-top: 0;
  }
  .content-main .sec-comments {
    padding-right: 10px;
    padding-left: 10px;
  }
  .content-main .sec-comments .head-title .title-sec {
    font-size: 28px;
  }
  .content-main .sec-comments .swiper-cmt {
    display: none;
  }
  .content-main .learning-site .box-details {
    margin-bottom: 40px;
    flex-direction: column;
    padding: 30px 20px;
  }
  .content-main .learning-site .box-details .learning-icons {
    margin-bottom: 30px;
  }
  .content-main .learning-site .box-details .learning-icons .image-icon {
    width: 180px;
    margin: 0 auto;
    padding-left: 20px;
  }
  .content-main .learning-site .list-questions .item-qst.active .head-qst {
    padding: 20px;
  }
  .content-main .learning-site .list-questions .item-qst .view-answer {
    flex-shrink: 0;
    margin-right: 20px;
    margin-right: 8px !important;
    font-size: 12px;
  }
  .content-main .learning-site .list-questions .item-qst .view-answer .font-size-12 {
    font-size: 10px !important;
  }
  .content-main .learning-site .list-questions .item-qst .answer-box {
    padding: 20px;
  }
  .content-main .learning-site .list-questions .item-qst .answer-box .text-ans {
    line-height: 25px;
    font-size: 11px;
  }
}