/* body  */

.we__bring{
    max-width: var(--container);
    margin: var(--margin-auto);
    background-image: url(../images/banner/bg_1.webp);
    width: var(--width-100);
    height: 500px;
    position: var(--position-relative);
    margin-bottom: 210px;
    margin-top: 2px;
    padding: 0px 15px;
}

.we__bring-body{
    background-color: var(--background-color-white);
    min-height: 611px;
    width: 96%;
    position: var(--position-absolute);
    top: 160px;
    left: 1%;
    border-radius: 10px;
    padding: 15px 10px;
    z-index: 10;
}

.we__bring-list{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    /* justify-content: space-around; */
    width: var(--width-100);
    gap: 20px;
}

.we__bring-item{
    width: 25% ;
    text-align: var(--text-center);
}

.we__bring-item{
    position: var(--position-relative);
}

.we__bring-item-body {
    position: var(--position-absolute);
    top: 150px;
    left: 0;
}

.we__bring-item-body>h5 {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-700);
    color: var(--color-01969A);

}
.we__bring-item-body>span{
    display: var(--display-block);
    text-align: var(--text-justify) ;
    color: var(--color-black);
    margin-top: 10px;
    line-height: 20px;
}

.we__bring-body > hr {
    border: none;
    height: 3px;
    width: var(--width-100);
    background-image: linear-gradient(to right,var(--color-01969A), var(--color-50e2e7));
    margin: 60px 0px 20px 0px;
}

.we__bring-row{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    /* justify-content: space-around; */
    width: var(--width-100);
    gap: 20px;
}

.we__bring-row-left{
    width: 50%;
}

.we__bring-row-left>img{
    width: var(--width-100);
    height: auto;
}

.we__bring-row-right{
    width: 50%;
}

.we__bring-row-right-title {
    font-size: var(--font-size-20);
    color: var(--color-01969A);
    font-weight: var(--font-weight-700);
    line-height: 25px;
}

.we__bring-row-right-text {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-400);
    line-height: 28px;
    text-align: var(--text-justify);
    color: var(--color-black);
    margin-top: 10px;
}

.we__bring-row-right-button{
    margin-top: 10px;
    background-image: linear-gradient(to right, var(--color-01969A), var(--color-50e2e7));
    cursor: var(--cursor-pointer);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-700);
    width: var(--width-100);
    color: var(--color-white);
    border-radius: 30px;
    outline: none;
    border: 0px;
    padding: 10px;
}

#experienced {
    background-image: url(../images/banner/bg_2.webp);
    width: var(--width-100);
    position: var(--position-relative);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 740px;
    padding: 40px 0% 0 0%;
    margin-bottom: 160px;
}

.experienced__row{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    max-width: var(--container);
    margin: var(--margin-auto);
    width:var(--container);
}

.experienced__row-left{
    width: 60%;
}

.experienced__row-left-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    color: var(--color-white);
}

.experienced__row-left-title1 {
    margin-top: 5px;
    font-size: var(--font-size-26);
    font-weight: var(--font-weight-700);
    color: var(--color-white);
}

.experienced__row-left-text{
    color: var(--color-white);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    text-align: var(--text-justify);
    line-height: 30px;
    margin-top: 10px;
}

.experienced__row-left-center{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.experienced__row-left-center > button{
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    padding: 10px 15px;
    background-color: var(--background-color-00D8D8);
    color: var(--color-white);
    border-radius: 10px;
    border: none;
    cursor: var(--cursor-pointer);
    width: 180px;
}

.experienced__row-left-center > button:hover {
    background-color: var(--color-067579);
    transition: 0.5s;
}

.experienced__row-left-bottom{
    margin-top: 15px;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    justify-content: space-between;
}

.experienced__row-left-bottom-item{
    width: 50%;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    font-size: var(--font-size-16);
    color: var(--color-white);
    font-weight: var(--font-weight-700);
}

.experienced__row-left-bottom-item > div{
    width: 40px;
}
.experienced__bottom{
    width: var(--container);
    margin: var(--margin-auto);
}
.experienced__list{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    width: var(--width-100);
    gap: 20px;
}

.experienced__list-item{
    width: 25%;
}

.experienced__list-item>img {
    width: var(--width-100);
}


.experienced__list-item-title{
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-18);
    line-height: 30px;
    text-align: var(--text-center);
    color: var(--color-01969A);
    text-transform: var(--text-tranform-uppercase);
}

.experienced__list-item-text {
    font-size: var(--font-size-16);
    line-height: 25px;
    text-align: var(--text-center);
    color: var(--color-black);
}

.advise {

}

.advise__row{
    max-width: var(--container);
    margin: var(--margin-auto);
    background-image: url('../images//banner/bg-03.webp');
    background-repeat: no-repeat;
    background-size: 100% 70px;
    padding: 0px 10px;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    height: 70px;

}

.advise__row-left{
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    color: var(--color-white);
    text-transform: var(--text-tranform-uppercase);
    width: 50%;
    line-height: 25px;
}

.advise__row-left-right{
    width: 50%;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    gap:10px;
}

.advise__row-left-right-input{
    width: 80%;
    height: 30px;
    outline: none;
    font-size: var(--font-size-18);
    color: var(--color-999);
    font-weight: var(--font-weight-600);
    border: 0px;
    padding: 5px 10px;
    border-radius: 10px;
    font-style: var(--font-style-italic);
}

.advise__row-left-right-bottom{
    width: 20%;
    border-radius: 10px;
    font-size: var(--font-size-18);
    color: var(--color-white);
    background-color: var(--background-color-067579);
    border: 0px;
    outline: none;
    height: 40px;
    cursor: var(--cursor-pointer);
}

.advise__row-left-right-bottom:hover{
    transition: .5s;
    background-color: #01969A;
}


.dominance__container{
    max-width: var(--container);
    margin: var(--margin-auto);
    margin-top: 15px;
}

.dominance__container-title{
    font-size: var(--font-size-18);
    color: var(--color-01969A);
    font-weight: var(--font-weight-700);
    text-transform: var(--text-tranform-uppercase);
}

.dominance__container-row{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    flex-wrap: wrap;
    width: 100%;
}

.dominance__container-row-col{
    width: 50%;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    gap: 10px;
    margin-top: 10px;
}

.dominance__container-row-col{
    color: var(--color-black);
}

.dominance__container-bottom{
    margin-top: 15px;
}
.dominance__container-bottom>img {
    width: var(--width-100);
    height: auto;
}

.space__container{
    max-width: var(--container);
    margin: var(--margin-auto);
    margin-top: 15px;
}

.space__container-body{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    margin-top: 15px;
}

.space__container-body-card{
    width: var(--width-100);
    text-align: var(--text-center);
}

.space__container-body-card>img {
    width: 80%;
    height: auto;
    cursor: var(--cursor-pointer);
}

.space__container-body-card>img:hover{
    transition: .5s;
    scale: 1.2;
}

.procedure{
    background-image: url('../images/banner/bg_4.webp');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 15px;
}

.procedure__container{
    max-width: var(--container);
    margin: var(--margin-auto);
    padding: 10px 0px;
}

.procedure__container-title{
    font-size: var(--font-size-20);
    color: var(--color-white);
    text-transform: var(--text-tranform-uppercase);
}

.procedure__container-title1{
    font-size: var(--font-size-26);
    font-weight: var(--font-weight-700);
    color: var(--color-white);
    margin-top: 5px;
    text-transform: var(--text-tranform-uppercase);
}

.procedure__container-bottom{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    width: var(--width-100);
    gap: 20px;
}

.procedure__container-bottom-card{
    width: 25%;
}

.procedure__container-bottom-card-body{
    margin-top: 15px;
    display: var(--display-flex);
    align-items: var(--align-item-center);
    box-shadow: 3px 3px 4px 0px #00000026;
    border: 2px solid #01969A;
    border-radius: 10px;
    background-color: white;
    padding: 10px 0px 0px 10px;
    cursor:var(--cursor-pointer);
}

.procedure__container-bottom-card-body:hover{
    transition: .5s;
    transform: translate(0px , -10px);
}

.procedure__container-bottom-card-body>img{
    width: 54px;
    height: 54px;
}

.procedure__container-bottom-card-body>div{
    color: var(--color-01969A);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    padding-left: 10px;
}


.feedback{

}

.feedback__container{
    max-width: var(--container);
    margin: var(--margin-auto);
    padding: 10px 0px;
}

.feedback__container-title{
    color: var(--color-01969A);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    text-transform: var(--text-tranform-uppercase);
    margin-top: 10px;
}


.feedback__container-row-card {
    margin-top: 10px;
    border: 2px solid #00D8D8;
    box-shadow: 4px 4px 4px 0px #00000040;
    border-radius: 10px;
    width: 93%;
    padding: 3%;
    display: none;
    min-height: 235px;
}

.activeFeedback{
    display: var(--display-block);
}

.feedback__container-row-card-top{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    width: var(--width-100);
}

.feedback__container-row-card-top > img {
    width: 175px;
    height: 175px;
}

.feedback__container-row-card-top-right {
    padding-left: 15px;
}

.feedback__container-row-card-top-right-title{
    font-size: var(--font-size-16);
    color: var(--color-black);
    font-weight: var(--font-weight-700);
}

.feedback__container-row-card-top-right-text{
    margin-top: 5px;
    font-size: var(--font-size-16);
    color: var(--color-black);
    font-weight: var(--font-weight-400);
}

.feedback__container-row-card-top-right>hr{
    border: 0px;
    height: 3px;
    background: linear-gradient(270deg, #00D8D8 0%, #01969A 100%);
    margin-top: 0px;
    width: 200px;
    margin-left: 0px;
}

.feedback__container-row-card-top-right-content {
    display: var(--display-flex);
    align-items: var(--align-item-center);
    gap: 20px;
    margin-top: 10px;
}
.feedback__container-row-card-top-right-content>img {
    width: 200px;
}

.feedback__container-row-card-top-right-content>div{
    font-style: italic;
    font-size: var(--font-size-14);
    color: var(--color-black);
}

.feedback__container-row-card-top-right-content>button {
    box-shadow: 2px 2px 2px 0px #0000001A;
    border: 1px solid var(--color-01969A);
    outline: none;
    border-radius: 8px;
    padding: 5px 15px;
    background-color: var(--background-color-white);
    font-size: 16px;
    color: var(--color-00D8D8);
}

.feedback__container-row-card-bottom{
    font-size: var(--font-size-16);
    text-align: var(--text-justify);
    color: var(--color-black);
    margin-top: 10px;
    line-height: 23px;
}

.index-feedbacks{
    display: var(--display-flex);
    align-items: var(--align-item-center);
    justify-content: var(--justify-content-center);
    margin-top: 10px;
}

.index-feedbacks .feedback-item{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--background-color-00D8D8);
    margin: 0 5px;
    border-radius: 50%;
    cursor: var(--cursor-pointer);
}

.index-feedbacks .feedback-item.activeFeedback{
    background-color: var(--background-color-01969A);
    width: 14px;
    height: 14px;
}