@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&family=Roboto+Serif:ital,opsz,wght@0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700&display=swap');


*,*::after,*::before{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
scroll-behavior: smooth;
}
:root{
/* colors */
--main-bg: hsla(240, 13%, 12%, 1);
--hero-bg: hsla(246, 28%, 7%, 1);
--accent:hsla(260, 65%, 72%, 1);
--pink: hsla(347, 70%, 76%, 1);
--muted-pink: #DBAAF9;
--text-gradient: linear-gradient(90deg, #A889E6 0%, #ED98AB 100%);
background-clip: text;
--white: #fff;
--poppins: 'Poppins', sans-serif;
}


@font-face {
   font-family: 'cutoff Pro';
   src: url(./fonts/Cutoff\ Pro.otf);
}
/* NAVIGATION */

body{
font-family:var(--poppins) ;
background: var(--main-bg);
color: var(--white);

}

h1, h2,button, a.book-call,:placeholder-shown{
font-family: 'Cutoff Pro';
font-weight: normal;
}


strong{
margin-right: 3px;
}

.logo{
width: 90px;
}

nav{
display: flex;
justify-content: space-between;
padding: 20px 50px;
place-items: center;
}

.ellipse{
width: 30px;
}

.tab{
display: flex;
place-items: center;
justify-content: space-between;
width: 40%;
}

.tab-list{
display: flex;
gap: 30px;
place-items: center;
}

.tab-list li a{
color: var(--white); 
padding: 5px 0px;
font-family: var(--poppins);
}

.tab-list li a:is(:focus){
   border-bottom: 2px solid  var(--muted-pink) !important;
}

.contact{
color: var(--white);
border-radius: 40px;
background: var(--accent);
transition: .1s;
text-align: center;
padding: 12px 40px;
width: 200px;
}


.contact:is(:focus,:hover){
background: var(--hero-bg);
border: 2px solid var(--accent);
}


.menu{
   display: grid;
   place-items: center;
   display: none;
   }
   .menu-btn{
   width: 38px;
   }
   .menu-btn:is(:focus,:hover){
   cursor: pointer;
   }
   
   .author-cont{
      position: relative;
      z-index: 100;
   }

   .author-cont .ellipse{
      left: 39%;
      top: 10px;
      z-index: -1;
      position: absolute;
   }
   

section.top-main-section{
background: var(--hero-bg);
}

section.main-hero{
margin-top: 30px;
padding: 0px 50px  0px 50px;
display: flex;
justify-content: space-between;
place-items: center;
}


.name{
position: relative;
}

.author{
background: var(--text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 80px;
}


.author-name{
font-size: 80px;
color: var(--white);
}

.intro{
display: flex;
flex-direction: column;
gap: 25px;
}


.offers{
font-family: var(--poppins);
font-weight: 200;
color: var(--white);
font-size: 15px;
width: 70%;
line-height: 25px;
}

.specifications{
display: grid;
gap: 40px ;
}

/* MAIN SECTION */

.services-container{
display: flex;
gap: 100px;
place-items: center;
padding: 70px 50px;
}

.cards{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 30px;
}

.card{
width: 260px;
background: var(--hero-bg);
border-radius: 20px;
display: grid;
gap: 10px;
place-items: center;
padding: 20px 15px;
}

.card img{
width: 40px;
}


.card h2{
font-size: 20px;
}

p.service{
text-align: center;
font-family: var(--poppins);
font-weight: 200;
font-size: 13px;
line-height: 26px;
}

h1.services{
font-size: 70px;
}

.services-title{
position: relative;
}
.services-title img{
position: absolute;
top: 5px;
left: -1%;
width: 30px;
z-index: -100;
}

.services-description{
display: grid;
gap: 30px;
}

p.service-description{
font-family: var(--poppins);

width: 90%;
line-height: 27px;
font-size: 14px;
font-weight: 200;
}

.reason{
display: flex;
align-items: flex-start;
margin-bottom: 25px;
gap: 20px;
}


.web-title{
position: relative;
padding: 10px;
}

.web-title img{
position: absolute;
top: 0;
left: 0;
z-index: -1;

}

.web-title h1{
font-size: 40px;
}
.why-you-need-website-container h1{
font-size: 40px;
text-align: center;

}
.why-you-need-website-container{
display: grid;
place-items: center;
gap: 30px;
margin: 100px 0px;
}

.scale-up{
width: 70%;
}

.why-you-need-website{
width: 100%;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 150px;
padding: 20px 0;
place-items: center;
justify-content: space-between;
}



.why{
width: 50%;
font-size: 14px;
line-height: 22px;
}


/* PortFolio */

.portfolio{
display: grid;
place-items: center;
gap: 50px;
margin: 70px 0px;
}

.portfolio-heading{
display: grid;
position: relative;
gap: 10px;
padding: 10px;
place-items: center;
}

.portfolio-heading h1{
font-size: 35px;
}

.portfolio-heading img{
position: absolute;
top: 8px;
left: 0px;
z-index: -1;

}

.previous-works{
color: var(--muted-pink);
font-size: 14px;
}
.portfolio-works{
display: flex;
gap: 40px;
place-items: center;
}

.work-card{
width: 250px;
background: var(--hero-bg);
display: grid;
gap: 20px;
overflow: hidden;
border-radius: 10px;
padding-bottom: 10px;
}
img.work{
width: 100%;
}

/*    why you should work with me section */


.why-work-with-me{
display: grid;
padding: 20px 50px;
margin: 100px 0px;
place-items: center;
gap: 50px;
}


h1.work{
font-size: 35px;
}


ul.reasons-list{
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
width: 70%;
}


.reason-ul{
display: flex;
gap: 10px;
}

.reason-description{
font-size: 13px;
width: 80%;
}

p.list{
width: 30px;
display: grid;
place-items: center;
font-family: var(--roboto);
height: 30px;
border-radius: 50%;
background: var(--pink);
}

.work-with-me{
place-content: center;
width: 90%;
display: flex;
place-items: center;
}




/* testimonial section */


.indicators{
display: flex;
gap: 10px;
}
.indicator{
width: 15px;
padding: 2px;
height: 15px;
border: 2px solid var(--muted-pink);
border-radius: 50%;
}
.testimonials{
margin: 70px 0px;
display: grid;
gap: 50px;
place-items: center;
}

.testimonial-title{
padding: 10px;
position: relative;
}

.testimonial-title h1{
font-size: 40px;
}

.testimonial-title img{
position: absolute;
z-index: -1;
top: 10px;
left: 3px;
}


/* slider */



.testimonial{
display: grid;
gap: 20px;
place-items: center;
}

.client-testimonial{
display: grid;
place-items: center;
gap: 25px;
}

h2.client-name{
background: var(--text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

p.reviews{
width: 40%;
line-height: 26px;
text-align: center;
font-weight: 100;
font-size: 14px;
}

.frame{
position: relative;
display: grid;
place-items: center;
width: 300px;
background: transparent;
overflow: hidden;
}

.slider{
display: flex;
gap: 0;
width: 100%;
object-fit: cover;
transition: 500ms;
}

.slider img{
width: 100%;
height: 100%;
}

.btns{
display: flex;
gap: 100px;
}

.btns img::selection{
background: none;
}

.btns:is(:hover){
cursor: pointer;
}



/* CONTACT FORM */

.contact-form{
display: grid;
place-items: center;
margin: 50px 0px;
gap: 50px;
}

form{
display: grid;
place-items: center;
gap: 20px;
}

form input,#message{
resize: none;
outline: none;
width: 350px;
color: var(--white);
border-radius: 10px;
padding: 10px;
font-family: var(--poppins);
background: var(--hero-bg);
border: 1px solid var(--muted-pink);
}

#message{
outline: none;
width: 350px;
color: var(--white);
border-radius: 10px;
height: 200px;
display: grid;
align-items: flex-start;
}


input:is(:focus){
background: var(--hero-bg);
}

.btn-container{
width: 55%;
overflow: hidden;
padding: 3px;
border: 1px solid var(--muted-pink);
border-radius: 30px;
}

form button{
width: 100%;
padding: 10px 30px;
background: var(--accent);
color: var(--white);
border: none;
font-size: 16px;
border-radius: 30px;
cursor: pointer;
}


.close{
   padding: 10px 50px;
   background: var(--accent);
   color: var(--white);
   border: none;
   font-size: 16px;
   border-radius: 30px;
   cursor: pointer;
}

.form-section{
display: flex;
padding: 20px 100px;
place-content: center;
place-items: center;
width: 80%;
gap: 150px;
}

p.call-description{
width: 100%;
font-weight: 100;
font-size: 14px;
line-height: 27px;


}

h2.book-call{
font-size: 35px;

}

.book-a-call{
display: flex;
flex-direction: column;
gap: 30px;
}

a.book-call{
background: var(--hero-bg);
border: 2px solid var(--muted-pink);
display: flex;
padding: 8px 15px;
border-radius: 25px;
text-align: center;
width: 200px;
color: var(--white);
place-items: center;
gap: 10px;

}

.contact-form-title {
position: relative;
}

.contact-form-title img{
position: absolute;
left: -8px;
top: 0px;
z-index: -100;
}


.lets-work{
font-size: 40px;
}

/* footer-section */

footer{
background: var(--hero-bg);
display: flex;
place-items: center;
justify-content: space-between;
padding: 20px;
}

.social-links{
display: flex;
gap: 20px;
}


.copy-right{
color: gray;
}
.social-links li a img{
width: 30px;
}

.work-text-section{
margin-left: 20px;
display: grid;
}
.work-text-section a{
margin-top: 20px;

}

.arrow{
width: 50px;
}

.gradient-pattern{
height: 8px;
background: var(--text-gradient);
}



/* modal */

.modal{
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   display: grid;
   z-index: 100;
   place-items: center;
   display: none;
}

.modal-content{
   width: 45%;
   display: grid;
   margin-top: 50px;
   place-items: center;
   padding: 30px;
   gap: 30px;
   max-height: 500px;
   background:var(--main-bg);
   border-radius: 10px;
}

.modal.active{
   display: grid;
}

.success-text{
 display: grid;
 place-items: center;
 gap: 30px;
 text-align: center;
}

.verified{
   width: 120px;
}

.success-text h2{
   font-size: 35px;
}

/* TABLET VIEW */

@media screen and (max-width: 900px){

.menu{
display: grid;
}

.logo{
width: 70px;
}

nav{
place-items: center;
padding: 10px 20px;
}

.author-cont .ellipse{
   left: 53%;
   top: 10px;
}


.intro{
place-items: center;
z-index: 1;
}


.tab{
position: absolute;
width: 95%;
top: 60px;
left: 2.2%;
z-index: 100;
background: var(--main-bg);
flex-direction: column;
padding: 20px;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.2) ;
border-radius: 5px;
transform: translateY(-200%);
transition: .4s;
}

.active{
transform: translateY(0%);
}

.tab-list{
display: grid;
place-content: center;
width: 100%;
}

.tab .contact{
display: none;
}

.tab-list li {
width: 100%;
display: grid;
place-items: center;
}

body{
padding: 0;
position: relative;
overflow-x: hidden;
}


section.main-hero{
margin-top: 30px;
padding: 0px 20px ;
display: flex;
flex-direction: column;
gap: 70px;
place-items: center;
}

.specifications{
place-items: center;
}

.offers{
width: 80%;
text-align: center;
}


.services-title img{
   top: 10px;
}

.services-container{
flex-direction: column-reverse;
display: flex;
gap: 70px;
place-items: center;
padding: 50px 0px;
}


div.services-description{
place-items: center;
}

p.service-description{
text-align: center;
}



.why-you-need-website{
display: flex;
flex-direction: column;
place-items: center;
gap: 70px;
}

.reasons-you-need-website{
place-content: center;
width: 70%; 
}

.why{
width: 100%;
}

.portfolio-works{
flex-wrap: wrap;
flex-direction: column;
place-content: center;
}

.work-with-me{
flex-direction: column-reverse;
place-items: center;
}

.reasons-you-should-work-with-me{
display: grid;
place-items: center;
}

ul.reasons-list{
place-items: center;
display: grid;
padding: 10px;
width: 80%;
}

.why-work-with-me{
display: grid;
place-items: center;
padding: 20px 0px;
gap: 50px;
}

p.reviews{
width: 60%;
font-size: 13px;
}

.form-section{
width: 100%;
flex-direction: column;
gap: 70px;

}

.book-a-call{
place-items: center;
}

.call-description{
text-align: center;
}

form button {
width: 100%;
}

.modal-content{
   width: 90%;
   padding: 30px 15px;
   background: var(--hero-bg);
}

.verified{
   width: 70px;
}

.success-text h2{
   font-size: 25px;
}

}


@media screen  and (max-width: 700px) {
.cards{
display: flex;
flex-direction: column;
}

.author-img{
width: 100%;
}
}


@media screen and (max-width:600px){

.intro h1{
text-align: left;
font-size: 48px;
white-space: nowrap;
}

.intro{
gap: 10px;
}

.name{
width: 100%;
padding: 10px 0px;

}


.author-cont .ellipse{
top: 10px;
position: absolute;
right: 50% !important;
z-index: -1;
}

.author-img{
width: 100%;
}

.contact{
padding: 10px 40px;
}


body{
padding: 0;
overflow-x: hidden;
}

.web-title h1,.testimonial-title h1,.work,h2.book-call{
font-size: 25px;
}



.img-why-work img{
width: 100%;
}

.testimonial-title h1,h1.lets-work{
font-size: 26px;
}

.testimonial-title img{
width: 25px !important;
left: 5px;
top: 5px;
}

.slider{
width: 300px;
}

section.main-hero{
padding: 0px 30px;
display: flex;
flex-direction: column;
gap: 70px;
place-items: center;
}


.specifications{
place-items: center;
}


.offers{
width: 110%;
text-align: center;
}

.services-title .ellipse{
   top: 0;
   left: -8px;
}

.services-container{
flex-direction: column-reverse;
display: flex;
gap: 70px;
place-items: center;
padding: 70px 20px;
}


h1.services{
font-size: 40px;
font-weight: 500;
}

.cards{
display: flex;
flex-direction: column !important;
}

div.services-description{
place-items: center;
gap: 20px;
width: 108%;
margin: 0;
}

p.service-description{
width: 97%;
font-size: 14px;
}

.why-you-need-website{
display: flex;
flex-direction: column;
place-items: center;
gap: 60px;
padding: 0px 0px;
}

.reasons-you-need-website{
place-content: center;
width: 80%; 
}

.why{
width: 100%;
}

.portfolio{
gap: 30px;
}

.portfolio-works{
flex-direction: column;
place-content: center;
}

.portfolio-heading h1{
font-weight: 500;
font-size: 30px;
}

p.previous-works{
font-size: 14px;
font-weight: normal;
}

.work-with-me{
flex-direction: column-reverse;
place-items: center;
}

.why-work-with-me{
   margin: 50px 0;
}


img.work{
width: 100%;
}

ul.reasons-list{
display: grid;
padding: 10px;
width: 100%;
margin: 0 auto;
place-content: center;
}


.form-section{
flex-direction: column;
gap: 70px;
}

form button{
padding: 12px;
width: 100%;
margin: 0;
}

.book-a-call{
place-items: center;
}

.call-description{
text-align: center;
}

.form-section{
display: flex;
padding: 20px;
place-items: center;
width: 100%;
gap: 70px;
}

form input,#message{
width: 100%;
}

form{
width: 100%;
}

p.reviews{
width: 90%;
}



.why-you-need-website-container{
margin: 40px 0px;

}

.why-you-need-website-container h1, .why-work-with-me h1{
font-size: 25px;
text-align: center;
}



.why-you-need-website-container .ellipse{
left: 0;
top: 5px;
width: 25px;
}


img.ellipse{
width: 30px;
}

footer{
flex-direction: column;
gap: 30px;
}

   
   .contact-form-title img{
   position: absolute;
   left: -8px;
   top: -5px;
   width: 25px;
   }

}


@media screen  and (max-width: 320px) {

.name h1{
font-size: 30px;
}

.name .ellipse{
display: none;
}

p.offers{
width: 110%;
}
.frame{
width: 200px;
}

.slider{
display: flex;
gap: 0;
width: 100%;
object-fit: cover;
transition: 500ms;
}

.slider img{
width: 100%;
height: 100%;
}
.testimonial-title h1{
   font-size: 22px;
}
.ellipse{
   width: 20px !important;
}
}


.fade-up{
transition: transform cubic-bezier(0.64,0.04,0.26,0.87), opacity 0.8s  cubic-bezier(0.64,0.04,0.26,0.87);

opacity: 0;
transform: translate3d(0,2rem,0);
}

.faded{
opacity: 1;
transform: translate3d(0,0,0);
}