/*
custom property
*/
:root{
/*
colors
*/
/* background color*/

--bg-dark-purple:hsla(260,62%,11%, 1);
--bg-russian-violet:hsla(259,61%,14%, 1);
--bg-vivid-violet:hsla(273,100%,14%, 1);
--bg-sunglow:rgb(70, 52, 7);
--bg-blue-jeans:rgba(0, 162, 255, 0.197);
--bg-white-alpha-10:hsla(0, 0%, 0%, 0.1);

/*
text color
*/
--text-white:rgba(255, 255, 255, 0.605);
--text-black:hsla(0, 0%, 0%, 1);
--text-sunglow:rgb(124, 98, 33);
--text-white-alpha-10:hsla(0, 18%, 30%, 0.6);

/*
border color
*/
--border-blue-jeans:rgb(114, 139, 154);
--border-white-alpha-20:hsla(0, 0%, 100%, 0.1);

/*
typography
*/
--fontFamily-open-sans:'Open Sans', sans-serif;


/*font size*/

--fontSize-1:4rem;
--fontSize-2:3.2rem;
--fontSize-3:2.4rem;
--fontSize-4:2rem;
--fontSize-5:1.8rem;
--fontSize-6:1.6rem;
--fontSize-7:1.4rem;

/*font weight*/
--weight-regular:400;
--weight-medium:500;
--weight-semi-bold:600;
--weight-bold:700;

/*
spacing
*/

--section-spacing:100px;

/*
 box shadow
*/
--shadow-1: drop-shadow(0 20px 30px hsla(0, 0%, 0%, 0.1));
--shadow-2: drop-shadow(0 20px 30px hsla(0, 0%, 0%, 0.2));

/*
border radius
*/

--radius-24: 24px;
--radius-40: 40px;
--radius-pill: 50px;

/*transition*/

--transition-1: 250ms ease;
--transition-2: 500ms ease;
--cubic-out:cubic-bezier(0, 1, 0.5, 1);
}


/*
reset
*/

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

li{list-style:none;}


a,
img,
span,
button,
ion-icon{
    display:block;
}




a{
    
    color:inherit;
    text-decoration: none;
}



img {height: auto;}

input,
button{
    background: none;
    border: none;
    font: inherit;
}

input{
    width: 100%;
    outline: none;
}

button{cursor: pointer;}

ion-icon{pointer-events: none;}

address{
    font-style: normal;
}

html{
font-family: var(--fontFamily-open-sans);
font-size: 10px;
    scroll-behavior: smooth;
}


body{
    background-color: var(--bg-dark-purple);
    color: var( --text-white-alpha-60);
    font-size: var(--fontSize-6);
    line-height: 1.8;
}

body.nav.active{overflow: hidden;}





/*reused style*/
.container{ padding-inline: 16px;}

.section{padding-block-end: var(--section-spacing);}

.title{
    color: var(--text-white);
    line-height: 1.1;
}

.h1{font-size: var(--fontSize-1);}

.h2{font-size: var(--fontSize-2);
font-weight: var(--weight-semi-bold);
}

.h3{
    font-size: var(--fontSize-3);
    font-weight: var(--weight-regular);
}

.btn{
    height: 62px;
    padding-inline: 50px;
    font-weight: var(--weight-semi-bold);
    border-radius: var(--radius-pill);
    color: var(--text-black);
    display: grid;
    place-content: center;
    max-width: max-content;
    transition: var(--transition-1);
}

.btn-primary{background-color: var(--bg-sunglow);}

.btn-primary:İs(:hover, :focus-visible) {
    background-color: var(--bg-vivid-violet);
    color: var(--text-white);
}

.w-100{width: 100%;}

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

.section-text{margin-block: 15px 50px;}

.grid-list{
    display: grid;
    gap: 50px;
}

.img-holder {
    aspect-ratio: var(--width) / var(--height);
    background-color: var(--bg-white-alpha-10);
    overflow: hidden;
}

.img-cover{
    width: 100%;
    height: 1000%;
    object-fit: cover;
    transition: var(--transition-2);
}

/*header*/


.header .btn {display: none;}

.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:4;

}
.header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
}


.header .logo img{width: 160px;}
   
.nav-open-btn{
    color: var(--text-white);
    font-size: 3rem;
   
}

.nav-open-btn.active .menu-icon,
.nav-open-btn .close-icon{display: none;}

   
.nav-open-btn .menu-icon,
.nav-open-btn.active .close-icon{display: block;}


.nav-open-btn.active .menu-icon{display: none;}

   


.nav-open-btn.active .close-icon{
    display: block;
}

.navbar{
    position: absolute;
    top: 100%;
    right: 16px;
    background-color: var(--bg-vivid-violet);
    color: var(--text-white);
   padding: 16px 30px;
    border-radius: var(--radius-24);
   opacity: 0;
    visibility: hidden;
    transition: 500ms var(cubic-out);
    z-index: 1;

}

.navbar.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(-15px);
}

.navbar-list > li:not(:last-child ){margin-block-end: 5px;}

.navbar-link{font-weight: var(--weight-medium);}

.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
pointer-events: none;
}
    
.overlay.active{
    pointer-events: all;
}


/*
hero 
*/

.hero{
    padding-block-start: 130px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hero .container{
    display: grid;
    gap: 30px;
}

.hero-text{margin-block: 25px;}

.input-field{
    height: 62px;
    padding-inline: 30px;
    background-color: var(--bg-white-alpha-10);
    border-radius: var(--radius-pill);
    color: var(--text-white);

}

.input-field::placeholder{color: var(--text-white-alpha-60);}

.input-field:focus {box-shadow: inset 0 0 0 1px var
    (--border-white-alpha-20);

}

.hero .btn{margin-block-start: 15px;}

.hero-banner .w-100 {max-width: max-content;}

.hero .shape{display: none;}

/*
process
*/
.process-banner {display: none;}

.process{
    position: relative;
    z-index: 1;
}

.process::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images222/deating.jpg" );
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
}

.process-item .item-icon {
margin-inline: auto;
filter: var(--shadow-1);
}

.process-item .item-title {
    margin-block: 20px 10px;
}

/*
work
*/
.work-card .card-banner{
    border-radius: var(--radius-40);
    margin-block-end: 20px;
}

.work-card:is(:hover, :focus-within) .img-cover {transform: scale(1.1);}

.work-card .card-title {
margin-block-end: 12px;
transition: var(--transition-1);
}

.work-card .card-title:is(:hover, :focus-visible) {color: var(--text-sunglow);}

.work .btn {
    margin-block-start: 60px;
    margin-inline: auto;
}


/*
footer
*/
.footer{
    background-color: var(--bg-russian-violet);
    color: gray;
}

.footer-top{padding-block-start: var(--section-spacing);}

.footer-top .container{
 display: grid;
gap: 50px;
}

.footer-text{margin-block: 15px;}

.social-list{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-block-end: 30px;
}

.social-link{
    color: var(--text-sunglow);
    font-size: 2.2rem;
}

.footer .btn{
    font-size: var(--fontSize-5);
    padding-inline: 60px;
}

.footer-list{
    display: grid;
    gap: 15px;
}

.footer-bottom{
padding-block: 40px;
border-block-start: 1px solid var(--border-white-alpha-10);
}

.footer-bottom .link{
    display: inline-block;
    color: var(--text-sunglow);
}

.footer-bottom-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-block-start: 20px;
}


/*
media queries
*/

/*
responsive for large than 575px screen
*/

@media (min-width:575px){

    /*
 REUSED STYLE   
   */

 .container{
    max-width: 500px;
    width: 100%;
    margin-inline: auto;
 }

 /*
 HEADER
 */

.header .container {max-width: unset;}

}


/*
responsive for large than 768px screen
*/

@media (min-width:768px){

    /*
 custom property
   */

 :root{
    /* TYPOGRAPHY */

    /* font-size */

    --font-size-1: 5.5rem;
    --font-size-2: 4rem;

 /*  
 SPACİNG
 */

 --section-spacing: 150px;

 }

/*  
REUSED STYLE
*/

.container {max-width: 620px;}

.section-text {
max-width: 400px;
margin-inline: auto;
}

.grid-list {grid-template-columns: 1fr 1fr;}

.btn-secondary{
    color: var(--text-white);
    height: 52px;
border: 2px solid var(--border-blue-jeans);
padding-inline: 40px;
}

.btn-secondary:is(:hover, :focus-visible) {background-color: var(--bg-blue-jeans);}

/*
HEADER
*/

.header .btn{
    display: grid;
    margin-inline: auto 30px;
}

/*
HERO
*/
.hero {padding-block: 180px;}

.hero-content {max-width: 560px;}

.hero .input-wrapper{
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero .btn{
    margin-block-start: 0;
    min-width: max-content;
}

.hero-banner{
  position: relative;
    max-width: 540px;
    margin-inline: auto;
}
.hero .shape {
display: block;
position: absolute;
filter: var(--shadow-2);
}

.hero .shape-1{
    width: 13%;
    top: 350px;
    left: 80px;
}
.hero .shape-2{
    width: 16px;
    top: 440px;
    left: -20px;
}
.hero .shape-3{
    width: 20%;
    bottom: -20px;
    right: 80px;
}

/*
FOOTER
*/


.footer{grid-template-columns: repeat(3, 1fr);}

}


/*
responsive for large than 992px screen
*/

@media (min-width:992px){

/*
REUSED STYLE
*/

.container {
    max-width: 960px;
    padding-inline: 40px;
}

body.nav-active {overflow: auto;}
/*

header

*/

.nav-open-btn,
.overlay {display: none;}





.navbar,
.navbar.active {
    all: unset;
    margin-inline-start: 80px;

}

.navbar-list{
    display: flex;
    align-items: center;
    gap: 40px;
}

.navbar-list > li:not(:last-child){margin-block-end: 0;}


.navbar-link{
    color: var(--text-white);
    transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus-visible){color: rgba(137, 7, 7, 0.55);}

.header .btn {margin-inline-end: 0;}


/*
HERO
*/

.hero .container {
grid-template-columns: 1fr 1fr;
align-items: center;

}

/*
PROCESS
*/

.process-banner {
    display: block;
    max-width: 440px;
   
    margin-inline: auto;
   
}


.process .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: center;
  
    gap: 50px;
}

.process-item {text-align: left;}


.process-item .item-icon {margin-inline: 0;}


.process .grid-list {gap: 30px 40px;}

/*

WORK

*/

.works .grid-list {grid-template-columns: repeat(3, 1fr);}


/* 
FOOTER
*/

.footer-top .container {grid-template-columns:0.5fr 1fr ;}


.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;

}

.footer-bottom-list{
    margin-block-start: 0;
    gap: 50px;
}


}

/*
responsive for large than 1200px screen
*/

@media (min-width:1200px){

    /*
    custom property
    */
    
:root{

    /*
    TYPOGRAPHY
    */

    --font-Size-1: 7rem;
    --font-Size-3: 2.8rem;
}
   
/*
REUSED STYLE

*/

.container{max-width: 1140px;}


.section-text{max-width: 750px;}


    }
    





/*
responsive for large than 1400px screen
*/

@media (min-width:1400px){
 
    /*
    CUSTOM PROPERTY
    */
    
:root{

/*
typography
*/

/*fontSize*/

--font-Siz-1: 8rem; 


}

/*
REUSED STYLE
*/
.container{max-width: 1050px;}

.section-text {margin-block-end: 60px;}


/*
hero
*/
.hero-text{
font-size: 1.8rem;
margin-block: 40px;

}
/*
process
*/

.process .wrapper{
grid-template-columns: 0.7fr 1fr;
gap: 130px;

}


.process-item .item-icon{width: 80px;}

.process-item .item-title{margin-block: 25px 15px;}


.process .grid-list{row-gap: 50px;}


    }