:root{
    --clr-background: #fff;
    --clr-background-secondary: #F4F5F7;
    --clr-background-accent: #ECFCFF;
    --clr-accent: #00B1EB;
    --clr-text-primary: #36454E;
    --clr-text-secondary: #617C8C;
    --clr-text-accent: #121212;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
}

/* HEADER */

header .wrapper{
    background-color: var(--clr-background);
    padding: 20px 340px;
    display: grid;
    grid-template-columns: auto auto;
    border-bottom: 1px solid #d4d2e3;
}
header .wrapper .container{
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: end;
}
header .wrapper .logo{
    justify-content: start;
}
header .wrapper .container img{
    width: 133px;
}
header .wrapper .container h1{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--clr-accent);
}
header .wrapper .container a{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--clr-text-accent);
    text-decoration: none;
}
header .wrapper .container .underline{
    text-decoration: underline;
}
header .wrapper .container button{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    width: 179px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid transparent;
    background-color: var(--clr-accent);
    color: #fff;
    cursor: pointer;
    transition: all 200ms ease;
}
header .wrapper .container button:hover{
    color: var(--clr-accent);
    background-color: var(--clr-background);
    border: 1px solid var(--clr-accent);
}

header .wrapper_mobile *{
    transition: all 500ms ease;
}

header .wrapper_mobile{
    position: relative;
    z-index: 10;
    background-color: var(--clr-background);
    border-bottom: 1px solid #d4d2e3;
}
header .wrapper_mobile .top{
    position: relative;
    display: grid;
    grid-template-columns: 80% auto;
    padding: 20px 60px;
    z-index: 10;
    background-color: var(--clr-background);
}
header .wrapper_mobile .container{
    display: flex;
    align-items: center;
    gap: 10px;
}
header .wrapper_mobile .container h1{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--clr-accent);
}
header .wrapper_mobile .container img{
    width: 100px;
}
header .wrapper_mobile .container .burger{
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}
header .wrapper_mobile .container_burger{
    display: flex;
    justify-content: right;
    transition: all 200ms ease;
}
header .wrapper_mobile .container .burger span{
    height: 2px;
    width: 27px;
    background-color: var(--clr-text-primary);
    transition: all 200ms ease;
}
header .wrapper_mobile .container .burger .hidden{
    opacity: 0;
}
header .wrapper_mobile .container .burger .left{
    transform: rotateZ(-45deg);
    margin-top: -8px;
}
header .wrapper_mobile .container .burger .right{
    transform: rotateZ(45deg);
    margin-bottom: -8px;
}
header .wrapper_mobile .body{
    position: absolute;
    z-index: 0;
    background-color: var(--clr-background);
    width: 100vw;
    border-bottom: 1px solid #d4d2e3;
    transform: translateY(-370px);
}
header .wrapper_mobile .body .wrapper_body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 50px 0;
    padding-top: 0px;
}
header .wrapper_mobile .body .wrapper_body a{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--clr-text-accent);
    text-decoration: 0;
}
header .wrapper_mobile .body .wrapper_body button{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    width: 179px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid transparent;
    background-color: var(--clr-accent);
    color: #fff;
    cursor: pointer;
    transition: all 200ms ease;
}
header .wrapper_mobile .body .wrapper_body button:hover{
    color: var(--clr-accent);
    background-color: var(--clr-background);
    border: 1px solid var(--clr-accent);
}
header .visible .body{
    transform: translateY(0);
}

/* MAIN */

main .landing .wrapper .slideshow-container{
    position: relative;
    display: grid;
    grid-template-columns: 100% 100% 100% 100% 100%;
    overflow-x: hidden;
}
main .landing .wrapper .slideshow-container .item{
    display: grid;
    width: 100vw;
    grid-template-columns: 50% 50%;
    transition: all 500ms ease;
    transform: translateX(0);
}
main .landing .wrapper .slideshow-container .item .left{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--clr-background-secondary);
}
main .landing .wrapper .slideshow-container .item .left .content{
    position: relative;
    padding: 0 20px 0 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
main .landing .wrapper .slideshow-container .item .left .content h2{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: var(--clr-text-primary);
    font-size: 54px;
    line-height: 60px;
    padding-bottom: 30px;
}
main .landing .wrapper .slideshow-container .item .left .content .blue{
    color: var(--clr-accent);
}
main .landing .wrapper .slideshow-container .item .left .content p{
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 18px;
    color: var(--clr-text-secondary);
}
main .landing .wrapper .slideshow-container .item .left .content button{
    font-family: "Open Sans";
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    color: #fff;
    background-color: var(--clr-accent);
    border: 1px solid transparent;
    border-radius: 5px;
    width: 225px;
    height: 58px;
    cursor: pointer;
}
main .landing .wrapper .slideshow-container .item .left .content button img{
    width: 18px;
}
main .landing .wrapper .slideshow-container .item .left .navigation{
    display: flex;
    gap: 15px;
    margin-top: 0px;
}
main .landing .wrapper .slideshow-container .item .left .navigation img{
    width: 30px;
    cursor: pointer;
}
main .landing .wrapper .slideshow-container .item .right .content{
    position: relative;
}
main .landing .wrapper .slideshow-container .item .right .content .background-controls{
    position: absolute;
    display: flex;
    gap: 15px;
    bottom: 45px;
    right: 100px;
}
main .landing .wrapper .slideshow-container .item .right .content .background-controls span{
    display: flex;
    position: relative;
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    z-index: 10;
    transition: all 200ms ease;
}
main .landing .wrapper .slideshow-container .item .right .content .background-controls .active{
    background-color: #fff;
}
main .landing .wrapper .slideshow-container .item .right .content .background{
    transition: all 500ms ease;
    transform: translateX(0);
}
main .landing .wrapper .slideshow-container .item .right .content .background img{
    width: 100%;
}
main .landing .wrapper .slideshow-container .item .right .content .video video{
    width: 100%;
}
main .landing .wrapper .slideshow-container .item .right .content .video video::-webkit-media-controls {
    display: none;
}

main .cards .wrapper{
    padding: 80px 100px;
    background-color: var(--clr-background);
}
main .cards .wrapper .top{
    text-align: center;
}
main .cards .wrapper .top h2{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: var(--clr-text-primary);
    font-size: 54px;
}
main .cards .wrapper .top h2 .blue{
    color: var(--clr-accent);
}
main .cards .wrapper .body{
    margin-top:40px;
}
main .cards .wrapper .body .container{
    display: grid;
    gap: 30px;
    grid-template-columns: auto auto auto auto;
    justify-content: center;
}
main .cards .wrapper .body .container .card{
    height: 330px;
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 25px 10px 50px 25px;
    background-color: #fff;
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.125);
    transition: all 200ms ease;
    border-radius: 20px;
}
main .cards .wrapper .body .container .card:hover{
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.225);
}
main .cards .wrapper .body .container .blue-card{
    box-shadow: none;
    background-color: var(--clr-background-accent);
}
main .cards .wrapper .body .container .blue-card:hover{
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.125);
}
main .cards .wrapper .body .container .card img{
    width: 66px;
}
main .cards .wrapper .body .container .card h3{
    font-family: "Open Sans", sans-serif;
    font-size: 28px;
    font-weight: 650;
    line-height: 35px;
    color: var(--clr-text-primary)
}
main .cards .wrapper .body .container .card p{
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--clr-text-secondary)
}



@keyframes pulse-white {
	0% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
	}
	
	50% {
		transform: scale(1);
		box-shadow: 0 0 0 7.5px rgba(255,255,255,0.1);
	}
    90%{
        transform: scale(1);
		box-shadow: 0 0 0 7.5px rgba(255,255,255,0);
    }
	
	100% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(255,255,255, 0);
	}
}
main .floorplan .wrapper{
    text-align: center;
    background-color: var(--clr-background-secondary);
    padding: 80px 0;
}
main .floorplan .wrapper .floorplan-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
main .floorplan .wrapper .floorplan-container .container{
    width: 1237px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
main .floorplan .wrapper .floorplan-container .container img{
    width: 1237px;
}
main .floorplan .wrapper .floorplan-container .container .icons{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: 11;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon{
    position: absolute;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,255,255, 1);
    transform: scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
	animation: pulse-white 2s infinite;
    cursor: pointer;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon img{
    width: 48px;
    height: 48px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
    top: 215px;
    left: 55px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
    top: 75px;
    left: 280px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
    top: 390px;
    left: 220px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
    top: 550px;
    left: 940px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
    top: 320px;
    left: 770px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
    top: 80px;
    left: 735px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
    top: 190px;
    left: 770px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
    top: 325px;
    left: 1080px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
    top: 450px;
    left: 823px;
}
main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
    top: 490px;
    left: 1115px;
}
main .floorplan .wrapper .floorplan-container .container .devices{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
}
main .floorplan .wrapper .floorplan-container .container .devices .device{
    position: absolute;
    background-color: var(--clr-background);
    width: 400px;
    padding: 16px 0 16px 5px;
    border-radius: 16px;
    box-shadow: 3px 0px 2rem rgba(0,0,0,0.75);
    z-index: 12;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper{
    display: grid;
    grid-template-columns: 25% auto 10%;
    gap: 20px;
    align-items: center;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .left img{
    width: 72px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: start;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more span{
    font-size: 21.2px;
    color: var(--clr-accent);  
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center h4{
    font-family: "Open Sans", sans-serif;
    font-size: 16.214px;
    color: var(--clr-text-primary);
    font-weight: 700;
    text-align: left;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more{
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more:hover{
    border-bottom: 1px solid var(--clr-accent);
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more p{
    font-family: "Open Sans", sans-serif;
    color: var(--clr-accent);
    font-size: 12.6px;
    font-weight: 500;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .right .device_icon{
    background-color: var(--clr-accent);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .right .device_icon img{
    width: 40px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_shutters{
    top: 120px;
    left: 100px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_ceilinglight{
    top: 0px;
    left: 330px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_motion{
    top: 290px;
    left: 260px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_lightbulb{
    top: 360px;
    left: 560px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_cooling{
    top: 0px;
    left: 370px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_heater{
    top: 200px;
    left: 360px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_power{
    top: 360px;
    left: 460px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_exit{
    top: 395px;
    left: 740px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_doorsensor{
    top: 240px;
    left: 710px;
}
main .floorplan .wrapper .floorplan-container .container .devices .device_ventilator{
    top: 50px;
    left: 650px;
}
main .floorplan .wrapper .bottom-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}
main .floorplan .wrapper .bottom-container h4{
    font-size: 28px;
    font-family: "Open Sans", sans-serif;
    color: var(--clr-text-primary);
}
main .floorplan .wrapper .bottom-container p{
    font-family: "Open Sans", sans-serif;
    font-size: 19px;
    color: var(--clr-text-secondary);
}
main .floorplan .wrapper .bottom-container button{
    width: 199px;
    height: 58px;
    font-size: 18px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    background-color: var(--clr-accent);
    margin-top: 10px;
    transition: all 200ms ease;
    cursor: pointer;
}
main .floorplan .wrapper .bottom-container button:hover{
    color: var(--clr-accent);
    background-color: var(--clr-background);
    border: 1px solid var(--clr-accent);
}
main .floorplan .wrapper .top-container {
    padding-bottom: 10px;
}
main .floorplan .wrapper .top-container h4{
    font-size: 28px;
    font-family: "Open Sans", sans-serif;
    color: var(--clr-text-primary);
}

main .clickable_cards .wrapper{
    background-color: var(--clr-background);
    padding: 60px 80px;
}
main .clickable_cards .wrapper .cards-container{
    display:flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
}
main .clickable_cards .wrapper .cards-container .card{
    position: relative;
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.125);
    background-color: var(--clr-background);
    border-radius: 20px;
    height: 407px;
    width: 393px;
}
main .clickable_cards .wrapper .cards-container .card .top img{
    width: 393px;
    height: 222px;
}
main .clickable_cards .wrapper .cards-container .card .top .video-container{
    width: 393px;
}
main .clickable_cards .wrapper .cards-container .card .top .video-container video{
    width: 393px;
    height: 222px;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
main .clickable_cards .wrapper .cards-container .card .bottom{
    display: grid;
    height: 200px;
    grid-template-rows: 30% 50% 15%;
    padding: 25px;
}
main .clickable_cards .wrapper .cards-container .card .bottom h4{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--clr-text-primary);
    text-align: center;
}
main .clickable_cards .wrapper .cards-container .card .bottom p{
    font-family: "Open Sans", sans-serif;
    text-align: center;
    font-size: 17px;
    color: var(--clr-text-secondary);
}
main .clickable_cards .wrapper .cards-container .card .bottom .links{
    text-align: center;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
    border-bottom: 1px solid var(--clr-text-accent);
    gap: 10px;
}
main .clickable_cards .wrapper .cards-container .card .bottom .links a{
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    color: var(--clr-text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    
}
main .clickable_cards .wrapper .cards-container .card .bottom .links a img{
    width: 30px;
    padding-left: 3px;
}
main .clickable_cards .wrapper .bottom-text{
    text-align: center;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
main .clickable_cards .wrapper .bottom-text h4{
    font-family: "Open Sans", sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--clr-text-primary);
}
main .clickable_cards .wrapper .bottom-text h4 .blue{
    color: var(--clr-accent);
}
main .clickable_cards .wrapper .bottom-text button{
    width: 231px;
    height: 58px;
    background-color: var(--clr-accent);
    border: 1px solid transparent;
    transition: all 200ms ease;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border-radius: 7px;
    cursor: pointer;
}
main .clickable_cards .wrapper .bottom-text button:hover{
    background-color: var(--clr-background);
    border: 1px solid var(--clr-accent);
    color: var(--clr-accent);
}

main .contact{
    background-color: var(--clr-background-secondary);
}
main .contact .wrapper{
    padding: 100px 60px;
    
}
main .contact .wrapper .container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
main .contact .wrapper .container .left{
    height: 850px;
    width: 605px;
    padding: 40px 30px;
    background-color: var(--clr-accent);
    border-radius: 16px;
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.125);
}
main .contact .wrapper .container .left .header h4{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: var(--clr-text-primary);
    font-size: 54px;
}
main .contact .wrapper .container .left .header h4 .white{
    color: #fff;
}
main .contact .wrapper .container .left .header p{
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    margin-top: 10px;
}
main .contact .wrapper .container .left .body{
    padding-top: 40px; 
}
main .contact .wrapper .container .left .body form{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
main .contact .wrapper .container .left .body form .input{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
main .contact .wrapper .container .left .body form .input label{
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
main .contact .wrapper .container .left .body form .input input{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: var(--clr-text-secondary);
    padding: 20px;
    border: 0;
    border-radius: 6px;
}
main .contact .wrapper .container .left .body form .input textarea{
    font-size: 18px;
    color: var(--clr-text-secondary);
    font-family: "Open Sans", sans-serif;
    resize: none;
    padding: 20px;
    border: 0;
    border-radius: 6px;
}
main .contact .wrapper .container .left .body form .captcha{
    transition: all 200ms ease;
}
main .contact .wrapper .container .left .body form .captcha, main .contact .wrapper .container .left .body form .button{
    display: flex;
    align-items: center;
    justify-content: center;
}
main .contact .wrapper .container .left .body form .button button{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: var(--clr-text-primary);
    font-weight: 700;
    width: 200px;
    height: 58px;
    background-color: var(--clr-background);
    border: 1px solid transparent;
    transition: all 200ms ease;
    cursor: pointer;
    border-radius: 6px;
}
main .contact .wrapper .container .left .body form .button button:hover{
    border: 1px solid var(--clr-background);
    background-color: transparent;
    color: var(--clr-background);
}
main .contact .wrapper .container .left .body form .button .sent{
    background-color: #00D513;
    color: #fff;
}
main .contact .wrapper .container .left .body form .button .sent:hover{
    border: 1px solid #00D513;
    background-color: transparent;
    color: #00D513;
}

main .contact .wrapper .container .right{
    height: 850px;
    width: 605px;
    padding: 50px 30px;
    background-color: var(--clr-background);
    border-radius: 16px;
    box-shadow: 1px 0px 1rem rgba(0,0,0,0.125);
    position: relative;
}
main .contact .wrapper .container .right .contact-head{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    text-align: center;
}
main .contact .wrapper .container .right .contact-head .item{
    border-left: 0.5px solid var(--clr-accent);
    border-right: 0.5px solid var(--clr-accent);
    border-bottom: 1px solid var(--clr-accent);
    padding: 5px;
    padding-top: 10px;
    cursor: pointer;
}
main .contact .wrapper .container .right .contact-head .border-left{
    border-left: 0;
}
main .contact .wrapper .container .right .contact-head .border-right{
    border-right: 0;
}
main .contact .wrapper .container .right .contact-head .item p{
    font-family: "Gotham-Book", sans-serif;
    color: var(--clr-text-primary);
    font-size: 16px;
    transition: all 200ms ease;
}
main .contact .wrapper .container .right .contact-head .item:hover p{
    transform: scale(1.1);
}
main .contact .wrapper .container .right .contact-head .active p{
    color: var(--clr-accent);
}
main .contact .wrapper .container .right .continent{
    overflow-y: scroll;
}
main .contact .wrapper .container .right .header h4{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: var(--clr-text-primary);
    font-size: 54px;
}
main .contact .wrapper .container .right .header h4 .blue{
    color: var(--clr-accent);
}
main .contact .wrapper .container .right .header p{
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    color: var(--clr-text-secondary);
    margin-top: 10px;
    font-weight: normal;
}
main .contact .wrapper .container .right .body .body-container{
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    row-gap: 50px;
    padding-top: 40px;
}
main .contact .wrapper .container .right .body .body-container .country{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
main .contact .wrapper .container .right .body .body-container .country img{
    width: 60px;
}
main .contact .wrapper .container .right .body .body-container .country h5{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--clr-text-primary);
}
main .contact .wrapper .container .right .body .body-container .country .country-contact{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
main .contact .wrapper .container .right .body .body-container .country .country-contact p{
    font-family: "Open Sans", sans-serif;
    font-weight: normal;
    color: var(--clr-text-secondary);
    font-size: 16px;
}

main .about{
    background-color: var(--clr-background);
}
main .about .wrapper{
    padding: 100px 340px;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center ;
}
main .about .wrapper .left .header{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
main .about .wrapper .left .header h3{
    font-family: "Open Sans", sans-serif;
    font-size: 45px;
    color: var(--clr-text-primary);
    font-weight: 700;
}
main .about .wrapper .left .header h3 .blue{
    color: var(--clr-accent);
}
main .about .wrapper .left .header p{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    color: var(--clr-text-secondary);
}
main .about .wrapper .left .body{
    padding: 30px 0;
}
main .about .wrapper .left .body p{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-text-primary);
}
main .about .wrapper .left .body .bottom{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    align-items: center;
    padding: 20px 0;
}
main .about .wrapper .left .body .bottom img{
    width: 188px;
    display: block;
    margin-left: auto;
}
main .about .wrapper .left .body .bottom .superbrands{
    width: 84px;
}
main .about .wrapper .left .body .bottom button img{
    width: 15px;
    display: unset;
    margin-left: 0;
}
main .about .wrapper .left .body .bottom button{
    width: 186px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--clr-accent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all 200ms ease;
    cursor: pointer;
}
main .about .wrapper .right .video-container{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
main .about .wrapper .right .video-container video{
    width: 605px;
}
main .about .wrapper .right .video-container .play{
    position: absolute;
    width: 63px;
    border-radius: 50%;
    padding: 12.5px;
    background-color: rgba(0,0,0,0.3);
    cursor: pointer;
}

main .info{
    background-color: var(--clr-background-secondary);
    width: 100vw;
}
main .info .wrapper{
    padding: 100px 340px;
    display: grid;
    grid-template-columns: 24% auto 24% auto 24% auto 24%;
}
main .info .wrapper .line{
    height: 100%;
    width: 1.5px;
    background-color: #d9d9d9;
}
main .info .wrapper .item{
    padding: 20px 0;
}
main .info .wrapper .item .header{
    display: flex;
    align-items: center;
    gap: 20px;
}
main .info .wrapper .item .header img{
    width: 27px;   
}
main .info .wrapper .item .header h3{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
}
main .info .wrapper .item .body{
    padding-left: 47.5px;
    padding-top: 10px;
}
main .info .wrapper .item .body p{
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 30px;
}
main .info .wrapper .item .body a{
    font-family: "Open Sans", sans-serif;
    color: var(--clr-text-primary);
    font-size: 16px;
    line-height: 30px;
}
main .info .wrapper .item .body .strong{
    font-weight: 700;
}
main .info .wrapper .item .body .socials{
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 15px;
}
main .info .wrapper .item .body .socials img{
    width: 40px;
    cursor: pointer;
}
main .info .wrapper .item .body button{
    width: 186px;
    height: 58px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 6px;
    background-color: var(--clr-accent);
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    margin-top: 10px;
    cursor: pointer;
}
main .info .wrapper .item .body button img{
    width: 18px;
}

footer{
    width: 100vw;
    background-color: #222425;
}
footer .wrapper .top{
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 23% auto 23% auto 23% auto 23%;
    align-items: start;
}
footer .wrapper .top .item img{
    width: 106px;
}
footer .wrapper .top .item h6{
    font-size: 16px;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    padding: 20px 0;
}
footer .wrapper .top .item .socials{
    display: flex;
    align-items: center;
    gap: 10px;
}
footer .wrapper .top .item .socials img{
    width: 40px;
}
footer .wrapper .top .item h5{
    color: var(--clr-accent);
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
}
footer .wrapper .top .item .nav{
    padding-top: 15px;
}
footer .wrapper .top .item .nav a{
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    display: block;
    padding: 8px 0;
}
footer .wrapper .top .item p{
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    padding-top: 20px;
}
footer .wrapper .top .item .input-container{
    width: 268px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 10px 0;
    background-color: rgba(245,245,245,0.24);
    margin-top: 15px;
}
footer .wrapper .top .item .input-container img{
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 1;
    margin-left: 10px;
}
footer .wrapper .top .item .input-container input{
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: #fff;
    border: none;
    padding-left: 5px;
    width: 220px;
    background-color: transparent;
}
footer .wrapper .top .item .app-links p{
    font-size: 12px;
}
footer .wrapper .top .item .app-links .app-links-container{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}
footer .wrapper .top .item .app-links img{
    width: 120px;
    cursor: pointer;
}
footer .wrapper .bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 0;
}
footer .wrapper .bottom p{
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
}
footer .wrapper .bottom a{
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
}

/* POPUPS */

.popup-hresk-video{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    z-index: 999999999999999;
    background-color: rgba(0,0,0,0.9);
}
.popup-hresk-video .close{
    position: absolute;
    top: 20px;
    right: 40px;
    color: var(--clr-accent);
}
.popup-hresk-video .close span{
    font-size: 50px;
    cursor: pointer;
}
.popup-hresk-video .wrapper{
    width: 854px;
    height: 480px;
    background-color: #fff;
}
.popup-hresk-video .wrapper .video-container{
    width: 100%;
    height: 100%;
}
.popup-hresk-video .wrapper .video-container video{
    width: 100%;
    height: 100%;
}

.popup-redirect{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999999999;
    background-color: rgba(0,0,0,0.4);
}
.popup-redirect .wrapper{
    position: relative;
    background-color: #fff;
    width: 500px;
    height: 200px;
    border-radius: 8px;
    padding: 20px;
}
.popup-redirect .wrapper .close{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.popup-redirect .wrapper .close span{
    font-size: 20px;
}
.popup-redirect .wrapper .body{
    padding-top: 20px;
    text-align: centers;
}
.popup-redirect .wrapper .body p{
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-text-primary);
}
.popup-redirect .wrapper .buttons{
    position: absolute;
    bottom: 20px;
    display: flex;
    width: 95%;
    align-items: center;
    justify-content: center;
}
.popup-redirect .wrapper .buttons button{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-text-primary);
    border: 0;
    border-radius: 8px;
    width: 180px;
    height: 50px;
    cursor: pointer;
    margin: 0 10px;
}
.popup-redirect .wrapper .buttons .continue-btn{
    background-color: var(--clr-accent);
    color: #fff;
}
.popup-redirect .wrapper .buttons .close-btn{
    background-color: var(--clr-background-secondary);
}

.popup-message-sent{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999999999;
    background-color: rgba(0,0,0,0.4);
}
.popup-message-sent .wrapper{
    position: relative;
    background-color: #fff;
    width: 500px;
    height: 200px;
    border-radius: 8px;
    padding: 20px;
}
.popup-message-sent .wrapper .close{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.popup-message-sent .wrapper .close span{
    font-size: 20px;
}
.popup-message-sent .wrapper .body{
    padding-top: 20px;
    text-align: center;
}
.popup-message-sent .wrapper .body p{
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--clr-text-primary);
}
.popup-message-sent .wrapper .buttons{
    position: absolute;
    bottom: 20px;
    display: flex;
    width: 95%;
    align-items: center;
    justify-content: center;
}
.popup-message-sent .wrapper .buttons button{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--clr-text-primary);
    border: 0;
    border-radius: 8px;
    width: 180px;
    height: 50px;
    cursor: pointer;
    margin: 0 10px;
}
.popup-message-sent .wrapper .buttons .continue-btn{
    background-color: var(--clr-accent);
    color: #fff;
}
.popup-message-sent .wrapper .buttons .close-btn{
    background-color: var(--clr-background-secondary);
}
/* OPTIMALIZATION */
@media (max-width: 2000px){
    main .clickable_cards .wrapper .cards-container {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 20px;
        justify-content: center;
    }
    main .clickable_cards .wrapper .cards-container .card {
        margin: 0 auto;
    }
}

@media(max-width: 1450px){
    main .landing .wrapper .slideshow-container .item .left .content button{
        gap: 8px;
        font-size: 14.4px;
        width: 180px;
        height: 46.4px;
    }
    main .landing .wrapper .slideshow-container .item .left .content button img{
        width: 14.4px;
    }
    main .landing .wrapper .slideshow-container .item .left .content{
        gap: 32px;
    }
    main .landing .wrapper .slideshow-container .item .left .content h2{
        font-size: 43.2px;
        line-height: 48px;
        padding-bottom: 24px;
    }    
}
@media (max-width: 1400px){
    main .landing .wrapper .slideshow-container .item .left .navigation{
        bottom: 10px;
        left: 50px;
    }
    main .contact .wrapper .container .left {
        height: 650.5px;
        width: 453.75px;
        padding: 30px 22.5px;
    }
    main .contact .wrapper .container .left .header h4 {
        font-size: 40.5px;
    }
    main .contact .wrapper .container .left .header p {
        font-size: 12px;
        margin-top: 7.5px;
    }
    main .contact .wrapper .container .left .body {
        padding-top: 30px;
    }
    main .contact .wrapper .container .left .body form {
        gap: 22.5px;
    }
    main .contact .wrapper .container .left .body form .input {
        gap: 7.5px;
    }
    main .contact .wrapper .container .left .body form .input label {
        font-size: 13.5px;
    }
    main .contact .wrapper .container .left .body form .input input {
        font-size: 13.5px;
        padding: 15px;
    }
    main .contact .wrapper .container .left .body form .input textarea {
        font-size: 13.5px;
        padding: 15px;
    }
    main .contact .wrapper .container .left .body form .button button {
        font-size: 13.5px;
        width: 150px;
        height: 43.5px;
    }
    main .contact .wrapper .container .right {
        height: 650.5px;
        width: 453.75px;
        padding: 30px 22.5px;
    }
    main .contact .wrapper .container .right .header h4 {
        font-weight: 700;
        font-size: 40.5px;
    }
    main .contact .wrapper .container .right .header p {
        font-size: 12px;
        margin-top: 7.5px;
    }
    main .contact .wrapper .container .right .continent{
        padding-top: 20px;
    }
    main .contact .wrapper .container .right .body .body-container {
        row-gap: 37.5px;
        padding-top: 20px;
    }
    main .contact .wrapper .container .right .body .body-container .country {
        gap: 3.75px;
    }
    main .contact .wrapper .container .right .body .body-container .country img {
        width: 45px;
    }
    main .contact .wrapper .container .right .body .body-container .country h5 {
        font-size: 13.5px;
    }
    main .contact .wrapper .container .right .body .body-container .country .country-contact {
        gap: 3.75px;
    }
    main .contact .wrapper .container .right .body .body-container .country .country-contact p {
        font-size: 12px;
    } 
    main .about .wrapper .right .video-container video{
        width: 411.4px;
    }
    main .about .wrapper .right .video-container .play{
        width: 42.84px;
        padding: 8.5px;
    }
    main .about .wrapper .left .header h3{
        font-size: 36.72px;
    }
    main .about .wrapper .left .header p{
        font-size: 12.24px;
    }
    main .about .wrapper .left .body .bottom button{
        width: 126.48px;
        height: 39.44px;
        gap: 7.225px;
        font-size: 10.2px;
    }
    main .about .wrapper .left .body p {
        font-size: 12.24px;
    }
    main .about .wrapper .left .body .bottom img {
        width: 127.84px;
    }    
    main .about .wrapper .left .body .bottom .superbrands{
        width: 60px;
    } 
    main .info .wrapper .item .header img{
        width: 21.6px;   
    }
    main .info .wrapper .item .header h3{
        font-size: 19.2px;
    }
    main .info .wrapper .item .body p{
        font-size: 12.8px;
        line-height: 24px;
    }
    main .info .wrapper .item .body a{
        font-size: 12.8px;
        line-height: 24px;
    }
    main .info .wrapper .item .body .socials img{
        width: 32px;
    }
    main .info .wrapper .item .body button{
        width: 148.8px;
        height: 46.4px;
        font-size: 14.4px;
    }
    main .info .wrapper .item .body button img{
        width: 14.4px;
    }    
    main .info .wrapper .item .body {
        padding-left: 43px;
        padding-top: 8px;
    }
    footer .wrapper .top .item img{
        width: 84.8px;
    }
    footer .wrapper .top .item h6{
        font-size: 12.8px;
    }
    footer .wrapper .top .item .socials img{
        width: 32px;
    }
    footer .wrapper .top .item h5{
        font-size: 16px;
    }
    footer .wrapper .top .item .nav a{
        font-size: 11.2px;
    }
    footer .wrapper .top .item p{
        font-size: 11.2px;
    }
    footer .wrapper .top .item .input-container{
        width: 214.4px;
    }
    footer .wrapper .top .item .input-container img{
        width: 14.4px;
        height: 14.4px;
        margin-left: 8px;
    }
    footer .wrapper .top .item .input-container input{
        font-size: 10.4px;
        width: 176px;
    }
    footer .wrapper .top .item .app-links img{
        width: 96px;
        cursor: pointer;
    }
}
@media(max-width: 1300px){
    main .landing .wrapper .slideshow-container .item .left .content{
        padding: 20px 40px 0 100px;
    }
}
@media (max-width: 1250px){
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        padding: 7.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon img{
        width: 36px;
        height: 36px;
    }
    main .floorplan .wrapper .floorplan-container .container img{
        width: 927.75px;
    }
    main .floorplan .wrapper .floorplan-container .container{
        width: 927.75px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
        top: 161.25px;
        left: 41.25px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
        top: 56.25px;
        left: 210px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
        top: 292.5px;
        left: 165px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
        top: 345px;
        left: 390px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
        top: 210px;
        left: 551.25px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
        top: 60px;
        left: 551.25px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
        top: 112.5px;
        left: 765px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
        top: 243.75px;
        left: 810px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
        top: 337.5px;
        left: 617.25px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
        top: 367.5px;
        left: 836.25px;
    }
    main .floorplan .wrapper .bottom-container h4{
        font-size: 21px;
    }
    main .floorplan .wrapper .bottom-container p{
        font-size: 14.25px;
    }
    main .floorplan .wrapper .bottom-container button{
        font-size: 13.5px;
        width: 149.25px;
        height: 43.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_shutters {
        top: 90px;
        left: 75px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_ceilinglight {
        top: 0px;
        left: 247.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_motion{
        top: 217.5px;
        left: 195px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_lightbulb {
        top: 270px;
        left: 420px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_cooling {
        top: 0px;
        left: 277.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_heater {
        top: 150px;
        left: 270px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_power {
        top: 270px;
        left: 345px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_exit {
        top: 296.25px;
        left: 555px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_doorsensor {
        top: 180px;
        left: 532.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device_ventilator {
        top: 37.5px;
        left: 487.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device {
        width: 300px;
        padding: 12px 0 12px 3.75px;
        border-radius: 12px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper {
        gap: 15px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .left img {
        width: 54px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more img {
        font-size: 20px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center h4 {
        font-size: 12.1605px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .center .center_more p {
        font-size: 9.45px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .right .device_icon {
        width: 54px;
        height: 54px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device .device_wrapper .right .device_icon img {
        width: 30px;
    }  
    main .clickable_cards .wrapper {
        background-color: var(--clr-background);
        padding: 45px 60px;
    }
    main .clickable_cards .wrapper .cards-container {
        gap: 15px;
    }
    main .clickable_cards .wrapper .cards-container .card .top img {
        width: 294.75px;
        height: 166.5px;
    }
    main .clickable_cards .wrapper .cards-container .card .top .video-container{
        width: 294.75px;
    }
    main .clickable_cards .wrapper .cards-container .card .top .video-container video{
        width: 294.75px;
        height: 166.5px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom {
        padding: 18.75px;
        padding-bottom: 30px;
        gap: 7.5px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom h4 {
        font-size: 18px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom p {
        font-size: 12px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom .links a {
        font-size: 11.25px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom .links a img{
        width: 20px;
    }
    main .clickable_cards .wrapper .bottom-text h4 {
        font-size: 30px;
    }
    main .clickable_cards .wrapper .bottom-text button {
        width: 173.25px;
        height: 43.5px;
        font-size: 13.5px;
    }
    main .clickable_cards .wrapper .cards-container .card{
        height: 320px;
        width: 295px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom{
        height: 150px;
    }
    footer .wrapper .top .item img{
        width: 67.84px;
    }
    footer .wrapper .top .item h6{
        font-size: 10.24px;
    }
    footer .wrapper .top .item .socials img{
        width: 25.6px;
    }
    footer .wrapper .top .item h5{
        font-size: 12.8px;
    }
    footer .wrapper .top .item .nav a{
        font-size: 8.96px;
    }
    footer .wrapper .top .item p{
        font-size: 8.96px;
    }
    footer .wrapper .top .item .input-container{
        width: 171.52px;
    }
    footer .wrapper .top .item .input-container img{
        width: 11.52px;
        height: 11.52px;
        margin-left: 6.4px;
    }
    footer .wrapper .top .item .input-container input{
        font-size: 8.32px;
        width: 140.8px;
    }
    footer .wrapper .top .item .app-links img{
        width: 76.8px;
        cursor: pointer;
    }
    main .landing .wrapper .slideshow-container .item .left .content button{
        gap: 6.4px;
        font-size: 11.52px;
        width: 144px;
        height: 37.12px;
    }
    main .landing .wrapper .slideshow-container .item .left .content button img{
        width: 11.52px;
    }
    main .landing .wrapper .slideshow-container .item .left .content{
        gap: 25.6px;
    }
    main .landing .wrapper .slideshow-container .item .left .content h2{
        font-size: 34.56px;
        line-height: 38.4px;
        padding-bottom: 19.2px;
    }    
    main .cards .wrapper .body .container .card{
        height: 247.5px;
        width: 216.75px;
        gap: 0.75rem;
        padding: 18.75px 7.5px 11.25px 18.75px;
        border-radius: 20px;
    }
    main .cards .wrapper .body .container .card img{
        width: 49.5px;
    }
    main .cards .wrapper .body .container .card h3{
        font-size: 21px;
        line-height: 26.25px;
    }
    main .cards .wrapper .body .container .card p{
        font-family: "Open Sans", sans-serif;
        font-size: 12px;
    }
}
@media (max-width: 1200px){
    header .wrapper .container img{
        width: 106.4px;
    }
    header .wrapper .container h1{
        font-size: 19.2px;
    }
    header .wrapper .container a{
        font-size: 12.8px;
    }
    header .wrapper .container button{
        font-size: 12.8px;
        width: 143.2px;
        height: 40px;
    }
}
@media(max-width: 1150px){
    main .about .wrapper {
        flex-direction: column;
        gap: 20px;
    }
}
@media (max-width: 1100px){
    header .wrapper .container{
        gap: 15px;
    }
    main .contact .wrapper .container .left {
        height: 515.375px;
        width: 340.3125px;
        padding: 22.5px 16.875px;
    }
    main .contact .wrapper .container .left .header h4 {
        font-size: 30.375px;
    }
    main .contact .wrapper .container .left .header p {
        font-size: 9px;
        margin-top: 5.625px;
    }
    main .contact .wrapper .container .left .body {
        padding-top: 22.5px;
    }
    main .contact .wrapper .container .left .body form {
        gap: 16.875px;
    }
    main .contact .wrapper .container .left .body form .input {
        gap: 5.625px;
    }
    main .contact .wrapper .container .left .body form .input label {
        font-size: 10.125px;
    }
    main .contact .wrapper .container .left .body form .input input {
        font-size: 10.125px;
        padding: 11.25px;
    }
    main .contact .wrapper .container .left .body form .input textarea {
        font-size: 10.125px;
        padding: 11.25px;
    }
    main .contact .wrapper .container .left .body form .button button {
        font-size: 10.125px;
        width: 112.5px;
        height: 32.0625px;
    }
    main .contact .wrapper .container .right {
        height: 515.375px;
        width: 340.3125px;
        padding: 22.5px 16.875px;
    }
    main .contact .wrapper .container .right .header h4 {
        font-weight: 700;
        font-size: 30.375px;
    }
    main .contact .wrapper .container .right .header p {
        font-size: 9px;
        margin-top: 5.625px;
    }
    main .contact .wrapper .container .right .body .body-container {
        row-gap: 28.125px;
        padding-top: 39.375px;
    }
    main .contact .wrapper .container .right .body .body-container .country {
        gap: 2.8125px;
    }
    main .contact .wrapper .container .right .body .body-container .country img {
        width: 33.75px;
    }
    main .contact .wrapper .container .right .body .body-container .country h5 {
        font-size: 9.5625px;
    }
    main .contact .wrapper .container .right .body .body-container .country .country-contact {
        gap: 2.8125px;
    }
    main .contact .wrapper .container .right .body .body-container .country .country-contact p {
        font-size: 9px;
    }
    main .info .wrapper .item .header img{
        width: 17.28px;   
    }
    main .info .wrapper .item .header h3{
        font-size: 15.36px;
    }
    main .info .wrapper .item .body p{
        font-size: 10.24px;
        line-height: 19.2px;
    }
    main .info .wrapper .item .body a{
        font-size: 10.24px;
        line-height: 19.2px;
    }
    main .info .wrapper .item .body .socials img{
        width: 25.6px;
    }
    main .info .wrapper .item .body button{
        width: 119.04px;
        height: 37.12px;
        font-size: 11.52px;
    }
    main .info .wrapper .item .body button img{
        width: 11.52px;
    }    
    main .info .wrapper .item .body {
        padding-left: 34.4px;
        padding-top: 6.4px;
    }
    
}
@media (max-width: 1050px){
    main .landing .wrapper .slideshow-container .item{
        display: flex;
        flex-direction: column;
    }
    main .landing .wrapper .slideshow-container .item .left .content{
        padding: 20px 100px;
        padding-right: 40vw;
        padding-bottom: 80px;
    }
    main .landing .wrapper .slideshow-container .item .left .navigation{
        bottom: 10px;
        left: 1%;
    }
    main .cards .wrapper .body .container {
        grid-template-columns: auto auto auto;
    }
    footer .wrapper .top {
        grid-template-columns: 47% auto 47%;
        justify-content: center;
    }
    footer .wrapper .top .rem900{
        display: none;
    }
    footer .wrapper .bottom p{
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 10px;
    }
    footer .wrapper .bottom a{
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 10px;
    }
}
@media(max-width: 1000px){
    .popup-hresk-video .wrapper{
        width: 640.5px;
        height: 360px;
    }
    main .landing .wrapper .slideshow-container .item .left .content{
        padding: 20px 60px;
        padding-right: 40vw;
        padding-bottom: 70px;
    }
}
@media (max-width: 960px){
    header .wrapper .container h1{
        font-size: 18px;
    }
}
@media (max-width: 950px){
    header .wrapper .container img{
        width: 100px;
    }
    header .wrapper .container h1{
        font-size: 18px;
    } 
    header .wrapper .container a{
        font-size: 14px;
    }
    header .wrapper .container button{
        font-size: 14px;
        width: 134.25px;
        height: 37.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        width: 42.25px;
        height: 42.25px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon img{
        width: 27px;
        height: 27px;
    }
    main .floorplan .wrapper .floorplan-container .container img{
        width: 695.8125px;
    }
    main .floorplan .wrapper .floorplan-container .container{
        width: 695.8125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
        top: 120.9375px;
        left: 30.9375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
        top: 42.1875px;
        left: 157.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
        top: 219.375px;
        left: 123.75px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
        top: 258.75px;
        left: 292.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
        top: 157.5px;
        left: 413.4375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
        top: 45px;
        left: 413.4375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
        top: 84.375px;
        left: 573.75px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
        top: 182.8125px;
        left: 607.5px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
        top: 253.125px;
        left: 462.9375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
        top: 275.625px;
        left: 627.1875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        padding: 5.625px;
    }
    main .floorplan .wrapper .floorplan-container .container .devices{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    main .floorplan .wrapper .floorplan-container .container .devices .device{
        top: auto !important;
        left: auto !important;
    }
    main .clickable_cards .wrapper {
        background-color: var(--clr-background);
        padding: 33.75px 45px;
    }
    main .clickable_cards .wrapper .cards-container {
        gap: 11.25px;
    }
    main .clickable_cards .wrapper .cards-container .card .top img {
        width: 221.8125px;
        height: 124.875px;
    }
    main .clickable_cards .wrapper .cards-container .card .top .video-container{
        width: 221.8125px;
    }
    main .clickable_cards .wrapper .cards-container .card .top .video-container video{
        width: 221.8125px;
        height: 124.875px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom {
        padding: 14.0625px;
        padding-bottom: 22.5px;
        gap: 5.625px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom h4 {
        font-size: 13.5px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom p {
        font-size: 10px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom .links a img{
        width: 15px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom{
        height: 112.5px;
    }
    main .clickable_cards .wrapper .cards-container .card .bottom .links a {
        font-size: 8.4375px;
    }
    main .clickable_cards .wrapper .cards-container .card{
        height: 240px;
        width: 222px;
    }
     
}
@media (max-width: 900px){
    main .contact .wrapper .container{
        flex-direction: column;
        gap: 30px;
    }
    main .info .line_second{
        display: none;
    }
    main .info .wrapper {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: center;
    }
    main .info .line{
        margin: 0 50px;
    }
    header .wrapper{
        display: none;
    }
    header .wrapper_mobile{
        display:block !important;
    }
}
@media (max-width: 800px){
    main .cards .wrapper .body .container {
        grid-template-columns: auto auto;
    }
    main .cards .wrapper .body .container .card3{
        grid-column: 2;
    }
    main .cards .wrapper .body .container .card4{
        grid-column: 1;
        grid-row: 2;
    }
    main .cards .wrapper .body .container .card7{
        grid-column: 2;
    }
    main .cards .wrapper .body .container .card8{
        grid-column: 1;
        grid-row: 4;
    }
    main .clickable_cards .wrapper .bottom-text h4 {
        font-size: 22.5px;
    }
    main .clickable_cards .wrapper .bottom-text button {
        width: 130.4375px;
        height: 32.625px;
        font-size: 10.125px;
    }
    main .landing .wrapper .slideshow-container .item .left .content h2{
        font-size: 40px;
        line-height: 45px;
    }
    main .landing .wrapper .slideshow-container .item .left .content p {
        font-size: 15px;
    }
    main .landing .wrapper .slideshow-container .item .left .content button {
        font-size: 13.5px;
        border-radius: 5px;
        width: 168.75px;
        height: 43.5px;
    }
    main .landing .wrapper .slideshow-container .item .left .content .navigation img{
        width: 24px;
    }
}
@media (max-width: 750px){
    header .wrapper .container img {
        width: 125px;
    }
    header .wrapper .container h1 {
        font-size: 24px;
    }
    header .wrapper .container a {
        font-size: 16px;
    }
    header .wrapper .container button{
        font-size: 16px;
        width: 179px;
        height: 50px;
    }
    .popup-hresk-video .wrapper{
        width: 480.375px;
        height: 270px;
    }
    /* main .landing .wrapper .slideshow-container .item .right .content .video{
        position: relative;
        display: flex;
        justify-content: center;
        height: 100%;
        overflow: hidden;
    }
    main .landing .wrapper .slideshow-container .item .right .content .video video{
        position: absolute;
        height: 100%;
        width: auto;
    }
    main .landing .wrapper .slideshow-container .item .right .content .background-controls{
        bottom: 45px;
        right: 45px;
    } */
}
@media (max-width: 700px){
    main .landing .wrapper .slideshow-container .item .left .content{
        padding: 20px 60px;
        padding-bottom: 60px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon img{
        width: 20.25px;
        height: 20.25px;
    }
    main .floorplan .wrapper .floorplan-container .container img{
        width: 521.859375px;
    }
    main .floorplan .wrapper .floorplan-container .container{
        width: 521.859375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        width: 32.69px;
        height: 32.69px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
        top: 90.703125px;
        left: 23.203125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
        top: 31.640625px;
        left: 118.125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
        top: 164.53125px;
        left: 92.8125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
        top: 194.0625px;
        left: 219.375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
        top: 118.125px;
        left: 310.078125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
        top: 33.75px;
        left: 310.078125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
        top: 63.28125px;
        left: 430.3125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
        top: 137.109375px;
        left: 455.625px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
        top: 189.84375px;
        left: 347.203125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
        top: 206.71875px;
        left: 470.390625px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        padding: 4.21875px;
    }
    main .floorplan .wrapper .bottom-container h4{
        font-size: 15.75px;
    }
    main .floorplan .wrapper .bottom-container p{
        font-size: 10.6875px;
    }
    main .floorplan .wrapper .bottom-container button{
        font-size: 10.125px;
        width: 111.9375px;
        height: 32.625px;
    }
    main .clickable_cards .wrapper .cards-container{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    main .clickable_cards .wrapper .cards-container .card{
        height: 250px;
    }
    main .clickable_cards .wrapper .bottom-text{
        text-align: center;
        padding: 40px 1px;
    }
}
@media (max-width: 650px){
    main .cards .wrapper {
        padding: 80px 10px 40px 10px;
    }
    main .floorplan .wrapper{
        padding: 40px 0;
    }
    footer .wrapper .bottom{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    footer .wrapper .bottom .space{
        display: none;
    }
}
@media (max-width: 606px){
    main .cards .wrapper .top h2 {
        font-size: 40px;
    }
}
@media (max-width: 600px){
    header .wrapper .container img{
        width: 100px;
    }
    header .wrapper .container h1{
        font-size: 18px;
    } 
    header .wrapper .container a{
        font-size: 14px;
    }
    header .wrapper .container button{
        font-size: 14px;
        width: 134.25px;
        height: 37.5px;
    }
    main .cards .wrapper .body .container{
        column-gap: 18px;
        row-gap: 18px;
    }
    main .cards .wrapper .body .container .card{
        height: 198px;
        width: 162.5625px;
        gap: 0.6rem;
        padding: 15px 6px 9px 15px;
        border-radius: 16px;
    }
    main .cards .wrapper .body .container .card img{
        width: 39.6px;
    }
    main .cards .wrapper .body .container .card h3{
        font-size: 16.8px;
        line-height: 21px;
    }
    main .cards .wrapper .body .container .card p{
        font-family: "Open Sans", sans-serif;
        font-size: 9.6px;
    }
    main .clickable_cards .wrapper .bottom-text h4 {
        font-size: 18px;
    }
    main .about .wrapper .right .video-container video {
        width: 371.1125px;
    }
    main .about .wrapper .right .video-container .play{
        width: 45.5175px;
        padding: 9.03125px;
    }
    main .about .wrapper .left .body .bottom img {
        width: 135.83px;
    }
    main .info .line{
        margin: 0 20px;
    }
    .popup-message-sent .wrapper{
        width: 350px;
        height: 150px;
    }
    .popup-message-sent .wrapper .body p{
        font-size: 17px;
    }
    .popup-message-sent .wrapper .buttons button{
        border-radius: 5px;
        width: 120px;
        height: 40px;
    } 
}
@media (max-width:550px){
    main .floorplan .wrapper .floorplan-container .container .icons .icon img{
        width: 15.1875px;
        height: 15.1875px;
    }
    main .floorplan .wrapper .floorplan-container .container img{
        width: 391.39453125px;
    }
    main .floorplan .wrapper .floorplan-container .container{
        width: 391.39453125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        width: 24.5175px;
        height: 24.5175px;
        padding: 3.1640625px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
        top: 68.02734375px;
        left: 17.40234375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
        top: 23.73046875px;
        left: 88.59375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
        top: 123.3984375px;
        left: 69.609375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
        top: 145.546875px;
        left: 164.53125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
        top: 88.59375px;
        left: 232.55859375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
        top: 25.3125px;
        left: 232.55859375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
        top: 47.4609375px;
        left: 322.734375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
        top: 102.83203125px;
        left: 341.71875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
        top: 142.3828125px;
        left: 260.40234375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
        top: 155.0390625px;
        left: 352.79296875px;
    }    
    .popup-redirect .wrapper{
        width: 400px;
        height: 160px;
        border-radius: 6.4px;
        padding: 16px;
    }
    .popup-redirect .wrapper .close span{
        font-size: 16px;
    }
    .popup-redirect .wrapper .body{
        padding-top: 16px;
    }
    .popup-redirect .wrapper .body p{
        font-size: 19.2px;
    }
    .popup-redirect .wrapper .buttons{
        bottom: 16px;
    }
    .popup-redirect .wrapper .buttons button{
        font-size: 14.4px;
        border-radius: 6.4px;
        width: 144px;
        height: 40px;
    }    
}
@media (max-width: 500px){
    header .wrapper_mobile .top{
        padding: 20px;
    }
    main .landing .wrapper .slideshow-container .item .left .content{
        padding: 20px;
        padding-bottom: 70px;
    }
    main .about .wrapper .right .video-container video{
        width: 327.834375px;
    }
    main .about .wrapper .right .video-container .play{
        width: 34.138125px;
        padding: 6.7734375px;
    }
    main .about .wrapper .left .header h3 {
        font-size: 34.425px;
    }
    main .about .wrapper .left .header p {
        font-size: 11.475px;
    }
    main .about .wrapper .left .body p {
        font-size: 11.475px;
    }    
    main .about .wrapper .left .body .bottom button{
        width: 118.575px;
        height: 36.975px;
        gap: 6.825px;
        font-size: 9.5625px;
    }
    main .about .wrapper .left .body .bottom img {
        width: 119.85px;
    }
    main .info .wrapper .item .header img{
        width: 17.28px;   
    }
    main .info .wrapper .item .header h3{
        font-size: 15.36px;
    }
    main .info .wrapper .item .body p{
        font-size: 10.24px;
        line-height: 19.2px;
    }
    main .info .wrapper .item .body a{
        font-size: 10.24px;
        line-height: 19.2px;
    }
    main .info .wrapper .item .body .socials img{
        width: 25.6px;
    }
    main .info .wrapper .item .body button{
        width: 119.04px;
        height: 37.12px;
        font-size: 11.52px;
    }
    main .info .wrapper .item .body button img{
        width: 11.52px;
    } 
    main .info .wrapper .item .body {
        padding-left: 34.4px;
        padding-top: 6.4px;
    }
    main .info .line{
        margin: 0 10px;
    }
    footer .wrapper .top {
        grid-template-columns: auto;
        justify-content: center;
        gap: 20px;
    }
    .popup-hresk-video .wrapper{
        width: 360.28125px;
        height: 202.5px;
    }
}
@media (max-width: 470px){
    header .wrapper_mobile .top{
        padding: 35px 20px;
    }
    header .wrapper_mobile .container img{
        width: 100px;
    }
    header .wrapper_mobile .container h1{
        font-size: 14px;
    }
}
@media (max-width: 430px){
    main .landing .wrapper .slideshow-container .item .left .content h2 {
        font-size: 30px;
        line-height: 38.5px;
    }
    main .landing .wrapper .slideshow-container .item .left .content p {
        font-size: 14px;
    }
    main .landing .wrapper .slideshow-container .item .left .content button {
        font-size: 13.5px;
        border-radius: 5px;
        width: 168.75px;
        height: 43.5px;
    }
    main .cards .wrapper .top h2 {
        font-size: 30px;
    }
    main .about .wrapper .left .header h3 {
        font-size: 30px;
    }
    .popup-redirect .wrapper{
        position: relative;
        width: 320px;
        height: 128px;
        border-radius: 5.12px;
        padding: 12.8px;
    }
    .popup-redirect .wrapper .close span{
        font-size: 12.8px;
    }
    .popup-redirect .wrapper .body{
        padding-top: 12.8px;
    }
    .popup-redirect .wrapper .body p{
        font-size: 15.36px;
    }
    .popup-redirect .wrapper .buttons{
        bottom: 12.8px;
    }
    .popup-redirect .wrapper .buttons button{
        font-size: 11.52px;
        border-radius: 5.12px;
        width: 115.2px;
        height: 32px;
    }
    
}
@media (max-width: 400px){
    main .floorplan .wrapper .floorplan-container .container .icons .icon img{
        width: 12.15px;
        height: 12.15px;
    }
    main .floorplan .wrapper .floorplan-container .container img{
        width: 313.115625px;
    }
    main .floorplan .wrapper .floorplan-container .container{
        width: 313.115625px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon{
        width: 19.614px;
        height: 19.614px;
        padding: 2.53125px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_shutters{
        top: 54.421875px;
        left: 13.921875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ceilinglight{
        top: 18.984375px;
        left: 70.874px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_motion{
        top: 98.71875px;
        left: 55.6875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_lightbulb{
        top: 116.4375px;
        left: 131.625px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_heater{
        top: 70.874px;
        left: 186.046875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_cooling{
        top: 20.25px;
        left: 186.046875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_ventilator{
        top: 37.96875px;
        left: 258.1875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_doorsensor{
        top: 82.265625px;
        left: 273.375px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_power{
        top: 113.90625px;
        left: 208.321875px;
    }
    main .floorplan .wrapper .floorplan-container .container .icons .icon_exit{
        top: 124.03125px;
        left: 282.234375px;
    }    
}


/* PADDINGS */

@media(max-width: 2000px){
    header .wrapper{
        padding: 20px 240px;
    }
    main .about .wrapper {
        padding: 100px 240px;
    }
    main .info .wrapper {
        padding: 100px 240px;
    }
}
@media(max-width: 1800px){
    header .wrapper{
        padding: 20px 150px;
    }
    main .about .wrapper {
        padding: 75px 150px;
    }
    main .info .wrapper {
        padding: 75px 150px;
    }
}
@media(max-width: 1600px){
    header .wrapper{
        padding: 20px 100px;
    }
    main .about .wrapper {
        padding: 50px 100px;
    }
    main .info .wrapper {
        padding: 50px 100px;
    }
}
@media (max-width: 1500px){
    header .wrapper .container h1 {
        font-size: 16px;
    }
}
@media(max-width: 1200px){
    header .wrapper{
        padding: 20px 60px;
    }
    main .about .wrapper {
        padding: 20px 60px;
    }
    main .info .wrapper {
        padding: 20px 60px;
    }
}
@media(max-width: 700px){
    header .wrapper{
        padding: 20px;
    }
    main .about .wrapper {
        padding: 20px;
    }
    main .info .wrapper {
        padding: 20px;
    }
}