@charset "UTF-8";

.edn_article_gallery li {
    list-style: none;
    display: inline-block;
    vertical-align: top;
    margin: 0.5rem;
}

.sidebar {
    position: sticky;
    top: 10rem;
    height: fit-content;
    background: var(--White);
    z-index: 10;
}

/*************** Stert Comments ******************/
.edNews__commentPendingApproval,
.edNews_errorMessage {
    position: absolute;
    bottom: 100%;
    right: 0;
    transition: all ease-in-out 0.3s;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: block;
}

.edNews__commentPendingApproval.show,
.edNews_errorMessage.show {
    max-height: 3rem;
    opacity: 1;
    background: var(--accent-color);
    padding: 0.2rem 0.4em;
    color: var(--White);
    border-radius: 0.4rem;
}

.edNews__commentsWrapper .btn-submit {
    color: var(--White);
    transition: all ease-in-out 0.3s;
    cursor: pointer;
    font-weight: bold;
}

.edNews__commentsWrapper .btn-submit:hover {
    background: var(--accent-color4);
}

.edNews__commentsWrapper :where(input[type="text"], input[type="email"], textarea) {
    outline: unset !important;
    padding: 1rem;
    width: -webkit-fill-available;
    background-color: var(--lsilver);
    transition: all ease-in-out 0.3s;
    border: 0.1em solid var(--silverLight);
}

.edNews__commentsWrapper :where(input[type="text"], input[type="email"], textarea)::placeholder {
    text-align: right !important;
    font-family: IranSite;
    color: var(--Silver-Secondary-Color);
    transition: all ease-in-out 0.3s;
}

input:where([type="email"], [type="cell"]) {
    direction: ltr;
}

.edNews__commentsWrapper .form-group label {
    padding: 0.4rem 0;
}

.edNews__commentsWrapper :where(input[type="text"], input[type="email"], textarea):focus {
    border-color: var(--Accent-Color);
}

.edNews__commentsWrapper :where(input[type="text"], input[type="email"], textarea):focus::placeholder {
    letter-spacing: -0.05rem;
    font-size: 0.9rem;
}

.edNews__commentsWrapper .GDPR input[type=checkbox]+label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.2em;
    gap: 1rem;
}

.edNews__commentsWrapper .GDPR input[type=checkbox] {
    display: none;
}

.edNews__commentsWrapper .GDPR input[type=checkbox]+label:before {
    content: "✔";
    border: 0.1em solid var(--Black-Color);
    border-radius: 0.2em;
    display: flex;
    color: transparent;
    transition: 0.2s;
    padding: 0 0.5em;
    border: 0.1rem solid var(--blgnav);
}

.edNews__commentsWrapper .GDPR input[type=checkbox]+label:active:before {
    transform: scale(0);
}

.edNews__commentsWrapper .GDPR input[type=checkbox]:checked+label:before {
    background-color: #3cb371;
    border-color: #3cb371;
    color: var(--White);
}

.edNews__commentsWrapper .GDPR input[type=checkbox]:disabled+label:before {
    transform: scale(1);
}

.edNews__commentsWrapper .GDPR input[type=checkbox]:checked:disabled+label:before {
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb;
}

.edNews__commentsCommentFormWrapper .edNews__replyingToMessage {
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 0.3s;
}

.edNews__commentsCommentFormWrapper.edNews__replyingToComment .edNews__replyingToMessage {
    opacity: 1;
    visibility: visible;
}

.edNews__commentsCollapseWrapper {
    width: 100%;
}

.edNews_commentDetails .media-body {
    flex: 1 0 80%;
    border: 0.1rem solid var(--silverLight);
    border-radius: calc(var(--b-rasiud)*2);
}

.edNews__commentVoting_upvote .fa-thumbs-o-up:before {
    color: green;
    font-size: 1.5rem;
}

.edNews__commentVoting_downvote .fa-thumbs-o-down:before {
    color: red;
    font-size: 1.5rem;
}

.edNews_commentActions span {
    color: var(--accent-color1);
}

.edNews_numberVotes {
    color: var(--accent-color1);
}

.edNews_loadMoreTriggerWrapper {
    display: flex;
    justify-content: center;
}

.edNews_loadMoreTriggerWrapper button {
    background: var(--accent-color3);
    border: 1px solid var(--accent-color2);
    padding: 1rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

.edNews_loadMoreTriggerWrapper .loadingOverlay {
    display: none;
}

.edNews_loadMoreTriggerWrapper.loading,
.edNews__editingComment .edNews__editCommentContainer {
    display: block;
}

.edNews_loadMoreTriggerWrapper.hide,
.edNews__editCommentContainer {
    display: none;
}

.edNews_userAvatar img {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: var(--b-radius);
}

.edn_recentCommentContainer {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.ItemTitleComment svg {
    width: 1.5rem;
}

.edNews__commentContent {
    font-size: 0.9rem;
}

.edNews_commentDate {
    font-size: 0.8rem;
    padding-top: 6px;
}

.edNews__childCommentsContainer {
    border-right: solid 2px var(--accent-color);
    margin-bottom: 0.6rem;
}

.edNews__childCommentsContainer .edNews__itemCommentContainer {
    margin-right: 2rem;
    border-top: 0.1rem solid var(--dark-gray);
}

.edNews_adminEdit .btn-submit {
    background: transparent !important;
    color: var(--accent-color);
}

.edNews_adminEdit .btn-submit .edNews__editComment,
.edNews_adminEdit .btn-submit .edNews__deleteComment {
    display: none;
}

div#edNewsComment3424_2219_3 {
    border-bottom: 0.1em solid var(--accent-color2);
}

.article_pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.article_pager .page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--White);
    border: solid 1px var(--accent-color);
    border-radius: 0.4rem;
}

.article_pager .page.active {
    background-color: var(--accent-color);
    color: var(--White);
}

.frame {
    background-color: var(--text-light-3);
    border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
    padding: 1.5rem;
}

.comments-frame {
    background-color: var(--text-light-3);
    border-radius: 0.4rem;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    -ms-border-radius: 0.4rem;
    -o-border-radius: 0.4rem;
    padding: 1.5rem;
}

.comments-form .sec-title {
    display: block;
    color: var(--Black);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.comments-form .field-holder {
    position: relative;
    border: solid 1px #F1EEEE !important;
    background-color: var(--White);
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 0.4rem;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    -ms-border-radius: 0.4rem;
    -o-border-radius: 0.4rem;
    padding: 0px 1rem;
    margin-bottom: 1rem;
}

.comments-form .field-holder svg {
    min-width: 18px;
    width: 18px;
    height: 0.8rem;
    stroke: #1B2C65;
    margin-left: 0.8rem;
}

.comments-form .field-holder .form-control {
    width: 100%;
    height: 42px;
    border: none !important;
    outline: none;
    font-size: 1rem;
    padding: 0.5rem 0;
    resize: none;
    text-align: right;
}

.comments-form .field-holder .form-control::placeholder {
    color: #959595;
    font-size: 1rem;
    font-weight: normal;
}

.comments-form .field-holder .form-control:disabled {
    background-color: transparent;
}

.comments-form .field-holder textarea {
    min-height: 150px;
}

.comments-form .rating-in-comment .caption {
    color: var(--Black);
}

.comments-form .submit-btn {
    font-size: 1rem;
    color: var(--White);
    border: none;
    padding: 0.3rem 1.5rem;
    border-radius: 0.4rem;
    background-color: var(--accent-color2);
    cursor: pointer;
}

.comments-list {
    background-color: var(--text-light-3);
    border-radius: 0.4rem;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    -ms-border-radius: 0.4rem;
    -o-border-radius: 0.4rem;
    padding: 3rem 1.2rem;
    margin-bottom: 2rem;
}

.comments-list .avatar {
    width: 50px;
    min-width: 50px;
    height: 50px;
    background-color: var(--White);
    border-radius: 0.4rem;
    margin-left: 1rem;
}

.comments-list .avatar svg {
    width: 20px;
    stroke: var(--accent-color);
}

.comments-list .comment-head {
    width: 100%;
    height: 50px;
    padding: 0.4rem 1rem;
    background-color: #FBFBFB;
    border-radius: 0.4rem;
    border: solid 1px #F1F1F1;
}

.comments-list .comment-head .author {
    font-size: 1rem;
    color: var(--Black);
}

.comments-list .comment-head .dete .item {
    font-size: 0.8rem;
    color: var(--Black);
}

.comments-list .comment-head .dete .item svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    stroke: var(--accent-color);
}

@media (max-width: 760px) {
    .comments-list .comment-head {
        display: block !important;
        height: auto;
    }

    .comments-list .comment-head .dete {
        flex-direction: column;
    }
}

.comments-list .comment-body {
    padding: 1rem;
}

.comments-list .comment-body .comment-content {
    font-size: 1rem;
    color: var(--Black);
}

.comments-list .comment-body .action-btns svg {
    cursor: pointer;
}

.comments-list .comment-body .action-btns .like .like-couner {
    color: var(--Black);
    margin-top: -3px;
    margin-left: 2px;
}

@media (max-width: 760px) {
    .comments-list .comment-body {
        display: block !important;
        height: auto;
    }
}

/********************** End Comments ***********************/
/***************** Start Accordion *******************/
.accordion-panel {
    background-color: var(--text-light-3);
    padding: 0.92rem 0.61rem;
    margin-bottom: 1.1rem;
    border-radius: var(--radius-12);
}

.accordion-panel .acc-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.accordion-panel .acc-head .icon {
    display: flex;
    position: relative;
    text-align: center;
    margin-right: 10px;
}

.accordion-panel .acc-head .icon svg {
    width: 1.84rem;
    height: 1.84rem;
    stroke: var(--secendry-main);
    fill: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.accordion-panel .acc-head .title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark-0);
}

.accordion-panel .acc-body {
    display: none;
    padding: 0.92rem 0 0;
    font-size: 1rem;
    text-align: justify;
}

.accordion-panel.open .acc-head .icon svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.accordion-panel:last-child {
    margin-bottom: 0;
}

/***************** End Accordion *******************/
/***************** Start Faq *******************/
.faq-sec {
    background-color: var(--text-light-3);
    padding: 1.23rem 0;
}

.faq-sec .sec-title-row .title {
    font-size: 1.23rem;
    font-weight: 700;
    color: var(--text-dark-0);
}

.faq-sec .holder .accordion-panel {
    background-color: var(--White);
}

/***************** End Faq *******************/
/***************** Start Home Banner *******************/
.home-banner .holder {
    min-height: calc(100vh - 12.7rem);
    display: flex;align-items: center;
    justify-content: start;
    padding: 3rem 0;
}
.home-banner .holder .img-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.home-banner .holder .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-banner .holder .text-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    z-index: 10;
}

.home-banner .holder .text-wrapper .title {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--White);
    margin-bottom: 0.7rem;
}

.home-banner .holder .text-wrapper .subtitle {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--White);
}

.home-banner .holder .text-wrapper .custom-btn {
    margin-top: 1rem;
}
@media(max-width: 990px){
    .home-banner .holder {min-height: calc(100vh - 5rem)}
}
@media(max-width: 768px){
    .home-banner .holder {min-height: max-content;
    height: 40vh;}
}

/***************** End Home Banner *******************/
/***************** Start Home About *******************/
.home-about {
    padding: 4.14rem 0;
    position: relative;
}

.home-about:after,
.home-about:before {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    right: 0;
    left: 0;
    height: 2.14rem;
    background: url("/Portals/0/images/logo-mask-top.svg") no-repeat top center;
    z-index: 1;
}

.home-about:before {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.home-about:after {
    bottom: auto;
    top: calc(100% - 1px);
}

.home-about .img-box {
    aspect-ratio: 1/1;
    /* img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  } */
}

.home-about .text-wrapper {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.home-about .text-wrapper .title {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--text-dark-0);
    margin-bottom: 0.7rem;
}

.home-about .text-wrapper .summary {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--text-dark-0);
}

.home-about .text-wrapper .custom-btn {
    margin-top: 1rem;
}

/***************** End Home About *******************/
/***************** Start Blog List *******************/
.blog-list .blog-item .img-box {
    aspect-ratio: 2/1.1;
}

.blog-list .blog-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list .blog-item .img-box.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secendry-main);
}

.blog-list .blog-item .img-box.placeholder img {
    width: auto;
    height: auto;
}

.blog-list .blog-item .title {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--text-dark-0);
}

.blog-list .blog-item .desc {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--text-dark-0);
}

.blog-list .blog-item .date svg {
    width: 1.14rem;
    height: 1.14rem;
    stroke: var(--text-dark-3);
}

.blog-list .blog-item .date time {
    font-size: 1.14rem;
    font-weight: bold;
    color: var(--text-dark-3);
}

.blog-list.last {
    margin-bottom: 6rem;
}

.blog-list.last .blog-item {
    position: relative;
}

.blog-list.last .blog-item:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2.14rem;
    background: url(/Portals/0/images/logo-mask-top.svg) no-repeat top center;
    z-index: 1;
}

.blog-list.last .blog-item .img-box {
    aspect-ratio: 3/0.84;
}

/***************** End Blog List *******************/
/***************** Start Blog Detail *******************/
.article-details .date {
    padding-left: 1rem;
    border-left: solid 1px #28293D;
}

.article-details .date svg {
    width: 1.14rem;
    height: 1.14rem;
    stroke: var(--text-dark-3);
}

.article-details .date time {
    font-size: 1.14rem;
    font-weight: bold;
    color: var(--text-dark-3);
}

.article-details .author svg {
    width: 1.24rem;
    height: 1.24rem;
    fill: var(--text-dark-3);
}

.article-details .author strong {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--text-dark-3);
}

.article-details .author strong a {
    color: var(--text-dark-3);
}

.article-details .desc {
    line-height: 2rem;
}

.article-details .desc img {
    max-width: 100%;
    height: auto !important;
    margin: 1rem auto;
    border-radius: var(--radius-5);
}

.article-details .desc h1,
.article-details .desc h2,
.article-details .desc h3,
.article-details .desc h4,
.article-details .desc h5 {
    font-weight: 700;
    margin-top: 1rem;
}

.article-details .desc p {
    line-height: 2rem;
}

.article-details .desc ul {
    padding-right: 1.5rem;
    margin-top: 1rem;
}

.article-details .article-heading-holder .main-title {
    font-size: 1.28rem;
    font-weight: 700;
}

.article-details .article-heading-holder .article-heading {
    padding: 0.61rem 1.5rem;
}

.article-details .article-heading-holder .article-heading li {
    font-size: 1.07rem;
    font-weight: 700;
    padding: 0.3rem 0;
}

.RelatedArticleBlog .blog-item .img-box {
    aspect-ratio: 2/1.1;
}

.RelatedArticleBlog .blog-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.RelatedArticleBlog .blog-item .img-box.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secendry-main);
}

.RelatedArticleBlog .blog-item .img-box.placeholder img {
    width: auto;
    height: auto;
}

.RelatedArticleBlog .blog-item .title {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--text-dark-0);
}

.RelatedArticleBlog .blog-item .desc {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--text-dark-0);
}

/***************** End Blog Detail *******************/
/***************** Start Collections List *******************/
.collection-list .item {
    width: 100%;
}

.collection-list .item .img-box {
    aspect-ratio: 2/1;
}

.collection-list .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-list .item .img-box.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secendry-main);
}

.collection-list .item .img-box.placeholder img {
    width: auto;
    height: auto;
}

.collection-list .item .title {
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--text-dark-0);
}

.collection-list .item.half .img-box {
    aspect-ratio: 1/1;
}

/***************** End Collections List *******************/
/***************** Start Collection Detail *******************/
.collection-details {
    margin-top: -3.59rem;
    position: relative;
}

.collection-details.is-loading {
    &:before {
      content: 'درحال بارگذاری داده ها...';
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--accent-color);
      z-index: 10;
      color: #fff;
      font-size: 2rem;
  }
}

#sec-1 {
    position: relative;
    height: calc(100vh - 17.6rem);
}

#sec-1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sec-1 .scroll {
    position: absolute;
    bottom: 1rem;
    right: 0;
    left: 0;
    z-index: 1;
}

#sec-1 .scroll .txt {
    font-size: 1.28rem;
    font-weight: 300;
    color: var(--White);
}

#sec-1 .scroll svg {
    width: 1.28rem;
    height: 1.28rem;
    fill: var(--White);
}

#sec-2 {
    width: 100%;
    direction: ltr;
    height: calc(100vh - 11.9rem);
    overflow: hidden;
    white-space: nowrap;
}

#sec-2 .items {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

#sec-2 .items .item {
    position: relative;
    min-width: 100vw;
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

#sec-2 .items .layer {
    transition: all 1.8s ease;
    -webkit-transition: all 1.8s ease;
    -moz-transition: all 1.8s ease;
    -ms-transition: all 1.8s ease;
    -o-transition: all 1.8s ease;
}

#sec-2 .items .sequence-1 .layer-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#sec-2 .items .sequence-1 .layer-1 img {
    position: relative;
    height: 100%;
    right: 0 !important;
}

#sec-2 .items .sequence-1 .layer-1 img:first-child {
    z-index: 1;
}

#sec-2 .items .sequence-1 .layer-1 img:last-child {
    z-index: 3;
}

#sec-2 .items .sequence-1 .layer-1.animate {
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
    -moz-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    -o-transform: translateX(-10%);
}

#sec-2 .items .sequence-1 .layer-1 .layer-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 23%;
    z-index: 2;
}

#sec-2 .items .sequence-1 .layer-1 .layer-2.animate {
    right: 100% !important;
    transform: translateX(-100%);
}

#sec-2 .items .sequence-1 .layer-1 .layer-2 img {
    height: auto;
}

#sec-2 .items .sequence-1 .layer-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 23%;
    z-index: 2;
    opacity: 0;
}

#sec-2 .items .sequence-1 .layer-3.animate {
    opacity: 1;
}

#sec-2 .items .sequence-2 .layer-1 {
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 0;
    width: 50%;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#sec-2 .items .sequence-2 .layer-1 img,
#sec-2 .items .sequence-2 .layer-1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sec-2 .items .sequence-2 .layer-1.animate {
    right: 0;
}

#sec-2 .items .sequence-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50vw;
    width: 50vw;
}

#sec-2 .items .sequence-3 .layer-1 {
    opacity: 0;
}

#sec-2 .items .sequence-3 .layer-1.animate {
    opacity: 1;
}

#sec-3 {
    width: 100%;
    height: calc(100vh - 11.9rem);
}

#sec-3 #scrollVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

#sec-4 {
    padding: 8.14rem 0;
}

#sec-4 .product-name {
    display: block;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--text-dark-0);
    margin-bottom: 1.42rem;
}

#sec-4 .section-title svg {
    display: block;
    width: 1.14rem;
    height: 1.14rem;
    stroke: var(--text-dark-3);
}

#sec-4 .section-title strong {
    font-size: 1.28rem;
}

#sec-4 .summary-box p {
    margin: 0;
    font-size: 1.07rem;
    line-height: 2rem;
}

#sec-4 .link-btn {
    margin-top: 2rem;
    background: var(--primary-darker);
    color: var(--White);
}

#sec-4 .categories .section-title strong {
    font-size: 1.07rem;
    font-weight: 400;
}

#sec-4 .categories .list-wrapper .item {
    display: inline-block;
    vertical-align: top;
    width: 10.7rem;
    max-width: calc((100% / 3) - 1rem);
    margin-left: 0.8rem;
}

#sec-4 .categories .list-wrapper .item .img-box {
    width: 100%;
    aspect-ratio: 2/1.15;
}

#sec-4 .categories .list-wrapper .item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-5);
}

#sec-4 .categories .list-wrapper .item .title {
    font-size: 1.07rem;
}

#sec-4 .product-slider {
    position: relative;
}

#sec-4 .product-slider .swiper-slide {
    padding: 0 4rem;
}

#sec-4 .product-slider .navigation {
    position: absolute;
    top: calc(50% - 1.89rem);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.78rem;
    height: 3.78rem;
    border-radius: var(--radius-circle);
    border: solid 1px var(--text-dark-2);
    -webkit-border-radius: var(--radius-circle);
    -moz-border-radius: var(--radius-circle);
    -ms-border-radius: var(--radius-circle);
    -o-border-radius: var(--radius-circle);
    background-color: var(--White);
    z-index: 10;
    cursor: pointer;
}

#sec-4 .product-slider .navigation svg {
    width: 1.2rem;
    stroke: var(--text-dark-2);
}

#sec-4 .product-slider .navigation.prev-btn {
    left: auto;
    right: 0;
}

#sec-4 .product-slider .navigation.prev-btn svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

#sec-5 #toolTipGenerator {
    position: relative;
}

#sec-5 #toolTipGenerator>img {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#sec-5 #toolTipGenerator>img.black-white {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

#sec-5 #toolTipGenerator .t_hotSpot {
    position: absolute;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
}

#sec-5 #toolTipGenerator .t_hotSpot:after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}

#sec-5 #toolTipGenerator .t_hotSpot.black {
    background: #000;
}

#sec-5 #toolTipGenerator .t_hotSpot.black:after {
    background: #000;
}

#sec-5 #toolTipGenerator .t_hotSpot.white {
    background: #fff;
}

#sec-5 #toolTipGenerator .t_hotSpot.white:after {
    background: #fff;
}

#sec-5 #toolTipGenerator .t_hotSpot.medium {
    width: 38px;
    height: 38px;
    margin-top: -15px;
    margin-left: -15px;
}

#sec-5 #toolTipGenerator .t_hotSpot.large {
    width: 56px;
    height: 56px;
    margin-top: -20px;
    margin-left: -20px;
}

#sec-5 #toolTipGenerator .t_hotSpot.square {
    border-radius: 0;
}

#sec-5 #toolTipGenerator .t_hotSpot.circleOutline {
    background: transparent;
}

#sec-5 .t_tooltip_content_wrap {
    position: absolute;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 60% !important;
    height: 100%;
    background: #001B42;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    opacity: 0;
    z-index: 10;
}

#sec-5 .t_tooltip_content_wrap.active {
    right: 0%;
    opacity: 1;
}

#sec-5 .t_tooltip_content {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#sec-5 .t_tooltip_content .hotspot-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 5%;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-wrapper {
    height: calc(100% - 4rem);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-height: 100%;
    width: 23.5rem;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    gap: 1.71rem;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item .img-box {
    max-height: calc(100% - 115px);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item .img-box img {
    display: block;
    border-radius: var(--radius-5);
    -webkit-border-radius: var(--radius-5);
    -moz-border-radius: var(--radius-5);
    -ms-border-radius: var(--radius-5);
    -o-border-radius: var(--radius-5);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item strong,
#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item .title {
    display: block;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--White);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper .swiper-slide .item .link-btn {
    color: var(--White);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.78rem;
    height: 3.78rem;
    border-radius: var(--radius-circle);
    border: solid 1px var(--text-dark-2);
    -webkit-border-radius: var(--radius-circle);
    -moz-border-radius: var(--radius-circle);
    -ms-border-radius: var(--radius-circle);
    -o-border-radius: var(--radius-circle);
    background-color: var(--White);
    z-index: 10;
    cursor: pointer;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .navigation svg {
    width: 1.2rem;
    stroke: var(--text-dark-2);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .navigation.prev-btn {
    left: auto;
    right: 0;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .navigation.prev-btn svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .navigation.swiper-button-lock {
    display: none;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .swiper-pagination {
    position: relative;
    top: auto;
    bottom: auto;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .swiper-pagination .swiper-pagination-bullet {
    background: var(--White);
    opacity: 0.5;
}

#sec-5 .t_tooltip_content .hotspot-content .swiper-controller .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--primary-darker);
    opacity: 1;
}

#sec-6 {
    padding: 5.35rem 0;
}

#sec-6 .main-title {
    font-size: 1.42rem;
    font-weight: 800;
}

#sec-6 .subtitle {
    font-size: 1.28rem;
    font-weight: 300;
}

#sec-6 .custom-style-slider {
    position: relative;
    margin-bottom: -1.8rem;
    z-index: 1;
}

#sec-6 .custom-style-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4rem;
}

#sec-6 .custom-style-slider .swiper-slide>div {
    flex: 0 0 33%;
    text-align: center;
}

#sec-6 .custom-style-slider .swiper-slide .content .title {
    font-size: 1.42rem;
    font-weight: 800;
}

#sec-6 .custom-style-slider .swiper-slide .content .link {
    font-size: 1rem;
    font-weight: 700;
}

#sec-6 .custom-style-slider .navigation {
    position: absolute;
    top: calc(50% - 1.89rem);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.78rem;
    height: 3.78rem;
    border-radius: var(--radius-circle);
    border: solid 1px var(--text-dark-2);
    -webkit-border-radius: var(--radius-circle);
    -moz-border-radius: var(--radius-circle);
    -ms-border-radius: var(--radius-circle);
    -o-border-radius: var(--radius-circle);
    background-color: var(--White);
    z-index: 10;
    cursor: pointer;
}

#sec-6 .custom-style-slider .navigation svg {
    width: 1.2rem;
    stroke: var(--text-dark-2);
}

#sec-6 .custom-style-slider .navigation.prev-btn {
    left: auto;
    right: 0;
}

#sec-6 .custom-style-slider .navigation.prev-btn svg {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

#sec-6 .custom-style-slider:nth-child(odd) .swiper-slide {
    flex-direction: row-reverse;
}

#sec-6 .custom-style-slider:nth-child(2n) {
    z-index: 2;
}

#sec-6 .custom-style-slider:nth-child(3n) {
    z-index: 3;
}

#sec-6 .custom-style-slider:last-child {
    margin-bottom: 0;
}

#sec-7 {
    padding: 3.71rem 0;
}

#sec-7 .main-title {
    font-size: 1.28rem;
    font-weight: 700;
}

#sec-7 .item {
    width: 100%;
    margin-bottom: 1.7rem;
}

#sec-7 .item .img-box {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
}

#sec-7 .item .img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-5);
    -webkit-border-radius: var(--radius-5);
    -moz-border-radius: var(--radius-5);
    -ms-border-radius: var(--radius-5);
    -o-border-radius: var(--radius-5);
    z-index: 1;
}

#sec-7 .item .img-box .hover-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    z-index: 2;
}

#sec-7 .item .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.21rem 0 0;
}

#sec-7 .item .content strong,
#sec-7 .item .content .title {
    height: 4.9rem;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    overflow: hidden;
}

#sec-7 .item .content .link-btn {
    opacity: 0;
    color: var(--White);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#sec-7 .item:hover .img-box .main-img {
    opacity: 0;
}

#sec-7 .item:hover .img-box .hover-img {
    opacity: 1;
}

#sec-7 .item:hover .content .link-btn {
    opacity: 1;
}

.fixed-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--secendry-darker);
    padding: 0.66rem 0;
    z-index: 10;
}

.fixed-nav .label {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--primary-main);
}

@media (max-width: 990px) {

    #sec-1,
    #sec-2 {
        height: calc(100vh - 10rem);
    }

    #sec-2 .items {
        position: relative;
        height: 100%;
    }

    #sec-2 .items .item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease;
    }

    #sec-2 .items .item.active {
        opacity: 1;
        pointer-events: auto;
    }

    #sec-2 .items .item .layer {
        transition: all 1s ease;
        opacity: 0;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
    }

    #sec-2 .items .item .layer.animate {
        opacity: 1;
    }

    #sec-2 .items .item img {
        max-width: 100%;
    }

    #sec-2 .items .item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #sec-2 .items .item.sequence-1 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #sec-2 .items .item.sequence-1 .layer-1 {
        height: auto;
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    #sec-2 .items .item.sequence-1 .layer-1 img {
        height: auto;
    }

    #sec-2 .items .item.sequence-1 .layer-2 {
        right: -100% !important;
        max-width: 90%;
    }

    #sec-2 .items .item.sequence-1 .layer-2.animate {
        right: 5% !important;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }

    #sec-2 .items .item.sequence-1 .layer-3 {
        position: relative;
        top: auto;
        right: auto;
        max-width: 90%;
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        -o-transform: translateX(-100%) !important;
    }

    #sec-2 .items .item.sequence-1 .layer-3.animate {
        transform: translateX(0%) !important;
        -webkit-transform: translateX(0%) !important;
        -moz-transform: translateX(0%) !important;
        -ms-transform: translateX(0%) !important;
        -o-transform: translateX(0%) !important;
    }

    #sec-2 .items .item.sequence-2 .layer-1 {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }

    #sec-2 .items .item.sequence-2.animate {
        opacity: 1;
    }

    #sec-3 {
        height: auto;
    }

    #sec-5 .t_tooltip_content_wrap {
        top: auto;
        bottom: -100%;
        right: 0;
        left: 0;
        width: 100% !important;
        height: 60%;
        position: fixed;
        height: auto;
    }

    #sec-5 .t_tooltip_content_wrap.active {
        bottom: 4.9rem;
        opacity: 1;
    }

    #sec-6 {
        padding: 3.35rem 0;
    }

    #sec-6 .custom-style-slider {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    #sec-4 {
        padding: 2.14rem 0;
    }

    #sec-4 .product-slider .navigation {
        width: 2.78rem;
        height: 2.78rem;
        top: calc(50% - 1.34rem);
    }

    #sec-6 {
        padding: 3.35rem 0;
    }

    #sec-6 .custom-style-slider .navigation {
        width: 2.78rem;
        height: 2.78rem;
        top: calc(50% - 1.34rem);
    }

    #sec-6 .custom-style-slider .swiper-slide {
        padding: 0 3rem;
        flex-direction: row !important;
    }

    #sec-6 .custom-style-slider .swiper-slide>div {
        flex: 0 0 50%;
    }

    #sec-6 .custom-style-slider .swiper-slide .content:last-child {
        display: none;
    }
}

@media (max-width: 570px) {

    #sec-7 .item .content strong,
    #sec-7 .item .content .title {
        height: 3.5rem;
        font-size: 1.1rem;
    }

    #sec-7 .item .content .link-btn {
        padding: 0.5rem 1rem;
    }
}

/***************** End Collection Detail *******************/