@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap');
:root { --main-color: #4CBB17; }
body { font-family: 'Poppins', sans-serif }
.container { margin: auto; width: 100%; padding: 0 20px; }


#addcomment{
    display:none !important;
}


.karyera-card:hover .karyera-daha-etrafli,
.karyera-section .karyera-city {
    background-color: #000;
    color: #fff
}

.karyera-section {
    padding-bottom: 20px
}

.karyera-section .karyera-cards {
    padding-top: 36px;
    row-gap: 1.5rem
}

.karyera-section .karyera-cards>a {
    height: inherit;
    display: flex;
    cursor: pointer;
    justify-content: center
}

.karyera-section .karyera-card ul li {
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Red_check.svg/1024px-Red_check.svg.png') 0 0/16px no-repeat;
    padding-left: 25px;
    background-position-y: center;
    color: #000;
    font-size: 18px;
    margin: 15px 0
}


.karyera-card-header h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #000
}

.karyera-section .karyera-city {
    padding: 8px 15px;
    border-radius: 6px;
    margin: 15px 0;
    font-size: 16px;
    border: 0
}

.karyera-section .karyera-card {
    border-radius: 6px;
    padding: 20px 30px 40px;
    box-shadow: 0 2px 11px rgb(0 0 0 / 20%);
    background-color: #fff;
    transition: box-shadow .2s;
    max-width: 340px;
    min-height: 611px;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 3fr
}

.karyera-section .karyera-daha-etrafli {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    display: inline-block;
    transition: background-color .3s;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
    cursor: pointer;
    width: 100%
}




.karyera-h2 {
    position: relative
}

.karyera-ic-sehife {
    background-color: #eee;
    padding: 120px 0
}

.karyera-ic-sehife img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 30px
}

.karyera-ic-sehife-basliq {
    color: #000;
    font-weight: 700;
    line-height: 110%;
    font-size: 2.5rem;
    padding: 20px 0
}

.karyera-elanin-tesviri ul li,
.karyera-is-barede-melumat ul li,
.karyera-namizede-telebler ul li {
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Red_check.svg/1024px-Red_check.svg.png') 0 0/16px no-repeat;
    padding-left: 25px;
    background-position-y: center;
    color: #000;
    font-size: 18px;
    margin: 15px 0;
    line-height: 1.5
}

.karyera-ic-sehife-content p {
    color: #000;
    font-size: 18px;
    margin: 10px 0;
    line-height: 1.5
}

.karyera-ic-sehife-content {
    display: flex;
    justify-content: space-between;
    gap: 25px
}

.karyera-ic-sehife-content-left,
.karyera-ic-sehife-content-right {
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 0 4rem rgb(82 85 90 / 10%)
}

.karyera-ic-sehife-content-left {
    height: fit-content;
    width: 35%
}

.karyera-ic-sehife-content-right {
    height: fit-content;
    width: 65%
}

.karyera-h2 {
    font-size: 20px;
    margin: 10px 0;
    padding: 0 0 13px;
    font-weight: 700;
    color: #000
}

.karyera-h2::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 26px;
    width: 5px;
    height: 5px;
    background-color: #fff
}

.karyera-h2::before {
    position: absolute;
    content: '';
    bottom: 0;
    width: 45px;
    height: 4px;
    border-radius: 30px;
    background-color: #000
}


@media only screen and (max-width:992px) {
    .karyera-ic-sehife-content {
        flex-direction: column
    }

    .karyera-ic-sehife-content-left,
    .karyera-ic-sehife-content-right {
        width: 100%
    }
}






.section-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    align-items: center;
}

.section-title a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-weight: 400;
    transition: 0.3s;
    position: relative;
    color: #000;
}

.section-title a:hover::after { width: 100% }
.section-title a:hover i { transform: translateX(5px) }
.section-title a i { transition: 0.3s; margin-top: 5px; }

.section-title a::after {
    content: '';
    width: 0;
    height: 2px;
    background: #000;
    transition: .3s;
    position: absolute;
    bottom: -6px;
    left: 0;
}

/*****STYLING HEADER-STATIC START*****/
.header-static { background: #fff }
.header-static nav .menu li a, .header-static nav .nav-decor { color: black }
.header-static .btn-price a span, .header-static .btn-price a i { color: #fff }
.header-static .menu-toggle span { background: "#Fff" }
.header-static .btn-consultation a { background-color: #d71730!important; color: white!important }
.header-static .btn-consultation a:hover { background-color: var(--main-color)!important; color: white!important }
.header-static .btn-consultation-static span { background: var(--main-color)!important;  color: white!important}

/*****PRICE-FORM START*****/
#price-form .modal-content {
    padding: 20px 0 0 0;
    max-width: 500px;
    margin: auto;
}

#price-form .modal-body { padding: 15px 40px 40px 40px }
#price-form .modal-title { font-size: 18px!important}
#price-form .modal-header {
    margin: 0 40px 10px 40px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    border-bottom: 1px solid var(--main-color);
}

#price-form .modal-title { font-weight: 700; color: #000 }
#price-form input.effect, #price-form .custom-form select.effect { height: 50px }

#price-form .effect ,.projects-full-story__form .effect {
    width: 100%;
    border: 2px solid #e6ecf2;
    padding: 12px 20px;
    margin: 0 0 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    -webkit-appearance: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
}

#price-form .modal-content .btn-close {
    display: block;
    height: 20px;
    opacity: .5;
    position: absolute;
    right: 50px;
    top: 34px;
    width: 20px;
    z-index: 100;
    padding: 0;
    outline: transparent;
}

.modal-backdrop { opacity: .8!important }
#price-form .btn-close:focus { box-shadow: none!important }

#price-form .submit-btn:hover  .projects-full-story__form .submit-btn:hover {
    background-color: #742220;
}

#price-form .submit-btn , .projects-full-story__form .submit-btn {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    height: 50px;
    line-height: 50px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    padding: 0 26px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}
#price-form .submit-btn , .projects-full-story__form .submit-btn:hover {
    background-color: var(--main-color);
}


/*****STYLING BREADCUMB START*****/
.breadcumb a {
    text-decoration: none;
    color: #000;
    transition: all .3s ease;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 20px;
}

.breadcumb a {
    color: #000;
    background: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
}

.breadcumb a.active { color: #fff; background: var(--main-color) }
.breadcumb a:hover { background-color: #818286; color: #fff }

/*****STYLING HEADER START*****/
header {
    background: rgba(0, 0, 0, 0.09);
    backdrop-filter: blur(37px);
    position: fixed;
    width: 100%;
    z-index: 100;
}

header.active { background: #ABACAB;  box-shadow: 10px -6px 15px black }
header.active .menu-item a { color: #000 }
header.active .nav-decor { color: #000 }
header.active .menu-toggle span { background: #fff }
header.active .btn-consultation span { background-color: var(--main-color)!important; color: white!important }
header.active .btn-consultation span:hover { background-color: green!important; color: white!important }
.logo-mobile { display: none }

.overlay {
    background-image: linear-gradient(67.33deg, #000000b8 0%, rgba(22, 44, 76, 0) 80%);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

nav {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-mobile {
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    z-index: 10;
    background: #090909;
    flex-direction: column;
    transition: 0.4s all;
    display: flex;
    visibility: hidden;
    padding: 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: calc(100vh - 80px);
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
}

.menu-mobile .dropdown-content {
    display: none;
    list-style: disc;
    color: #fff;
    padding-left: 35px;
}

.menu-mobile.active { visibility: visible; opacity: 1 }
.menu-mobile .menu-list li { padding: 10px 0; width: 100% }
.menu-mobile .menu-list li a {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.menu-mobile .lang { display: flex; gap: 15px }
.menu-mobile .lang li a {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
}

.menu-mobile .btn-price {
    display: inline-block;
    background: #fff;
    margin-left: 0;
    margin-top: 15px;
    text-align: center;
}

.menu-mobile .btn-price a {
    color: #000 !important;
    font-size: 16px;
    font-weight: 400;
}

.menu-mobile .btn-price i { right: 50px }
.menu-mobile .btn-price:hover a { color: #000 !important }
.menu-item {
    white-space: nowrap;
    position: relative;
    margin-left: 30px;
    padding: 20px 0;
}

.lang-item { margin-left: 10px!important }

.menu-item:hover .menu-drop {
    opacity: 1;
    visibility: visible;
    top: 60px;
}

.menu-drop { list-style: disc }
.menu-drop li a { font-size: 15px!important }
.menu-item a {transition: .3s }
.menu-item > a {text-transform: uppercase; }
.menu-item a:hover { color: var(--main-color)!important }
.menu-mobile .btn-consultation span { margin-left: 0!important }
.menu-mobile .btn-consultation { margin-top: 20px }

.menu-drop {
    position: absolute;
    visibility: hidden;
    padding: 15px 30px;
    background: #fff;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    transition: all 0.4s;
    min-width: 175px;
    border-radius: 10px;
    opacity: 0;
}

.menu-drop li a {
    display: inline-block !important;
    padding: 9px 0 !important;
    color: #000 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    white-space: nowrap;
}

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

.logo img { width: 140px }
nav .nav-decor { transition: all 0.3s ease; color: #fff }

.menu li a {
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}

.menu li a:hover { color: #df4947 }

.btn-consultation span {
    color: #0a0c0e !important;
    background-color: #FFF !important;
    border-radius: 5px !important;
    padding: 9px 12px !important;
    letter-spacing: .3px !important;
    transition: all .2s ease !important;
    font-weight: 500 !important;
    margin-left: 30px;
    cursor:pointer;
    display: block;
}

.btn-consultation span:hover {
    background-color: var(--main-color)!important;
    color: white!important;
}

#entryform {
    padding-block: 10rem;
}

/*.btn-price {
    background-color: #df4847;
    border-color: #df4847;
    color: white!important;
    font-weight: 600;
    padding-left: 0!important;
    padding: 12px 40px 12px 30px;
    font-size: 13px;
    position: relative;
    transition: all 0.3s ease;
    margin-left: 30px;
    cursor: pointer;
}

.btn-price i {
    font-size: 12px;
    top: 49%;
    right: 25px;
    transform: translate(0, -50%);
    position: absolute;
    transition: all 0.3s ease;
}

.btn-price:hover  { border-radius: 6px }
.btn-price:hover a { color: #fff!important }
.btn-price:hover i { right: 22px }/*


/**(menu-toggle)**/
.menu-toggle {
    display: none;
    cursor: pointer
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px;
    background: #fff;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0
}

/*****STYLING SLIDER START*****/
.slider { height: 100vh; position: relative }
.swiper-header { height: 100% }
.swiper-header .swiper-slide { display: flex; padding-top: 85px }
.swiper-header .slide-1 { background: url(/img/slider2.jpeg) center/cover }
.swiper-header .slide-2 { background: url(/img/stv2.jpg) center/cover }
.swiper-header .slide-3 { background: url(/img/cascos_obreros_.jpg) center/cover }

.swiper-header .swiper-header-btns {
    position: absolute;
    bottom: 10%;
    z-index: 9;
    display: flex;
    gap: 10px;
    right: 40px;
}

.swiper-header .swiper-header-btns div {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.swiper-header .swiper-header-btns div i {
    font-size: 12px;
    color: var(--main-color);
    transition: all 0.3s ease;
}

.swiper-header .button-prev:hover i {
    color: #fff
}

.swiper-header .button-prev:hover {
    background: var(--main-color)
}

.swiper-header .button-next:hover i {
    color: #fff
}

.swiper-header .button-next:hover {
    background: var(--main-color)
}

.swiper-header .swiper-text {
    position: relative;
    z-index: 9;
    max-width: 850px;
    width: 100%;
}

.swiper-header .swiper-text h2 {
    color: #fff;
    font-weight: 700;
    font-size: 50px;
}

.swiper-header .swiper-text p {
    color: #fff;
    font-weight: 200;
    font-size: 20px;
}

.swiper-header .slide-btns {
    display: flex;
    gap: 12px;
}

.swiper-header .swiper-slide__btn {
    position: relative;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
    padding: 12px 35px 12px 25px;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px;
    font-weight: 500;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}

.swiper-header .swiper-slide__btn-1 { width: 192px }
.swiper-header .swiper-slide__btn span::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-bottom: -2px !important;
    margin-left: 5px !important;
    display: inline-block;
    clip-path: polygon(56.4% 50%, 26.4% 19.9%, 35% 11.3%, 73.6% 50%, 35% 88.7%, 26.4% 80.1%, 56.4% 50%);
    background-color: #000;
    transition: all 0.3s ease;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translate(0, -50%);
}

.swiper-header .swiper-slide__btn-1 span::after { right: 35px!important }
.swiper-header .swiper-slide__btn-2 {
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(37px);
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
}

.swiper-header .swiper-slide__btn-2 span::after { background-color: #fff }
.swiper-header .swiper-slide__btn:hover span::after { clip-path: polygon(74.1% 44.2%, 43.1% 13.2%, 51.3% 5%, 96.3% 50%, 51.3% 95%, 43.1% 86.8%, 74.1% 55.8%, 3.7% 55.8%, 3.7% 44.2%, 74.1% 44.2%) }
.swiper-header .swiper-slide__btn:hover { border-radius: 15px }
.swiper-header .swiper-slide__btn:hover span::after { right: 17px }
.swiper-header .swiper-slide__btn-1:hover span::after { right: 30px!important }

/*****STYLING ADVANTAGES START*****/
.advantages{
    padding: 40px 0;
    background:#f4f5f4;
}

.advantages_card{
    padding: 16px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    border: 1px solid #ccc;
    gap: 10px;
    box-shadow:rgba(0, 0, 0, 0.46) 3px 3px 3px;
    cursor: pointer;
    transition: .3s ease-in-out;
    margin-bottom: 15px;
}

.advantages_card:hover {
    border-color: #4c4c4c;
}

.advantages_card_icon img {
   width: 40px;
   height: 40px;
   margin-top:10px;
   filter:invert(0);
  
}
.advantages_content{
    width: calc(100% - 40px);
}
.advantages_content h3{
    font-size: 16px;
    font-weight: bold;
    color:#17181c;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}

.advantages_content p{
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: auto;
    -webkit-box-orient: vertical;
    color: #000;
    font-weight: 500;
    opacity: .5;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advantages-title h2 {
    font-size: 30px;
    color: #000;
    line-height: 1;
    text-align: start;
    margin: 0;
    font-weight: 500;
}

.advantages-title {
    margin-bottom: 30px;
}

/*****STYLING PREFERENCES START*****/
.preferences {
    background: #f4f5f4;
    padding: 60px 0;
}

.preferences h2,
.service h2,
.projects h2,
.informations h2,
.references h2 {
    font-size: 30px;
    text-align: center;
}

.preferences-inner {
    max-width: 900px;
    margin: auto;
    position: relative;
}

.swiper-preference {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
}

.swiper-preference .swiper-slide {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background: #fff;
}

.swiper-preference .swiper-slide .slide-img {
    width: 100%;
    height: 265px;
    border-radius: 10px 10px 0 0;
    background: url(/img/user-1.avif) center/cover;
}

.swiper-preference .swiper-slide h3 {
    font-size: 18px;
    font-weight: 500;
}

.swiper-preference .swiper-slide .position {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px
}

.swiper-preference .swiper-slide .desc {
    font-size: 15px;
    margin-bottom: 24px;
}

.swiper-preference .swiper-slide span {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px 10px 22px;
    background: #f4f5f4;
    border-radius: 88px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-top: auto;
    color: #666;
    border: 2px solid #f4f5f4;
    transition: all 0.2s;
    font-size: 16px;
}

.preferences .swiper-slide {
    border-radius: 10px
}

.preferences .swiper-text {
    padding: 20px 30px
}

.swiper-preferences-btns div path {
    transition: all 0.2s
}

.swiper-preferences-btns div:hover path {
    stroke: #1ca345
}

.preference-button-next {
    position: absolute;
    z-index: 9;
    top: 50%;
    right: -5%;
    font-size: 30px;
    cursor: pointer;
}

.preference-button-prev {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: -5%;
    font-size: 30px;
    cursor: pointer;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: 10px;
    width: 40px;
    height: 3px;
    background: var(--main-color)
}

.preferences .swiper-pagination {
    bottom: -27px;
    z-index: 9;
}

.preferences-btn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 16px;
}

.preferences-btn h3 {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 112px;
    transition: all 0.2s;
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #000;
    font-weight: 500;
}

.preferences-btn h3:hover {
    border: 1px solid var(--main-color)
}

.preferences-btn h3 div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.preferences-btn h3 div span:last-child {
    color: var(--main-color);
    white-space: nowrap;
}

/*****STYLING SERVICE START*****/
.service { padding: 60px 0 }
.service .card {
    position: relative;
    height: 300px;
    margin-bottom: 30px;
    background: transparent;
    border: none;
    overflow: hidden;
    border-radius: 2px;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.service .card:after,
.service .card:before {
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
    transition: 0.3s ease-in-out;
    opacity: 0.99;
    z-index: 1;
}

.service .card img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
}

.service .card .text {
    position: absolute;
    bottom: -20px;
    z-index: 2;
    color: white;
    word-wrap: break-word;
    width: 100%;
    padding: 0px 30px;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service .card .text h5 {
    font-size: 17px;
    word-break: break-all;
}

.service .card .text p {
    font-size: 13px;
    color: #a99f94
}

.service .card:after {
    background: linear-gradient(to top, #2b1919, rgba(43, 25, 25, 0));
    opacity: 1
}

.service .card:before {
    background: linear-gradient(to top, #2b191999, rgba(43, 25, 25, 0.5));
    opacity: 0
}

.service .card:hover:before {
    opacity: 1;
    transition: opacity 0.3s
}

.service .card:hover .text {
    bottom: 15px;
    transition: 0.3s ease-in-out
}

.service .card:hover:after {
    opacity: 0;
    transition: opacity 0.3s
}

/*****STYLING PROJECTS START*****/
.projects { padding: 60px 0 }

.projects-inner {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 25px;
}

.project-item {
    height: 280px;
    position: relative;
    padding: 30px 40px;
}

.project-item h3 {
    position: absolute;
    top: 20px;
    font-size: 22px;
    font-weight: bold;
    padding-right:30px;
    line-height: 1.1;
    color: white;
    z-index: 2;
    cursor: pointer;
}

.project-item__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    background: rgb(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    cursor: pointer;
}

.project-item:hover .project-item__overlay {
    opacity: 1
}

.project-item__btn {
    padding: 11px 43px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    position: absolute;
    background: transparent;
    bottom: 40px;
    left: 40px;
    display: block;
    z-index: 2;
    transition: 0.5s all ease;
}

.project-item__btn:hover { border: 2px solid #fff }
/*.item-1 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629378670_cam_balkon_isicamli_cambalkon_tiara_twinmax_albert_genau_-_cam_balkon_ozellik_1_.jpeg) center/cover }*/
/*.item-2 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629443273_mehsul6_1.jpeg) center/cover }*/
/*.item-3 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629443637_mehsul7_1.png) center/cover }*/
/*.item-4 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629446581_mehsul10_1.png) center/cover }*/
/*.item-5 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629446738_mehsul11_1.jpeg) center/cover }*/
/*.item-6 { background: url(https://albertgenau.az/uploads/posts/2021-08/1629447140_mehsul14_1.png) center/cover }*/

.projects-cat {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.projects-cat .project-item { width: 100% }

/*****STYLING INFORMATIONS START*****/
.informations {
    padding: 60px 0;
    background-color: #f6f6f6;
}

.informations .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.informations .title h2 {
    text-align: left;
    margin: 0;
}

.informations .title a {
    font-size: 15px;
    color: black;
    font-weight: 500;
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 30px;
    white-space: nowrap;
}

.informations .title a:hover svg { right: -10px }

.informations .title svg {
    transition: .3s;
    position: absolute;
    right: 0;
}

.informations-inner {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    flex-wrap:wrap;
}

.informations-inner article {
    cursor: pointer;
    width: 31%;
    min-width: 31%;
}

.informations-inner article:hover img {
    transform: scale(1.02);
    box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
}

.informations-inner article img {
    border-radius: 20px;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: .3s;
}

.informations-inner article p {
    font-size: 18px;
    font-weight: bold;
    color: #2f313f;
}

.informations-inner article span {
    font-size: 12px;
    color: #2f313f;
    margin: 10px 0;
}

/*****STYLING REFERENCE START*****/
.references {
    padding: 60px 0;
    position: relative;
}

.swiper-reference .swiper-wrapper { height: 180px;}

.swiper-reference .swiper-slide {
    padding: 23px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-size: 0;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-reference .swiper-slide img {
    object-fit: contain;
    width: 100%;
}

.swiper-reference .swiper-pagination {
    bottom: 20px
}

.references-static__content {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap:20px;
    padding: 60px 0;
}

.references-static__content .swiper-slide {
    padding: 23px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-size: 0;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.references-static__content .swiper-slide img {
    width: 100%;
    height: 112px;
    object-fit: contain;
}

/****STYLING ONFOOTER START****/
.onfooter {
    background: var(--main-color);
    padding: 40px 0;
}

.onfooter .start {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.onfooter h2 {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    padding-bottom: 22px;
    margin: auto;
    text-align: center;
}

.onfooter-btn {
    min-width: 220px;
    padding: 15px 20px;
    border-radius: 2px;
    background-color: #fff;
    font-size: 22px;
    font-weight: 600;
    color: #2d3640;
    border: none;
    transition: 0.3s;
    border: 1px solid #fff; 
    white-space: nowrap;
}

.onfooter-btn:hover { 
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff; 
}

.modal-content {
    border-radius: 8px;
    padding: 30px 40px 70px 40px;
}

.modal-title {
    color: #212122;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.66667;
}

.modal-content .close {
    font-size: 20px;
    font-weight: 200;
    outline: none;
}

.modal #myFrame {
    width: 100%;
    height: 290px;
}

.modal .infomy {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 11px;
    color: #212121;
    text-align: left;
}

.modal input[type="text"], .modal input[type="tel"], .modal input[type="email"], .modal textarea, .modal select {
    font-size: 15px;
    line-height: 1.3;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 56px;
    padding: 0 15px;
    border-radius: 6px;
    color: #212121;
    border: 1px solid #d7dde3;
    background-color: #fcfcfc;
    transition: background-color .25s ease-in-out,border-color .25s ease-in-out, .25s ease-in-out;
    transition: background-color .25s ease-in-out,box-shadow .25s ease-in-out,border-color .25s ease-in-out;
}

.modal input[type="text"]:focus, .modal input[type="email"]:focus, .modal input[type="tel"]:focus, .modal textarea:focus, .modal select:focus {
    border: 1px solid #d7f1be;
    outline: none;
    border-width: 2px;
}

.modal input[type="text"]:focus, .modal input[type="tel"]:focus, .modal input[type="email"]:focus {
    border-color: #00a0eb !important;
    background: white;
}

.modal .button input {
    cursor: pointer;
    background: var(--main-color);
    color: #fff!important;
    border-radius: 8px;
    font-weight: 400;
    box-shadow: 0 20px 53px -20px var(--main-color)!important;
    height: 56px;
    line-height: 56px;
    transition: 0.3s ease-in-out;
    padding: 0 26px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}

.modal .button input:hover {
    background: #912c2c;
    color: white;
    box-shadow: none !important;
    transition: 0.3s ease-in-out;
}

.modal .infomy span {
    color: red;
}

.modal button.btn-close {
    padding: 0;
    background-color: transparent;
    border: 0;
    color: #a5a5a5;
}

.modal .btn-close:focus {
    outline: 0;
    box-shadow: none!important;
}

/*****STYLING ABOUT START*****/
.about {
    padding: 60px 0;
    background: #f4f5f4;
}
.section_head_about{
    flex-direction: column;
    gap: 15px;
}
.section_head_about h2{
    font-size: 28px;
    font-weight: 600;
}
.section_head_about p{
    line-height: 1.4;
    font-size: 20px;
}
.section_head_about a{
    display: flex;
    align-items:center;
    color:var(--main-color);
    gap: 10px;
    font-weight: 500;
    font-size: 18px;
}

.section_head_about a i { margin-top: 3px }

.about_bg_img,.about_bg_img_1{
    height: 100%;
    width: 100%;
    border-radius: 15px;
    position: relative;
}
.about_bg_img_1{
    height: 324px;
    position: absolute;
    top: 0;
    transform: translateY(-10%);
    left: 0;
    width: 100%;
    object-fit:cover;
}
.about_bg_img_2{
    height: 140px;
    position: absolute;
    bottom: -100px;
    left: 30px;
    transform: rotate(30deg);
    object-fit:contain;
}
.about_history_head{
    padding: 20px 0 0;
}
.about_history_head h4{
    font-size: 28px;
    font-weight: 600;
}
.about_history_dots{
    gap: 20px;
    align-items: center;
    background: #e5e5e5;
    height: 4px;
    width: fit-content;
}
.about_dot{
    position: relative;
    cursor: pointer;
    padding: 0 20px;
}
.about_dot p{
    font-size: 20px;
    color: #868686;
    line-height: 1.3;
    font-weight: 600;
    transition: .3s;
    position: relative;
    white-space: nowrap;
    top: -25px;
}
.about_dot:hover p{
    color: #000;
    transform: scale(1.05);
}
.about_dot.active p{
    color: #000;
    transform: scale(1.05);
}
.about_dot span.about_dot_circle{
    width: 10px;
    transition: .3s;
    height: 10px;
    display: block;
    border-radius: 50%;
    background: var(--main-color);
    opacity: .3;
}
.about_dot:hover span.about_dot_circle{
    background: var(--main-color);
    opacity: .7;
}
.about_dot.active span.about_dot_circle{
    background:var(--main-color);
    opacity: 1;
}
.about_my_over{
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 75px;
    display: flex;
    max-width: 780px;
    align-items: flex-end;
    padding: 0 0 10px;
}
.main_page_about_list{
    gap: 20px;
    flex-direction: column;
    list-style: disc;
}
.main_page_about_list li{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

@media only screen and (max-width: 1400px){
    .menu-item {
        margin-left: 15px;
    }
    
    .menu li a {
        font-size: 13px;
    }
    
    .logo img {
        width: 120px;
    }
}

@media only screen and (max-width: 1230px){
    .main_page_about_list{
        gap: 20px;
        flex-direction: column;
        list-style: disc;
        padding: 0 0 0 20px;
    }
    .main_page_about_list li{
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4;
    }
    .section_head_about p{
        font-size: 18px;
    }
}
@media only screen and (max-width: 992px){
    
    
    .btn-consultation span { color: #fff!important; }
    .header-static {
        background: #df4847;
    }
    
    
    
    
    
    .about_bg_img_2{
        height: 100px;
        position: absolute;
        bottom: 20px;
        left: 0px;
        transform: rotate(30deg);
        object-fit:contain;
    }
    .about_bg_img_1{
        height: 270px;
        position: absolute;
        top: 0;
        transform: translateY(-10%);
        left: 0;
        width: 100%;
        object-fit:contain;
    }
}
@media only screen and (max-width:768px){
    .my_about_direction{
        flex-direction: column-reverse;
    }
    .about_bg_img{
        height: 360px;
    }
    .about_bg_img_1{
        height: 368px;
    }
    .about_bg_img_2{
        left: 60px;
        height: 128px;
    }
}
@media only screen and (max-width: 420px){
    .about_bg_img{
        height: 278px;
    }
    .about_bg_img_1{
        height: 278px;
    }
    .about_bg_img_2{
        height: 83px;
    }
}
/*****STYLING ABOUT END*****/
/*
.about {
    padding: 30px 0;
    color: #2f313f
}

.about-inner {
    display: flex;
    gap: 50px;
}

.about-text {
    width: 50%;
    padding-right: 40px
}

.about-img-mobile {
    display: none
}

.about-img-desktop,
.about-img-mobile {
    width: 50%;
    position: relative;
}

.about-img-desktop img,
.about-img-mobile img {
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.about h2 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 10px;
}

.about .about-main__text {
    font-size: 20px;
    margin-bottom: 32px;
}

.about h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    padding-left: 35px;
}

.about li p {
    margin-bottom: 8px;
    color: rgba(18, 29, 43, .6);
    padding-left: 35px;
}

.about ul li:nth-child(1) h3::before,
.about ul li:nth-child(2) h3::before,
.about ul li:nth-child(3) h3::before {
    position: absolute;
    content: '1';
    width: 24px;
    height: 24px;
    background: #32bb78;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 14px;
}

.about ul li:nth-child(2) h3::before {
    content: '2'
}

.about ul li:nth-child(3) h3::before {
    content: '3'
}
*/

/*****STYLING FOOTER START*****/
footer { background: #070203; padding: 40px 20px 40px 20px }
.footer__top {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: space-between;
    color: #fff;
}

.footer__top ul li a, .contact a { color: #fff; transition: .3s }
.footer__top-list { display: flex; gap: 30px }
.footer__top ul li { margin-top: 10px }
.contact a:hover, .footer__top ul li a:hover { color: #a0a0a0!important }

.footer__top .contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__top .contact a { color: #fff }
.footer__top .contact .number { font-size: 18px; color: #fff; position: relative; cursor: pointer; }
.footer__top .contact .socials.number-options {margin-top: 0!important; display: none;}
.footer__top .contact .mail { font-size: 24px; color: #fff }
.footer__top .contact .socials { display: flex; gap: 15px }
.footer__top .contact .socials a {
    display: flex;
    gap: 10px;
    position: relative;
}

.footer__top .contact .socials .circle {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.footer__top .contact .socials a:hover .circle { background: var(--main-color) }
.footer__top .contact .socials a:hover i { color: #fff }
.footer__top .contact .socials i {
    position: absolute;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

.footer__btn {
    background-color: #ec1b30;
    border-radius: 2.5rem;
    transition-timing-function: ease;
    transition-duration: .3s;
    padding: 10px 20px;
    text-align: center;
    font-weight: 500;
}
.footer__btn:hover { transform: scale(1.1) }
.footer__logo-mobile { display: none; margin-top: 20px }
.footer-menu-2 li a { color: silver!important;font-size: 14px; }

.footer__bottom { margin-top: 20px }
.copyright {
    position: relative;
    color:#bdc6cf;
    font-size: 13px;
}
@keyframes inf-pulse{
    0% {
    -webkit-box-shadow: 0 0 0 0 #ED1C24;
    -moz-box-shadow: 0 0 0 0 #ED1C24;
    -o-box-shadow: 0 0 0 0 #ED1C24;
    box-shadow: 0 0 0 0 #ED1C24;
}
}

.copyright a { 
    display: flex; 
    align-items: center;
    position: absolute;
    color: #bdc6cf;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap:10px
}
.oklogo { width: 100px }
.contact .number, .contact .email {
    display: flex;
    gap: 10px;
    align-items:center;
}
.contact .email { font-size: 18px }

/*****STYLING ABOUt-STATIC START*****/
.about-static, .certificates-static,.blog-static { background: #f1f1f1; padding: 0 0 60px 0 }
.about-static__subtitle { color: #000 }
.about-static__title,
.about-static__subtitle {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.12;
    padding-bottom: 20px;
}

.about-static__text {
    color: grey;
    font-size: 17px;
}

/*****STYLING CONTACT-STATIC START*****/
/*
.contact-static { background: #f1f1f1; padding: 150px 0 30px 0 }
.contact-static h2 {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}

#contact-static .cs-row .left-side{
    background-color: #4d4c4b;
}
#contact-static .cs-row{
   margin: 0;
   border-radius: 6px;
   box-shadow: 0 15px 55px -5px rgb(9 31 67 / 10%);
   overflow: hidden;
}
#contact-static .right-side .wrapper{
   padding: 20px;
}
#contact-static .right-side h2{
   font-size: 22px;
   color: #301F27;
   margin-top: 30px;
}
#contact-static .left-side .wrapper{
   padding: 45px;
}
#contact-static iframe{
   border: none;
   height: 400px;
}
#contact-static{
   padding-bottom: 60px;
}
#contact-static .left-side h1{
   font-size: 22px;
   color: white;
   font-weight: 600;
   margin-bottom: 20px;
}
#contact-static .left-side .number p, #contact-static .left-side .adress p{
   margin: 0;
   color: white;
   font-size: 15px;
}
#contact-static .left-side .number a{
   color: white;
   border-bottom: 1px solid white;
   font-size: 15px;
   transition: all .3s ease;
}
#contact-static .left-side .number a:hover{
   border-color: transparent;
}*/


.user-certificate-link {
    color: rgb(13,110,253);
    outline: none;
    border: none;
    width: fit-content;
    height: fit-contnet;
    background-color: transparent;
}

.certificate-list {
    padding-block: 120px 20px;
}

.certificate-list.access-denied {
    text-align: center;
}

:is(.certificate-list_holder, .user-certificate-table_holder) {
    padding: 1.5rem;
    border: 1px solid #DEE2FD;
    border-radius: 10px;
    overflow-x: auto;
}

:is(.certificate-list_holder, .user-certificate-table_holder)::-webkit-scrollbar {
  height: 5px;
}

:is(.certificate-list_holder, .user-certificate-table_holder)::-webkit-scrollbar-track {
  background: #f1f1f1;
}

:is(.certificate-list_holder, .user-certificate-table_holder)::-webkit-scrollbar-thumb {
  background: #999;
}

:is(.certificate-list_holder, .user-certificate-table_holder)::-webkit-scrollbar-thumb:hover {
  background: #555;
}

:is(.certificate-list_holder, .user-certificate-table_holder) :is(td, th) {
    white-space: nowrap;
}

:is(.ucr-subTitle, .ucr-title) {
    text-align: center;
}

.ucr-title {
    color: #2293BE;
    font-size: 1.9rem;
    margin-block: 1rem 2rem;
}

.ucr-subTitle {
    font-size: 1.4rem;
    color: #8A8A8A;
}

.user-certificate-full {
    padding-block: 120px 20px;
}

/*****STYLING CERTIFICATES-STATIC START*****/
.certificates-static__content {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
}

.certificate-create {
    padding-block: 150px 30px;
}

.certificates-static__content div a {
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificates-static__content div a img {
    width: calc(100% - 50px);
    margin: auto;
    display: block;
    height: calc(100% - 50px);
    position: relative;
    z-index: 3;
}

.certificates-static__content div {
    position: relative;
}

.certificates-static__content div::before {
    position: absolute!important;
    content: ''!important;
    background-image: url(https://siloconstruction.az/img/ramka.png)!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 550px;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    filter: grayscale(1)!important;
    z-index: 2!important;
    background-image: none!important;
    border-width: 23px!important;
    border-style: solid!important;
    border-color: #a5a4a4 #bebebe #a5a4a4 #bebebe!important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

/*****STYLING BLOG-STATIC START*****/
.blog-static__content-top {
    width: 100%;
    background: rgb(250, 250, 250);
    margin-top: 50px;
    padding: 50px 0;
}

.blog-static__content-top h2 {
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.blog-static__content-top p {
    margin: 0 auto;
    max-width: 700px;
    text-align: center;
}

.blog-static__content-bottom {
    padding: 65px 0;
    background: #fff;
    text-align: center;
}

.blog-static__content-bottom img {
    max-width: 900px;
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: inline-block;
    margin: auto;
}

.blog-static__content-bottom p {
    max-width: 900px;
    margin: auto;
    text-align: left;
    margin-top: 20px;
}

/*****STYLING SECTION-TOP-STATIC START*****/
.section-top-static { background: #f1f1f1; padding: 150px 0 35px 0 }

/*****STYLING FEEDBACK START*****/
#feedback {
    padding: 40px 0;
}

.feedback-title {
    margin-bottom: 40px;
}

.feedback-title h3 {
    font-size: 35px;
    font-weight: 500;
    color:var(--white);
}

.feedback_wrapper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 20px;
    box-shadow: 0 15px 55px -5px rgb(9 31 67 / 10%);
}

.left-feedback {
    width: 100%;
    flex: 0 0 auto;
    padding: 0 12px;
    background: url('/img/contact.jpeg') center/cover;
    position: relative;
}

.left-feedback__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    top: 0;
    left: 0;
    opacity: .5;
}

.left_feedback_content {
    padding: 25px;
    border-radius: 4px;
    background-color: var(--feedback-content);
}

.feedback_contact-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
    position: relative;
    z-index: 10;
}

.feedback_contact-info h3 {
    font-size: 22px;
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
}

.feedback_contact-info a {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    width: fit-content;
    position: relative;
    color: #fff;
    transition: .3s ease-in-out;
}

.feedback_contact-info p {
    display: block;
    font-size: 16px;
    width: fit-content;
    position: relative;
    color: #fff;
    transition: .3s ease-in-out;
}

.feedback_contact-info a:after {
    width: 100%;
    bottom: -8px;
    left: 0;
    position: absolute;
    content: '';
    height: 1px;
    border-radius: 2px;
    background: #fff;
    transition: .3s ease-in-out;
}

.feedback_contact-info a:hover::after {
    width: 0;
}

.right-feedback {
    width: 100%;
    flex: 0 0 auto;
    padding: 0 12px;
}

.right-feedback-wrapper-title {
    margin-bottom: 20px;
}

.right-feedback-wrapper-title h3 {
    font-size: 24px;
    font-weight: 500;
    color:var(--white);
}

.right-feedback-wrapper {
    padding: 20px;
}

.right-feedback-wrapper .row {
    row-gap: 20px;
}

.form-feedback-wrapper {
    position: relative;
}

.form-feedback-wrapper-textarea {
    transition: all .3s ease;
    width: 100%;
    padding:10px;
    border: none;
    border-bottom: 1px solid #bab9ba;
    font-size: 14px !important;
    background:transparent;
    outline: none;
    border-radius: 0;
    height: 150px;
    max-height: 200px;
    line-height: 44px;
    resize: vertical;
}

.form-feedback-wrapper-input:focus,
.form-feedback-wrapper-input:valid {
    border-color: var(--white);
}

.form-feedback-wrapper-textarea:focus+.form-feedback-wrapper-label,
.form-feedback-wrapper-textarea:valid+.form-feedback-wrapper-label {
    top: 0px;
    left:0;
}

.form-feedback-wrapper-input:focus+.form-feedback-wrapper-label,
.form-feedback-wrapper-input:valid+.form-feedback-wrapper-label {
    top: -15px;
    left:0;
}

.form-feedback-wrapper-input {
    transition: all .3s ease;
    width: 100%;
    border: none;
    border-bottom: 1px solid #bab9ba;
    font-size: 14px !important;
    outline: none;
    background:transparent;
    padding:10px;
    border-radius: 0;
    height: 44px;
    line-height: 44px;
}

.form-feedback-wrapper-label {
    color:var(--white);
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    position: absolute;
   left: 15px;
    top: 11px;
    z-index: 10;
    transition: all .3s ease;
}

.btn-feedback-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btn-feedback-wrapper button {
    margin-top: 20px;
    cursor: pointer;
    background: var(--main-color);
    color: #fff;
    border-radius: 8px;
    font-weight: 400;
    height: 56px;
    line-height: 56px;
    transition: 0.3s ease-in-out;
    padding: 0 70px;
    font-size: 15px;
    animation: inf-pulse 1.1s;
    animation-iteration-count: infinite;
    box-shadow: 0 0 0 18px transparent;
    font-weight: 500;
    border: none;
}

@keyframes inf-pulse{
    0% {
    -webkit-box-shadow: 0 0 0 0 var(--main-color);
    -moz-box-shadow: 0 0 0 0 var(--main-color);
    -o-box-shadow: 0 0 0 0 var(--main-color);
    box-shadow: 0 0 0 0 var(--main-color);
}
}
.btn-feedback-wrapper button:hover { box-shadow: none }

#map-section{
    padding:40px 0;
}
#map{
    height:400px;
}
#map .ymaps-2-1-79-image {
    left: -11px!important;
    top: -38px!important;
    width: 34px!important;
    height: 41px!important;
    opacity: 1!important;
    background-position: 0px 0px!important;
    background-size: 34px 41px!important;
}



@media screen and (min-width:576px) {
    .btn-feedback-wrapper button{
        width: 194px;
    }
}

@media screen and (min-width:992px) {
    .left-feedback {
        width: 40%;
    }

    .left_feedback_content {
        padding: 45px;
    }

    .right-feedback {
        width: 60%;
    }
    
    .feedback-title {
        margin-bottom: 20px;
    }
    
}

/*****STYLING SECTION-BLOG-FULL-STORY START*****/
.section-blog-full-story__inner-top {
    background-color: rgb(250, 250, 250);
    width: 100%;
    margin-bottom: 60px;
    text-align: center;
}

.section-blog-full-story__inner-top h2 {
    font-size: 35px;
    padding: 60px 0;
}

.section-blog-full-story__inner-bottom {
    text-align: justify;
    padding-bottom: 60px;
}

.section-blog-full-story__inner-bottom img {
    max-width: 800px;
    margin: auto;
    width: 100%;
    height: 400px;
    border-radius: 8px;
    object-fit: cover;
    object-position: top;
    display:block;
}

.section-blog-full-story__inner-bottom p img { display: none }
.section-blog-full-story__inner-bottom p { margin-top: 20px }

/*****STYLING SECTION-SERVICE-STATIC START*****/
.services-static {
    background:#fff;
    padding: 60px 0 60px 0;
}

.services-list  {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 50px;
    row-gap:30px;
    padding: 0 20px;
}

.services-list__item {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 20px;
    border-radius: 20px;
    cursor:pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 70px;
}

.services-list__item:hover { box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 2px }
.services-list__item.active { max-height: 600px; white-space: inherit; height: inherit; }
.service-cat { padding: 60px 0 30px 0!important }

.services-static__inner {
    background: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
}

.services-static__inner ul img { display: none }
.services-static__img {
    height: 400px;
    position: relative;
}

.services-static__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-static__inner ul { padding: 0 20px 0 20px }
.services-static__inner ul li {
    background: url(../img/check.png) no-repeat;
    background-size: 18px;
    padding-left: 35px;
    background-position: 0px 0px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 15px;
}

/****STYLING PROJECT-STATİC-İNNER-PAGE START****/
.tab-content div {
    padding: 40px 16px;
}
.projects-full-story {
    padding: 60px 0;
}

.projects-full-story h3 {
    font-size: 36px;
}

.projects-full-story .project-right h4 {
    font-size:25px;
    margin-bottom: 20px;
}

.projects-full-story p {
    padding: 24px 0;
    font-size: 18px;
    line-height: 24px;
}

.projects-full-story .projects-left {
}

.projects-full-story .fotorama  {
    order: 3;
}
.projects-full-story .full-story-content img { width: 100% }

.projects-full-story .projects-full-story__form {
    padding: 32px 24px;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    border-radius: 28px;
    box-shadow: 0px 3px 25px rgba(0, 30, 69, 0.2);
}
.projects-full-story .project-static-inner-page {
    background: #f6f6f6;
    padding-bottom: 45px;
}

.projects-full-story .project-static-inner-page .full-text {
    border-radius: 33px;
    background: #fff;
    padding: 30px 50px;
}

.projects-full-story .project-static-inner-page .fotorama, .projects-full-story .project-static-inner-page .fotorama__stage__frame { border-radius: 30px }
.projects-full-story .projects-static .projects-box-wrapper { padding: 30px!important }
.projects-full-story .projects-static .project-box { margin: 0!important }
.projects-full-story .projects-static .project-box .card-body { margin-bottom: 20px!important }
.projects-full-story .projects-cat, .projects-full-story .projects-cat-main { padding-top: 0!important }
.projects-full-story .projects-cat-main .projects__inner { display: flex; gap: 30px }
.projects-full-story .projects-cat .projects__inner  {
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap:30px
}
.projects-full-story .projects-cat .projects__inner .swiper-slide { width: 32% }

/****STYLING STAFF-PAGE START****/
.staff-static {
   padding: 60px 0 40px 0; 
}

.staff-card {
    width: 100%;
    height: 320px;
    background: white;
    border-radius: 32px;
    padding: 3px;
    position: relative;
    box-shadow: #604b4a30 0px 70px 30px -50px;
    transition: all 0.5s ease-in-out;
    margin-bottom: 20px;
    cursor: pointer;
}

.staff-card .mail {
    position: absolute;
    right: 2rem;
    top: 1.4rem;
    background: transparent;
    border: none;
}

.staff-card .mail svg {
    stroke: #fbb9b6;
    stroke-width: 3px;
}

.staff-card .mail svg:hover {
    stroke: #f55d56;
}

.staff-card .profile-pic {
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    top: 3px;
    left: 3px;
    border-radius: 29px;
    z-index: 1;
    border: 0px solid #fbb9b6;
    overflow: hidden;
    transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
}

.staff-card .profile-pic img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: 0px 0px;
    object-position: 0px 0px;
    transition: all 0.5s ease-in-out 0s;
}

.staff-card .profile-pic svg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0px 0px;
    object-position: 0px 0px;
    transform-origin: 45% 20%;
    transition: all 0.5s ease-in-out 0s;
}

.staff-card .bottom {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #000;
    top: 80%;
    border-radius: 29px;
    z-index: 2;
    box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.staff-card .bottom .content {
    position: absolute;
    bottom: 10px;
    left: 1.5rem;
    right: 1.5rem;
    height: 160px;
}

.staff-card .bottom .content .name {
    display: block;
    font-size: 1.2rem;
    color: white;
    font-weight: bold;
}

.staff-card .bottom .content .about-me {
    display: block;
    font-size: 0.9rem;
    color: white;
    margin-top: 1rem;
}

.staff-card .bottom .bottom-bottom {
    position: absolute;
    color: #fff;
    bottom: 20px;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-card .bottom .bottom-bottom .social-links-container {
    display: flex;
    gap: 1rem;
}

.staff-card .bottom .bottom-bottom .social-links-container svg {
    height: 20px;
    fill: white;
    filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
}

.staff-card .bottom .bottom-bottom .social-links-container svg:hover {
    fill: #f55d56;
    transform: scale(1.2);
}

.staff-card .bottom .bottom-bottom .button {
    background: white;
    color: #fbb9b6;
    border: none;
    border-radius: 20px;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
}

.staff-card .bottom .bottom-bottom .button:hover {
    background: #f55d56;
    color: white;
}

.staff-card:hover {
    border-top-left-radius: 55px;
}

.staff-card:hover .bottom {
    top: 20%;
    border-radius: 80px 29px 29px 29px;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

.staff-card:hover .profile-pic {
    width: 100px;
    height: 100px;
    aspect-ratio: 1;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    z-index: 3;
    border: 7px solid var(--main-color);
    box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
    transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
}

.staff-card:hover .profile-pic:hover {
    transform: scale(1.3);
    border-radius: 0px;
}

.staff-card:hover .profile-pic img {
    transition: all 0.5s ease-in-out 0.5s;
}

.staff-card:hover .profile-pic svg {
    transform: scale(2.5);
    transition: all 0.5s ease-in-out 0.5s;
}



@media only screen and (max-width: 1210px) {

    /*****RESPONSIVE HEADER*****/
    .btn-consultation span, .menu-item { margin-left: 15px }
    .menu li a { font-size: 13px }
    .btn-consultation span { padding: 5px 10px !important; font-size: 15px!important }
    .menu, .btn-price { display: none }
    .menu-toggle { display: block }
    .header.active, header {  background: var(--main-color)!important }
    .logo-mobile { display: block }
    .logo-header { display: none }

    /*****RESPONSIVE FOOTER*****/
    .footer__top ul li { font-size: 14px }
    .footer__top .contact .number, .contact .email { font-size: 14px }
    .footer__top .contact {padding-top: 12px;} 
    .copyright { font-size: 14px }

    .preferences-btn {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media only screen and (max-width: 992px) {


    /*****RESPONSIVE SLIDER*****/
    .swiper-header .swiper-text h2 { font-size: 40px }
    .swiper-header .swiper-text p { font-size: 16px }
    .swiper-header .swiper-text { max-width: 600px }

    /*****RESPONSIVE PREFERENCE*****/
    .preference-button-prev, .preference-button-next { display: none }
    .preferences-btn a { padding: 8px; font-size: 12px }

    /*****RESPONSIVE INFORMATIONS*****/
    .informations-inner { flex-direction: column }
    .informations-inner article { width: 100% }

    .informations-inner article:hover img { transform: scale(1) }

    /*****RESPONSIVE ABOUT*****/
    /*
    .about-img-desktop { display: none }
    .about-inner { flex-direction: column }
    .about-text, .about-img { width: 100% }
    .about-img-mobile { display: block; width: 100% }
    .about-text { padding-right: 0 }
    .about h2 { font-size: 38px }*/
    
    /*****RESPONSIVE CERTIFICATES-STATIC*****/
    .certificates-static__content { grid-template-columns: auto }
    .certificates-static__content div { max-width: 550px; margin:auto;width: 100%; }
    
    /*****RESPONSİVE SECTION-BLOG-FULL-STORY START*****/
    .section-blog-full-story__inner-top h2 {
        font-size: 30px;
        padding: 40px 0;
    }
    
    /*****RESPONSİVE FOOTER*****/
    .copyright { 
        text-align: center;
        margin-top: 20px;        
    }
    
    .copyright a {
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0, 0);
        justify-content: center;
    }
    
    .footer__top {
        position: relative;
    }
    .footer__top ul { margin-bottom: 20px }
    .socials { margin-top: 20px }
    .footer__top {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        color: #fff;
    }
    .footer__logo-desktop { display: none }
    
    /*****RESPONSIVE SERVICE*****/
    .services-list  { grid-template-columns: auto auto }
    
    /*****RESPONSIVE REFERENCES*****/
    .references-static__content { grid-template-columns: auto auto auto }
    
    /*****RESPONSIVE PRojects*****/
    .project-right {
        margin-top: 20px;
    }
        .tab-content div {
        padding: 20px 16px;
    }
}

@media only screen and (max-width: 768px) {
    
    .service, .projects, .informations, #feedback, .services-static, .references-static__content, .service-cat, .staff-static {  padding: 30px 0!important }

    /*****RESPONSIVE HEADER*****/
    header { background: #df4847 }
    header.active {  background:rgb(0 0 0 / 27%); }
    header.active .menu-toggle span { background: #fff }
    .menu, .btn-price { display: none }
    .menu-toggle { display: block }

    /*****RESPONSIVE SLIDER*****/
    .swiper-header .swiper-text h2 { font-size: 28px }
    .swiper-header .swiper-text { max-width: 400px }
    .swiper-header .swiper-header-btns { bottom: 8px; left: 10px }
    .swiper-header .slide-btns {
        flex-direction: column;
        align-items: flex-start;
        gap: 0
    }
    .swiper-header .slide-btns a { width: 100% }
    .swiper-header .swiper-slide__btn-2 { margin-top: 10px }

    /*****RESPONSIVE SECTION-TITLES*****/
    .preferences h2,
    .service h2,
    .projects h2,
    .informations h2,
    .feedback-title h3,
    .references h2, .advantages-title h2  { font-size: 25px }
    .section-title_blog { display:flex; flex-direction: column; }    

    /*****RESPONSIVE SERVICE*****/
    .service .card {  height: 250px }
    .service .card .text { bottom: 15px!important }

    /*****RESPONSIVE PROJECTS*****/
    .projects-inner { grid-template-columns: auto auto }
    .project-item h3 { font-size: 22px }
    .projects-cat { flex-direction: column; align-items: center }

    /*****RESPONSIVE ABOUT*****/
    /*.about h2 { font-size: 28px }
    .about .about-main__text { font-size: 16px }*/

    /****RESPONSIVE ONFOOTER****/
    .onfooter h2 { font-size: 24px }
    .onfooter-btn { font-size: 15px; width: 200px;}
    .onfooter .btn { width: inherit; font-size: 14px }

    /*****RESPONSIVE ABOUT-STAT力C*****/
    .about { padding: 10px 0 30px 0; }
    .about-static { padding-top: 120px }
    .about-static__subtitle { display: none }
    .breadcumb a { font-size: 13px }

    /*****RESPONSIVE SERVICE INTERNAL*****/
    .service-internal { display: flex; flex-direction: column }
    .service-internal__imgs { width: 100% }

    /*****RESPONSIVE CERTIFICATES-STATIC*****/
    .section-top-static { padding: 135px 0 0 0 }
    .section-top-static__inner { padding-bottom: 15px }

    /*****RESPONSIVE REFERENCES*****/
    .references .swiper-pagination { display: none }
    .references-static__content { grid-template-columns: auto auto }
    .swiper-reference .swiper-wrapper { height: inherit }
    
    /*****RESPONSİVE SECTION-BLOG-FULL-STORY START*****/
    .section-blog-full-story__inner-top h2 { font-size: 25px; padding: 30px 0 }
    .section-blog-full-story__inner-top { margin-bottom: 40px }
    .section-blog-full-story__inner-bottom { padding-bottom: 40px }
    
     /*****RESPONSIVE SERVICE*****/
    .services-list  { grid-template-columns: auto }
    
    /****STYLING STAFF-PAGE START****/
    .staff-card{
        border-top-left-radius: 55px;
    }
    
    .staff-card .profile-pic {
        width: 100px;
        height: 100px;
        aspect-ratio: 1;
        top: 10px;
        left: 10px;
        border-radius: 50%;
        z-index: 3;
        border: 7px solid var(--main-color);
        box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
        transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
    }
    
    .staff-card .bottom {
        top: 20%;
        border-radius: 80px 29px 29px 29px;
        transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    }
    .socials {
        position: absolute;
        left: 0;
        bottom: -25px;
    }
    .copyright {
        padding-top: 20px;
    }
}

@media only screen and (max-width: 576px) {

    /*****RESPONSIVE PREFERENCE*****/
    .swiper-preferences-btns, .preferences-btn .icon svg { display: block }
    .preferences-btn { grid-template-columns: repeat(1, 1fr); grid-row-gap: 10px }

    /*****RESPONSIVE PROJECTS*****/
    .projects-inner { grid-template-columns: auto }
    .project-item h3 { font-size: 22px }

    /*****RESPONSIVE FOOTER*****/
    .copyright span { margin-top: 20px }
    
    /*****RESPONSIVE REFERENCES*****/
    .references-static__content { grid-template-columns: auto }
    .references-static__content .swiper-slide { height: inherit }
}