@font-face{font-display:swap;font-family:"DM Sans";font-style:normal;font-weight:400;src:url(../fonts/dm-sans-v15-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:500;src:url(../fonts/roboto-serif-v15-latin-500.woff2) format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:600;src:url(../fonts/roboto-serif-v15-latin-600.woff2) format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:700;src:url(../fonts/roboto-serif-v15-latin-700.woff2) format("woff2")}/*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */.hamburger{cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;margin:0;overflow:visible}.hamburger.is-active:hover,.hamburger:hover{opacity:.7}.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::after,.hamburger.is-active .hamburger-inner::before{background-color:#000}.hamburger-box{width:30px;height:24px;display:inline-block;position:relative}.hamburger-inner{display:block}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{background-color:#000;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::after,.hamburger-inner::before{content:"";display:block}.hamburger--squeeze .hamburger-inner{transition-duration:75ms;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze .hamburger-inner::before{transition:top 75ms .12s ease,opacity 75ms ease}.hamburger--squeeze .hamburger-inner::after{transition:bottom 75ms .12s ease,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transform:rotate(45deg);transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.hamburger--squeeze.is-active .hamburger-inner::before{top:0;opacity:0;transition:top 75ms ease,opacity 75ms .12s ease}.hamburger--squeeze.is-active .hamburger-inner::after{bottom:0;transform:rotate(-90deg);transition:bottom 75ms ease,transform 75ms .12s cubic-bezier(.215,.61,.355,1)}footer{background:var(--black-color);color:#FFF}footer .container{padding-top:100px;padding-bottom:60px}footer .block{display:flex;justify-content:space-between;gap:105px}footer .about{width:357px}footer .about img{width:200px;margin-bottom:21px}footer h4{font-family:"Roboto Serif",serif;font-size:1.25rem;font-weight:600;margin-bottom:24px}footer .pages li{margin-bottom:16px;font-size:1rem;letter-spacing:.03rem}.btn,.subscribe-block form,.subscribe-block form button,body{font-family:"DM Sans",sans-serif;letter-spacing:.03375rem}footer .pages li:last-child{margin-bottom:0}footer a{color:var(--grey-color)}footer a:active,footer a:hover{color:var(--green-color)}.subscribe-block{width:31%}.subscribe-block h4{margin-bottom:17px}.subscribe-block form{color:var(--text-color);font-size:1.125rem;position:relative}.subscribe-block form button{position:absolute;padding:8px 15px;color:var(--white-color);font-size:1.125rem;right:15px;top:12px;border-radius:20px;background:var(--black-color);border:2px solid #000;display:inline-block;cursor:pointer;overflow:hidden;z-index:1;transition:all .3s}.subscribe-block form button::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:var(--black-color);border-radius:10rem;z-index:-2}.subscribe-block form button::before{content:"";position:absolute;bottom:0;left:0;width:0%;height:100%;background-color:var(--orange-color);transition:all .3s;border-radius:10rem;z-index:-1}.subscribe-block form button:hover{color:var(--black-color)}.subscribe-block form button:hover::before{width:100%}.subscribe-block form button:active::before{background-color:var(--dark-orange)}.subscribe-block input{width:433px;padding:10px 9px 10px 23px;border-radius:40px;background:#FFF;height:67px;font-family:"DM Sans",sans-serif;font-size:1.125rem}.subscribe-block input::placeholder{color:var(--text-color);font-family:"DM Sans",sans-serif;font-size:1.125rem;letter-spacing:.03375rem;transform:translateY(2px)}.block-top{padding-bottom:101px;border-bottom:1px solid var(--grey-color);margin-bottom:29px}.block-bottom h4{margin-bottom:16px}.block-bottom address{font-style:normal}.socials-list{display:flex;justify-content:space-between;gap:29px}.socials-list a{width:50px;height:50px;border-radius:50%;background-color:var(--white-color);display:flex;justify-content:center;align-items:center;border:1px solid #fff}.socials-list a:hover{background-color:var(--black-color);transition:all .2s ease;border:1px solid #fff}.socials-list a:hover svg{transition:all .2s ease;filter:invert(1)}.socials-list svg{width:23px;height:23px}@media screen and (max-width:1552px){.subscribe-block form input{width:100%}.subscribe-block form button{left:65%;right:4%}}@media screen and (max-width:1430px){footer .block-bottom{flex-wrap:wrap;gap:20px 20%;justify-content:space-between}footer .block-bottom>div{width:40%}footer .block-bottom .socials-list{margin-right:auto}}@media screen and (max-width:1328px){.container{width:min(90%,1000px)}footer .block{gap:50px}.subscribe-block{width:40%}footer .block-bottom .socials-list{margin-right:20%}}@media screen and (max-width:1065px){footer .block-bottom .address,footer .block-top .pages{display:none}footer .container{padding-top:60px;width:min(90%,700px)}footer .block-top{flex-wrap:wrap;padding-bottom:40px}footer .block-top div{width:70%;margin-inline:auto}footer .block-bottom{gap:30px}footer .block-bottom .socials-list{margin-inline:auto}}@media screen and (max-width:674px){.copyright a,.telephone a{font-size:1rem}footer .block-top div{width:100%}}@media screen and (max-width:442px){input[type=email]::placeholder{font-size:1rem}.subscribe-block form button{left:60%}footer .block-bottom>div{width:80%}}.buttons-block .btn,body{font-size:1.125rem}@media screen and (max-width:375px){.subscribe-block form button{left:50%}}:root{--text-color:rgba(12, 12, 12, 0.9);--white-color:#FBFBFB;--black-color:#0C0C0C;--green-color:#64CCC5;--orange-color:#ffd930;--grey-color:#f4f4f4;--dark-orange:#ff9e30;--dark-grey:#808080}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-color)}.container{width:min(90%,1400px);margin-inline:auto}ul{list-style-type:none}a{text-decoration:none}img{width:100%;object-fit:contain;vertical-align:top}.btn{display:inline-block;color:var(--text-color);font-size:1.25rem;padding:9px 15px;border-radius:23px;background-color:var(--white-color);cursor:pointer;overflow:hidden;z-index:1;position:relative;transition:all .3s;border:2px solid var(--white-color)}.btn::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:var(--white-color);border-radius:10rem;z-index:-2}.btn::before{content:"";position:absolute;bottom:0;left:0;width:0%;height:100%;background-color:var(--orange-color);transition:all .3s;border-radius:10rem;z-index:-1}.btn:hover::before{width:100%}.btn:active::before{background-color:var(--dark-orange)}header{padding-top:21px}header .container{display:flex;justify-content:space-between;margin-inline:auto}header .logo img{height:100%}.main-menu ul{display:flex;gap:40px;padding:17px 0}.main-menu ul :active,.main-menu ul a,.main-menu ul a:visited{color:var(--text-color);position:relative;display:inline-block}.green,.main-menu ul li a.current{color:var(--green-color)}.main-menu ul :active::after,.main-menu ul a::after,.main-menu ul a:visited::after{content:"";position:absolute;width:0;height:2px;background:var(--orange-color);bottom:-5px;left:50%;display:inline-block;transition:all .3s ease;transform:translateX(-50%)}.main-menu ul :active:hover::after,.main-menu ul a:hover::after,.main-menu ul a:visited:hover::after{width:calc(100% - 10px)}.buttons-block{margin-right:6px;margin-top:5px}.categories h3,.go-btn,.post h3{font-size:1.25rem}.hamburger{display:none;width:47px;height:47px;border:none;background:0 0;position:relative}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:19px;height:3px}.hamburger-inner{top:60%}.hamburger-inner::before{top:-8px}.hamburger-inner::after{bottom:-8px}.go-btn{display:flex;padding:10px 20px 10px 10px;justify-content:center;align-items:center;gap:10px;border-radius:26px;letter-spacing:-.01rem;width:212px}.btn-arrow{display:inline-block;width:28px;height:28px;position:relative;background-color:var(--black-color);border-radius:50%}.btn-arrow::before{content:"";position:absolute;border-top:1px solid var(--white-color);border-left:1px solid var(--white-color);z-index:1;left:9px;top:10px;width:8px;aspect-ratio:1;rotate:135deg}.black-btn{background:var(--black-color);color:var(--white-color);border:2px solid #000}.black-btn:hover,.project a,.project a:visited,.project h3,.project:hover a,.project:hover h3{color:var(--black-color)}.black-btn::after{background-color:var(--black-color)}.black-btn .btn-arrow{background-color:var(--white-color)}.black-btn .btn-arrow::before{border-top:1px solid var(--black-color);border-left:1px solid var(--black-color)}.black-burger{border:2px solid #000}.black-burger::after{background-color:var(--black-color)}.black-burger .hamburger-inner,.black-burger .hamburger-inner::after,.black-burger .hamburger-inner::before{background-color:#f4f4f4}.black-burger .hamburger-inner{top:50%;left:-3px}.mobile-panel,.page-shadow{top:0;left:0;transition:all .5s ease}@media screen and (max-width:836px){.main-menu{display:none}.hamburger{display:inline-block}.buttons-block{display:flex;gap:20px}}.page-shadow{position:fixed;background-color:rgba(0,0,0,.7);width:100%;height:100%;z-index:999;opacity:0;visibility:hidden}.mobile-panel{position:fixed;transform:translateX(-300px);background:#fff;width:300px;height:100vh;z-index:1000}.mobile-panel .logo{scale:.6;padding-top:10px}.open-mobile-menu .page-shadow{opacity:1;visibility:visible}.open-mobile-menu .mobile-panel{transform:translateX(0)}.mobile-menu ul{padding-top:20px}.mobile-menu ul li a{display:inline-block;padding:10px 30px;color:var(--dark-grey);width:100%}@media screen and (max-width:442px){header .buttons-block .contact-btn{display:none}header .logo{margin-left:20px}}.categories-bg{background-image:url(../img/portfolio/orange-moon-bg.jpg);background-repeat:no-repeat;border-radius:20px;background-position:top;height:590px;margin-top:26px}.categories{display:flex;gap:45px;justify-content:center;position:relative;top:-50px;margin-bottom:45px}.categories div{padding:20px 30px;border-radius:15px;background-color:#000;color:var(--white-color)}.categories h3{font-family:"Roboto Serif",serif;margin-bottom:11px}.post{margin-bottom:72px}.post h3{font-family:"Roboto Serif",serif;margin-bottom:24px}.post p{margin-bottom:23px}.post .stage{margin-bottom:48px}.post-pic{display:flex;gap:74px;margin-bottom:100px}h2{text-align:center;font-family:"Roboto Serif",serif;font-size:4rem;margin-bottom:81px}.projects{display:flex;gap:47px;margin-bottom:99px}.project .image-box{margin-bottom:16px;overflow:hidden;border-radius:20px;position:relative}.project .image-box img{object-fit:cover;transition:all .5s ease}.project .image-box::after{content:"";position:absolute;left:0;top:0;display:block;width:100%;height:100%;transition:all .5s ease;z-index:1;background:rgba(0,0,0,.2);opacity:0}.project:hover img{scale:1.1}.project:hover .image-box::after{opacity:1}.project:hover .image-box::before{content:url(../img/index/hover-arrow.svg);position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);z-index:2}.project h3{font-family:"Roboto Serif",serif;font-size:1.875rem;font-weight:600;margin-bottom:10px;letter-spacing:-.07rem}@media screen and (max-width:1300px){.project h3{font-size:1.4rem}}@media screen and (max-width:1126px){.categories{margin-inline:auto;gap:15px}}@media screen and (max-width:1002px){.categories-bg{height:400px}.categories{flex-wrap:wrap}h2{font-size:3rem}}@media screen and (max-width:850px){.categories{top:-160px;margin-bottom:-80px}.post-pic{gap:30px;margin-bottom:60px}.projects,h2{margin-bottom:40px}}@media screen and (max-width:716px){.projects{gap:20px}.project p{display:none}}@media screen and (max-width:618px){.post-pic,.project h3{display:none}}@media screen and (max-width:552px){.categories div{width:80%}.projects,h2{font-size:2rem}}@media screen and (max-width:418px){.projects{flex-wrap:wrap;gap:0;justify-content:center}.project{width:80%}}