@import url('fonts.css');

:root {
    --text-blue: rgba(1, 44, 110, 1);
    --text-blue-2: rgba(25, 69, 107, 1);
    --text-blue-3: rgba(0, 29, 152, 1);
    --text-simple: rgba(56, 41, 51, 1);
    --text-black: rgba(0, 0, 0, 1);
    --text-title: rgba(28, 41, 92, 1);
    --text-leader: rgba(4, 59, 135, 1);
    --text-white: rgba(255, 255, 255, 1.0);
    --text-branch: rgba(9, 94, 158, 0.41);
    --bg-white: rgba(255, 255, 255, 1.0);
    --bg-left-menu: rgba(236, 241, 255, 1);
    --file-label: rgba(104, 104, 104, 1);
}
:root[data-theme="dark"] {
    --text-blue: rgba(255, 255, 255, 0.8);
    --text-blue-2: rgba(255, 255, 255, 0.8);
    --text-blue-3: rgba(255, 255, 255, 0.8);
    --text-simple: rgba(255, 255, 255, 0.8);
    --text-black: rgba(255, 255, 255, 0.8);
    --text-title: rgba(255, 255, 255, 0.8);
    --text-leader: rgba(255, 255, 255, 0.8);
    --text-white: rgba(26, 26, 26, 1.0);
    --text-branch: rgba(255, 255, 255, 0.8);
    --bg-white: rgba(26, 26, 26, 1.0);
    --bg-left-menu: rgba(64, 64, 64, 1.0);
    --file-label: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .accordion {
    --bs-body-color: rgba(255, 255, 255, 0.8);
    --bs-accordion-bg: rgba(64, 64, 64, 1.0);
}
[data-theme="dark"] .list-group {
    --bs-list-group-color: rgba(255, 255, 255, 0.8);
    --bs-list-group-bg: rgba(64, 64, 64, 1.0);
}
[data-theme="dark"] .pagination {
    --bs-pagination-bg: rgba(64, 64, 64, 1.0);
}
[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-link-color: rgba(255, 255, 255, 0.8);
    --bs-dropdown-bg: rgba(64, 64, 64, 1.0);
    --bs-dropdown-link-hover-color: rgba(255, 255, 255, 0.8);
    --bs-dropdown-link-hover-bg: rgba(26, 26, 26, 1.0);
}
/* =================all================= */
body {
    font-family: 'Montserrat-400';
    color: var(--text-simple);
    background-color: var(--bg-white);
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    list-style: none;
}
@media (min-width: 1400px) {
    .container {
        max-width: 1360px;
    }
}
/* -----------------all----------------- */
/* =================vacancy============= */
.vacancy-count {}
.vacancy-count a {}
.vacancy-count-in {
    display: flex;
    align-items: center;
    text-align: center;
    background-color: rgba(240, 153, 74, 1);
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.vacancy-count-number {
    color: rgba(255, 255, 255, 1);
    font-family: 'Montserrat-700';
    display: block;
}
.vacancy-count-text {
    font-family: 'Montserrat-500';
    color: rgba(255, 255, 255, 1);
    font-size: 27px;
    display: block;
}
.student {}
.student a {}
.student-in {
    background-image: url(../img/student.jpg);
    background-size: cover;
}
.student-text {
    padding-left: 30px;
    padding-bottom: 50px;
    padding-right: 30px;
    padding-top: 50px;
    display: flex;
    align-items: flex-end;
    background-color: rgba(1, 46, 113, 0.65);
}
.student-text span {
    font-family: 'Montserrat-500';
    font-size: 28px;
    color: rgba(255, 255, 255, 1);
}
.echar {
    background-color: rgba(1, 46, 113, 1.0);
}
.echar a {}
.echar-in {
    padding-left: 30px;
    padding-bottom: 50px;
    padding-right: 30px;
    padding-top: 50px;
    display: flex;
    align-items: flex-end;
}
.echar-in span {
    font-family: 'Montserrat-500';
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
}
@media (min-width: 768px) {
    .vacancy-count-in {
        height: 360px;
    }
    .vacancy-count-number {
        font-size: 100px;
        line-height: 80px;
    }
    .student-text {
        height: 360px;
    }
    .echar-in {
        height: 360px;
    }
}
@media (max-width: 1199px) {
    .vacancy-count {
        margin-top: 30px;
    }
}
@media (max-width: 767px) {
    .vacancy-count-number {
        font-size: 48px;
    }
}
/* -----------------vacancy------------- */
/* =================left================ */
.left-news {
    padding: 30px;
    background-color: var(--bg-left-menu);
}
.left-news-title {}
.left-news-title span {
    font-family: 'Montserrat-700';
    color: var(--text-black);
    font-size: 21px;
}
.left-news-detail {
    margin-top: 30px;
}
.left-news-detail a {}
.left-news-in {
    display: flex;
    align-items: center;
}
.left-news-date {
    width: 60px;
    background-color: rgba(208, 224, 255, 1);
    padding: 10px 5px;
}
.left-month {
    display: block;
    text-align: center;
    font-size: 15px;
    color: rgba(122, 134, 161, 1);
}
.left-date {
    display: block;
    text-align: center;
    font-family: 'Montserrat-700';
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
}
.left-year {
    display: block;
    text-align: center;
    font-size: 15px;
    color: rgba(122, 134, 161, 1);
}
.left-news-name {
    width: calc(100% - 60px);
    padding-left: 15px;
}
.left-news-name span {
    color: var(--text-black);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.left-news-detail a:hover .left-news-name span {
    color: var(--text-blue);
}
/* -----------------left---------------- */
/* =================pagination========== */
.my-pagination {
    margin-top: 30px;
}
.my-pagination ul {
    justify-content: center;
}
.my-pagination ul li {}
.my-pagination ul li button {
    font-family: 'Montserrat-500';
    color: var(--text-blue);
}
.my-pagination ul li button.active {
    background-color: var(--text-blue);
    border-color: var(--text-blue);
    color: var(--text-white);
}
.my-pagination ul li button:focus {
    box-shadow: none;
}
/* -----------------pagination---------- */
/* =================top================= */
.home-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}
.home-top button {
    background-color: transparent;
    border: none;
    box-shadow: 10px 10px 30px rgb(0 0 142 / 45%);
    display: inline-block;
    border-radius: 50%;
    padding: 0;

}
.home-top button svg {}
.home-top button svg {}
@media (max-width: 575px) {
    .home-top {
        display: none;
    }
}
/* -----------------top----------------- */
/* =================full================ */
.full-bars {
    position: absolute;
    left: 22px;
    top: 26px;
    z-index: 2200;
}
.full-bars button {
    background-color: transparent;
    border: none;
}
.full-bars button svg {}
.full-bars button svg {}
.full-menu {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(1, 5, 79, 0.94);
    z-index: 2000;
    padding-bottom: 30px;
}
.full-in {
    padding-top: 100px;
}
.full-in .b-container {
    background-image: none;
}
.full {
    display: flex;
    flex-wrap: wrap;
}
.full ul {
    display: flex;
    flex-wrap: wrap;
}
.full li {
    margin-top: 15px;
    margin-right: 30px;
}
.full li a {
    font-family: 'Montserrat-500';
    font-size: 20px;
}
.full li a {
    color: rgba(225, 225, 225, 1);
    position: relative;
    padding-left: 25px;
}
.full li a::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: rgba(255, 255, 255, 1.0);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.full li a:hover {
    color: rgba(243, 121, 32, 1);
}
.full li ul {
    padding-left: 20px;
    display: block;
}
.full li ul li {
    margin-top: 15px;
}
.full li ul li>a {
    font-family: 'Montserrat-500';
    font-size: 18px;
    max-width: 280px;
    white-space: pre-wrap;
    display: inline-block;
}
.full li ul li a::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 10px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../img/menu-right.svg);
    background-color: transparent;
    background-repeat: no-repeat;
}
.full li ul li ul {
    display: none;
}
.full li ul li:hover ul {
    display: block;
}
.full li ul li ul li {
    margin-top: 15px;
    margin-right: 0;
}
.full li ul li ul li a {
    font-family: 'Montserrat-400';
    font-size: 16px;
}
@media (max-width: 1399px) {
    .full-bars {
        display: none;
    }
}
/* -----------------full---------------- */
/* =================video=============== */
.video-title {
    margin-top: 15px;
}
.video-title span {
    font-family: 'Montserrat-600';
    color: var(--text-blue-2);
}
.video-in-out {
    position: relative;
}
.video-in-out::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(1, 46, 113, 0.4);
    background-image: url(../img/play.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.video-in-out img {
    width: 100%;
}
@media (min-width: 768px) {
    .video-in-out img {
        height: 300px;
        object-fit: cover;
    }
    .video-title span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
@media screen {
    .video-out {
        margin-top: 15px;
    }
}
/* -----------------video--------------- */
/* =================photos============== */
.photo {}
.photo-title {}
.photo-title span {
    font-family: 'Montserrat-700';
    font-size: 20px;
    color: var(--text-blue-2);
}
.photo-description {
    margin-top: 10px;
}
.photo-description span {
    font-size: 18px;
    color: rgba(7, 7, 7, 1);
}
.photo-list {}
.photo-out a {
    cursor: pointer;
}
.photo-in {}
.photo-in img {
    width: 100%;
}
.photo-date {
    margin-top: 10px;
}
.photo-date span {
    font-family: 'Montserrat-500';
}
@media (min-width: 768px) {
    .anons img {
        object-fit: cover;
        height: 300px;
    }
    .childrens img {
        height: 300px;
        object-fit: cover;
    }
    .photo-out {
        margin-top: 30px;
    }
    .photo-list {
        margin-bottom: 30px;
    }
}
@media (min-width: 1200px) {
    .anons img {
        object-fit: cover;
        height: 400px;
    }
    .childrens img {
        height: 200px;
    }
}
@media (min-width: 1400px) {
    .anons img {
        object-fit: cover;
        height: 500px;
    }
    .childrens img {
        height: 230px;
    }
}
@media (max-width: 767px) {
    .photo-out {
        margin-top: 15px;
    }
    .photo-list {
        margin-bottom: 15px;
    }
}
/* -----------------photos-------------- */
/* =================vacancy detail====== */
.vacancy-detail-title {}
.vacancy-detail-title span {
    font-family: 'Montserrat-700';
    font-size: 24px;
    color: var(--text-blue);
}
.vacancy-detail-pay {}
.vacancy-detail-pay span {
    font-size: 18px;
}
.vacancy-detail-pay small {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: rgba(33, 33, 33, 1);
}
.vacancy-year {
    margin-top: 15px;
}
.vacancy-year .left {
    margin-right: 10px;
}
.vacancy-year .right {
    display: inline-block;
    background-color: var(--bg-left-menu);
    border-radius: 25px;
    padding: 10px 30px;
    margin-right: 10px;
}
.vacancy-detail-pay {
    margin-top: 15px;
}
.vacancy-year {}
.send {
    padding: 30px;
    background-color: var(--bg-left-menu);
}
.send-title {
    margin-bottom: 10px;
}
.send-title span {
    font-family: 'Montserrat-700';
    font-size: 24px;
}
.send-data {
    margin-top: 15px;
}
.send-data label {
    display: block;
    font-family: 'Montserrat-600';
    color: var(--text-blue);
}
.send-data input,
.send-data textarea {
    display: block;
    border: 1px solid transparent;
    margin-top: 5px;
    width: 100%;
    padding: 4px;
    background-color: var(--bg-white);
    color: var(--text-simple);
}
.send-file {
    margin-top: 25px;
    display: flex;
}
.send-icon {
    width: 50px;
}
.send-icon label {
    cursor: pointer;
}
.send-icon label:hover img {
    transform: scale(0.9);
}
.send-icon img {
    max-width: 100%;
    transition: 0.2s;
}
[data-theme="dark"] .send-icon img {
    filter: invert(1);
}
.send-right {
    width: calc(100% - 50px);
}
.send-right input {
    display: none;
}
.send-right label {
    cursor: pointer;
}
.send-right label:hover span {
    color: rgba(239, 127, 26, 1);
}
.send-right span {
    color: var(--file-label);
}
.send-right a {
    color: rgba(239, 127, 26, 1);
}
.send-button {
    text-align: center;
    margin-top: 30px;
    
}
.send-button button {
    color: var(--text-white);
    font-size: 18px;
    padding: 10px 20px;
    background-color: var(--text-blue);
    border: 2px solid var(--text-blue);
}
.send-button button:hover {
    color: var(--text-blue);
    background-color: transparent;
}
.file-error {
    color: red;
    margin-top: 10px;
}
/* -----------------vacancy detail------ */
/* =================vacancy============= */
.vacancy {
    margin-top: 30px;
}
.vacancy a {}
.vacancy-in {
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 20px;
    padding: 30px;
    transition: 0.2s;
}
.vacancy a:hover .vacancy-in {
    border-color: transparent;
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
}
.vacancy-title {}
.vacancy-title span {
    font-family: 'Montserrat-700';
    font-size: 24px;
    color: var(--text-blue);
}
.vacancy-sub-title {
    margin-top: 10px;
}
.vacancy-sub-title span {
    font-family: 'Montserrat-700';
    font-size: 20px;
    color: var(--text-simple);
}
.vacancy-description {}
.vacancy-description {
    color: var(--text-simple);
    margin-top: 15px;
}
.vacancy-data {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vacancy-pay {
    margin-top: 10px;
}
.vacancy-pay .left {
    font-family: 'Montserrat-700';
    font-size: 28px;
    color: var(--text-simple);
    margin-right: 5px;
}
.vacancy-pay .right {
    font-size: 18px;
    color: var(--text-simple);
}
.vacancy-date {
    margin-top: 10px;
}
.vacancy-date img {
    margin-right: 5px;
    transform: translateY(-2px);
}
[data-theme="dark"] .vacancy-date img {
    filter: invert(1);
}
.vacancy-date span {
    color: var(--text-simple);
}

/* -----------------vacancy------------- */
/* =================address============= */
.address-date {
    display: flex;
    margin-top: 15px;
}
.address-left {
    width: 50px;
    text-align: center;
    padding: 0 10px;
}
.address-left img {
    max-width: 100%;
}
[data-theme="dark"] .address-left img {
    filter: invert(1);
}
.address-right {
    width: calc(100% - 50px);
}
.address-title {}
.address-title span {
    font-family: 'Montserrat-600';
    font-size: 18px;
    color: var(--text-black);
}
.address-right a {
    color: var(--text-black);
}
.address-right a:hover {
    color: rgba(240, 153, 74, 1);
}
.address-right p {
    margin-bottom: 0;
}
@media (min-width: 1400px) {
    #map {
        height: 500px;
    }
}
@media (max-width: 1399px) {
    .map-out {
        margin-top: 30px;
    }
    #map {
        height: 500px;
    }
}
@media (max-width: 575px) {
    .map-out {
        margin-top: 15px;
    }
    #map {
        height: 300px;
    }
}
/* -----------------address------------- */
/* =================tender============== */
.tender {
    margin-top: 15px;
}
.tender a {}
.tender a .tender-in {
    border: 1px solid rgba(217, 217, 217, 1);
    background-color: transparent;
    border-radius: 20px;
    padding: 30px 30px;
    transition: 0.2s;
}
.tender a:hover .tender-in {
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
    border-color: transparent;
}
.tender-title {
    border-bottom: 1px solid rgba(217, 217, 217, 1);
    padding-bottom: 15px;
}
.tender-title span {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: var(--text-blue);
}
.tender-description {
    margin-top: 15px;
}
.tender-description span {
    color: var(--text-simple);
}
.tender-date {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tender-left {
    margin-right: 15px;
}
.tender-left img {
    margin-right: 5px;
}
[data-theme="dark"] .tender-left img {
    filter: invert(1);
}
.tender-left span {
    color: var(--text-simple);
}
.tender-right {}
.tender-right span {
    font-family: 'Montserrat-500';
    color: var(--text-blue);
}
.tender-tab .nav-link.active {
    background-color: rgba(4, 59, 135, 1);
}
[data-theme="dark"] .tender-tab .nav-link.active {
    background-color: rgba(0, 0, 0, 1);
}
.tender-tab .nav-link {
    color: var(--text-simple);
}
/* -----------------tender-------------- */
/* =================license============= */
.license {
    margin-top: 15px;
}
.license a {}
.license-in {
    display: flex;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 20px;
    padding: 15px;
    transition: 0.2s;
}
.license a:hover .license-in {
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
    border-color: transparent;
}
.license-icon {
    width: 100px;
    padding: 15px;
    text-align: center;
}
.license-icon img {
    max-width: 100%;
}
[data-theme="dark"] .license-icon img {
    filter: invert(1);
}
.license-icon span {
    margin-top: 10px;
    display: inline-block;
    color: var(--text-leader);
    font-size: 14px;
}
.license-right {
    width: calc(100% - 100px);
}
.license-title {
    max-width: 850px;
}
.license-title span {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: var(--text-leader);
}
.license-description {
    max-width: 850px;
    margin-top: 10px;
}
.license-description span {
    color: var(--text-simple);
}
.sertificate-title {
    margin-top: 10px;
    margin-bottom: 20px;
}
.sertificate-title span {
    font-family: 'Montserrat-700';
    font-size: 28px;
    color: var(--text-black);
}
@media (min-width: 576px) {}
/* -----------------license------------- */
/* =================video=============== */
.video {
    margin-top: 50px;
}
.video-in {}
.video-in video {
    width: 100%;
}
/* -----------------video--------------- */
/* =================detail============== */
.detail-date {}
.detail-date span {
    color: var(--text-blue-3);
}
.detail-title {
    margin-top: 10px;
}
.detail-title span {
    font-family: 'Montserrat-700';
    color: var(--text-title);
    font-size: 24px;
}
.detail-description {
    margin-top: 10px;
}
.detail-description span {
    font-family: 'Montserrat-500';
    color: var(--text-title);
    font-size: 18px;
}
.detail-image {
    margin-top: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.detail-image-in {}
.detail-image-in img {
    min-height: 200px;
}
.detail-image .owl-dots {
    text-align: center;
    margin-top: 15px;
}
.detail-image .owl-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(230, 230, 230, 1);
    margin-left: 2px;
    margin-right: 2px;
}
.detail-image .owl-dots button.active {
    background-color: rgba(0, 29, 152, 1);
}
.detail-image {}
.detail-image .carousel__slide {
    padding: 0;
}
.detail-image .detail-image-in {}
.detail-image .detail-image-in img {
    width: 100%;
    border-radius: 5px;
    height: 400px;
}
.detail-content {
    margin-top: 15px;
}
.detail-content p {
    text-align: justify;
}
.detail-content img {
    max-width: 100%;
}
.detail-content video {}
.detail-content {}
.detail-content blockquote {
    background-color: var(--bg-left-menu);
    padding: 30px 30px 15px 30px;
}
.detail-content blockquote h2,
.detail-content blockquote h3 {
    display: inline-block;
    background-color: rgba(11, 40, 88, 1);
    padding: 5px 15px;
    color: rgba(191, 204, 242, 1);
    font-size: 28px;
    font-family: 'Montserrat-700';
}
.detail-content blockquote p {
    color: var(--text-black);
    margin-top: 10px;
}
.detail-content ul {}
.detail-content ul li {
    min-height: 30px;
    position: relative;
    padding-left: 50px;
    margin-top: 30px;
}
.detail-content ul li::before {
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    background-image: url(../img/right-circle.svg);
    left: 0;
}
.news-share {
    border-top: 1px solid rgba(11, 40, 88, 0.3);
    padding-top: 10px;
    margin-top: 10px;
}
.news-share span {
    font-family: 'Montserrat-600';
    color: var(--text-blue-2);
}
.news-share a {
    margin-left: 5px;
}
.news-share a img {
    transition: 0.2s;
}
.news-share a:hover img {
    transform: scale(1.25);
}
.finans-link {
    color: var(--text-blue);
}
.finans-link {}
.detail-image .carousel__prev {
    border-radius: 50%;
    background-color: rgba(208, 224, 255, 1);
    width: 42px;
    height: 42px;
}
.detail-image .carousel__prev svg {}
.detail-image .carousel__next {
    border-radius: 50%;
    background-color: rgba(208, 224, 255, 1);
    width: 42px;
    height: 42px;
}
.detail-image .carousel__next svg {}
.detail-pdf {
    margin-top: 15px;
}
.detail-pdf object {
    width: 100%;
}
.detail-pdf object iframe {}
.tender-pdf {}
.pdf {
    display: flex;
    border-radius: 6px;
    background-color: var(--bg-left-menu);
    padding: 15px 15px;
}
.pdf-left {}
.pdf-left a {}
.pdf-left a img {}
.pdf-right {
    padding-left: 15px;
}
.pdf-title {}
.pdf-title a {
    font-family: 'Montserrat-500';
    color: var(--text-black);
}
.pdf-size {}
.pdf-size span {
    font-size: 12px;
}
.carousel__pagination {
    padding-left: 0;
}
@media (min-width: 576px) {
    .detail-image .detail-image-in img {
        height: 400px;
    }
    .detail-pdf object {
        height: 600px;
    }
}
@media (max-width: 575px) {
    .detail-image .detail-image-in img {
        height: 250px;
    }
    .detail-pdf object {
        height: 300px;
    }
}
/* -----------------detail-------------- */
/* =================local=============== */
.local {}
.local-in {
    padding: 30px;
    background-color: var(--bg-white);
}
.local-title {
    margin-top: 30px;
}
.local-title span {
    font-family: 'Montserrat-700';
    color: var(--text-black)
}
.local-title-2 {
    margin-top: 30px;
}
.local-title-2 span {
    font-family: 'Montserrat-700';
    color: var(--text-blue)
}
.local-content {}
.local-content p {}
.local-content img {}
.local-left {}
.local-left ul {}
.local-left ul li {
    margin-top: 30px;
    padding-left: 50px;
    position: relative;
}
.local-left ul li::before {
    position: absolute;
    content: '';
    width: 28px;
    height: 28px;
    left: 0;
    top: 0;
    background-image: url(../img/li.svg);
    background-repeat: no-repeat;
}
.local-right {}
.local-right ul {}
.local-right ul li {
    margin-top: 30px;
}
.local-result {}
.local-result ul {}
.local-result ul li {
    margin-top: 30px;
    padding-left: 50px;
    position: relative;
    min-height: 38px;
}
.local-result ul li::before {
    position: absolute;
    content: '';
    width: 38px;
    height: 38px;
    left: 0;
    top: 0;
    background-image: url(../img/li-2.svg);
}
.locale-img {
    margin-top: 30px;
}
.locale-img img {
    width: 100%;
}
.locale-link {
    margin-right: 30px;
    margin-top: 15px;
}
.locale-link a {
    font-family: 'Montserrat-500';
    color: rgba(6, 89, 184, 1);
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.locale-link a svg {
    margin-right: 5px;
    fill: rgb(1, 44, 110);
}
.locale-link a:hover {
    color: rgba(239, 127, 26, 1);
}
.locale-link a:hover svg {
    fill: rgba(239, 127, 26, 1);
}
.locale-app {
    margin-top: 15px;
}
.locale-app a {
    display: inline-block;
    margin-right: 30px;
    margin-top: 15px;
}
.locale-app a img {
    max-width: 300px;
    max-height: 100px;
    transition: 0.2s;
}
.locale-app a:hover img {
    transform: scale(0.9);
}
.point {
    margin-top: 15px;
}
.point a {
    font-family: 'Montserrat-500';
    color: rgba(6, 89, 184, 1);
    text-transform: uppercase;
}
.point a img {
    margin-right: 8px;
    transition: 0.2s;
}
.point a:hover img {
    transform: scale(0.8);
}
.point a span {}
.local-stat {}
.local-stat-in {
    border-left: 3px solid rgba(239, 127, 26, 1);
    padding-left: 15px;
    margin-top: 30px;
}
.local-stat-title {
    min-height: 24px;
}
.local-stat-title span {
    text-transform: uppercase;
}
.local-stat-number {}
.local-stat-number .left {
    font-family: 'Montserrat-700';
    color: rgba(6, 89, 184, 1);
}
.local-stat-number .right {
    font-family: 'Montserrat-700';
    font-size: 20px;
    color: var(--text-black);
    margin-left: 8px;
}
.local-stat-description {}
.local-stat-description span {
    text-transform: uppercase;
}
@media (min-width: 576px) {
    .local-title span {
        font-size: 28px;
    }
    .local-title-2 span {
        font-size: 28px;
    }
    .local-stat-number {
        min-height: 90px;
    }
    .local-stat-number .left {
        font-size: 60px;
    }
}
@media (min-width: 1200px) {
    .locale-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 575px) {
    .local-title span {
        font-size: 20px;
    }
    .local-title-2 span {
        font-size: 20px;
    }
    .local-stat-number .left {
        font-size: 24px;
    }
}
/* -----------------local--------------- */
/* =================leader============== */
.leader-list {
    background-color: var(--bg-white);
    padding: 30px;
}
.leader {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}
.leader-image {}
.leader-image img {
    width: 190px;
    height: 190px;
    border-radius: 50%;
}
.leader-name {}
.leader-name span {
    font-family: 'Montserrat-700';
    font-size: 24px;
    color: var(--text-leader);
}
.leader-position {}
.leader-position span {
    color: var(--text-leader);
}
.leader-data {
    margin-top: 10px;
}
.leader-data a {}
.leader-data img {}
[data-theme="dark"] .leader-data img {
    filter: contrast(0);
}
.leader-data span {
    color: var(--text-black);
    margin-left: 8px;
    display: inline-block;
}
.leader-title {
    margin-top: 20px;
}
.leader-title span {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: var(--text-leader);
}
.leader-description {}
.leader-description span {
    font-family: 'Montserrat-500';
    color: var(--text-black);
}
@media (min-width: 768px) {
    .leader-row {
        display: flex;
        align-items: center;
    }
    .leader-left {
        width: 190px;
    }
    .leader-right {
        padding-left: 30px;
        width: calc(100% - 190px);
    }
}
@media (min-width: 1400px) {
    .leader {
        padding-left: 100px;
    }
}
@media (max-width: 767px) {
    .leader-image {
        text-align: center;
    }
    .leader-right {
        margin-top: 15px;
    }
}
/* -----------------leader-------------- */
/* =================news list=========== */
.news-list {
    padding: 15px;
    background-color: var(--bg-white);
}
.news-date {
    padding-left: 80px;
}
.news-date-in {
    position: relative;
    padding-top: 15px;
}
.news-date-in::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    background-color: rgba(0, 29, 152, 1);
    top: 0;
    left: -16px;
}
.news-date-in::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 29, 152, 1);
    left: -20.5px;
    top: 20px;
    background-color: rgba(255, 255, 255, 1.0);
}
.news-date-in span {
    color: var(--text-blue-3);
}
.news-detail {
    display: flex;
}
.news-detail-left {
    width: 80px;
    position: relative;
    padding-top: 15px;
}
.news-detail-left::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    background-color: rgba(0, 29, 152, 1);
    top: 0;
    right: 15px;
}
.news-detail-left::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 29, 152, 1);
    right: 10px;
    top: 22px;
    background-color: rgba(255, 255, 255, 1.0);
}
.news-detail-clock {}
.news-detail-clock span {}
.news-detail-right {
    width: calc(100% - 80px);
    padding-top: 15px;
}
.news-detail-title {}
.news-detail-title a {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: var(--text-title);
}
.news-detail-title a:hover {
    color: rgba(239, 127, 26, 1);
}
.news-detail-image {
    margin-top: 15px;
}
.news-detail-image a {}
.news-detail-image a img {
    width: 100%;
}
.news-detail-description {
    margin-top: 15px;
}
.news-detail-description a {
    color: var(--text-black);
}
/* -----------------news list----------- */
/* =================list================ */
.list {
    min-height: 360px;
}
.list-right {
    background-color: var(--bg-white);
}
.list-title {}
.list-title span {
    font-family: 'Montserrat-700';
    font-size: 28px;
    color: var(--text-black);
}
.list-description {
    margin-top: 10px;
}
.list-description span {
    font-family: 'Montserrat-300';
    color: var(--text-black);
    font-size: 14px;
}
.list-out {}
.list-in {
    margin-top: 30px;
}
.list-in a {}
.list-card {
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 20px;
    padding: 15px;
    transition: 0.2s;
}
.list-in a:hover .list-card {
    border-color: rgba(255, 255, 255, 1);
    background: var(--bg-white) 0% 0% no-repeat padding-box;
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
}
.list-icon {
    height: 90px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}
.list-icon img {
    max-height: 100%;
}
[data-theme="dark"] .list-icon img {
    filter: invert(1);
}
.list-domain {
    margin-top: 20px;
}
.list-domain span {
    font-family: 'Montserrat-500';
    font-size: 20px;
    color: var(--text-black);
    text-transform: uppercase;
}
.list-text {
    margin-top: 20px;
}
.list-text span {
    font-family: 'Montserrat-300';
    color: var(--text-black);
}
.list-link {
    margin-top: 15px;
}
.list-link img {
    max-width: 36px;
}
[data-theme="dark"] .list-link img {
    filter: invert(1);
}
.list-link span {
    font-family: 'Montserrat-300';
    color: var(--text-black);
    margin-left: 8px;
}
.list-left {
    background-color: var(--bg-left-menu);
    padding: 15px;
}
.list-left ul {}
.list-left ul li {
    margin-top: 2px;
}
.list-left ul li a {
    display: block;
    font-family: 'Montserrat-500';
    color: var(--text-blue);
    text-transform: uppercase;
    padding: 15px 15px;
}
.list-left ul li a:hover,
.list-left ul li a[aria-current="page"] {
    background-color: rgba(1, 44, 110, 1);
    color: rgba(243, 243, 243, 1);
}
[data-theme="dark"] .list-left ul li a:hover,
[data-theme="dark"] .list-left ul li a.active,
[data-theme="dark"] .list-left ul li a[aria-current="page"] {
    background-color: rgba(0, 0, 0, 1);
}
.list-left ul li a.active {
    background-color: rgba(1, 44, 110, 1);
    color: rgba(243, 243, 243, 1);
}
.list-left ul li button {
    display: block;
    font-family: 'Montserrat-500';
    color: var(--text-blue);
    text-transform: uppercase;
    padding: 15px 15px;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.list-left ul li button:hover,
.list-left ul li button.active {
    background-color: rgba(1, 44, 110, 1);
    color: rgba(243, 243, 243, 1);
}
[data-theme="dark"] .list-left ul li button:hover,
[data-theme="dark"] .list-left ul li button.active {
    background-color: rgba(0, 0, 0, 1);
    color: rgba(243, 243, 243, 1);
}
.list-left ul li {}
.list-left ul li ul {
    padding-left: 10px;
}
.list-left ul li ul li {}
.list-left ul li ul li a {
    font-size: 16px;
    padding: 10px 15px;
}
.list-left ul li ul li a {}
.list-drop {}
.list-drop span {}
.list-drop span {}
.list-drop svg {
    fill: var(--text-blue);
    margin-left: 10px;
    transition: 0.2s;
}
.list-drop:hover svg {
    fill: rgba(243, 243, 243, 1);
}
a[aria-expanded="false"] svg {
    transform: rotate(0deg);
}
a[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
@media (min-width: 992px) {
    .list-description span {
        font-size: 20px;
    }
    .list-text span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        height: 96px;
    }
}
@media (min-width: 1200px) {
    .list-right {
        padding: 30px;
    }
}
@media (min-width: 1700px) {
    .list-left ul li a {
        font-size: 20px;
    }
}
@media (max-width: 1199px) {
    .list-right {
        padding-top: 15px;
    }
}
/* -----------------list---------------- */
/* =================page================ */
.page {
    position: relative;
}
.page::before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(1, 5, 79, 1);
    z-index: -2;
    height: calc(100% + 150px);
}
.page::after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/banner.png);
    z-index: -1;
    background-position: center;
    height: calc(100% + 150px);
}
[data-theme="dark"] .page::after {
    filter: brightness(0.25);
}
.page-title {}
.page-title h1 {
    font-size: 24px;
    margin:0;
    line-height:36px;
    font-family: 'Montserrat-600';
    color: rgba(255, 255, 255, 1);
}
.page-home {}
.page-home a {
    font-family: 'Montserrat-300';
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
}
.page-home a:hover {
    color: rgba(239, 127, 26, 1);
}
@media (min-width: 576px) {
    .page-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (min-width: 1200px) {
    .page-container {
        padding-left: 80px;
        padding-right: 80px;
    }
    .page-left {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .page-title h1 {
        font-size: 24px;
    }
}
@media (min-width: 1400px) {
    .page-in {
        padding-top: 100px;
    }
}
@media (min-width: 1500px) {
    .page-container {
        padding-left: 140px;
        padding-right: 140px;
    }
}
@media (min-width: 1700px) {
    .page-title h1 {
        font-size: 36px;
    }
}
@media (min-width: 2400px) {
    .page-container {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 1399px) {
    .page-list {
        margin-top: 15px;
    }
    .page-in {
        padding-top: 15px;
    }
}
@media (max-width: 1199px) {
    .page-title h1 {
        font-size: 24px;
    }
}
@media (max-width: 575px) {
    .page-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* -----------------page---------------- */
/* =================pm================== */
.pm {
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
}
.pm-out {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.pm-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pm-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pm-in {
    height: 340px;
    position: relative;
    padding: 30px;
}
.pm-title {}
.pm-title a {
    font-family: 'Montserrat-500';
    color: rgba(255, 255, 255, 1);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.pm-description {}
.pm-description span {
    font-family: 'Montserrat-500';
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.pm-logo {}
.pm-logo {}
.pm-logo img {
    max-height: 70px;
    max-width: 180px;
}
.pm-link {}
.pm-link a {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 1);
    padding: 10px 30px;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
}
.pm-link a:hover {
    border-color: rgba(239, 127, 26, 1);
    color: rgba(239, 127, 26, 1);
}
.pm .owl-carousel.owl-hidden {
    opacity: 1;
}
.pm .carousel__slide {
    padding: 0;
}
.pm .carousel {
    text-align: left;
}
.carousel-next {}
.pm .carousel__pagination-button::after {
    border-radius: 2px;
}
@media (min-width: 576px) {
    .pm {
        margin-top: 100px;
    }
    .pm-title a {
        font-size: 29px;
        height: 87px;
    }
    .pm-description span {
        -webkit-line-clamp: 5;
    }
    .pm-content {
        height: 215px;
    }
    .pm-logo-link {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }
}
@media (min-width: 700px) {
    .carousel-next {
        width: 2000px;
    }
    .pm .carousel__pagination {
        display: none;
    }
}
@media (max-width: 575px) {
    .pm-title a {
        font-size: 24px;
    }
    .pm-description {
        margin-top: 10px;
    }
    .pm-description span {
        -webkit-line-clamp: 2;
    }
    .pm-logo {
        margin-top: 15px;
    }
    .pm-link {
        margin-top: 15px;
    }
}
/* -----------------pm------------------ */
/* =================footer============== */
footer {
    min-height: 400px;
    background: transparent linear-gradient(111deg, rgba(0, 0, 142, 1) 0%, rgba(1, 114, 128, 1) 100%) 0% 0% no-repeat padding-box;
}
[data-theme="dark"] footer {
    background: transparent linear-gradient(111deg, rgba(0, 0, 48, 1) 0%, rgba(1, 12, 36, 1) 100%) 0% 0% no-repeat padding-box;
}
.footer-left {
    margin-top: 15px;
}
.f-logo {}
.f-logo a {}
.f-logo a img {
    max-width: 100%;
}
.f-social {}
.f-social a {
    margin-right: 15px;
}
.f-social a img {}
.f-menu {}
.f-menu li {
    margin-top: 15px;
}
.f-menu li a {
    color: rgba(255, 255, 255, 1);
}
.f-menu li a:hover {
    color: rgba(239, 127, 26, 1);
}
.f-menu li a img {
    margin-right: 10px;
}
.f-menu li a span {}
.f-card {
    display: flex;
    align-items: center;
    padding: 10px;
}
.f-card-left {
    width: 100px;
    padding: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.f-card-left img {
    max-width: 100%;
    max-height: 100px;
}
.f-card-right {
    width: calc(100% - 100px);
    padding-left: 15px; 
}
.f-card-title {}
.f-card-title span {
    font-family: 'Montserrat-500';
    color: rgba(225, 225, 225, 1);
}
.f-card-number {
    margin-top: 5px;
}
.f-card-number a {
    color: rgba(255, 255, 255, 1);
}
.f-card-number span {
    color: rgba(255, 255, 255, 1);
}
.f-1 {
    background-color: rgba(255, 255, 255, 0.1);
}
.f-2 {
    background-color: rgba(255, 255, 255, 0.2);
}
.f-3 {
    background-color: rgba(255, 255, 255, 0.1);
}
.copy {
    text-align: center;
}
.copy span {
    font-size: 14px;
    color: rgba(225, 225, 225, 1);
}
.home-social {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
}
.home-social ul {
    position: relative;
}
.home-social ul::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 50px;
    top: -80px;
    left: 50%;
    background-color: rgba(255, 255, 255, 1);
}
.home-social ul::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 50px;
    bottom: -80px;
    left: 50%;
    background-color: rgba(255, 255, 255, 1);
}
.home-social ul li {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
.home-social ul li a {
    box-shadow: 10px 10px 30px rgb(0 0 142 / 45%);
    display: inline-block;
    border-radius: 50%;
}
.home-social ul li a img {
    max-width: 50px;
    max-height: 50px;
    transition: 0.2s;
}
.home-social ul li a:hover img {
    transform: scale(1.15);
}
@media (min-width: 576px) {
    footer {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .copy {
        margin-top: 50px;
    }
}
@media (min-width: 1200px) {
    .footer-left {
        position: relative;
        height: 100%;
        min-height: 100px;
    }
    .f-social {
        margin-top: 30px;
    }
    .f-card {
        height: 100%;
    }
    .home-social {
        right: 19px;
    }
}
@media (min-width: 1500px) {
    .home-social {
        right: 49px;
    }
}
@media (max-width: 1199px) {
    .f-social {
        margin-top: 15px;
    }
    .f-form {
        margin-top: 15px;
    }
    .home-social {
        display: none;
    }
}
@media (max-width: 575px) {
    footer {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .copy {
        margin-top: 30px;
    }
    .copy br {
        display: none;
    }
}
/* -----------------footer-------------- */
/* =================location============ */
.location {
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
}
.location::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/map.png);
    z-index: -2;
}
.location::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(1, 46, 113, 0.5), rgba(1, 43, 107, 0.6));
    z-index: -1;
}
.location-in {}
.location-in button {
    display: flex;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 1);
    align-items: center;
}
.location-in button img {
    margin-right: 15px;
    max-width: 50px;
}
.location-in button span {
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
}
@media (min-width: 576px) {
    .location {
        margin-top: 120px;
    }
    .location-in button {
        padding: 30px;
    }
}
@media (max-width: 575px) {
    .location {
        margin-top: 30px;
    }
    .location-in button {
        padding: 15px;
    }
}
/* -----------------location------------ */
/* =================contact============= */
.contact-left {}
.contact-input label {
    font-size: 14px;
    color: rgba(109, 109, 109, 1);
}
.contact-input .form-control {
    border-radius: 0;
    background-color: var(--bg-white);
    color: var(--text-simple);
}
.contact-submit {
    text-align: right;
}
.contact-submit button {
    display: inline-block;
    background-color: var(--text-blue);
    border: 2px solid var(--text-blue);
    color: var(--text-white);
    font-size: 18px;
    padding: 6px 30px;
}
.contact-submit button:hover {
    background-color: transparent;
    color: var(--text-blue);
}
.phone {
    display: flex;
    background: var(--bg-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 15px rgba(0, 0, 142, 0.1);
    align-items: center;
}
.phone-left {
    width: 120px;
    min-height: 120px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone-left img {
    max-width: 100%;
    max-height: 100px;
}
.phone-right {
    width: calc(100% - 120px);
    padding: 15px;
}
.phone-title {}
.phone-title span {
    font-family: 'Montserrat-600';
    font-size: 17px;
    color: var(--text-simple);
}
.phone-number {}
.phone-number a {
    font-size: 18px;
    color: var(--text-blue-2);
}
.phone-number span {
    font-size: 18px;
    color: var(--text-blue-2);
}
.bg-green {
    background-color: rgba(46, 137, 149, 1);
}
.bg-blue {
    background-color: rgba(1, 44, 110, 1);
}
@media (min-width: 576px) {
    .contact {
        margin-top: 120px;
    }
    .contact-left {
        background: var(--bg-white) 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 25px rgba(0, 0, 142, 0.15);
        padding: 30px;
        margin-top: 30px;
    }
    .phone {
        margin-top: 30px;
    }
}
@media (max-width: 575px) {
    .contact-right {
        margin-top: 30px;
    }
}
/* -----------------contact------------- */
/* =================clients============= */
.main-title {}
.main-title span {
    font-family: 'Montserrat-700';
    font-size: 28px;
    color: var(--text-blue-2);
}
.main-decription {
    max-width: 700px;
    margin-top: 10px;
}
.main-decription span {
    font-size: 18px;
}
.clients {}
.clients-out {}
.clients-out {
    margin-top: 15px;
}
.clients-out a {}
.clients-in {
    transition: 0.2s;
    border-radius: 10px;
    padding: 15px;
}
.clients-img {}
.clients-img img {
    max-height: 150px;
    max-width: 100%;
    transition: 0.2s;
}
.client-title {
    text-align: center;
}
.client-title span {
    font-family: 'Montserrat-500';
    font-size: 16px;
    color: var(--text-simple);
}
@media (min-width: 576px) {
    .clients {
        margin-top: 100px;
    }
    .clients-img {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .clients-out a:hover img {
        transform: scale(0.7);
    }
    .clients-out a:hover .clients-in {
        box-shadow: 0px 2px 25px rgba(0, 0, 142, 0.15);
    }
    .clients-out {
        height: 100%;
    }
    .clients-in {
        height: 100%;
    }
}
@media (max-width: 575px) {
    .main-title {
        text-align: center;
    }
    .clients {
        margin-top: 30px;
    }
    .clients-img {
        text-align: center;
        padding-bottom: 10px;
    }
}
/* -----------------clients------------- */
/* =================branch============== */
.branch {}
.branch-left {
    padding: 36px 30px;
    background: transparent linear-gradient(136deg, rgba(0, 0, 142, 1) 0%, rgba(1, 114, 128, 1) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
    position: relative;
}
.branch-title span {
    font-family: 'Montserrat-700';
    color: rgba(255, 255, 255, 1);
}
.branch-image img {
    max-width: 120px;
    max-height: 100px;
}
.branch-detail {
    display: flex;
}
.branch-number {
    width: 64px;
    background-color: var(--bg-left-menu);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.branch-number span {
    font-family: 'Montserrat-700';
    color: var(--text-branch);
}
.branch-name {
    width: calc(100% - 64px);
    padding-left: 15px;
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    display: flex;
    align-items: center;
}
.branch-name::before {
    position: absolute;
    content: '';
    width: 80px;
    height: 2px;
    background-color: rgba(213, 131, 0, 1);
    bottom: 0;
    left: 15px;
}
.branch-name span {
    font-family: 'Montserrat-500';
    font-size: 20px;
    color: var(--text-black);
}
.branch-col:nth-child(12) .branch-name::before {
    background-color: transparent;
}
@media (min-width: 576px) {
    .branch {
        margin-top: 100px;
        background: var(--bg-white) 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 25px rgba(0, 0, 142, 0.15);
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .branch-left {
        min-height: 400px;
    }
    .branch-title {
        margin-top: 100px;
    }
    .branch-title span {
        font-size: 28px;
    }
    .branch-image {
        position: absolute;
        right: 30px;
        bottom: 30px;
    }
    .branch-number span {
        font-size: 38px;
    }
}
@media (min-width: 992px) {
    .branch-detail {
        height: 100%;
    }
    .branch-col:nth-child(11) .branch-name::before {
        background-color: transparent;
    }
}
@media (min-width: 1200px) {
    .branch-left {
        transform: translateY(-70px);
        height: calc(100% + 70px);
    }
}
@media (max-width: 1199px) {
    .branch-right {
        padding-top: 30px;
    }
}
@media (max-width: 575px) {
    .branch {
        margin-top: 30px;
    }
    .branch-title span {
        font-size: 24px;
    }
    .branch-image {
        text-align: right;
        margin-top: 30px;
    }
    .branch-number span {
        font-size: 24px;
    }
}
/* -----------------branch-------------- */
/* =================menu================ */
.menu {}
.navbar-toggler {
    padding-left: 0;
    padding-right: 0;
}
.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}
.menu .navbar {}
.menu .navbar-nav {}
.menu .navbar-nav .dropdown {}
.menu .navbar-nav .dropdown:hover .nav-link img {
    transform: rotate(180deg);
}
.navbar-nav .show>.nav-link {
    color: rgba(255, 255, 255, 1);
}
.menu .nav-item {}
.menu .nav-link {
    font-family: 'Montserrat-300';
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
}
.menu .nav-link {}
.menu .nav-link span {}
.menu .nav-item {}
.menu .nav-item .dropdown-menu {
    margin-top: 0;
}
.menu .nav-item .dropdown-menu .dropdown-item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 30px;
    transition: 0.2s;
}
.menu .nav-item .dropdown-menu .dropdown-item:hover {
    padding-left: 30px;
    padding-right: 20px;
}
.menu .nav-item .dropdown-menu .dropdown {}
.menu .nav-item .dropdown-menu .dropdown>.dropdown-item {
    display: flex;
    justify-content: space-between;
}
.menu .nav-item .dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0;
}
.menu .nav-item .dropdown-menu .dropdown:hover .dropdown-menu {
    display: block;
}
.menu .nav-item .dropdown-menu .dropdown .dropdown-menu .dropdown-item {
    white-space: normal;
}
.menu .nav-link img {
    margin-left: 4px;
    transition: 0.2s;
}
[data-theme="dark"] .menu .dropdown-item img {
    filter: invert(1);
}
.lang-button {
    background-color: transparent;
    border: none;
}
.menu-right {
    display: flex;
    align-items: center;
}
.lang {}
.lang-link {
    background-color: transparent;
    border: none;
    font-family: 'Montserrat-600';
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
    text-transform: capitalize;
}
.lang-link:hover {
    color: rgba(240, 153, 74, 1);
}
.lang ul {
    background-color: transparent;
    min-width: auto;
    border: none;
    box-shadow: none;
    padding-top: 0;
}
.lang ul li {
    text-align: center;
}
.lang ul li button {
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    border-top: 1px solid rgba(255, 255, 255, 1);
}
.lang ul li button:hover {
    color: rgba(240, 153, 74, 1);
}
.header-search {
    border-right: 1px solid rgba(255, 255, 255, 1);
    padding-right: 15px;
    margin-right: 10px;
}
.header-search button {
    border: none;
    background-color: transparent;
}
.header-search button svg {
    fill: rgba(255, 255, 255, 1);
}
.header-search button:hover svg,
.header-search button.active svg {
    fill: rgba(240, 153, 74, 1);
}
.eye-btn {
    border-right: 1px solid rgba(255, 255, 255, 1);
    padding-right: 20px;
    margin-right: 15px;
}
.eye-btn svg {
    fill: rgba(255, 255, 255, 1);
}
.eye-btn:hover svg {
    fill: rgba(240, 153, 74, 1);
}
.special-title {
    font-family: 'Montserrat-600';
    color: var(--text-blue);
    font-size: 18px;
}
.special-sub-title,
.sliderText {
    font-family: 'Montserrat-500';
    color: var(--text-blue);
    font-size: 18px;
}
.search-screen {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-screen-in {}
.search-screen-in form {
    background-color: rgba(255, 255, 255, 1);
    padding: 10px;
}
.search-screen-in form input {
    padding: 5px 10px;
    border: none;
}
.search-screen-in form input::placeholder {
    color: rgba(108, 108, 108, 1);
    font-style: italic;
}
.search-screen-in form button {
    border: none;
    background-color: transparent;
}
.search-screen-in form button svg {}
.search-screen-in form button {}
.search-not-result {}
.search-not-result span {
    color: rgba(239, 127, 26, 1);
}
.theme-switch {
    margin-right: 10px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, 1);
}
.theme-switch button {
    padding: 1px 8px;
    display: inline-block;
    border-radius: 30px;
    border: 1px solid #fff;
    background-color: transparent
}
.theme-switch button svg {}
.theme-switch button svg.theme-light {
    margin-right: 6px;
    fill: rgba(255, 255, 255, 1);
    transition: 0.2s;
}
.theme-switch button svg.theme-dark {
    opacity: 0;
    fill: rgba(255, 255, 255, 1);
    transition: 0.2s;
}
.theme-switch button svg .theme-dark {}
[data-theme="dark"] .theme-switch {}
[data-theme="dark"] .theme-switch button {}
[data-theme="dark"] .theme-switch button svg.theme-light {
    opacity: 0;
    transition: 0.2s;
}
[data-theme="dark"] .theme-switch button svg.theme-dark {
    opacity: 1;
    transition: 0.2s;
}
.opacity {
    opacity: 0;
}
@media (min-width: 1400px) {
    .menu {
        position: absolute;
        top: 10px;
        z-index: 100;
        width: 100%;
        left: 0;
        padding-left: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 80px;
    }
    .menu .navbar-nav .dropdown:hover>.dropdown-menu {
        display: block;
    }
    .menu .nav-item {
        margin-right: 3vw;
    }
    .search-screen-in form input {
        min-width: 300px;
    }
}
@media (min-width: 1500px) {
    .menu::before {
        position: absolute;
        content: '';
        width: 1px;
        height: 100vh;
        background-color: rgba(255, 255, 255, 1.0);
        top: -10px;
        left: 80px;
    }
    .menu {
        padding-left: 140px;
        padding-right: 140px;
    }
}
@media (max-width: 1399px) {
    .menu {
        padding-top: 10px;
        position: relative;
        z-index: 60;
    }
    .menu-right {
        position: absolute;
        right: 0;
        top: 25px;
    }
    .menu ul .show .dropdown-menu {
        display: block;
        border: none;
        padding-left: 15px;
    }
}
@media (max-width: 575px) {
    .menu {
        padding-top: 10px;
    }
}
/* -----------------menu---------------- */
/* =================banner============== */
/* rgba(1, 5, 79, 1) */
/* rgba(1, 46, 113, 1) */
.banner {
    position: relative;
    z-index: 2;
    background-color: rgba(1, 46, 113, 0.2);
}
.banner::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(1, 5, 79, 1);
    z-index: -2;
}
.banner-left {}
.uzinfocom {}
.uzinfocom-in {}
.uzinfocom-title {}
.uzinfocom-title span {
    font-family: 'Montserrat-600';
    color: rgba(255, 255, 255, 1);
}
.uzinfocom-svg {
    margin-top: 10px;
}
.uzinfocom-svg img {}
.uzinfocom-svg img {
    max-width: 100%;
}
.uzinfocom-description {
    margin-top: 10px;
}
.uzinfocom-description h1 { 
    margin:0;
    font-size: 16px;
    line-height:24px;
    font-family: 'Montserrat-300';
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
}
.servive {}
.service-out {
    padding-top: 15px;
    padding-bottom: 15px;
}
.service-out a {}
.service-in {
    display: flex;
    align-items: center;
}
.service-icon {
    width: 50px;
    text-align: center;
}
.service-icon img {
    max-width: 100%;
}
.service-title {
    width: calc(100% - 50px);
    padding-left: 20px;
}
.service-title span {
    font-family: 'Montserrat-300';
    color: rgba(255, 255, 255, 1);
}
.service-col:nth-child(1) .service-out {
    border-bottom: 1px dashed rgba(255, 255, 255, 1);
}
.service-col:nth-child(2) .service-out {
    border-bottom: 1px dashed rgba(255, 255, 255, 1);
}
.service-col:nth-child(3) .service-out {
    border-bottom: 1px dashed rgba(255, 255, 255, 1);
}
.service-col:nth-child(4) .service-out {
    border-bottom: 1px dashed rgba(255, 255, 255, 1);
}
.banner-right {}
.project {}
.project-row {
    display: flex;
    flex-wrap: wrap;
}
.project-col {}
.project-col a {}
.project-in {
    position: relative;
}
.icon .project-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.icon .project-img img {
    max-width: 100%;
    max-height: 100%;
}
.image .project-img {
    position: relative;
    z-index: 1;
}
.image .project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-all {}
.project-all span {
    font-family: 'Montserrat-700';
    color: rgba(255, 255, 255, 1);
}
.project-all a:hover span {
    color: rgba(239, 127, 26, 1);
}
.project-after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.icon .project-after {
    z-index: 0;
}
.image .project-after {
    z-index: 2;
}
.icon .project-after,
.image .project-after,
.color .project-after {
    animation-name: project;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.id-1 .project-after {
    animation-delay: -5s;
}
.id-2 .project-after {
    animation-delay: -4.5s;
}
.id-3 .project-after {
    animation-delay: -4s;
}
.id-4 .project-after {
    animation-delay: -3.5s;
}
.id-5 .project-after {
    animation-delay: -3s;
}
.id-6 .project-after {
    animation-delay: -2.5s;
}
.id-7 .project-after {
    animation-delay: -2s;
}
.id-8 .project-after {
    animation-delay: -1.5s;
}
.id-9 .project-after {
    animation-delay: -1s;
}
.id-10 .project-after {
    animation-delay: -0.5s;
}
.id-11 .project-after {
    animation-delay: 0s;
}
.id-12 .project-after {
    animation-delay: 0.5s;
}
.id-13 .project-after {
    animation-delay: -5.5s;
}
.id-14 .project-after {
    animation-delay: -6s;
}
.id-15 .project-after {
    animation-delay: -6.5s;
}
.id-16 .project-after {
    animation-delay: -7s;
}
.id-17 .project-after {
    animation-delay: -7.5s;
}
.id-18 .project-after {
    animation-delay: -8s;
}
.id-19 .project-after {
    animation-delay: -8.5s;
}
.id-20 .project-after {
    animation-delay: -9s;
}
.id-21 .project-after {
    animation-delay: -9.5s;
}
.id-22 .project-after {
    animation-delay: -10s;
}
.id-23 .project-after {
    animation-delay: -9.5s;
}
.id-24 .project-after {
    animation-delay: -9s;
}
.id-25 .project-after {
    animation-delay: -8.5s;
}
.id-26 .project-after {
    animation-delay: -7s;
}
.id-27 .project-after {
    animation-delay: -6.5s;
}
.id-28 .project-after {
    animation-delay: -6s;
}
@keyframes project {
    0% {
        background-color: rgba(239, 127, 26, 0.1);
    }
    20% {
        background-color: rgba(0, 144, 255, 0.3);
    }
    35% {
        background-color: rgba(153, 17, 21, 0.4);
    }
    50% {
        background-color:  rgba(239, 127, 26, 0.4);
    }
    65% {
        background-color: rgba(0, 165, 81, 0.3);
    }
    80% {
        background-color: rgba(27, 99, 196, 0.4);
    }
    100% {
        background-image: rgba(239, 127, 26, 0.1);
    }
}
.icon a .project-img {
    transition: 0.2s;
    opacity: 1;
}
.icon a:hover .project-img {
    transform: rotateY(180deg);
    opacity: 0;
}
.project-name {
    padding: 10px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.project-name span {
    font-family: 'Montserrat-500';
    color: rgba(225, 225, 225, 1.0);
    font-size: 12px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}
.icon a .project-name {
    opacity: 0;
    transition: 0.2s;
    transform: rotateY(180deg);
}
.icon a:hover .project-name {
    opacity: 1;
    transform: rotateY(0deg);
}
.position-category {
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/banner.png);
    z-index: -1;
    background-position: center;
}
html[data-theme="dark"] .banner::after {
    filter: brightness(0.25);
}
@media (min-width: 576px) {
    .b-container {
        background-image: url(../img/bg.svg);
        background-repeat: no-repeat;
        background-position: center 50px;
        background-size: 90%;
    }
    .b-container {
        padding-left: 30px;
        padding-right: 30px;
    }
    .uzinfocom {}
    .project {
        margin-top: 50px;
    }
    .project-col {
        width: 20%;
    }
    .project-img,
    .position-category {
        height: 100px;
    }
    .project-all {
        width: 40%;
    }
    .project-all span {
        font-size: 18px;
    }
}
@media (min-width: 768px) {
    .uzinfocom {
        height: 45vh;
        display: flex;
        align-items: center;
        min-height: 300px;
    }
    .service-out {
        height: 100%;
        max-width: 325px;
    }
    .project-img,
    .position-category {
        height: 150px;
    }
}
@media (min-width: 1200px) {
    .b-container {
        padding-left: 80px;
        padding-right: 80px;
        position: relative;
    }
    .b-container {
        background-image: url(../img/bg.svg);
        background-repeat: no-repeat;
        background-position: 50px 15vh;
        background-size: auto;
    }
    .uzinfocom-title span {
        font-size: 1.36vw;
    }
    .uzinfocom-description h1 {
        font-size: 1.1vw;
    }
    .project-col {
        width: 20%;
    }
    .project-img,
    .position-category {
        height: 16.66vh;
    }
    .project-all {
        width: 40%;
    }
    .project-all span {
        font-size: 30px;
    }
}
@media (min-width: 1400px) {
    .uzinfocom {
        align-items: flex-end;
    }
    .servive {
        height: 55vh;
        display: flex;
        align-items: center;
        min-height: 300px;
    }
    .project {
        margin-top: 0;
    }
}
@media (min-width: 1500px) {
    .b-container {
        background-image: url(../img/bg.svg);
        background-repeat: no-repeat;
        background-position: 100px 15vh;
    }
    .b-container {
        padding-left: 140px;
        padding-right: 140px;
    }
    .service-title span {
        font-size: 19px;
    }
    .project-all span {
        font-size: 40px;
    }
}
@media (min-width: 2400px) {
    .b-container {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
    .uzinfocom {}
    .uzinfocom-title span {
        font-size: 26px;
    }
    .uzinfocom-description h1 {
        font-size: 21px;
    }
    .servive {
        display: flex;
        align-items: center;
    }
    .project-col {
        width: 20%;
    }
    .project-img {}
}
@media (max-width: 1199px) {}
@media (max-width: 767px) {
    .uzinfocom {
        padding-top: 30px;
    }
    .uzinfocom-in {
        margin-top: 50px;
    }
    .service-col:nth-child(5) .service-out {
        border-bottom: 1px dashed rgba(255, 255, 255, 1);
    }
    .servive {
        margin-top: 50px;
    }
    
}
@media (max-width: 575px) {
    .b-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .project {
        margin-top: 30px;
    }
    .project-col {
        width: 33.3333%;
    }
    .project-img,
    .position-category {
        height: 90px;
    }
    .project-all {
        width: 100%;
    }
}
/* -----------------banner-------------- */
/* ================works================ */
.works {
    margin-top: 40px;
}
.works-col {
    display: flex;
}
.works-left {
    width: 80px;
    text-align: center;
    padding-top: 10px;
}
.works-left img {
    max-width: 100%;
    max-height: 100px;
}
[data-theme="dark"] .works-left img {
    filter: contrast(0);
}
.works-right {
    width: calc(100% - 80px);
    padding-left: 15px;
}
.works-right-top {}
.works-right-top span {
    font-family: 'Montserrat-700';
    color: var(--text-blue);
}
.works-right-bottom {}
.works-right-bottom span {
    font-size: 22px;
}
@media (min-width: 576px) {
    .works-right-top span {
        font-size: 40px;
    }
    .works-col {
        margin-top: 36px;
    }
}
@media (max-width: 575px) {
    .works-right-top span {
        font-size: 32px;
    }
    .works-col {
        margin-top: 15px;
    }
}
/* ----------------works---------------- */
/* ================job================== */
.job {
    padding-top: 40px;
    padding-bottom: 50px;
    margin-top: 100px;
    background: var(--bg-white) 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 25px rgba(0, 0, 142, 0.15);
}
.job-name {}
.job-name span {
    color: var(--text-blue-2);
    font-size: 24px;
    font-family: 'Montserrat-700';
}
.job-col {
    margin-top: 30px;
}
.job-left {
    display: flex;
}
.job-left-img {
    margin-right: 20px;
    padding-top: 10px;
}
.job-left-img img {
    max-width: 50px;
    max-height: 50px;
}
.job-left-text {}
.job-left-text span {
    font-size: 20px;
}
.job-right {
    padding: 30px;
    background: transparent linear-gradient(133deg, rgba(0, 0, 142, 1) 0%, rgba(1, 114, 128, 1) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 10px 10px 30px rgba(0, 0, 142, 0.2);
}
.job-right-name {
    margin-bottom: 20px;
}
.job-right-name span {
    color: rgba(255, 255, 255, 1);
    font-family: 'Montserrat-700';
}
.job-right-in {
    display: flex;
    align-items: center;
    margin-top: 36px;
}
.job-right-img {
    margin-right: 20px;
}
.job-right-img img {
    max-width: 42px;
}
.job-right-text {}
.job-right-text span {
    color: rgba(255, 255, 255, 1);
    font-family: 'Montserrat-500';
}
@media(min-width: 576px) {
    .job-right-name span {
        font-size: 24px;
    }
    .job-right-text span {
        font-size: 18px;
    }
}
@media(min-width: 992px) {
    .job-right {
        transform: translateY(-130px);
        position: absolute;
        width: 100%;
    }
}
@media(max-width: 991px) {
    .job-right {
        margin-top: 30px;
    }
}
@media(max-width: 575px) {
    .job-right-name span {
        font-size: 22px;
    }
    .job-right-text span {
        font-size: 16px;
    }
}
/* ----------------job------------------ */
/* ================news================= */
.news {}
.news-name span {
    color: var(--text-blue-2);
    font-size: 28px;
    font-family: 'Montserrat-700';
}
.news-left {
    margin-top: 20px;
}
.news-left-img {
    overflow: hidden;
}
.news-left-img img {
    width: 100%;
    transition: 0.2s;
}
.news-left-img a:hover img {
    transform: scale(1.1) rotate(2deg);
}
.news-left-img a {}
.news-left-date {
    margin-top: 10px;
}
.news-left-date img {
    margin-right: 10px;
}
[data-theme="dark"] .news-left-date img {
    filter: invert(1);
}
.news-left-date span {
    color: var(--text-simple);
    font-size: 14px;
    font-family: 'Montserrat-400';
}
.news-left-title {
    margin-top: 8px;
}
.news-left-title a {
    color: var(--text-blue-2);
    font-size: 20px;
    font-family: 'Montserrat-700';
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-left-title a:hover {
    color: rgba(239, 127, 26, 1);
}
.news-left-description {
    margin-top: 8px;
}
.news-left-description span {
    color: rgba(56, 41, 51, 1);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.news-right {
    margin-top: 20px;
}
.news-right-img {
    overflow: hidden;
}
.news-right-img a {}
.news-right-img a img {
    width: 100%;
    transition: 0.2s;
}
.news-right-img a:hover img {
    transform: scale(1.1) rotate(2deg);
}
.news-right-date {}
.news-right-date img {
    margin-right: 8px;
}
[data-theme="dark"] .news-right-date img {
    filter: invert(1);
}
.news-right-date span {}
.news-right-title {
    margin-top: 8px;
}
.news-right-title a {
    font-family: 'Montserrat-700';
    font-size: 18px;
    color: var(--text-blue-2);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-right-title a:hover {
    color: rgba(239, 127, 26, 1);
}
.news-right-description {
    margin-top: 8px;
}
.news-right-description span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.all-link {
    text-align: right;
    margin-top: 30px;
}
.all-link a {
    color: var(--text-white);
    font-size: 18px;
    padding: 10px 20px;
    background-color: var(--text-blue);
    border: 2px solid var(--text-blue);
}
.all-link a:hover {
    background-color: transparent;
    color: var(--text-blue);
}
@media(min-width: 576px) {
    .news {
        margin-top: 100px;
    }
    .news-name {
        margin-bottom: 15px;
    }
}
@media(min-width: 992px) {
   
}
@media(min-width: 1200px) {
    .news-left-img img {
        max-height: 350px;
        object-fit: cover;
    }
    .news-right-img a img {
        height: 162px;
        object-fit: cover;
    }
}
@media(max-width: 1199px) {
    .news-right-date {
        margin-top: 10px;
    }
}
@media(max-width: 575px) {
    .news {
        margin-top: 30px;
    }
}
/* ----------------news----------------- */
/* ================with================= */
.with-left {
    position: relative;
}
.with-title {
    max-width: 550px;
}
.with-title span {
    color: var(--text-blue-2);
    font-family: 'Montserrat-700';
}
.with-description {
    max-width: 550px;
    margin-top: 10px;
}
.with-description span {
    color: var(--text-simple);
    font-size: 18px;
}
.with-link a {
    color: var(--text-white);
    font-size: 18px;
    padding: 10px 20px;
    background-color: var(--text-blue);
    border: 2px solid var(--text-blue);
}
.with-link a:hover {
    background-color: transparent;
    color: var(--text-blue);
}
.with-right {
    padding: 30px;
    box-shadow: 10px 10px 10px rgba(0, 0, 142, 0.16);
    z-index: 2;
}
.with-right::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/with.png);
    z-index: -2;
    background-size: cover;
}
.with-right::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(135deg, rgba(0, 0, 142, 0.85), rgba(1, 114, 128, 0.85));
    z-index: -1;
}
.with-right-title {
    margin-bottom: 20px;
}
.with-right-title span {
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    font-family: 'Montserrat-700';
}
.with-right-ul {}
.with-right-ul li {
    margin-top: 15px;
}
.with-li {
    display: flex;
    align-items: center;
}
.with-li span {
    color: rgba(255, 255, 255, 1);
    font-family: 'Montserrat-300';
}
.with-li-left {
    border: 2px solid rgba(255, 255, 255, 1);
    width: 45px;
    text-align: center;
}
.with-li-left span {}
.with-li-right {
    padding-left: 15px;
    width: calc(100% - 45px);
}
.with-li-right span {}
@media (min-width: 576px) {
    .with {
        padding-top: 36px;
        padding-bottom: 50px;
        margin-top: 100px;
        background: var(--bg-white) 0% 0% no-repeat padding-box;
        box-shadow: 0px 2px 25px rgba(0, 0, 142, 0.15);
    }
    .with-title span {
        font-size: 28px;
    }
    .with-li span {
        font-size: 20px;
    }
}
@media (min-width: 992px) {
    .with-link {
        margin-top: 60px;
    }
}
@media (min-width: 1200px) {
    .with-left {
        background-image: url(../img/with.svg);
        background-position: right;
        background-repeat: no-repeat;
    }
    .with-right {
        position: absolute;
        transform: translateY(-75px);
        width: calc(100% - 30px);
    }
}
@media (max-width: 1199px) {
    .with-right {
        position: relative;
    }
}
@media (max-width: 991px) {
    .with-link {
        margin-top: 20px;
    }
    .with-right {
        margin-top: 30px;
    }
}
@media (max-width: 575px) {
    .with {
        margin-top: 30px;
    }
    .with-title span {
        font-size: 24px;
    }
}
/* ----------------with----------------- */
/* ================dark================= */

/* ----------------dark----------------- */