/*
  proj manager: Amin Heidarzadeh
  Author Css: saba mordadi
    
    ---------------- Info ----------------
    
    Date Created:   1402/11/24
    Email:          heydarzadeh@itshams.ir
    Email:          mordadi@itshams.ir


*/

/*---------------------- Public Style ---------------------*/
:root {
    --white: #ffff;
    --blue-1: #04265b;
    --blue-2: #217fb1;
    --blue-3: #d6e7ee;
    --blue-4: #154472;
    --blue-5: #5bc2e0;
    --black: #000;

}



.city {
    cursor: pointer;
    transition: fill 0.3s ease;
}




body {
    margin: 0;
    padding: 0;
    direction: rtl;
    position: relative;
}

a {
    color: #000;
}

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

svg {
    width: 100%;
}

.pd-0 {
    padding: 0;
}

.m-0 {
    margin: 0;
}

section {
    float: right;
    width: 100%;
}

ul {
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border: none;
}

.show-overlay {
    display: flex !important;
}

a:hover {
    color: #2388d8;
}


/*---------------------- /Public Style ---------------------*/






/*---------------------- header-main ---------------------*/
.header-main {
    display: flex;
    flex-direction: column;
}

.header-main .header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;

}


.header-main .header-menu {
    position: relative;
    margin-bottom: 233px;
}

.header-main .header-menu .container-fluid {
    width: 90%;
}

.header-main .header-menu::after {
    content: "";
    background-image: url("../images/site/Group\ 48.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    height: 862px;
    position: absolute;
 top: -202%;
    right: -53px;
    z-index: -1;
}

.header-main .header-menu::before {
    content: "";
    background-image: url("../images/site/Path-4.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 24%;
    height: 875px;
    position: absolute;
 top: -130%;
    left: 1px;
    z-index: -1;
}

.header-main .text-section .logo-site {
    display: flex;
    justify-content: center;
    position: relative;
}

.header-main .text-section .logo-site img {
    position: absolute;
    width: 7%;
    top: -21px;
    right: 50%;
}

.header-main .header-menu .navbar-nav {
    gap: 20px;
}

.header-main .header-menu .navbar-nav .nav-item .nav-link {
    color: var(--blue-1);
    background-color: var(--blue-3);
padding: 12px 20px;
    font-size: 14px;
    border-radius: 62px;
    border: solid 1px #217fb1;
    transition: 0.5s;
}

.header-main .header-menu .navbar-nav .nav-item .dropdown-item {
    text-align: initial;
    border-radius: 20px;
    transition: 0.5s;
}

.header-main .header-menu .navbar-nav .nav-item .dropdown-item:hover {
    background-color: var(--blue-1);
    color: var(--white) !important;
}

.header-main .header-menu .navbar-nav .nav-item .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.5s !important;
    padding: 10px;
    background-color: var(--blue-3);
    border-radius: 20px;
}

.header-main .header-menu .navbar-nav .nav-item .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
}

.close-menu {
    display: none;
}

.header-main .header-menu .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--blue-1);
    color: var(--blue-3);
}

.header-main .header-menu .lan-box {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 10px;
}



.header-main .header-menu .date-links {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 96%;
}

.header-main .header-menu .date-links .date-text {
    margin-left: 30px;
}

.header-main .header-menu .date-links .style-date {
    font-size: 14px;

}

.header-main .header-menu .lan-box .lan-btn a {
    width: 95%;
    padding: 9px 10px;
    background-color: var(--blue-4);
    color: var(--white);
    border: solid 4px rgba(99, 129, 160, 0.41);
    display: flex;
    justify-content: center;
    transition: 0.5s;
    border-radius: 62px;
    font-size: 14px;
}

.header-main .header-menu .lan-box .lan-btn:hover a {
    color: var(--blue-1);
    background-color: var(--blue-3);
}

.header-main .text-section .title-text {
    display: flex;
    align-items: end;
    flex-direction: column;
    width: 100%;
}

.header-main .text-section .title-text .h3-text {
    display: flex;
    align-items: revert;
    justify-content: right;
    width: 40%;
}

.header-main .text-section .title-text h3 {
    color: var(--blue-1);
    font-size: 35px;
    font-weight: bold;
}

.header-main .text-section .title-text .p-text {
    display: flex;
    align-items: center;
    justify-content: left;
}
.header-main .text-section{
  margin-bottom: 155px;
}
.header-main .text-section .title-text p {
    width: 54%;
    font-size: 18px;
    color: var(--blue-1);
    text-align: justify;
}


/*---------------------- /header-main ---------------------*/

/*---------------------- header-inner ---------------------*/
.header-main .header-menu.header-inner {
    background-color: rgba(215, 232, 238, 0.5);
    margin-bottom: 0 !important;
}

.header-main .header-menu.header-inner::before {
    display: none !important;
}
.header-main .header-menu.header-inner::after {
    background-image: url(../images/about/rm209-ning-120-l.png);
/* background-image: url("../images/site/shapeee.png"); */
background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1%;
  right: -1px;
  z-index: -1;
  opacity: 0.2;
}

.header-main .header-menu.header-inner .logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-main .header-menu.header-inner .logo .logo-site {
    width: 24%;
}
.header-main .header-menu.header-inner .logo  h3{
    color: var(--blue-1);
    font-size: 20px;
}
.header-main .header-menu.header-inner .logo .logo-site img {
    width: 100%;
}

/*---------------------- /header-inner ---------------------*/




/*---------------------- content-main ---------------------*/
/*---------------------- dana-section ---------------------*/

.content-main {
    overflow: hidden;
    position: relative;
    padding: 0;
}
/* 
.content-main .dana-section {
    background-image: linear-gradient(231deg, #d6e7ee 103%, rgba(144, 170, 189, 0.51) -5%);
} */

.content-main .dana-section .title-section {
    text-align: center;
    color: var(--blue-1);
    padding: 72px 0;
}

.content-main .dana-section .title-section .color-title {
    color: var(--blue-5);
}

.content-main .dana-section .items-service {
    gap: 28px;
 margin-bottom: 155px;
}


.content-main .dana-section .items-service .item-service {
    display: flex;
    width: 23%;
    position: relative;

}

.content-main .dana-section .items-service .item-service a {
    background-color: var(--white);
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    height: 243px;
    width: 100%;
    box-shadow: 0 3px 15px 0 #b4b4b4;
    transition: 0.5s;

}

.content-main .dana-section .items-service .item-service a:hover {
    box-shadow: 0 3px 15px 0 #b4b4b4;
    background-color: var(--blue-3);
}

.content-main .dana-section .items-service .item-service a:hover .img-service {
    opacity: 1;
}

.content-main .dana-section .items-service .item-service .title {
    color: var(--blue-1);
    font-weight: 500;
    line-height: 2.23;
    text-align: center;
    margin-bottom: 53px;
}

.content-main .dana-section .items-service .item-service .info {
    color: var(--blue-1);
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.content-main .dana-section .items-service .item-service .img-service {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26%;
    color: var(--blue-3);
    opacity: 0.5;
    transition: 0.5s;
}

/*---------------------- /dana-section ---------------------*/

/*---------------------- about-section ---------------------*/


.content-main .about-section {
    content: "";
    background-image: url("../images/site/Group-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 122%;
    display: flex;
    right: -11%;
    left: 0;
margin: -80px 0 30px 0;

}

.content-main .about-section .image-about {
    position: relative;
}

.content-main .about-section .image-about img {
    position: absolute;
   top: 50px;
    right: -57px;
    width: 125%;
}

.content-main .about-section .text-about {
    padding: 70px;
}

.content-main .about-section .text-about h3 {
    font-size: 35px;
    font-weight: 500;
    color: var(--white);
}

.content-main .about-section .text-about .moarefi {
    color: var(--blue-5);
}

.content-main .about-section .text-about p {
    font-size: 18px;
    color: var(--white);
    margin-bottom: 20px;
}

.content-main .about-section .text-about ul li {
    font-size: 18px;
    color: var(--white);
    position: relative;
}

.content-main .about-section .text-about ul li::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--blue-5);
    border-radius: 100%;
    position: absolute;
    right: -22px;
    left: 0;
    top: 9px;
}

/*---------------------- /about-section ---------------------*/


/*---------------------- lists-section ---------------------*/
.content-main .lists-section .lists {
    justify-content: center;
    width: 100%;
margin-bottom: 30px;
}

.content-main .lists-section .lists .list {
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
    background-color: var(--white);
    padding: 16px;
    width: 30%;

}

.content-main .lists-section .lists .list .text-list a {

    transition: 0.5s;
}

.content-main .lists-section .lists .list .list-img img {
    width: 98px;
    height: 98px;
    background-color: var(--blue-4);
    padding: 27px 0px;
    border-radius: 100px;
    transition: 0.5s;
}

.content-main .lists-section .lists .list:hover .list-img img {
    background-color: var(--blue-5);
}


/*---------------------- /lists-section ---------------------*/


/*---------------------- contact-us---------------------*/
.content-main .contact-us{
    position: relative;
}
.content-main .contact-us .row{
    justify-content: center;
}
.content-main .contact-us::before {
    content: "";
    background-image: url("../images/site/Group-47.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 114%;
    height: 100%;
    display: flex;
    right: 0;
    left: 0;
    z-index: 9;
}

.content-main .contact-us .forms-input {
    padding: 80px;
    position: relative;
    z-index: 99;
}

.content-main .contact-us .forms-input input:focus {
    outline: none;
    box-shadow: none;
}

.content-main .contact-us .forms-input .contact-header h3 {
    background-color: var(--blue-4);
    border-radius: 20px;
    padding: 10px 67px;
    border: solid 3px rgba(99, 129, 160, 0.41);
    color: var(--white);
    font-size: 20px;
    font-weight: bold;
    width: 39%;
}

.content-main .contact-us .forms-input .input-list .form-control {
    padding: 10px 30px;
    border: solid 3px rgba(99, 129, 160, 0.41);
    background-color: var(--white);
    border-radius: 20px;
    width: 100%;
}

.content-main .contact-us .forms-input .input-list textarea {
    resize: none;

}

.content-main .contact-us .forms-input .input-list textarea:focus {
    outline: none;
    box-shadow: none;
}

.content-main .contact-us .forms-input .input-list .form-control::placeholder {
    color: var(--blue-2);
    font-size: 16px;
    font-weight: 600;
    outline: none !important;
}

.content-main .contact-us .forms-input .btn-inputs {
    display: flex;
    justify-content: center;
}

.content-main .contact-us .forms-input .btn-inputs button {
    padding: 5px 48px;
    background-color: var(--blue-4);
    border-radius: 20px;
    border: solid 3px rgba(99, 129, 160, 0.41);
    color: var(--white);
    transition: 0.5s;
    font-size: 20px;
    font-weight: bold;
}

.content-main .contact-us .forms-input .btn-inputs:hover button {
    background-color: var(--white);
    color: var(--blue-4);
}

/*---------------------- /contact-us---------------------*/



/*---------------------- /content-main ---------------------*/

/*---------------------- footer ---------------------*/

.footer-main {
    background-color: var(--blue-4);
    display: flex;
    flex-direction: column;
    margin-top: -120px;
    overflow: hidden;
}

/*---------------------- footer-logo ---------------------*/
.footer-main .footer-logo {
    padding-top: 160px;
}


.footer-main .footer-logo .image-logo .image {
    display: flex;
    justify-content: center;
}

.footer-main .footer-logo .image-logo .image img {
    width: 76%;
    border-radius: 10px;
    border: solid 1px #707070;
}

/*---------------------- /footer-logo ---------------------*/


/*---------------------- info-footer ---------------------*/
.footer-main .info-footer .title-info {
    font-size: 28px;
    font-weight: 300;
    color: var(--white);
    position: relative;
}

.footer-main .info-footer .title-info::before {
    content: "";
    width: 90%;
    position: absolute;
    right: 0;
    bottom: -18px;
    height: 0;
    border: solid 1px #217fb1;
    opacity: 0.5;
}

.footer-main .info-footer .representation ul li a {
    font-size: 18px;
    font-weight: 300;
    color: var(--white);
    transition: 0.5s;
}

.footer-main .info-footer .representation ul li a:hover {
    color: var(--blue-5);
}


.footer-main .info-footer .address {
    font-size: 22px;
    font-weight: 300;
    color: var(--white);
}

.footer-main .info-footer .box-address .text-address {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer-main .info-footer .box-address .text-address img {
    width: 25px;
    margin-left: 10px;
}

.footer-main .info-footer .box-address .text-address span {
    font-size: 18px;
}

.footer-main .info-footer .social-box ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 40%;
    margin-right: -11px;
    background-color: white;
    border-radius: 28px;
    padding: 3px 26px;
}

.footer-main .info-footer .social-box ul li a img {
    width: 37px;
}

/*---------------------- /info-footer ---------------------*/

/*---------------------- bottom-footer---------------------*/
.footer-main .bottom-footer .footer-Copyright {
    display: flex;
    justify-content: flex-end;
    position: relative;

}

.footer-main .bottom-footer .footer-Copyright span,
.footer-Copyright a {
    font-size: 18px;
    color: var(--white);
    font-weight: 300;

}

.footer-main .bottom-footer .footer-Copyright::before {
    content: "";
    width: 44%;
    position: absolute;
    left: 0;
    top: -14px;
    height: 0;
    border: solid 1px #217fb1;
    opacity: 0.5;
}

/*---------------------- /bottom-footer ---------------------*/

/*---------------------- /footer ---------------------*/

/*---------------------- new-html ---------------------*/

/*---------------------- about-site ---------------------*/
.content-main .about-site {
    position: relative;
}

.content-main .about-site::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(../images/about/rm209-ning-120-l.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.content-main .about-site .about {
    display: flex;
    align-items: center;
    margin-right: 40px;
}

.content-main .about-site .about .about-img {
    display: flex;
    justify-content: center;
}

.content-main .about-site .about .about-img img {
    width: 79%;

}

.content-main .about-site .row {
    align-items: center;
}

.content-main .about-site .about-text{
    width: 70%;
}
.content-main .about-site .about-text a {
    font-size: 37px;
    font-weight: 900;
    color: var(--blue-1);
    display: flex
    ;
        flex-direction: column;
        align-items: center;
}

.content-main .about-site .about-text span {
    color: var(--blue-5);
}

/*---------------------- /about-site ---------------------*/

/*---------------------- paraghraph-sec ---------------------*/

.content-main .paraghraph-sec {
    background-color: rgba(91, 194, 224, 0.2);
    margin-bottom: 50px;
    padding: 30px;
}

.content-main .paraghraph-sec p {
    color: var(--blue-1);
    font-weight: 500;
    line-height: 2.5;
}

.content-main .paraghraph-sec
/*---------------------- /paraghraph-sec ---------------------*/

/*---------------------- about-dana ---------------------*/
.content-main .about-dana .main-title {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.content-main .about-dana.dana-section .items-service {
    margin-bottom: 0 !important;
}

.content-main .about-dana .main-title h3 {
    font-size: 32px;
    color: var(--blue-1);
    font-weight: 600;
    text-align: center;
}

.content-main .about-dana .main-title .br {
    background-image: url(../images/about/header.svg);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;

    background-color: transparent !important;

    margin: -9px 0 0 -42px;
}

.content-main .about-dana.dana-section {
    background-image: none !important;
}

.content-main .about-dana.dana-section .items-service .item-service a {
    height: 217px;
    justify-content: center;
}


/*---------------------- /about-dana ---------------------*/

/*---------------------- section-form ---------------------*/

.content-main .section-form {
    margin-bottom: 80px;
}

.content-main .section-form .box-form {
    border-radius: 20px;
    background: var(--white);
    box-shadow: 1px 2px 30px 55px rgba(0, 33, 116, 0.04);
    padding: 24px 32px;
    max-width: 79%;
    margin-right: 73px;
    z-index: 5;
    position: relative;
    margin-top: 10px;
}

.content-main .section-form .form-p {
    margin-bottom: 41px;
    display: inline-block;
    margin-top: 115px;
}

.content-main .section-form .form-p p {
    text-align: justify;
}

.content-main .section-form .box-form.box-form-single {
    max-width: 622px;
    background: var(--light-grey);
}

.content-main .section-form .text-form {
    color: var(--blue-1);

    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.content-main .section-form .info-inputs {
    display: flex;
    flex-direction: column;
}

.content-main .section-form .inputs {
    display: flex;
    position: relative;
}

.content-main .section-form .inputs input {
    margin-bottom: 24px;

}

.content-main .section-form .info-inputs {
    display: flex;
    flex-direction: column;
}

.content-main .section-form .email {
    background: transparent;
    border: none;
    border-radius: 10px;
    background: var(--light-grey);
    display: flex;
    width: 96%;
    padding: 0 16px;
    line-height: 48px;
    outline: none;
}

.content-main .section-form .email {
    background: transparent;
    border: none;
    border-radius: 10px;
    background: var(--light-grey);
    display: flex;
    width: 96%;
    padding: 0 16px;
    line-height: 48px;
    outline: none;
}

.content-main .section-form .button-formBox {
    border-radius: 12px;
    display: flex;
    justify-content: end;
    background: transparent;
}

.content-main .section-form .button-formBox button {
    border-radius: 12px;
    background-color: var(--blue-1);
    border: none;
    display: inline-flex;
    padding: 0 41px;
    line-height: 48px;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    transition: 0.5s all;
}

.content-main .section-form .button-formBox:hover button {
    background-color: var(--blue-5);
}

/*---------------------- /section-form ---------------------*/


/*---------------------- map-section ---------------------*/
.content-main .map-section .map-location {
    background-color: var(--grey);
    width: 100%;
    height: 225px;
    border-radius: 20px;
    margin-top: -12%;
    margin-bottom: 50px;
}

.content-main .map-section .map-location iframe {
    width: 100%;
    height: 225px;
    border-radius: 20px;
}

/*---------------------- /map-section ---------------------*/

/*---------------------- information-box ---------------------*/
.content-main .information-box{
    margin-bottom: 130px;
}
.content-main .information-box .info-boxes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.content-main .information-box .info-boxes.boxes-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
    width: inherit !important;

}

.content-main .information-box .info-boxes.boxes-item>div:first-child {
    width: 100% !important;
}

.content-main .information-box .info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--blue-1);
    border-radius: 20px;
    padding: 24px 24px 36px 24px;
    height: 135px;
    width: 19%;
    transition: 0.5s all;
}

.content-main .information-box .info::before {
    content: "";
    position: absolute;
    right: 0;
    height: 67px;
    width: 4px;
    background-color: var(--blue-5);
}

.content-main .information-box .info:hover {
    background-color: var(--blue-5);
}

.content-main .information-box .info:hover .title img {
    filter: brightness(9);
}

.content-main .information-box .info:hover .title h3 {
    color: var(--blue-1);
}

.content-main .information-box .info:hover p {
    color: var(--blue-1);
    font-weight: 300;
}

.content-main .information-box .info.info-style {
    width: 48% !important;
}

.content-main .information-box .info.info-style p {
    text-align: right !important;
}

.content-main .information-box .info .title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.content-main .information-box .info .title img {
    width: 25px;
    height: 25px;
}

.content-main .information-box .info .title span {
    color: var(--white);
    font-size: 18px;
}

.content-main .information-box .info p {
    color: var(--white);
    font-size: 16px;
}

/*---------------------- /information-box ---------------------*/

/*---------------------- services-sec---------------------*/
.content-main .about-site.services-sec .about-img img {
    width: 100% !important;
}

.content-main .about-site.services-sec {
    margin-bottom: 50px;
}

/*---------------------- /services-sec ---------------------*/


/*---------------------- info-services ---------------------*/

.content-main .info-services.information-box .info {
    background-color: var(--white);
    box-shadow: 1px 2px 30px 55px rgba(0, 33, 116, 0.04);
}


.content-main .info-services.information-box .info .title span {
    color: var(--blue-1);
    font-size: 18px;
    text-align: center;
    transition: 0.5s all;
}

.content-main .info-services.information-box .info:hover .title span {
    color: var(--white);
}

.content-main .info-services.information-box .info {
    justify-content: center !important;
    align-items: center !important;
    height: 100px !important;
    transition: 0.5s all;
    width: 32%;
}

.content-main .info-services.information-box .info:hover {
    background-color: var(--blue-1);
}

.content-main .info-services.information-box .info .title {
    position: relative;
}

.content-main .info-services.information-box .info .title a {
    display: flex;
    z-index: 999;
    gap: 10px;
}


/*---------------------- /info-services ---------------------*/


/*---------------------- sevices ---------------------*/
.content-main .sevices.information-box .info-boxes {
    flex-wrap: wrap;
}

.content-main .sevices.info-services.information-box .info {
    width: 49% !important;
    transition: 0.5s all;
}

.content-main .sevices.info-services.information-box .info:hover {
    background-color: var(--blue-1);
}

.content-main .sevices.info-services.information-box .info .title span {
    transition: 0.5s all;
}

.content-main .sevices.info-services.information-box .info:hover .title span {
    color: var(--white);
}

/*---------------------- /sevices ---------------------*/


/*---------------------- /atm-section ---------------------*/
/*---------------------- faq-section ---------------------*/
.content-main .faq-section .w-lg-50{
    margin-bottom: 150px;
}
/*---------------------- /faq-section ---------------------*/

.content-main .atm-section {
    position: relative;
    margin-bottom: 50px;
}

.content-main .atm-section::before {
    content: "";
    background-image: url(../images/atm/bg-1-1-e1690871442909.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.content-main .atm-section .sec-items.item-left {
    flex-direction: row-reverse;
}

.content-main .atm-section .sec-items {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 100px;
}

.content-main .atm-section .info-sec {
    margin-bottom: 50px;
    text-align: justify;
}

.content-main .atm-section .info-sec h3 {
    font-size: 20px;
    color: var(--blue-1);
    margin-bottom: 20px;
}

.content-main .atm-section .info-sec p {
    font-size: 16px;

}

.content-main .atm-section .info-image {
    flex: 88%;
}

.content-main .atm-section .info-image img {
    width: 300px;
    border-radius: 50px;
}

.content-main .atm-section.support-sec .info-sec a {
    border-bottom: 1px solid var(--blue-1);
}

/*---------------------- /atm-section ---------------------*/

/*---------------------- install-section ---------------------*/
.content-main .install-section.atm-section .info-sec h3 {
    position: relative;
}

.content-main .install-section.atm-section .info-sec h3::before {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 0;
    background-color: var(--blue-1);
    width: 38%;
    height: 2px;

}

.content-main .install-section.atm-section .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-main .install-section.atm-section .content span {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue-1);
    margin-bottom: 20px;
}

.content-main .install-section.atm-section .content .info-content {
    display: flex;
    gap: 70px;
}

.content-main .install-section.atm-section .content .info-content ul li {
    margin-bottom: 20px;
    line-height: 2.5;
    list-style-type: disc !important;
}

/*---------------------- /install-section ---------------------*/

/*---------------------- system-style ---------------------*/
.content-main .install-section.atm-section.system-style .content {
    align-items: start !important;
}

.content-main .install-section.atm-section.system-style .content .info-content {
    gap: 0 !important;
}

.content-main .install-section.atm-section.system-style .content .info-content ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.content-main .install-section.atm-section.system-style .content .info-content ul li {
    width: 46%;
}

/*---------------------- /system-style ---------------------*/

/*---------------------- faq-section ---------------------*/

.content-main .faq-section .accordion-body ul li a {
    color: var(--black);
    font-weight: 700;
}

.content-main .faq-section .faq-title {
    color: var(--blue-1);
}

.content-main .faq-section .accordion {
    width: 100%;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.content-main .faq-section .accordion-button {
    background-color: var(--blue-4);
    border-radius: 8px;
}

.content-main .faq-section .accordion-button:not(.collapsed) {

    background-color: var(--blue-4);
}

.content-main .faq-section .accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: none;
}

.content-main .faq-section .accordion-button:focus {
    box-shadow: none;
}

.content-main .faq-section .accordion-button:before {
    content: "";
    position: absolute;

    right: 0.75rem;
    top: 1.25rem;
    height: 2px;
    width: 1rem;
    background-color: var(--blue-5);
}

.content-main .faq-section .accordion-button.collapsed:after {
    content: "";
    position: absolute;

    right: 1.1875rem;
    top: 0.8125rem;
    height: 1.0625rem;
    width: 0.125rem;
    border-style: none;
    background-color: var(--blue-5);
}

.content-main .faq-section .accordion-button h5 {

    color: var(--white);
    margin-right: 13px;
}

.content-main .faq-section .accordion-body {
    background-color: var(--secondary-text);
}


.content-main .faq-section .accordion-body ol {
    counter-reset: step-counter;
    list-style-type: none;
    padding-left: 0;
}

.content-main .faq-section .accordion-body ol>li {
    counter-increment: step-counter;

    margin-bottom: 10px;
}

.content-main .faq-section .accordion-body ol>li::before {
    content: "Steps " counter(step-counter) ": ";

    font-weight: bold;
}

/*---------------------- /faq-section ---------------------*/


/*---------------------- /new-html ---------------------*/