:root{
    --logoInWideSize:0
}

html{
    scroll-behavior: smooth;
}
body > main{
    max-width: 1850px;
    margin: auto;
}
body > main > .main{
    width: 100%;
}
body > main > header{
    display: grid;
}
body{
    scroll-padding-top: 200px;
}
.half{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 48px;
    margin: 16px 0;
}
*::-webkit-scrollbar {
    width: .6em;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
}

*::-webkit-scrollbar-thumb {
  background-color: #559DFF77;
  width: 5px;
  height: 5px;
  border-radius: 50px;
}


#jumpLinks_holder a,
    #jumpLinks_holder .LinkStyle{
        text-decoration: none;
        color: var(--darkBlue);
        background: none;
        font-family: IRANSansWeb;
        font-size: 16px;
        border: none;
    }
@media (min-width:980px) {
    :root{
        --logoInWideSize:48px
    }
    .w_f{
        width: 100%;
        height: auto;
    }
    .w_h{
        width: 60%;
        height: auto;
    }
    .w_l{
        width: 30%;
        height: auto;
    }
    /*needSingleFile  */
    #Header{
        background: #fff !important;
        top:0 !important;
        height:80px !important ;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    body > main > header{
        grid-template-columns: 650px 1fr;
        grid-template-rows: 1fr;
        gap: 24px;
        padding-top: 128px;
        height: fit-content;
        /* box-shadow: 0 6px 16px #0003; */
        padding-bottom: 64px;
    }

    /* right side */
    .rightSideHeader > *{
        width: 100%;
    }
    .insuranceTitleBox .title{
        margin-top: 0;
    }

    .formOrTextBox form{
        margin-top: 16px;
    }

    /* left side */
    .leftSideHeader{
        height: 100%;
        padding-left: var(--menuPaddingHoriz);
        overflow: hidden;
    }
    .insuranceInfoBox{
        margin-bottom: 32px;
    }
    .imageOrTextBox{
        /* max-height: calc(100vh - 300px); */
        height: 100%;
    }

    .ratingHolder{
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-family: IRANSansWeb_Medium;
    }

    .leftSideHeader .headerContentBox{
        padding-right: 64px;
    }

    body > main > .main{
        padding-top: 80px;
        /* height: 100vh;
        overflow: hidden; */
        /* grid-template-columns: 275px 1fr; */
        grid-template-rows: 1fr;
    }

    body > main > .main > article{
        width: calc(100% - 275px);
        height: 100%;
        overflow: auto;
        /* float: left; */
        margin-right:auto
    }
    /* asside jumplinks */
    #jumpLinks_holder.fixAside{
        position: fixed;
        right: 0;
        top:85px
    }
    #jumpLinks_holder{
        float: right;
        width: 275px;
        padding-right: 64px;
        height: fit-content;
        border-left: 4px solid #000;
        text-align: left;
        background: #fff;
    }
    #jumpLinks_holder .title{
        font-weight: 600;
    }

    #jumpLinks_holder ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    #jumpLinks_holder ul li{
        padding: 8px;
        width: 100%;
    }
    #jumpLinks_holder ul li.current{
        font-size: 20px;
        position: relative;
        font-size: 20px;
        font-weight: 600;
    }
    #jumpLinks_holder ul li.current a{
        color: blue !important;
    }
    #jumpLinks_holder ul li.current::after{
        position: absolute;
        width: 6px;
        height: 100%;
        left: -5px;
        top: 0;
        background: red;
        content: "";
        display: inline-block;
    }
    #jumpLinks_holder ul li ,#jumpLinks_holder .title {
        padding-left: 16px;
    }
    .swiper-button-next,.swiper-button-prev{
        display: none !important;
    }
}
@media (max-width:1350px) {
    body > main > header{
        grid-template-columns: 600px 1fr;
    }
}
@media (max-width:1200px) {
    body > main > header{
        grid-template-columns: 1fr;
        /* grid-template-rows: 1; */
    }
    .h_iframe-aparat_embed_frame{
        position: static !important;
        height: 400px !important;
        display: inline-block;
        width: 100%;
    }
    .h_iframe-aparat_embed_frame > span:nth-child(1){
        padding: 0 !important;
    }
    .h_iframe-aparat_embed_frame iframe{
        position: relative !important;
    }

    body > main > header{
        grid-template-columns: 1fr;
        padding: var(--menuPaddingHoriz);
        gap: 32px;
    }
    .insuranceInfoBox{
        display: flex;
        margin: 32px 0;
    }
    .ratingHolder{
        display: flex;
        /* flex-flow: reverse; */
        align-items: center;
        justify-content: start;
        text-align: right ;

    }
    @media (min-width:980px) {
        .rightSideHeader , .leftSideHeader{
            padding: 0 !important;
        }
    }
}
@media (max-width:979px){
    .half{
        display: grid;
        grid-template-columns: 1fr !important;
    }
    .NO_MAIN_PADDING  .swiper{
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
  /* body > main  * */
  body > main > .main{
    display: grid;
}
.formOrTextBox form > .row{
    flex-wrap: wrap;
}
    .CTA_Button ,
    main > header button,
    main > header button[type='submit'],
    .formOrTextBox form input[type='submit']{
        width: 100%;
    }
    main > .main > article > *{
        scroll-margin-top: 180px !important;
        }
    /* .insuranceInfoBox{
        display: flex;
        justify-content: space-between;
    }
    .ratingHolder{
        display: flex;
        flex-flow: column-reverse;
        justify-content: start;
        text-align: right ;
    } */

    #jumpLinks_holder::-webkit-scrollbar{
        height: .2em;
    }
    #jumpLinks_holder{
        position: fixed;
        top: 64px;
        right: 0px;
        background: #fff;
        width: 100%;
        height: 52px;
        overflow-x: auto;
        box-shadow: 0 4px 6px #0003;
        white-space: nowrap;
        z-index: 98;
    }
    #jumpLinks_holder >.title{
        display: none;
    }
    #jumpLinks_holder > ul{
        display: flex;
        gap: 32px;
        width: fit-content;
        padding-left: var(--menuPaddingHoriz);
        margin: 0;
        height: 100%;
    }
    #jumpLinks_holder > ul li,#jumpLinks_holder > ul li a{
        width: fit-content;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #jumpLinks_holder ul li.current{
        font-weight: 600;
        position: relative;

    }
    #jumpLinks_holder ul li.current a,#jumpLinks_holder ul li.current .LinkStyle{
        color: blue !important;
    }
    #jumpLinks_holder ul li.current::after{
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        bottom: 0;
        background: red;
        content: "";
        display: inline-block;
    }
    main > .main > article {
        text-align: justify;
    }
    .listBox .titleBox .icon{
        align-self: flex-start;
        margin-top: 8px;
    }
    .insuranceCovers .swiper-slide-active {
        /* overflow: auto;
        height: 100%;
        padding-left: 8px; */
        height: fit-content;
        max-height: unset !important;
    }
    .w_f,.w_h,.w_l{
        width: 100% !important;
    }
}
@media (max-width:550px) {
    .podcastBox audio{
        min-width: 100% !important;
    }
    .insuranceCovers .swiper-slide{
        max-width: 70%;
    }
    main > header button,main > header .button{
        padding:8px 32px !important;
    }

}
@media (max-width:1300px) {
    .faq > ul{
        columns: 1 !important;
    }
    .faq > ul li{
        margin-bottom: 16px;
    }

}
main > .main{
    padding-bottom: 128px;
}
main > .main > article > *{
    width: 100%;
    margin-bottom: 128px;
    scroll-margin-top: 85px;
}


main > .main > article > *:not(.NO_MAIN_PADDING){
    padding:0 var(--menuPaddingHoriz);
}
main > .main > article > section.NO_MAIN_PADDING > *:not(.NO_PADDING){
    margin:0 var(--menuPaddingHoriz);
    margin-bottom: 8px;
}
body > main > header{
    padding-top: 128px;
    color: var(--darkBlue);

}
/* ++++++ header Insurance TITLE */
.insuranceTitleBox .title{
    font-family: IRANSansWeb_Bold;
    font-size: 40px;
    line-height: 52px;
    color: var(--darkBlue);
}
/* ++++++ header FORM ++++++ */
main form{
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 0 32px #0003;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    font-size: 18px;
    gap: 24px;
}
main form *{
    margin: 0;
    font-size: 16px;
}
.formText{
    color:var(--menuItmeBlueMid) ;
}
main form .row{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 24px;
}
main form .col{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
main form .colRow{
    flex-direction: row !important;
}
main form input:not([type=radio]):not([type=checkbox]),
main form select,
main form textarea
{
    width: 100%;
    background:#f9fafb ;
    border: none;
    height: 48px;
    border-radius: 8px;
    padding:0 8px;
    font-family: IRANSansWeb;
}
main form textarea{resize: none;}
.CTA_Button ,
main > header button,main > header .button{
    border: none;
    height: 48px;
    border-radius: 8px;
    font-family: IRANSansWeb_Medium;
    font-size: 18px;
    padding:8px 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 100%;
    width: fit-content;
    text-decoration: none;
    cursor: pointer;
}

main form button[type='submit'],
main form input[type='submit']{
    width: 100% ;
}
.CTA_Button ,
main > header button[type='submit'],
main form input[type='submit']{
    background: var(--menuItmeBlueMid) !important;
    color: #fff;
}
.lowCTA{
    background: var(--blueBorder) !important;
    font-family: IRANSansWeb;
    font-size: 16px;
}
.lowCTA:hover{
    background: var(--menuItmeBlueMid) !important;
}
.fullWidth{
    width: 100%;
}
/* +++++ haeder Right side CONTENT BOX */
    .headerContentBox * {
        line-height: 40px;
        font-size: 18px !important;
    }
/* +++++ header IMAGE ++++++ */
.imageOrTextBox{
    /* max-height: calc(100vh - 300px); */
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.imageOrTextBox > *{
    max-width: 100%;
}
.imageOrTextBox > img.insuranceImage{
    max-width: 100%;
    max-height: 100%;
}

.rightSideHeader{
    padding-right: calc(var(--menuPaddingHoriz) + var(--logoInWideSize));
}


/* +++++++ header INFO : RATING and Offer +++++++ */
.insuranceInfoBox{
    /* min-height: 128px; */
    direction: ltr;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.insuranceInfoBox *{
    margin: 0;
}
.insuranceInfoBox .offer{
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    font-family: IRANSansWeb_Medium;
    font-size: 18px;
}
.insuranceInfoBox .offer img{
    height: 48px;
}
.ratingBox{
    width: fit-content;
    display: flex;
    gap: 4px;
    /* margin-top: 8px; */
}
.ratingBox svg{
    height: 24px;
    width: 24px;
}
body{
    scroll-behavior: smooth !important;
}
/* ARTICLE */
main > .main > article {
    color: var(--darkBlue);
    font-size: 18px;
    line-height: 40px;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
main > .main > article > section > .title {
    font-family:IRANSansWeb_Bold ;
    margin-top: 0;
    border-right: 4px solid red;
    padding-right: 16px;
}
.SectionHeaderAndText .CTA_Button{
    margin-top: 32px;
}


article a:not(.CTA_Button){
    color: var(--menuItmeBlueMid);
    text-decoration: none;
    font-weight: 600;
}


.swiper {
    width: 100% !important;
    /* margin: 0 !important; */
    margin-top: 32px;
    height: fit-content;
    direction: ltr;
    /* height: 516px; */
  }
.swiper-wrapper{
    padding-top: 8px;
}
  .swiper-slide {
    text-align: justify;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px !important;
    margin: 0 32px;
  }
  .insuranceCovers .swiper-slide {
  background: #fff;
  }

  .insuranceCovers .swiper-slide{
    height: fit-content;
    max-height: 400px;
    overflow: hidden;
    padding: 0 16px 16px 16px ;
    box-shadow: 0 0 16px #0003;
    border-radius: 16px;
    direction: rtl !important;
    opacity: .4;
    color: #000;
    transition: .2s ;
    display: grid;
    grid-template-rows: 180px 1fr;
    gap: 8px;
  }
  .insuranceCovers .swiper-slide-active{
    max-height: 500px !important;
    margin-bottom:32px ;
    opacity: 1  !important;
  }
  .insuranceCovers .swiper-slide-prev ,.insuranceCovers .swiper-slide-next{
    opacity: .8  !important;
  }
  .insuranceCovers .imageHolder{
    width: 100%;
    height: 155px;
    display: flex;
    align-items: start;
    justify-content: center;
    background-color: var(--blueBorder);
    border-radius: 4px;
    margin-top: 16px;
  }
  .insuranceCovers .imageHolder img{
    max-height: 95%;
    max-width: 100%;
    transform: translateY(-10%);
    height: auto;
    aspect-ratio: 3/2;
    object-fit: contain;
  }
  .insuranceCovers .swiper-slide .title{
    font-family:IRANSansWeb_Bold ;
    font-size: 18px;
    margin: 8px 0;
    color: var(--darkBlue);
    display: inline-block;
  }

  .insuranceCovers .swiper-slide p{
    margin: 0;
    height: 100%;
    font-size: 16px;
  }
  .insuranceCovers .swiper-slide-active  .coverContnet{
    overflow: auto;
    height: 100%;
    padding-left: 8px;
}
.faq{
    width: 100%;
    /* max-width: 900px; */
    margin: auto;
}
.faq > ul{
    width: 100%;
    padding: 0;
    margin: 64px 0 ;
    list-style: none;
    height: fit-content;
    gap: 64px;
    columns: 2;

}
.faq > ul > li{
    width: 100%;
    padding: 8px 0;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    break-inside: avoid;

}
.faq > ul > li:nth-child(odd){
    margin-left: 16px;
}
.faq > ul > li * {
    margin: 0;
}
.faq > ul > li .question{
    font-family: IRANSansWeb_Bold;
    /* color: #000; */
}
.faq > ul > li .answer{
    /* font-family: IRANSansWeb_light; */
    color: var(--menuItmeBlueMid);
}
/* .faq > ul > li  */
body > main .icon{
    width: 48px;
    height: 48px;
    border-radius: 4px ;
    /* border: 1px solid var(--darkBlue); */
    background: var(--blueBorder);
    fill:  #fff;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

body > main .faq > ul > li .icon{
    margin-top: 8px;

}
body > main .icon svg ,
body > main .icon > img{
    max-width: 28px;
    max-height: 28px;
}
.podcastBox{
    scroll-margin-top: 120px;
    width: calc(
        100% - var(--menuPaddingHoriz) * 2
    );
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 6px#0003;
    margin: 32px var(--menuPaddingHoriz);
    display: flex;
    align-items: center;
    padding:8px 16px;
    border-right: 4px solid red;
    display: flex;
    flex-wrap: wrap ;
}
.podcastBox audio{
    margin-right: auto;
    /* width: 100%; */
    flex: 1;
    min-width: 500px;
}
.podcastBox audio::-webkit-media-controls-panel {
    background-color: #fff;
}




/* article{
    padding-bottom: 100vh !important;
} */

.titleBox{
    display: flex;
    gap: 16px;
    align-items: center;
    font-family: IRANSansWeb_Bold;
    /* align-items: center; */
}
.titleBox .icon{
    min-width: 48px;
}


/* LIST Background */
.listBackBox{
    width: 100%;
    /* background: var(--darkBlue); */
    /* color: #fff; */
}
.listBackBox *{
    margin: 0;
    list-style: none;
    padding: 0;
}
.listBackBox .titleBox{
 text-align: center;
 justify-content: center;
 width: 100%;
 background: var(--menuItmeBlueMid);
 border-radius: 32px;
 margin-bottom: 8px;
 color: #fff;
}
.listBackBox ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.listBackBox ul li{
    width: 100%;
    min-height: 32px;
    border-radius: 20px;
    background: var(--darkBlue);
    color: #fff;
    padding:0 32px;
}

.listBackBox ul li:nth-child(odd){
    background: var(--blueBorder);
}

/* table */

.tableHolder{
    margin: 32px 0;
}
.tableScroll{
    overflow-x: auto;
    width: 100%;
}
.tableHolder .titleBox{
    width: 100%;
    max-width: 100vw;
    text-align: center;
    justify-content: center !important;
}
.tableHolder table{
    width: 100%;
}
.tableHolder table thead tr{
    background: var(--darkBlue);
    color: #fff;
}

.tableHolder table tbody tr{
    color: #fff;
    background: var(--blueBorder);
}
.tableHolder table tbody tr:nth-child(odd){
    background: var(--menuItmeBlueMid);
}
.tableHolder table thead tr th{
    min-width: fit-content;
}
.tableHolder table thead tr th,
.tableHolder table tbody tr td{
    padding: 0 16px;
}
.tableHolder table thead tr th:nth-child(1),
.tableHolder table tbody tr td:nth-child(1){
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.tableHolder table thead tr th:last-child,
.tableHolder table tbody tr td:last-child{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.commentAndArticleSection{
    width: 100%;
    overflow: hidden;
}
.sectionTitleL1{
    font-size: 27px;
    font-family: IRANSansWeb_Bold;
}
.center{
    width: 100%;
    text-align: center;
}
