*,
*::after;
*::before{
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

/*ul{list-style: none}*/
ul{
    margin: 0;
}

a{text-decoration: none;}

body{
	margin: 0;
	padding: 0;
	font-family: 'DM Sans', sans-serif;
   
}


/*
font-family: 'Rubik', sans-serif;
font-family: 'Lora', serif;
*/

:root {
  --yellow: #EFC536;
  --white: #ffffff;
}




@media(max-width:1400px){

	.banner {
	    background: linear-gradient(174deg, rgb(46 8 71 / 85%) 24%, rgb(30 2 53) 73%, rgb(53 11 80 / 83%) 100%),url(../images/banner-bg.png);
	    padding: 150px 0 45px 0;
      background-repeat: no-repeat;
	}

	.banner .rt-block .image-box {
	    max-width: 400px;
	    position: relative;
	    z-index: 2222;
	}

	.about-us {
	    background: linear-gradient(183deg, rgb(56 12 84 / 61%) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 40px 0 30px 0;
	    
	}

	.my-skills .d-flex .box {
	    width: 25%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    margin-block-end: 40px;
	}

		.my-skills {
	    background: linear-gradient(12deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 55px 0 0 0;
	}

	.my-skills .d-flex {
	    flex-wrap: wrap;
	    justify-content: center;
	}

	.portfolio {
	    background: linear-gradient(155deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 80px;
	}

	.portfolio {
	    background: linear-gradient(155deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 55px;
	}

	.contact-me {
	    padding: 60px 0 70px 0;
	    background: rgb(55,12,83);
	    background: linear-gradient(0deg, rgba(46,12,69,1) 0%, rgba(30,2,53,1) 60%);
	}

	.footer {
	    background: #1E0234;
	    padding: 60px 0 0 0;
	    background: linear-gradient(0deg, rgba(46,12,69,1) 0%, rgb(26 4 44) 60%);
	}


}


/*1200***********************************/


@media(max-width:1200px){

	.banner .d-flex {
	    justify-content: space-between;
	    display: initial!important;
	}

	.banner .lt-block {
	    width: 100%;
	}

	.banner .rt-block .image-box {
	    max-width: 450px;
	    margin-inline: auto;
	}

	.banner .rt-block .image-box::after {
	    position: absolute;
	    content: "";
	    width: 450px;
	    height: 450px;
	    left: -4px;
	    border: 2px dashed #FFFFFF;
	    border-radius: 50%;
	    top: 11%;
	    z-index: -1;
	    animation: rotate 30.5s linear infinite;
	}

	.banner .rt-block .image-box::before {
	    position: absolute;
	    content: "";
	    width: 400px;
	    height: 400px;
	    left: 22px;
	    border: 2px dashed #9F00D3;
	    border-radius: 50%;
	    top: 16%;
	    z-index: -1;
	    animation: move 30.5s linear infinite;
	}

	.about-us {
	    background: linear-gradient(182deg, rgb(56 12 84 / 74%) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 40px 0 0 0;
	}

	.about-us .box:nth-child(1) {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    display: none;
	}

	.circle_percent {
	    font-size: 130px;
	}

	.my-skills .box h4 {
	    font-size: 18px;
	}

	.portfolio .website-block .text-block h3 {
	    font-size: 20px;
	}

}






@media(max-width:991px){
	
	.header .logo {
	    width: 60px;
	}

	.primary-nav li a {
	    font-family: inherit;
	    font-size: 16px;
	}

	#number {
	    font-family: inherit;
	    font-size: 16px;
	}

	i.bx.bxs-phone-call {
	    font-size: 25px;
	}

	.banner {
	    background: linear-gradient(174deg, rgb(46 8 71 / 85%) 24%, rgb(30 2 53) 73%, rgb(53 11 80 / 83%) 100%),url(../images/banner-bg.png);
	    padding: 100px 0 30px 0;
	    background-repeat: no-repeat;
	}

	.banner .lt-block h1 {
	    font-size: 35px;
	    line-height: 1.3;
	}

	.banner .lt-block h1 span {
	    display: block;
	    font-size: 55px;
	    line-height: 57px;
	}

	.about-us {
	    background: linear-gradient(182deg, rgb(56 12 84 / 72%) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.circle_percent {
	    font-size: 120px;
	}

	.circle_inbox {
	    position: absolute;
	    top: 3px;
	    left: 3px;
	    right: 3px;
	    bottom: 3px;
	    background: #3a0962;
	    z-index: 3;
	    border-radius: 50%;
	}

	.my-skills {
	    background: linear-gradient(12deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 45px 0 0 0;
	}

	.my-skills .counter {
	    padding-block-start: 30px;
	}

	.my-skills {
	    background: linear-gradient(16deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 45px 0 0 0;
	}

	.portfolio {
	    background: linear-gradient(133deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.portfolio .website-block .box .image-block {
	    background: pink;
	    height: 300px;
	    border-radius: 5px;
	    overflow: hidden;
	}

	.contact-me .d-flex {
	    gap: 70px;
	    padding-block-start: 20px;
	    flex-direction: column-reverse;
	}

	.contact-me .lt-block {
	    width: 100%;
	    position: relative;
	}
	.contact-me .rt-block {
	    width: 100%;
	}

	.contact-me .d-flex {
	    gap: 70px;
	    padding-block-start: 35px;
	    flex-direction: column-reverse;
	}

	.footer .content .logo-img {
	    width: 60px;
	}

	.footer {
	    background: #1E0234;
	    padding: 40px 0 0 0;
	    background: linear-gradient(0deg, rgba(46,12,69,1) 0%, rgb(26 4 44) 60%);
	}

}


@media(max-width:767px){

	.header .d-flex {
	    justify-content: space-between;
	    align-items: center;
	    flex-direction: column;
	    gap: 22px;
	}

	.primary-nav li a {
	    font-family: inherit;
	    font-size: 18px;
	}

	.banner {
	    background: linear-gradient(174deg, rgb(46 8 71 / 85%) 24%, rgb(30 2 53) 73%, rgb(53 11 80 / 83%) 100%),url(../images/banner-bg.png);
	    padding: 170px 0 30px 0;
	    background-repeat: no-repeat;
	}

	.banner .rt-block .image-box {
	    max-width: 370px;
	    margin-inline: auto;
	}

	.banner .rt-block .image-box::before {
	    position: absolute;
	    content: "";
	    width: 350px;
	    height: 350px;
	    left: 10px;
	    border: 2px dashed #9F00D3;
	    border-radius: 50%;
	    top: 14%;
	    z-index: -1;
	    animation: move 30.5s linear infinite;
	}

	.banner .rt-block .image-box::after {
	    position: absolute;
	    content: "";
	    width: 400px;
	    height: 400px;
	    left: -16px;
	    border: 2px dashed #FFFFFF;
	    border-radius: 50%;
	    top: 8%;
	    z-index: -1;
	    animation: rotate 30.5s linear infinite;
	}

	.about-us {
	    background: linear-gradient(181deg, rgb(56 12 84 / 71%) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.about-us p {
	    font-size: 16px;
	    line-height: 30px;
	    font-weight: 400;
	    color: #fff;
	    font-style: italic;
	    padding-block-start: 20px;
	}

	.about-us .title h2 {
	    font-size: 30px;
	    line-height: 32px;
	    font-weight: 600;
	    color: var(--yellow);
	    font-style: italic;
	}


	.portfolio .title h2 {
	    font-size: 30px;
	    line-height: 32px;
	    font-weight: 600;
	    color: var(--yellow);
	    font-style: italic;
	}

	.my-skills {
	    background: linear-gradient(22deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 40px 0 0 0;
	}

	.my-skills .d-flex .box {
	    width: 33%;
	}
	.my-skills .box h4 {
	    font-size: 16px;
	}

	.circle_percent {
	    font-size: 100px;
	}

	.portfolio {
	    background: linear-gradient(125deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.portfolio .col-lg-4{
		width: 50%;
	}

	.portfolio .website-block .box .image-block {
	    background: pink;
	    height: 200px;
	    border-radius: 5px;
	    overflow: hidden;
	}

	.portfolio .website-block {
	    padding-block-start: 20px;
	}

	.portfolio .website-block .box .image-block {
	    background: pink;
	    height: 250px;
	    border-radius: 5px;
	    overflow: hidden;
	}
	.portfolio .website-block .text-block h3 {
	    font-size: 16px;
	}

	.portfolio .website-block .text-block p {
	    font-size: 14px;
	    line-height: 26px;
	    font-weight: 100;
	    color: #f0f8ff96;
	    font-family: 'Lora';
	    margin: 0;
	    padding-block-start: 15px;
	}

	.portfolio .website-block .text-block #view {
	    display: block;
	    padding: 10px 0;
	    background: #EFC536;
	    text-align: center;
	    border-radius: 5px;
	    display: flex;
	    gap: 10px;
	    align-items: center;
	    justify-content: center;
	    font-size: 16px;
	    font-weight: 700;
	    text-transform: uppercase;
	    color: #1E0235;
	    margin-block-start: 25px;
	}

	.contact-me .title h2 {
	    font-size: 30px;
	    line-height: 32px;
	}

	.contact-me {
	    padding: 60px 0 45px 0;
	    background: rgb(55,12,83);
	    background: linear-gradient(0deg, rgba(46,12,69,1) 0%, rgba(30,2,53,1) 60%);
	}

}





@media(max-width:576px){

	  button.close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    display: block;
}

#menu {
	    padding: 0;
	    color: #fff;
	    text-transform: uppercase;
	    margin: 0;
	    display: flex;
	    align-items: center;
	    gap: 3px;
	    font-size: 20px;
	}

	i.bi.bi-list {
	    font-size: 25px;
	    font-weight: 800;
	}

	.flex-two {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	}

	.primary-nav {
    display: block;
    align-items: center;
    gap: 30px;
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    position: fixed;
    top: 0;
    right: -100%;
    background: #1E0235;
    padding-block-start: 100px;
    
}

	.primary-nav li {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid #ffffff08;
    transition: all 0.5s ease;
}

	.primary-nav li::before {
		  display: none;
	}

	.primary-nav li:hover{
		background:#2f11394a;
		transition: all 0.5s ease;
		border-bottom: 1px solid #816c6c2e;
	}

	.banner .lt-block h1 {
	    font-size: 30px;
	    line-height: 1.3;
	}

	.banner .lt-block h1 span {
	    display: block;
	    font-size: 45px;
	    line-height:47px;
	}

	.banner .lt-block p {
      font-size: 14px;
	    line-height: 26px;
	}

	.banner .rt-block .image-box {
	    max-width: 350px;
	    margin-inline: auto;
	}
	.banner .rt-block .image-box::before {
	    display: none;
	}
	.banner .rt-block .image-box::after {
	    display: none;
	}

	.my-skills {
	    background: linear-gradient(22deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 30px 0 0 0;
	}

	.my-skills .title h2 {
	    font-size: 30px;
	    line-height: 32px;
	}

	.portfolio {
	    background: linear-gradient(107deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.portfolio .col-lg-4 {
	    width: 100%;
	}

	.portfolio .website-block .box .image-block {
	    background: pink;
	    height: 350px;
	    border-radius: 5px;
	    overflow: hidden;
	}

	.portfolio .website-block .text-block h3 {
	    font-size: 18px;
	}
	#btn-send {
    width: 100%;
    height: 50px;
}
	

}





@media(max-width:480px){

	.banner {
	    background: linear-gradient(339deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding: 150px 0 35px 0;
	}

	.banner .lt-block h1 span {
	    display: block;
	    font-size: 40px;
	    line-height: 47px;
	}

	.banner .lt-block p {
	    padding-block-start: 10px;
	}

	.banner .rt-block .image-box {
	    max-width: 300px;
	    margin-inline: auto;
	}

	.about-us {
	    background: linear-gradient(181deg, rgb(56 12 84 / 71%) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.my-skills {
	    padding: 40px 0 0 0;
	}

	.my-skills .d-flex .box {
	    width: 50%;
	}

	.portfolio {
	    background: linear-gradient(113deg, rgba(56, 12, 84, 1) 0%, rgba(30, 2, 53, 1) 30%);
	    padding-block-start: 30px;
	}

	.portfolio .website-block {
	    padding-block-start: 10px;
	}
	.contact-me .d-flex {
	    gap: 30px;
	    padding-block-start: 35px;
	    flex-direction: column-reverse;
	}

	.contact-me {
	    padding: 40px 0 35px 0;
	    background: rgb(55,12,83);
	    background: linear-gradient(0deg, rgba(46,12,69,1) 0%, rgba(30,2,53,1) 60%);
	}

	.footer .content .footer-nav {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 30px 0 0 0;
    flex-wrap: wrap;
    justify-content: center;
}

	.footer .content .footer-nav li a {
	    font-family: inherit;
	    font-size: 16px;
	    line-height: 18px;
	    font-weight: 500;
	    color: #fff;
	    text-transform: capitalize;
	}

}


@media(max-width:480px){

	.banner {
	    background: linear-gradient(174deg, rgb(46 8 71 / 85%) 24%, rgb(30 2 53) 73%, rgb(53 11 80 / 83%) 100%),url(../images/banner-bg.png);
	    padding: 170px 0 30px 0;
	    background-repeat: no-repeat;
	}

	.banner .lt-block h1 {
	    font-size: 25px;
	    line-height: 1.3;
	}

	.banner .lt-block h1 span {
	    display: block;
	    font-size: 35px;
	    line-height: 47px;
	}
	.banner .lt-block h3 {
	    font-family: 'Lora', serif;
	    font-size: 18px;
	    line-height: 20px;
	}
	.banner .lt-block .social {
	    display: flex;
	    gap: 30px;
	    padding: 25px 0 0 0;
	}

	.primary-button {
	    padding: 8px 15px;
	    background: #EFC536;
	    text-transform: uppercase;
	    font-size: 14px;
	    line-height: 16px;
	    font-weight: 800;
	    color: #1E0235;
	    border-radius: 4px;
	}

	.banner .rt-block .image-box {
	    max-width: 270px;
	    margin-inline: auto;
	    padding-block-start: 30px;
	}

	.about-us .title h2 {
	    font-size: 25px;
	    line-height: 27px;
	}

	.about-us p {
    font-size: 14px;
    line-height: 28px;
}
.my-skills .title h2 {
	    font-size: 25px;
	    line-height: 27px;
	}

	.portfolio .title h2 {
	    font-size: 25px;
	    line-height: 27px;
	    font-weight: 600;
	}
	.contact-me .title h2 {
	    font-size: 25px;
	    line-height: 27px;
	}
	.control {
	    width: 100%;
	    padding: 15px 15px;
	    margin: 0 0 25px 0;
	}

.contact-me .lt-block .top-block .social-media .flex-box .box a {
	    display: flex;
	    align-items: center;
	    gap: 8px;
	}

.contact-me .lt-block .top-block .social-media .flex-box .box span {
	    font-size: 14px;
	    line-height: 16px;
	}

.footer .content .footer-nav {
	    list-style: none;
	    display: flex;
	    gap: 20px;
	    padding: 30px 0 0 0;
	    flex-wrap: wrap;
	    justify-content: center;
	}



}