@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);*{margin:0;padding:0;box-sizing:border-box;font-family:"IBM Plex Serif",serif;font-weight:400;font-style:normal;border:none;outline:none;text-decoration:none}html,body{height:100%;margin:0;display:flex;flex-direction:column}html{font-size:62.5%;overflow-x:hidden}header{padding:2rem 10%;background:#fff}h2{margin-bottom:1rem;text-transform:uppercase;font-size:2rem;text-indent:30px;font-weight:550}h3{text-transform:uppercase;font-size:2rem;text-indent:30px;font-weight:550}.header{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;right:0;left:0;z-index:100;box-shadow:0 2px 10px rgb(0 0 0 / .1)}.header .navbar a{font-size:1.6rem;margin-left:2rem;color:gray;font-weight:700;text-transform:uppercase;transition:color 0.3s}.header .navbar a:hover{color:green}.header .navbar .lang{margin-left:.3rem;font-size:1.2rem}.header .navbar .lang:active{color:brown}.header .navbar .lang:nth-child(5)::before{content:"|";margin-right:.3rem}.header .navbar .lang:nth-child(5)::after{content:"|";margin-left:.3rem}.header .navbar .lang:first-child::before{content:""}.logo{display:flex;align-items:center;justify-content:center}.logo img{max-height:60px;margin-right:2rem}.log a{font-size:2.8rem;color:gray}.log span{color:#e74c3c}.logtext{font-size:1.4rem;display:block;text-transform:uppercase;color:#303030}footer{padding:1.5rem;background:#2f4f4f;color:#fff;font-size:1.5rem}.footer{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-around}.footer-section{flex:1;min-width:200px;padding:1rem;text-align:center}.footer-section h4{padding-bottom:1rem;font-size:1.5rem;text-transform:uppercase;font-weight:550}.footer-section a{color:#fff;text-decoration:none;margin:0 5px}.footer-section img{width:24px;height:24px;margin:0 5px;background-color:#fff;opacity:.5}.footer-bottom{text-align:center;padding-top:10px;border-top:1px solid #0a9594}#menu{display:none}.container{flex:1;display:flex;flex-direction:column;justify-content:space-between;max-width:1200px;margin:0 auto;font-size:1.8rem;padding-top:13rem;padding-bottom:3rem}.background{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(img/1.png);background-position:center;background-size:cover;opacity:.7;z-index:-1}.section{max-width:1200px;background-color:rgb(255 255 255 / .8);padding:2.5rem;border-radius:5px;box-shadow:0 2px 10px rgb(0 0 0 / .1);margin:2rem 1.5rem;text-align:justify;text-indent:3rem;line-height:1.6}.section strong{font-weight:700}.servis{background-color:rgb(255 255 255 / .8);display:table;margin:0 auto;border-radius:5px;padding:2rem;margin:2rem 1.5rem}.servises{list-style:none;counter-reset:li}.servises strong{font-weight:700}.servises li{position:relative;margin-bottom:20px;padding-left:50px;line-height:28px;transition:.3s linear}.servises li:last-child{margin-bottom:0}.servises li:before{counter-increment:li;content:counters(li,"");position:absolute;top:50%;margin-top:-14px;left:0;font-size:14px;width:28px;height:28px;text-align:center;line-height:28px;color:#fff;border-radius:50%;background:#2e2b1f}.servises li:nth-child(2):before,.servises li:nth-child(2):after{background:rgb(46 43 31 / .9)}.servises li:nth-child(3):before,.servises li:nth-child(3):after{background:rgb(46 43 31 / .8)}.servises li:nth-child(4):before,.servises li:nth-child(4):after{background:rgb(46 43 31 / .7)}.servises li:nth-child(5):before,.servises li:nth-child(5):after{background:rgb(46 43 31 / .6)}.servises li:nth-child(6):before,.servises li:nth-child(6):after{background:rgb(46 43 31 / .5)}.servises li:nth-child(7):before,.servises li:nth-child(7):after{background:rgb(46 43 31 / .4)}.servises li:nth-child(8):before,.servises li:nth-child(8):after{background:rgb(46 43 31 / .3)}.servises li:nth-child(9):before,.servises li:nth-child(9):after{background:rgb(46 43 31 / .2)}.servises li:nth-child(10):before,.servises li:nth-child(10):after{background:rgb(46 43 31 / .2)}.servises li:nth-child(11):before,.servises li:nth-child(11):after{background:rgb(46 43 31 / .1)}.servises li:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#2e2b1f;top:50%;left:34px;margin-top:-4px;opacity:0;transition:.3s linear}.servises li:hover:after{opacity:1}.about-me{display:flex;flex-direction:row;justify-content:space-between;padding:20px;flex-wrap:wrap;background-color:#fff;box-shadow:0 4px 8px rgb(0 0 0 / .1);border-radius:10px;max-width:1200px;margin:2rem}.about-me-photo{flex:1;max-width:300px}.about-me-photo img{width:100%;height:auto;border-radius:10px;box-shadow:0 4px 8px rgb(0 0 0 / .1)}.about-me-info{flex:2;padding-left:2rem;padding-bottom:2rem}.about-me-info h2{text-align:center;margin-top:0;font-size:1.3em;color:#787;line-height:1.6;text-indent:3rem;font-weight:550}.about-me-info p{font-size:1.1em;color:#787;text-align:justify;text-indent:3rem;line-height:1.5}.about-me-info strong{font-weight:700}.contentimg{display:flex;flex-wrap:wrap;justify-content:center;padding:2rem;gap:4rem}.label{background:#fff;border-radius:15px;margin:1rem;padding:1rem;text-align:center}.card{background:#fff;border-radius:15px;margin:1rem;overflow:hidden;transition:transform 0.2s;text-align:center;width:calc(40% - 8rem)}.card:hover{transform:scale(1.05)}.card img{border-radius:50%;width:100%;height:auto;padding:1rem}.card h3,.label h3{padding:20px 0;color:gray}@media (max-width:1200px){header{padding:3rem 5%}}@media (max-width:900px){header{padding:2rem 3rem}html{font-size:55%}}@media (max-width:768px){.header .navbar{flex-direction:column;position:absolute;top:100%;width:100%;left:0;padding:0 2rem;background:#fff;clip-path:polygon(0 0,100% 0,100% 0,1% 0);transition:0.5s}.header .navbar a{display:block;margin:2rem 0}.header .navbar .lang:nth-child(5)::before,.header .navbar .lang:nth-child(5)::after{content:""}#menu{display:block;font-size:3rem;cursor:pointer;color:gray}.header .navbar.active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.footer-content{flex-direction:column}.about-me{flex-direction:column;align-items:center}.about-me-photo{max-width:100%}.about-me-info{padding-left:0}.about-me-info h2{margin-top:2rem}.card{width:70%}}@media (max-width:487px){.card{width:100%}}@media (max-width:487px){.about-me{font-size:1.5rem}}@media (max-width:330px){.about-me{font-size:1.3rem}}
.servises a{
color:#0b5757;
font-weight: 800;
}
     .chat-container {
            max-width: 888px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 30px;
        }

        .welcome-screen {
            text-align: center;
            padding: 20px;
        }
.welcome-logo {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.welcome-logo img {
    max-width: 100%;
    max-height: 100%;
}


        .welcome-text {
            font-size: 20px;
            margin: 20px 0;
            color: #555555;
        }

        .chat-screen {
            display: none;
            padding: 20px;
        }

        .chat-messages {
            height: 500px;
            overflow-y: auto;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .message {
            margin: 10px;
            padding: 12px 16px;
            border-radius: 8px;
            max-width: 80%;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.5;
        }

        .user {
            background-color: rgb(222, 237, 224);
            margin-left: 20%;
            color: rgb(12, 88, 73);
        }

        .response {
            background-color: #f5f5f5;
            margin-right: 20%;
            color: #333;
        }

        .thinking {
            font-style: italic;
            color: #666;
            background-color: #fff3e0;
        }

        .chat-form {
            display: flex;
            gap: 10px;
            padding: 10px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            font-size: 16px;
            outline: none;
        }

        .chat-input:focus {
            border-color: #1a73e8;
        }

        .chat-button {
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            background-color: #343a40;
            color: white;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }

        .chat-button:hover {
            background-color: rgb(38, 236, 210);
        }

        .typing {
            border-left: 3px solid #1a73e8;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

      
        .chat-messages::-webkit-scrollbar {
            width: 8px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: #555;
        }