body {
}

.container {
    padding: 0 100px;
}

.btn {
    border-radius: 3px !important;
    font-size: 14px;
    font-weight: 500;
}

.btn.btn-success {
    border-color: #0063ff !important;
    background-color: #0063ff !important;
}

.form-control,
.form-select {
    font-size: 14px;
    border-radius: 3px;
    border: none;
    padding: 10px 15px;
    outline: none !important;
    box-shadow: none !important
}

.top {
    padding: 15px 0;
    background-color: rgb(83 84 101)
}

.top .logo img {
    height: 30px
}

.top .right {
}

.header {
    position: relative;
    /* background-image: url(../img/header-bg.webp); */
    background-image: url(../img/kommo_bg.png);
    background-size: cover;
    background-position: center;
    min-height: 500px;
    padding: 80px 0;
}

.header .overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgb(6 12 41 / 75%); */
    background-image: linear-gradient(to right, rgb(6 12 41 / 75%) , rgb(6 12 41 / 100%));
}

.sertacIcon{
    color: #fff;
    /* scale:2; */
}

.sertacIcon:hover{
    scale:2;
    transition: 200ms;
    transform: scale;
}

.kommoLogo{
    width: 500px;
    height: 500px;
    background-image: url(../img/kommo_bg_removed.png);
}

u {
    text-decoration: none;
}

.header .container {
    position: relative;
    z-index: 1
}

.header h1 {
    font-size: 30px;
    color: #fff;
}

.header .slogan {
    color: #fff;
}

.form-area {
    position: relative;
}

.form-result {
    position: absolute;
    background: #fff;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 5px;
    text-align: center;
    padding-top: 100px;
    color: #17c9ad;
    z-index: 10;
}

.leadform {
    background-color: rgb(141 142 164 / 50%);
    padding: 30px;
    border-radius: 5px
}

.leadform .form-check input {
    border: none;
}

.leadform .form-check p.small {
    font-size: 10px;
    color: #fff;
}

.icons {
    padding: 55px 0;
}

.icons span.caption {
    margin: 25px 0;
    display: block;
    font-size: 20px;
    color: #666
}

.icons p {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #999
}

.doctor {
    padding: 80px 0;
    background-color: rgb(83 84 101);
}

.doctor h2, .doctor p, .doctor u{
    color: #fff;
}



.doctor .right {
    padding-left: 50px;
    color: #666
}

.video {
    padding: 80px 0;
}

.video .left {
    padding-top: 40px;
    padding-right: 40px;
    color: #666
}

.patient {
    padding: 80px 0;
}

.patient h2,
.patient p {
    color: #666
}

.photos {
    padding: 80px 0 0 0;
    position: relative;
}

.photos h2,
.photos p {
    color: #666
}

.photos .photo-row .item a {
    position: relative;
}

.photos .photo-row .item .zoom-icon {
    opacity: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 70%;
    left: calc( 50% - 50px );
    z-index: 10;
    background-color: rgb(23, 201, 173, .5);
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    padding-top: 32px;
    transition: all .3s;
}

.photos .photo-row .item:hover .zoom-icon {
    opacity: 1;
    top: calc( 50% - 50px );
}

.photos .photo-row .item .zoom-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

.videos {
    padding: 80px 0;
}

.videos h2,
.videos p {
    color: #666
}

footer {
    padding: 60px 0;
    background-color: #17c9ad !important;
}

footer h3 {
    font-size: 30px;
    color: #fff;
}

footer .slogan {
    color: #fff;
}

footer .leadform {
    background-color: rgba( 0,0,0, .3);
}

.bottom .logo img {
    height: 40px
}

.bottom .text-white {
    font-size: 13px
}

.bottom .social a {
    color: #fff;
    font-size: 26px;
    margin-right: 10px;
}

.end {
    background: #2e2e2e;
    padding: 20px 0;
    font-size: 13px;
    color: #fff;
}

.end img {
    height: 30px;
}

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

    .container {
        padding: 0;
    }
    .top .logo,
    .top .right {
        text-align: center !important;
    }

    .header {
        padding-top: 20px !important;
        padding-bottom: 50px !important;
    }

    .header .left {
        padding: 0 !important;
        margin: 0 !important;
    }

    .header .left div {
        text-align: center !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    .header h1 {
        font-size: 24px;
    }

    .header .slogan {
        font-size: 13px;
    }

    .header .form-area form {
        margin: 0 20px !important;
        padding: 20px !important
    }

    .form-result {
        margin: 0 20px !important
    }

    .video .left {
        text-align: center !important;
        padding: 0 30px 20px 30px !important;
    }

    .doctor .right {
        text-align: center !important;
        padding: 40px !important;
    }
    .doctor .right ul {
        text-align: left !important;
    }

    footer {
        padding-top: 20px;
    }

    footer .left {
        padding: 0 !important;
        margin: 0 !important;
    }

    footer .left div {
        text-align: center !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    footer h1 {
        font-size: 24px;
    }

    footer .slogan {
        font-size: 13px;
    }

    footer .form-area form {
        margin: 0 20px !important;
        padding: 20px !important
    }

    .end .left, .end .right,
    .bottom  .left, .bottom .right {
        text-align: center !important
    }


}