/* container main bloks start */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Quicksand, sans-serif;
    scroll-behavior: smooth;
    outline: none;
}
::-webkit-scrollbar{
    width: 0;
}
body{
    max-width: 100%;
    user-select: none;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: #ffffff;
}
.max-width{
    margin: 0px 100px;
}
.coming-soon h1,
.about-me-html h1,
.contact h1,
.skills h1,
.profile h1,
.projects h1,
.about h1{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 45px;
    padding-top: 30px;
}
/* container main bloks end */



/* container header start */
.nav{
    position: fixed;
    left: 100px;
    right: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 60px;
	transition: all 0.5s ease;
}
.nav.scroll{
	z-index: 9999;
	opacity: 1;
	background: none;
	padding: 12px 0;
	transition: all 0.3s ease;
}
.nav::before{
    content: "";
	top: 0;
	position: absolute;
	background: #ff184c;
	padding: 15px 0;
	transition: all 0.5s ease;
	width: 200%;
	height: 100%;
	opacity: 0;
	z-index: -1;
    margin: 0;
    left: -10%;
    right: -10%;
    box-shadow: 
    2px 0px 10px #ff184c,
    2px 0px 20px #ff184c,
    2px 0px 30px #ff184c,
    2px 0px 40px #ff184c;
}
.nav.scroll::before{
    content: "";
    position: absolute;
    left: -100%;
    right: -10%;
	background: #ff184c;
	padding: 20px 0;
	transition: all 0.5s ease;
	width: 300%;
	height: 50%;
	opacity: 1;
	z-index: -1;
    margin: 0;
}
.nav ul{
    display: flex;
    font-size: 25px;
    justify-content: space-between;
}
.nav ul li{
    margin-left: 35px;
}
.nav ul li:nth-child(1){
    margin-left: 0;
}
.nav-hover{
    position: relative;
}
.nav-hover::before{
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        background-color: #FFF;
        width: 100%;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: 0.5s;
}
.nav-hover:hover::before{
    transform: scaleX(1);
}
.nav-hover:hover{
    color: #ff184c;
    transition: all 0.5s;
    transition-delay: 0.75s;
}
.nav.scroll .en a,
.nav.scroll .nav-hover:hover{
    color: #ffffff;
    border-color: #fff;
}
.nav ul li a,
.en{
    font-weight: 100;
}
.en a{
    font-size: 25px;
    transition: all 0.5s;
}
.en a:hover{
    color: #FF184C;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff184c;
}
/* container header end */



/* container fixed menu-1 start */
.fixed-menu-1{
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    transition: all 0.5s;
    z-index: 10000;
}
.fixed-menu-3 a,
.fixed-menu-1 i{
    font-size: 30px;
    background: #ff184c;
    padding: 15px;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s;
}
.fixed-menu-3 a,
.fixed-menu-2 i:hover,
.fixed-menu-1 i:hover{
    background: #E41645;
}
.fixed-menu-2 i:active,
.fixed-menu-1 i:active{
    background:#700F26;
}
.fixed-menu-1.active{
    right: -10%;
}
/* container fixed menu-1 end */



/* container fixed menu-2 start */
.fixed-menu-2{
    position: fixed;
    top: 50%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    transition: 0.5s;
    right: -10%;
}
.fixed-menu-2 i{
    font-size: 30px;
    padding: 15px;
    background: #ff184c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    cursor: pointer;
    color: #ffffff;
    transition: 0.5s;
}
.fixed-menu-2.active{
    right: 0%;
}
/* container fixed menu-2 end */



/* container fixed menu-3 start */
.fixed-menu-3{
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* container fixed menu-3 end */



/* container home start */
.home{
    height: 100vh;
    background: url(./../img/home-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right !important;
    z-index: -5;
    position: relative;
    z-index: 1000;
}
.dark{
    height: 100vh;
    background: url(./../img/bg-dark.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
.home-content{
    color: #ffffff;
    padding-top: 200px;
}
.home-content h1:nth-child(1){
    font-size: 30px;
    font-weight: 500;
}
.home-content h1:nth-child(2){
    font-size: 60px;
    font-weight: 300;
}
.home-content h1:nth-child(3){
    font-size: 45px;
    font-weight: 500;
}
.home-content h1 span{
    color: #ff184c;
    font-weight: 900;
}
.home-content a{
    font-size: 30px;
    border: 2px solid #FF184C;
    border-radius: 30px;
    padding: 10px 80px;
    color: #ff184c;
    float: left;
    margin-top: 20px;
    transition: all 0.5s;
    z-index: 10000;
}
.home-content a:hover{
    background: #FF184C;
    color: #ffffff;
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
}
/* container home end */



/* container about start */
.about{
    height: 120vh;
    background: linear-gradient(180deg, rgba(255, 24, 76, 0.88) 0%, rgba(255, 24, 76, 0) 26.88%, rgba(255, 24, 76, 0) 27.75%);
}
.about-content{
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}
.about-left{
    padding-top: 40px;
    width: 60%;
}
.about-left h3{
    font-weight: bold;
    font-size: 30px;
}
.about-left h3 span{
    color: #ff184c;
}
.about-left p{
    padding-top: 20px;
    font-size: 20px;
    padding-bottom: 50px;
}
.projects a,
.about-left a{
    color: #ff184c;
    border: 2px solid #ff184c;
    border-radius: 30px;
    font-size: 25px;
    padding: 15px 50px;
    transform-origin: left;
    transition: all 0.5s;
}
.projects a:hover,
.about-left a:hover{
    background: #FF184C;
    color: #ffffff;
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
}
/* container about end */



/* container projects start */
.projects{
    background: url(./../img/bg-projects.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    height: 130vh;
}
.projects .dark{
    height: 130vh;
    min-height: 100vh;
}
.devices{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 100%;
    padding-top: 120px;
}
.projects .devices .mac{
	position: absolute;
    margin-top: 30%;
    margin-right: 10%;
	width: 606px;
	height: 489px;
}
.projects .devices .mac .imgBx{
	position: absolute;
	top: 24px;
	left: 25px;
	width: 92%;
	height: 64%;
	background: url(./../img/desktopWebsite.jpg);
	background-position: top;
	-webkit-background-size: 100%;
	background-size: 100%;
    animation: animate-mac 18s linear infinite;
}
.projects .devices .macBook{
	position: absolute;
    margin-top: 40%;
    margin-left: 40%;
	z-index: 1;
	width: 609px;
	height: 362px;
}
.projects .devices .macBook .imgBx{
	position: absolute;
	top: 20px;
	left: 72px;
	width: 76.4%;
	height: 81%;
	background: url(./../img/desktop-website-1.jpg);
	background-position: top;
	-webkit-background-size: 100%;
	background-size: 100%;
    animation: animate-macBook 30s linear infinite;
}
.projects .devices .iphone{
    position: absolute;
    margin-top: 40%;
	margin-right: 55%;
	width: 245px;
	height: 383px;
	z-index: 2;
}
.projects .devices .iphone .imgBx{
	position: absolute;
	top: 46px;
	left: 44px;
	width: 157px;
	height: 282px;
	background: url(./../img/mobile.jpg);
	background-position: top;
	-webkit-background-size: 100%;
	background-size: 100%;
    animation: animate-iphone 40s linear infinite;
}
.projects .devices .iphone:nth-child(4) .imgBx{
    animation: animate-iphone 75s linear infinite;
    background: url(./../img/mobile-1.jpg);
    background-size: 100%;
    padding-bottom: 20px;
}
.projects a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    margin: auto;
    border-radius: 30px;
    margin-top: 42%;
    font-size: 30px;
}

@keyframes animate-iphone{
    0%{
        background-position: top;
    }
    50%{
        background-position: bottom;
    }
    100%{
        background-position: top;
    }
}
@keyframes animate-macBook{
    0%{
        background-position: top;
    }
    50%{
        background-position: bottom;
    }
    100%{
        background-position: top;
    }
}
@keyframes animate-mac{
    0%{
        background-position: top;
    }
    50%{
        background-position: bottom;
    }
    100%{
        background-position: top;
    }
}
/* container projects end */



/* container profile start */
.profile{
    height: 90vh;
    overflow: hidden !important;
    background: #111113;
}
.profile h1{
    position: absolute;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
}
.profile canvas{
    height: 90vh;
    position: absolute;
    width: 100%;
}
.profile .cards{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    padding-top: 100px;
    left: 100px;
    right: 100px;
}
.profile .card-1,
.profile .card-2,
.profile .card-3{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(0,0,0,.5);
    color: #ffffff;
    z-index: 100;
    text-align: center;
    border-radius: 10px;
    transition: 0.5s;
    flex-wrap: wrap;
    padding: 20px;
}
.card-1 i,
.card-2 i,
.card-3 i{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF184C;
    font-size: 50px;
}
.card-1 h3,
.card-2 h3,
.card-3 h3{
    padding-top: 25px;
    font-size: 30px;
}
.card-1 p,
.card-2 p,
.card-3 p{
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.profile .card-1:hover,
.profile .card-2:hover,
.profile .card-3:hover{
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
}
/* container profile end */



/* container skills start */
.skills{
    margin-bottom: 30px;
}
.skills .skills-cards{
    width: 100%;
}
.skills h1{
    color: #000;
}
.skills .skills-cards .cards{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 50px;
}
.skills .skills-cards .cards h3{
    padding-top: 40px;
    font-size: 25px;
    padding-bottom: 20px;
}
.skills .skills-cards .cards .card-2,
.skills .skills-cards .cards .card-1{
    border-radius: 30px;
    width: 45%;
}
.skills .cards a{
    background: #FF184C;
    border-radius: 30px;
    padding: 10px 30px;
    position: relative;
    top: 5%;
    transition: 0.5s;
    font-weight: 500;
}
.skills .cards a:hover{
    background: transparent;
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
    color: #ff184c;
}
.skills .skills-cards .skills-bars{
    margin-bottom: 15px;
}
.skills .skills-cards .skills-info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-cards .skills-info span{
    font-weight: bold;
    font-size: 18px;
}
.skills .skills-cards .line{
    height: 5px;
    width: 100%;
    background: #111113;
    position: relative;
    border-radius: 30px;
}
.skills .skills-cards .line::before{
    content: "";
    position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 30px;
	background: #ff184c;
}
.skills .skills-cards .css::before,
.skills .skills-cards .figma::before,
.skills .skills-cards .html::before{
    width: 90%;
}
.skills .skills-cards .vanilla::before,
.skills .skills-cards .javascript::before{
    width: 60%;
}
.skills .skills-cards .php::before{
    width: 30%;
}
.skills .skills-cards .photoshop::before{
    width: 70%;
}
.skills .skills-cards .library::before,
.skills .skills-cards .node::before,
.skills .skills-cards .adobe::before,
.skills .skills-cards .webflow::before{
    width: 50%;
}
.skills .skills-cards .frame::before{
    width: 30%;
}
/* container skills end */



/* container contact start */
.contact{
    padding-bottom: 50px;
    background: #111111;
}
.contact h1 span{
    color: #ff184c;
}
.contact .contact-info{
    display: flex;
    justify-content: space-between;
}
.contact .message,
.contact .touch{
    width: 45%;
    margin-top: 50px;
}
.contact .message h3{
    color: #ff184c;
    font-size: 35px;
}
form{
    margin-top: 30px;
}
.contact .message .input-2{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.contact .message .input-2 input{
    width: 45% !important;
}
textarea,
input{
    margin-top: 15px;
    border: 2px solid #ff184c;
    padding: 10px 15px;
    font-size: 25px;
    width: 100%;
    background: transparent;
    color: #FF184C;
    resize: none;
    font-weight: bold;
    border-radius: 10px;
    transition: 0.5s;
    cursor: pointer;
}
textarea::placeholder,
input::placeholder{
    color: #FF184C;
    transition: 0.5s;
}
textarea:hover::placeholder,
input:hover::placeholder{
    color: #fff;
}
textarea:focus::placeholder,
input:focus::placeholder{
    color: #FF184C;
}
.contact button:hover,
textarea:hover,
input:hover{
    background: #FF184C;
}
textarea:focus,
input:focus{
    background: transparent;
}
.contact .message button{
    border-radius: 10px;
    padding: 10px 25px;
    font-size: 25px;
    font-weight: bold;
    margin-top: 15px;
    background: transparent;
    border: 2px solid #ff184c;
    color: #ff184c;
    cursor: pointer;
    transition: 0.5s;
}
textarea:focus,
input:focus,
textarea:hover,
input:hover,
.contact .message button:hover{
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
}
.touch h3{
    font-size: 35px;
    color: #ffffff;
}
.contact-card{
    display: flex;
    width: 100%;
    margin-top: 35px;
    overflow: hidden;
}
.contact-card i{
    display: flex;
    justify-content: center;
    font-size: 80px;
    color: #ffffff;
    width: 20%;
    overflow: hidden;
}
.contact-card .contact-info-span{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    padding-left: 20px;
    font-size: 20px;
    overflow: hidden;
}
.contact-card .contact-info-span span{
    line-height: 30px;
}
.contact-card .contact-info-span span:nth-child(1){
    font-weight: bold;
}
/* container contact end */



/* container footer start */
.footer{
    height: 30vh;
    background: linear-gradient(180deg, #111111 0.52%, #FF184C 100%);
}
.footer .footer-content{
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 20px;
}
.copyright-content{
    font-size: 20px;
}
.social-content{
    font-size: 25px;
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.social-content a{
    transition: 0.5s;
}
.social-content a:hover{
    color: #FF184C;
    text-shadow: 
    2px 2px 5px #fff,
    2px 2px 10px #fff,
    2px 2px 15px #fff,
    2px 2px 20px #fff,
    2px 2px 25px #fff,
    2px 2px 30px #fff,
    2px 2px 35px #fff,
    2px 2px 40px #fff,
    2px 2px 45px #fff,
    2px 2px 50px #fff;
}
/* container footer end */



/* container perfomances start */
*.perfomances{
    box-shadow: none !important;
    animation: none !important;
    text-shadow: none !important;
}
a.perfomances:hover{
    background: #ff184c !important;
    color: #fff !important;
    box-shadow: none !important;
    animation: none !important;
}
.visible.perfomances{
    display: none !important;
    opacity: 0 !important;
}
.nav::before.perfomances{
    box-shadow: none !important;
}
/* container perfomances end */



/* container 3D start */
.scene{
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
}
.scene canvas{
    z-index: 1000;
    position: absolute;
}
/* container 3D end */






/* ABOUT PAGE START */
.about-html{
    background: url(./../img/bg-about-html.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right !important;
}
.about-me-html{
    background: #111113;
    color: #ffffff;
    padding-bottom: 40px;
}
.quote{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 50px;
}
.quote img{
    border-radius: 50%;
    border: 4px solid #FF184C;
    width: 150px;
    height: 150px;
    object-fit: cover;
}
.quote p{
    font-style: italic;
    margin-top: 30px;
    font-size: 20px;
}
.cards-about{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.education,
.training,
.projects-about,
.programs{
    margin-top: 30px;
    width: 45%;
}
.education p,
.training p,
.projects-about p,
.programs p{
    font-size: 18px;
}
.training p{
    margin-bottom: 20px;
}
.training a{
    border: 2px solid #FF184C;
    border-radius: 30px;
    padding: 8px 15px;
    transition: 0.5s;
    color: #FF184C;
}
.training a:hover{
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
    background: #FF184C;
    color: #ffffff;
}
.about-me-html i{
    color: #FF184C;
    font-size: 40px;
}
.about-me-html h3{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.about-me-html h3 span{
    margin-left: 20px;
    font-size: 25px;
}
/* ABOUT PAGE END */






/* SERTIFICATES PAGE START */
canvas.certificates-bg{
    background: rgb(30,30,30);
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
}
.back-certificates{
    color: #ffffff;
    background: #FF184C;
    padding: 15px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.cert{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}
.cert img{
    position: relative;
    z-index: 10000;
    width: 45%;
    height: auto;
    margin-top: 50px;
}
/* SERTIFICATES PAGE END */






/* PROJECTS PAGE START */
.projects-html{
    background: url(./../img/bg-projects-html.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right !important;
}
.my-projects-html{
    background: url(./../img/bg-projects-cards.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 100px 0px;
}
.cards-projects-html{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.my-projects-html h3{
    color: #ffffff;
    font-size: 30px;
    text-shadow: 
    2px 2px 5px #FF184C,
    2px 2px 10px #FF184C,
    2px 2px 15px #FF184C,
    2px 2px 20px #FF184C,
    2px 2px 25px #FF184C,
    2px 2px 30px #FF184C,
    2px 2px 35px #FF184C,
    2px 2px 40px #FF184C,
    2px 2px 45px #FF184C,
    2px 2px 50px #FF184C;
}
.cards-project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45%;
    padding: 40px 0px;
    overflow: hidden;
    border-radius: 30px;
}
.cards-projects-html .cards-project img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    transition: 0.5s;
}
.cards-projects-html .cards-project img:hover{
    transform: scale(1.05);
    width: 100%;
    border-radius: 30px;
}
.cards-projects-html .cards-project img:active{
    transform: scale(0.9);
    transition: 0.2s;
}
.cards-projects-html .cards-project a{
    margin-top: 20px;
    padding: 10px 35px;
    background: #FF184C;
    border-radius: 30px;
    font-size: 20px;
    transition: 0.5s;
}
.cards-projects-html .cards-project a:hover{
    box-shadow: 
    2px 2px 10px #ff184c,
    2px 2px 20px #ff184c,
    2px 2px 30px #ff184c,
    2px 2px 40px #ff184c,
    2px 2px 50px #ff184c;
    background: #FF184C;
}
.coming-soon{
    background: #111113;
    padding: 30px 0px;
}
/* PROJECTS PAGE END */






/* SKILLS PAGE START */
.skills-html{
    background: url(./../img/bg-skills-html.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.skills-html-card{
    width: 100% !important;
}
.skills-html-card .skills-bars .skills-info span{
    font-size:25px !important;
}
.git::before,
.sql::before{
    width: 80%;
}
.boot::before,
.wordpress::before{
    width: 70%;
}
.fontaw::before{
    width: 100%;
}
.host::before{
    width: 90%;
}
.react::before{
    width: 30%;
}
.jquery::before{
    width: 50%;
}
.angular::before,
.vue::before{
    width: 15%;
}
.skills-html-card .skills-bars .skills-info span i{
    margin-right: 30px;
}
.skills-html-card .skills-bars .skills-info span:nth-child(1){
    display: flex;
    align-items: center;
}
.skills-html-card .skills-bars .skills-info span img{
    margin-right: 30px;
    width: 50px;
    height: 50px;
}
/* SKILLS PAGE END */





/* PAGES INDEXRU START */
.edit-3,
.edit-4{
    color: #FF184C;
}
/* PAGES INDEXRU END */