.top {
    
    position: fixed;
    width:  100vw;
    height: 105px;
    z-index: 100;
    background-color: rgba(34, 34, 34, 0.726);
    overflow: hidden;
}



.menu {
    position: relative;
}

.line { 
    position: relative;
    top: -40px;
    left: 0;
    width: 1200px; 
    border-top: 1px solid #ffffff; 
}

.calculation {
    position: relative;
    width: 300px;
    height: 40px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 13px rgb(255, 255, 255);
}



.reserverServicesPanel {
    position: relative;
    top: 115px;
    left: 95px;
    width: 500px;
    height: 130px;
    background-color: rgba(34, 34, 34, 0.726);
    overflow: hidden;
}

@keyframes openReserverServicesPanelAnim {
    0% { opacity: 0;}  
    100% { opacity: 1;}
}

@keyframes exitReserverServicesPanelAnim {
    0% { opacity: 1;}  
    100% { opacity: 0;}
}

.reserverServicesPanel.openServicesPanelAnimate { animation: openReserverServicesPanelAnim 0.3s forwards; }
.reserverServicesPanel.exitServicesPanelAnimate { animation: exitReserverServicesPanelAnim 0.3s forwards; }

@keyframes openServecesMenuAnim {
    0% { transform: rotate(45deg)}  
    100% { transform: rotate(225deg)}
}

@keyframes exitServecesMenuAnim {
    0% { transform: rotate(225deg)}
    100% { transform: rotate(45deg)}  
}

.servicesMenu.openServecesMenuAnimate { animation: openServecesMenuAnim 0.3s forwards; }
.servicesMenu.exitServecesMenuAnimate { animation: exitServecesMenuAnim 0.3s forwards; }

@keyframes openServicesArrowAnim {
    0% { transform: rotate(0deg) ;}
    100% {transform: rotate(180deg);}
}

@keyframes exitServicesArrowAnim {
    0% {transform: rotate(180deg);}
    100% { transform: rotate(0deg);}
}

.servicesArrow.openServicesArrowAnimate { animation: openServicesArrowAnim 0.3s forwards; }
.servicesArrow.exitServicesArrowAnimate { animation: exitServicesArrowAnim 0.3s forwards; }


@keyframes showMenuServTeleAnim {
    0% {height: 0px;}
    100% { height: 240px;}
}

@keyframes hideMenuServTeleAnim {
    0% {height: 240px;}
    100% { height: 0px;}
}

.hideMenuServTele.showMenuServTeleAnimate { animation: showMenuServTeleAnim 0.3s forwards; }
.hideMenuServTele.hideMenuServTeleAnimate { animation: hideMenuServTeleAnim 0.3s forwards; }

.servicesblock:hover {
    background-color: rgba(22, 22, 22, 0.726)
}

.menu-consult {
    position: relative;
    top: 200px;
    left: 780px;
    width: 350px;
    height: 420px;
    background-color:rgba(58, 58, 58, 0.829);
    border-radius: 5px;
}

.name {
    width: 290px;
    height: 50px;
    background-color:rgba(156, 155, 155, 0.644);
    border: 2px solid rgb(190, 190, 190);
}

.tele-num {
    width: 290px;
    height: 50px;
    background-color:rgba(156, 155, 155, 0.644);
    border: 2px solid rgb(190, 190, 190);
}

.e-mail {
    width: 290px;
    height: 50px;
    background-color:rgba(156, 155, 155, 0.644);
    border: 2px solid rgb(190, 190, 190);
}

#panel {
    position: relative;
    top: 0;
    width:  100vw;
    height: 4000px;
    background-color: rgb(236, 234, 234);
}

.container {
    width: 1200px;
}

.point {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgb(209, 7, 7);
    position: relative;
    top: 8px;
    transform: translate-y(10px);
}

.circle {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: 87%;
    left: 93%;
}

.actionbtn {
    position: fixed;
    display: none;
    width: 120px;
    height: 50px;
    top:45%;
    left: 100%;
    transform: translateX(-120px);
    background-color: rgb(255, 105, 6);
}

.overlapCanvas {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.692);
    z-index: 200;
}

.action {
    position: fixed;
    display: none;
    width: 550px;
    height: 350px;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255, 255, 255);
    z-index: 1000;
    border-radius: 30px;
}


@keyframes Anim-circle {
    0% { scale: 1.1; }

    50% { scale: 1.33; }

    100% { scale: 1.1; }
}

.circle.circleAnimate { animation:  Anim-circle  2s infinite }

.menu_of_circle {
    position: fixed;
    width: 70px;
    height: 235px;
    left: 93%;
    top: 87%;
    transform: translate(-5px, -205px);
    overflow: hidden;
    background-color: #a8090900;
    display: none;
}

.telephone {
    position:relative;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background-color: rgb(0, 0, 0);
    top: 10px;
}

@keyframes showTelephone {
    0% { transform: translate(-50%, 212px);}  
    100% { transform: translate(-50%, 0);}
}

@keyframes hideTelephone {
    0% { transform: translate(-50%, 0);}  
    100% { transform: translate(-50%, 212px);}
}

.telegram {
    position:relative;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background-color: rgb(24, 148, 170);
    top: 20px;
}

@keyframes showTelegram {
    0% { transform: translate(-50%, 148px);}  
    100% { transform: translate(-50%, 0);}
}

@keyframes hideTelegram {
    0% { transform: translate(-50%, 0);}  
    100% { transform: translate(-50%, 148px);}
}

.whatsapp {
    position:relative;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background-color: rgb(26, 175, 64);
    top: 30px;
}

@keyframes showWhatsapp {
    0% { transform: translate(-50%, 84px);}  
    100% { transform: translate(-50%, 0);}
}

@keyframes hideWhatsapp {
    0% { transform: translate(-50%, 0);}  
    100% { transform: translate(-50%, 84px);}
}

.telephone.showTelephoneAnimate { animation: showTelephone 0.6s forwards; }
.telegram.showTelegramAnimate { animation: showTelegram 0.6s forwards; }
.whatsapp.showWhatsappAnimate { animation: showWhatsapp 0.6s forwards; }

.telephone.hideTelephoneAnimate { animation: hideTelephone 0.6s forwards; }
.telegram.hideTelegramAnimate { animation: hideTelephone 0.6s forwards; }
.whatsapp.hideWhatsappAnimate { animation: hideTelephone 0.6s forwards; }

.btn {
    padding: 8px 15px;
    background-color: #cf1212;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    position: relative;
    font-size: 30px;
    left: 0px;
    top: 145px;
}

.btn:hover {
    padding: 8px 15px;
    background-color: #a80909;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-weight: bold;
}

@keyframes slideProjects {
    0% { transform: translateX(0); opacity: 1;}  
    100% { transform: translateX(-100px); opacity: 0;}
}

@keyframes slideProjectLeftDesctop {
    0% { transform: translateX(0); opacity: 1;}  
    100% { transform: translateX(100px); opacity: 0;}
}


@keyframes slideProjectsLeft {
    0% { transform: translateX(0); opacity: 1;}  
    100% { transform: translateX(100px); opacity: 0;}
}

@keyframes slideNewProjects {
    0% { transform: translateX(100px); opacity: 0;}  
    100% { transform: translateX(0); opacity: 1;}
}

@keyframes previousProjectDesctop {
    0% { transform: translateX(-100px); opacity: 0;}  
    100% { transform: translateX(0); opacity: 1;}
}

@keyframes slidePreviousProjects {
    0% { transform: translateX(-100px); opacity: 0;}  
    100% { transform: translateX(0); opacity: 1;}
}

.back {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(236, 234, 234);
    color: rgb(40, 50, 59);
}

.back:hover {
    background-color: rgb(255, 105, 6);
    color: rgb(236, 234, 234);
}

.next {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(236, 234, 234);
    color: rgb(40, 50, 59);
}

.next:hover {
    background-color: rgb(255, 105, 6);
    color: rgb(236, 234, 234);
}


@keyframes slideNext {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(-300px);}
}

@keyframes lastSlideNext {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(-170px);}
}

@keyframes slideBack {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(300px);}
}

@keyframes lastSlideBack {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(170px);}
}

.box {
    display: flex; 
    position: relative; 
    top: 50px;
}

.box.nextAnimate { animation: slideNext 0.6s forwards; }
.box.lastNextAnimate { animation: lastSlideNext 0.3s forwards; }
.box.backAnimate { animation: slideBack 0.6s forwards; }
.box.lastBackAnimate { animation: lastSlideBack 0.3s forwards; }

.div1.slideProject { animation: slideProjects 0.3s forwards; }
.div1.slideProjectLeftDesctop { animation: slideProjectLeftDesctop 0.3s forwards; }
.div1Telephone.slideProject { animation: slideProjects 0.3s forwards; }
.div1Telephone.slideProjectLeft { animation: slideProjectsLeft 0.3s forwards; }

.div2.slideProject { animation: slideProjects 0.3s forwards; }
.div2.slideProjectLeftDesctop { animation: slideProjectLeftDesctop 0.3s forwards; }
.div2Telephone.slideProject { animation: slideProjects 0.3s forwards; }
.div2Telephone.slideProjectLeft { animation: slideProjectsLeft 0.3s forwards; }

.div3.slideProject { animation: slideProjects 0.3s forwards; }
.div3.slideProjectLeftDesctop { animation: slideProjectLeftDesctop 0.3s forwards; }
.div3Telephone.slideProject { animation: slideProjects 0.3s forwards; }
.div3Telephone.slideProjectLeft { animation: slideProjectsLeft 0.3s forwards; }

.div4.slideProject { animation: slideProjects 0.3s forwards; }
.div4.slideProjectLeftDesctop { animation: slideProjectLeftDesctop 0.3s forwards; }
.div4Telephone.slideProject { animation: slideProjects 0.3s forwards; }
.div4Telephone.slideProjectLeft { animation: slideProjectsLeft 0.3s forwards; }

.div5.slideProject { animation: slideProjects 0.3s forwards; }
.div5.slideProjectLeftDesctop { animation: slideProjectLeftDesctop 0.3s forwards; }
.div5Telephone.slideProject { animation: slideProjects 0.3s forwards; }
.div5Telephone.slideProjectLeft { animation: slideProjectsLeft 0.3s forwards; }

.div1.newProject { animation: slideNewProjects 0.3s forwards; }
.div1.previousProjectDesctop { animation: previousProjectDesctop 0.3s forwards; }
.div1Telephone.newProject { animation: slideNewProjects 0.3s forwards; }
.div1Telephone.previousProject { animation: slidePreviousProjects 0.3s forwards; }

.div2.newProject { animation: slideNewProjects 0.3s forwards; }
.div2.previousProjectDesctop { animation: previousProjectDesctop 0.3s forwards; }
.div2Telephone.newProject { animation: slideNewProjects 0.3s forwards; }
.div2Telephone.previousProject { animation: slidePreviousProjects 0.3s forwards; }

.div3.newProject { animation: slideNewProjects 0.3s forwards; }
.div3.previousProjectDesctop { animation: previousProjectDesctop 0.3s forwards; }
.div3Telephone.newProject { animation: slideNewProjects 0.3s forwards; }
.div3Telephone.previousProject { animation: slidePreviousProjects 0.3s forwards; }

.div4.newProject { animation: slideNewProjects 0.3s forwards; }
.div4.previousProjectDesctop { animation: previousProjectDesctop 0.3s forwards; }
.div4Telephone.newProject { animation: slideNewProjects 0.3s forwards; }
.div4Telephone.previousProject { animation: slidePreviousProjects 0.3s forwards; }

.div5.newProject { animation: slideNewProjects 0.3s forwards; }
.div5.previousProjectDesctop { animation: previousProjectDesctop 0.3s forwards; }
.div5Telephone.newProject { animation: slideNewProjects 0.3s forwards; }
.div5Telephone.previousProject { animation: slidePreviousProjects 0.3s forwards; }


.openProjectPanel {
    
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:#000000b4;
    z-index: 1000;
}

.openProject {
    position: relative;
    width: 700px;
    left: 50%;
    transform: translateX(-50%);
}

.topContainerTelephone {
    display: none;
}

.topContainerTelephoneMenu {
    display: none;
}

.topSubmenu {
    position: fixed;
    top: 105px;
    left: 0px;
    display: none;
    width: 100%;
    background-color: rgb(58, 58, 58);
    z-index: 99;
}

.topPictureTelephone {
    display: none;
}

@keyframes topSubmenuOpenAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes topSubmenuExitAnim {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.topSubmenu.topSubmenuOpenAnimate {animation: topSubmenuOpenAnim 0.5s forwards;}
.topSubmenu.topSubmenuExitAnimate {animation: topSubmenuExitAnim 0.5s forwards;}



.servicesTelephone {
    display: none;
}

.projectsTelephone {
    display: none;
}

.nextFeedbackText {
    position: relative; 
    left: 6px; 
    top: -13px; 
    -webkit-user-select: none;
}

.backFeedbackText {
    position: relative; 
    left: 0px; 
    top: -13px; 
    -webkit-user-select: none;
}

.nextProjectTelephone {
    cursor: pointer;
}

.connectionTelephone {
    display: none;
}


@media (max-width: 1000px) {
    #topContainerDesctop {display: none;}
    #topContainerTelephone {display: block;}
    #topContainerTelephoneMenu {display: block;}
    #top {background-color: rgb(58, 58, 58);}
    #topPictureDesctop {display: none;}
    #topPictureTelephone {display: block;}
    #circleDesctop {display: none;}
    #circleTelephone {display: none;}
    #panel {position: relative; top: -50px; overflow: hidden; width: 100%; height: 7335px;}
    #servicesDesctop {display: none;}
    #servicesTelephone {display: block;}
    #projectsDesctop {display: none;}
    #projectsTelephone {display: block;}
    #connectionDesctop {display: none;}
    #connectionTelephone {display: block;}
    body { height: 4000px;}
    #projectsGaleryDesctop {display: none;}
    #projectsGaleryTelephone {display: flex;}
    #galeryTextDesctop {display: none;}
    #galeryTextTelephone {display: block;}
    #infoDesctop {display: none;}
    #infoTelephone {display: block;}
    #infoButtomDesctop {display: none;}
    #infoButtomTelephone {display: block;}
    #servicesDesctopMenu {display: none;}
    #topContainerServicesDesctop {display: none;}
    #topContainerServicesTelephone {display: block;}
    #servicesGeleryDesctop {display: none;}
    #servicesGeleryTelephone {display: block;}
    #outsideFormDesctop {display: none;}
    #outsideFormTelephone {display: block;}
    #privacyDesctop {display: none;}
    #privacyTelephone {display: block;}
    #calculatorDesctop {display: none;}
    #calculatorTelephon {display: block;}
    #calcButTelephone {display: block;}
    #topDesctop {display: none;}
    #topTelephone {display: block;}
    
}

.nextTelephone {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(255, 105, 6);
    color: rgb(236, 234, 234);
}

.backTelephone {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(255, 105, 6);
    color: rgb(236, 234, 234);
}


@keyframes slideNextTelephone {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(-325px);}
}

@keyframes slideBackTelephone {  
    0% { transform: translateX(0);}  
    100% { transform: translateX(325px);}
}

.boxTelephone.backTelephoneAnimate { animation: slideBackTelephone 0.5s forwards; }
.boxTelephone.nextTelephoneAnimate { animation: slideNextTelephone 0.5s forwards; }

@font-face {
    font-family: 'myImpact';
    src: url('./Font/impact.ttf') format('truetype');
}

.projectsGaleryTelephone {
    display: none;
}

.galeryTextTelephone {
    display: none;
}

.infoTelephone {
    display: none;
}

.infoButtomTelephone {
    display: none;
}

.topContainerServicesTelephone {
    display: none;
}

.servicesGeleryTelephone {
    display: none;
}

.outsideFormTelephone{
    display: none;
}

.privacyTelephone{
    display: none;
}

.calcButTelephone{
    display: none;
}



@keyframes thisnextFormQuestionAnim {
    0% { opacity: 1; top: 0px;}  
    100% { opacity: 0; top: 20px;}
}

@keyframes nextthisFormQuestionAnim {
    0% { opacity: 0; top: 20px;}
    100% { opacity: 1; top: 0px;}  
}

.room_type.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.room_type.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }

.room_square.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.room_square.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }

.work_type.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.work_type.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }

.room_layout.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.room_layout.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }

.deadline.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.deadline.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }

.register.thisnextFormQuestion { animation: thisnextFormQuestionAnim 0.3s forwards; }
.register.nextthisFormQuestion { animation: nextthisFormQuestionAnim 0.3s forwards; }


@keyframes nextProgressScaleAnim {
    0% {transform: translateX(0px);}
    100% {transform: translateX(140px);}  
}

@keyframes previousProgressScaleAnim {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-140px);}  
}

.progress_scale.nextProgressScale { animation: nextProgressScaleAnim 0.3s forwards; }
.progress_scale.previousProgressScale { animation: previousProgressScaleAnim 0.3s forwards; }


@keyframes thisnextFormQuestionAnim_tel {
    0% { opacity: 1; top: 0px;}  
    100% { opacity: 0; top: 20px;}
}

@keyframes nextthisFormQuestionAnim_tel {
    0% { opacity: 0; top: 20px;}
    100% { opacity: 1; top: 0px;}  
}

.room_type_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.room_type_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }

.room_square_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.room_square_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }

.work_type_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.work_type_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }

.room_layout_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.room_layout_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }

.deadline_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.deadline_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }

.register_tel.thisnextFormQuestion_tel { animation: thisnextFormQuestionAnim_tel 0.3s forwards; }
.register_tel.nextthisFormQuestion_tel { animation: nextthisFormQuestionAnim_tel 0.3s forwards; }


@keyframes nextProgressScaleAnim_tel {
    0% {transform: translateX(0px);}
    100% {transform: translateX(16.7%);}  
}

@keyframes previousProgressScaleAnim_tel {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-16.7%);}  
}

.progress_scale_tel.nextProgressScale_tel { animation: nextProgressScaleAnim_tel 0.3s forwards; }
.progress_scale_tel.previousProgressScale_tel { animation: previousProgressScaleAnim_tel 0.3s forwards; }


/* DESKTOP ONLY */

.hero {
    position: relative;
    top: -0px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 40px 100px;
}

h1 {
    font-size: 50px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 28px;
    max-width: 940px;
    color: #1A1A1A;
}

.subtitle {
    position: relative;
    top: -20px;
    font-size: 21px;
    line-height: 1.65;
    font-weight: 400;
    color: #000000;
    max-width: 820px;
    margin-bottom: 50px;
}

.subtitle strong {
    position: relative;
    top: 20px;
    font-size: 28px;
    font-weight: 600;
    color: #1A1A1A;
}

.advantages {
    position: relative;
    display: grid;
    
    gap: 22px 48px;
    max-width: 840px;
    margin-bottom: 56px;
}

.advantage-item {
    font-size: 20px;
    line-height: 1.55;
    color: #2B2B2B;
}

.advantage-icon {
    color: #1F7A6E;
    font-size: 20px;
    margin-right: 14px;
    line-height: 1.4;
}

.cta-wrapper {
    margin-top: 10px;
}

.cta-button {
    display: inline-block;
    background-color: rgb(255, 115, 0);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 42px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.cta-button:hover {
    background-color: rgb(255, 115, 0)0;
    transform: translateY(-1px);
}

.cta-note {
    margin-top: 14px;
    font-size: 14px;
    color: #777777;
}

.topTelephone {
    display: none;
}