/*----------*\
 #VARIABLE
\*----------*/

/**
*import variable css file 
*/

@import url(./variable.css);

/*----------*\
 #REST
\*----------*/

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

li{
    list-style:none;
}

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

button{
    font:inherit;
    border:none;
    background:none;
    cursor:pointer;
}

input, textarea { font: inherit;}

img; ion-icon{display:block;}

a, span {display : inline-block;}

html{
    font-family:'Jost', sans-serif;
    scroll-behavior:smooth;
}

/*----------*\
 #MAIN STYLE
\*----------*/

/**
*main container
*/


.container{
   max-width:5000px;
   margin: auto;
   background: var(--eerie-black-dark);
   overflow: hidden;

}

header{
width: 100%;
height: 100vh;
position:relative;
overflow:hidden;

}

/**
*navbar style
*/

.menu-open-btn{
    position: absolute;
    top: 20px;
    right:20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-5);
    color: var(--gainsboro);
    z-index: 5;
}
.menu-open-btn ion-icon{
    color:var(--white);
    font-size:28px;
}

.nav{
    background:var(--eerie-black);
    position: absolute;
    top: 0;
    right: -100%;
    height: 100vh;
    width:  100%;
    padding:100px 20px;
    display:  flex;
    flex-direction: column;
    justify-content:center;
    align-items: start;
    overflow: hidden;
    transition:0.75s ease;
    z-index: 10;
}
.nav.active{right:0;}

.menu-close-btn{
    position:absolute;
    top: 20px;
    right: 20px;
    border: 1px solid transparent;
    color: var(--battleship-gray);
    transition: var(--default-transition);
}
.menu-close-btn:hover{
    color: var(--liver-chestnust);
    border-color:var(--liver-chestnust);
}

.menu-close-btn ion-icon{
    font-size: 32px;
    --ionicon-stroke-width:20px;
    transform: scale(1.5);
    transition: var(--default-transition);
}

.menu-close-btn:hover ion-icon{transform: scale(1);}

.nav-heading{
    font-size: var(--fs-5);
    color: var(--battleship-gray);
    font-weight:800;
    text-transform: uppercase;
    margin-bottom:25px;
}

.nav ul { margin-bottom : 40px;}

.nav-item{
    transform: translateY(50px);
    transition: 1s ease;
    opacity: 0; 
}

.nav.active .nav-item {  /* FIXED: removed space between .nav and .active */
    transform: translateY(0);
    opacity:1;
    transition-delay: 0.5s;
}

.nav-item:not(:last-child) { margin-bottom: 5px;}

.nav-link{
    color: var(--gainsboro);
    font-size:var(--fs-4);
    transition:var(--default-transition);
}

.nav-link:hover{color: var(--liver-chestnust)}

.nav-footer{
    transform:translateY(50px);
    transition: 1s ease;
    opacity: 0;  /* FIXED: was opacity:1 */
}

.nav.active .nav-footer{  /* FIXED: added space between .nav and .nav-footer */
    transform: translateY(0);
    opacity:1;
    transition-delay:1s;
}

.social-link{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap: 10px;
}
.social-link a {
    padding: 10px;
    background: hsla(0,0%,100%,0.05);
    transition:var(--default-transition);
}
.social-link a:hover{background: hsla(0,0%,100%,0.1);}

.social-link ion-icon{
    color: var(--battleship-gray);
    font-size:20px;
}
.nav-footer p {
    font-size:var(--fs-5);
    color: var(--battleship-gray);
}
.nav-footer p a{ color: var(--gainsboro);}

.link-underline{
    border-bottom: 1px solid  hsla(100,100%,100%,0.2);
    transition: var(--default-transition);
}

.link-underline:hover{ border-bottom: 1px solid hsla(100,100%,100%,0.4);
}
/*-----------------------------------------*\
 #HEADER INTRO
\*-----------------------------------------*/
 .section-padding {padding: 80px 10px;}

.intro {text-align:center;}

.intro-profile{
    position: relative;
    padding:40px;
    margin-bottom: 30px;
}
.intro-border{
    position:absolute;
    border:1px solid hsla(100,100%,100%,0.2);
    transition: var(--default-transition);
    pointer-events:none;
}

.intro-border.one{inset: 0   20px;}
.intro-border.two{inset: 20px  0;}

.intro:hover.intro-border{   border:1px solid hsla(100 ,100%,100%,0.3); }

.intro-profile .img-box{ margin-bottom: 30px;}

.intro-profile p{
    font-size: var(--fs-5);
    text-transform:;
    font-weight:500;
    color:var(--battleship-gray);
    margin-bottom:10px;
}

.intro-profile .profile-name{
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    color: var(--gainsboro);
    margin-bottom:20px;
}
.profile-name span{ color: var(--may-green);}

.intro-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color:var(--battleship-gray);
    font-size:var(--fa-5);
}

.intro-link:hover{color : var(--gainsboro);}

.intro-link .circle{
    padding:5px;
    border-radius:50%;
    background: var(--may-green);

}

.intro-link span{
    display:block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;

}



/*-----------------------------------------*\
 #REPEATED ELEMENT STYLE
\*-----------------------------------------*/


.section-padding {padding: 80px 10px;}

.section-subtitle{
    color:var(--liver-chestnust);
    font-size:var(--fs-5);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:50px;
}
.section-title{
    position:relative;
    color:var(--gainsboro);
    font-size:var(--fs-1);
    font-weight:400;
    padding-bottom:15px;
    margin-bottom:35px;

}
.section-title::after{
    content:'';
    position: absolute;
    background:hsla(100,100%,100%,0.2);
    height:2px;
    width:150px;
    bottom:0;
    left:0;

}
.section-desc{
    color: var(--battleship-gray);
    font-size:var(--fs-4);
    margin-bottom:60px;
}



/*-----------------------------------------*\
 #ABOUT
\*-----------------------------------------*/

.about-table{
    width:100%;
    border-collapse: collapse;
    text-align:left;
    font-size:var(--fs-5s);
    margin-bottom:48px;
    margin-top: 80px;

}
.about-table tr{
    display:flex;
    flex-direction:column;
    gap: 10px;

}
.about-table tr:not(:last-child) {margin-bottom:20px;}

.about-table th{
    color:var(--battleship-gray);
    font-weight:500;
    text-transform:uppercase;
}
.about-table td{color:var(--gainsboro);}

.download-cv{
    border:2px solid hsla(100,100%,100%,0.2);
    width:100%;
    padding:60px 0;
    color: var(--battleship-gray);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    gap:10px;
    transition:var(--default-transition);

}
.download-cv:hover{border-color:var(--liver-chestnust);}

.download-cv ion-icon{
    font-size:60px;
    --ionicon-stroke-width:25px;
    color:var(--gainsboro);

}
.download-cv span{
    font-size:var(--fs-5);
    font-weight:500;
    text-transform: uppercase;

}

/**
*tab navigation
*/
.about-tab{ margin-top: 80px;}

.tab-nav{
    display: flex;
    justify-content:start;
    align-items:center;
    flex-wrap:wrap;
    gap: 20px 0;
    margin-bottom:40px;

}

.tab-nav li{ position: relative;}

.tab-nav li:not(:last-child) {padding-right: 80px;}

.tab-nav li:not(:last-child)::after{

    content:'';
    position:absolute;
    background:hsla(100,100%,100%,0.2);
    width:40px;
    height:2px;
    top: 55%;
    right:20px;
    
}

.tab-nav li .tab-button{
    color:var(--battleship-gray);
    font-size:var(--fs-2);
    border-bottom:1px solid transparent;
}

.tab-nav li .tab-button.active{
    color:var(--liver-chestnust);
    border-color: var(--liver-chestnust);

}
/**
*tab content
*/
.tab-content{display: none;}

.tab-content.active{
    display:block;
    animation: fade 0.75s ease forwards;
    opacity:0;
}

@keyframes fade{
    0%     { opacity: 0; }
    100%   { opacity: 1; }
}

.content-card{
    position:relative;
    background:var(--smoky-black);
    border: 1px solid var(--eerie-black);
    padding:40px;
    margin-bottom:20px;
}

.content-card::before{
    content:'';
    position:absolute;
    background:hsla(100,100%,100%,0.2);
    width:  3px;
    height:  50px;
    top:     50%;
    left:    -1px;
    transform:translateY(-50%)
}

.content-card .card-head{
    display:        flex;
    align-items:     start;
    flex-direction: column;
    gap: 5px;
    margin-bottom:15px;
}

.content-card .card-head h4{
    color:var(--gainsboro);
    font-size:var(--fs-5);
    font-weight:400;
    text-transform:uppercase;
}

.content-card .card-head p{color:var(--battleship-gray);}

.content-card .card-body h3{
    color:var(--gainsboro);
    font-size:var(--fs-3);
    font-weight:400;
    margin-bottom:18px;
}

.content-card .card-body p{
    color:var(--battleship-gray);
    font-size:var(--fs-5);

}


/**
*skill tab
*/
.skill-box {margin-bottom : 30px;}

.skill-name{
    color: var(--battleship-gray);
    font-size:var(--fs-5);
    font-weight:400;
    margin-bottom:10px;

}

.progress-bar{
    position:relative;
    width:100%;
    height:1px;
    background:var(--jet);
    
}
.progress{
    height:1px;
    background:var(--liver-chestnust);
    transform:scale(0);
    transform-origin: left;
    animation:scaleUp 3s cubic-bezier(.165, .84 , .44 , 1)forwards;
}

@keyframes scaleUp{
    
   0%{transform: scale(0);}
   100%{transform: scale(1);}
}

.progress-rate{
    position:absolute;
    background:hsla(0,0%,100%,0.05);
    color:var(--liver-chestnust);
    font-size:var(--fs-6);
    bottom: calc(100% + 10px);
    transform: translatex(-50%);
    padding: 2px 8px;

}

.progress-rate::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform: translate(-50% , -50%) rotate(45deg);
    border:3px solid transparent;
    border-color: transparent
                  hsla(0,0%,100%,0.05)
                  hsla(0,0%,100%,0.05)
                  transparent;
}

.skill-text{
    max-width: 500px;
    color: var(--battleship-gray);
    font-size:var(--fs-5);
    margin-top:40px;
}

/*-----------------------------------------*\
 #PORTFOLIO
\*-----------------------------------------*/

 #portfolio .wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-right: 15px;

 }

 #portfolio .wrapper .section-title{ margin-bottom: 0;}

 .btn-group{

    display: flex;
    align-items: center;
    gap:25px;

 }

 .btn-group button { position: relative;}

 .btn-group .arrow{
    position: relative;
    width:25px;
    height:1px;
    background: var(--battleship-gray);
    border-color: var(--battleship-gray);
    transition: var(--default-transition);

 }

.btn-group .arrow .arrow-head-left,
.btn-group .arrow .arrow-head-right{
    position: absolute;
    top: -7px;
    left: 1px;
    width: 15px;
    height: 15px;
    border-width: 0 0  1px 1px ;
    border-style: solid;
    border-color: inherit;
    transform: rotate(45deg);
}

.btn-group .arrow .arrow-head-right{
    left: 8px;
    border-width: 1px 1px 0 0;

}

.btn-group button:hover .arrow {
    background : var(--liver-chestnust);
    border-color: var(--liver-chestnust);
}
.btn-group button::after{
    content: '';
    position: absolute;
    inset: -15px -5px;
    border: 1px solid transparent;
    transition: var(--default-transition);

}

.btn-group button:hover::after{
    inset: -25px -15px;
    border-color: var(--liver-chestnust);

}
.portfolio-carousel{
    position: relative;
    margin-top: 80px;
    overflow: hidden;
}
.portfolio-carousel-inner{
    width: 500%;
    display:    flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    transition: 0.75s ease;
}

.portfolio-carousel-card {width: 100%;}

.portfolio-carousel-card .card-head{
    width: 100%;
    aspect-ratio: 4/3;
    height: auto;
    overflow: hidden;
    margin-bottom: 30px;

}

.portfolio-carousel-card .card-head img{
    width: 100%;
    height:100%;
    object-fit: cover;

}
.portfolio-carousel-card .card-body p{
    color: var(--battleship-gray);
    font-size: var(--fs-5);
    margin-bottom: 5px;
}

.portfolio-carousel-card .card-body a{
    color: var(--gainsboro);
    font-size: var(--fs-3);
    font-weight:400;
    display: inline-block;
    transition:var(--default-transition);

}

.portfolio-carousel-card .card-body a:hover {
    color: var(--liver-chestnust);}


/*-----------------------------------------*\
 #SERVICES
\*-----------------------------------------*/
.service-card{
    background: var(--smoky-black);
    border: 1px solid var(--eerie-black);
    margin-bottom: 20px;
}

.service-card .card-body{
    position: relative;
    padding: 40px;
}

.service-card .card-body::after{
    content:'';
    position:absolute;
    background:hsla(100 ,100%,100%,0.2);
    width: 3px;
    height: 50px;
    top: 50px;
    left:-1px;
    transform: translateY(-50%);
}

.service-card .card-body h3{
    color:var(--gainsboro);
    font-size:var(--fs-3);
    font-weight: 400;
    margin-bottom:18px;

}

.service-card .card-body p{
    color:var(--battleship-gray);
    font-size:var(--fs-5);
}

.service-card .card-footer{
    border-top:1px solid hsla(100,100% ,100% ,0.05);
    padding:20px 40px;
}

.service-card .card-footer span {color:var(--battleship-gray);}

.service-card .card-footer div{
    color: var(--liver-chestnust);
    font-size:var(--fs-3);
    font-weight:500;
}



/*-----------------------------------------*\
 #CUSTOMERS
\*-----------------------------------------*/

#customers .wrapper{
    display: grid;
    grid-template-columns:1fr;
    gap: 10px;
    margin-bottom: 100px;
    padding-top:30px;

}

#customers .wrapper .img-box{
    background: var(--smoky-black);
    height: 200px;
    display:        flex;
    justify-content:center;
    align-items:    center;
    transition: var(--default-transition);
}

#customers .wrapper .img-box:hover {background: var(--eerie-black);}

/**
*testimonials
*/

.testimonials-content {width: 100%;}

.testimonials-content p { 
    color: var(--battleship-gray);
    font-size: var(--fs-4);
    margin-bottom:50px;

}

.testimonials-content .title{
    color: var(--gainsboro);
    font-size: var(--fs-2);
    font-weight:400;
    margin-bottom:10px;

}

.testimonials-content .subtitle{
    color: var(--battleship-gray);
    font-size: var(--fs-5);
    font-weight:400;
    text-transform: uppercase;

}



/*-----------------------------------------*\
 #NEWS & TIPS 
\*-----------------------------------------*/

.article-grid{
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
.article-box { cursor:pointer;}

.article-box .img-box{
    width: 100%;
    aspect-ratio:4/3;
    height: auto;
    overflow:hidden;
    margin-bottom: 25px;
}

.article-box .img-box img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.article-box .publish-date{

    color: var(--battleship-gray);
    font-size:var(--fs-6);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.article-box .article-name{
    color: var(--gainsboro);
    font-size:var(--fs-5);
    font-weight:400;
    transition: var(--default-transition);

}

.article-box .article-name:hover{color: var(--liver-chestnust);}

.load-more{
    border:2px solid hsla(100 , 100% ,100% , 0.3);
    padding:20px;
    width:100%;
    text-align:center;
    color: var(--battleship-gray);
    font-size: var(--fs-5);
    font-weight:500;
    text-transform:uppercase;
    transition: var(--default-transition);
}

.load-more:hover {
       border-color: var(--liver-chestnust);
       color:var(--liver-chestnust);

}


/*-----------------------------------------*\
 #CONTACT
\*-----------------------------------------*/

.contact-form{
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-bottom:80px;

}

.contact-form .wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form label{
    display:inline-block;
    background:var(--eerie-black-dark);
    color: var(--liver-chestnust);
    transform:translate(10px, 10px);
    padding: 0 10px;
}

.contact-form :is(input , textarea){
    display:block;
    width:100%;
    padding: 20px;
    background: transparent;
    border: 1px solid hsla(100, 100% , 100%, 0.2);
    color:var(--light-gray);
    letter-spacing:0.05px;
    outline: none;
    transition: var(--default-transition);

}

.contact-form textarea{
    max-height: 400px;
    resize: vertical;
}

.contact-form :is(input, textarea):hover { border-color: var(--battleship-gray);}

.contact-form :is(input, textarea):focus { border-color: var(--liver-chestnust);}

.contact-form button{
    color:var(--gainsboro);
    font-size:var(--fs-5);
    font-weight:600;
    text-transform:uppercase;
    border: 2px solid hsla(100 ,100% ,100%,0.2);
    width:100%;
    text-align:center;
    padding:15px;
    margin-top:20px;
    transition: var(--default-transition);
}

.contact-form button:hover{
    color:var(--liver-chestnust);
    border-color: var(--liver-chestnust);

}
/**
*contact info
*/


.address, .phone, .email { margin-bottom: 50px;}


:is(.address, .phone) h4 {
color:var(--battleship-gray);
font-size: var(--fs-6);
font-weight:400;
text-transfrom: uppercase;
margin-bottom: 10px;
}

.address address,
.phone a{
    color: var(--gainsboro);
    font-size:var(--fs-3);
    font-style: normal;
    transition:var(--default-transition);

}

.phone a:hover{ color: var(--liver-chestnust);}

.email a {
    color: var(--gainsboro);
    font-size:var(--fs-5);
}

/*-----------------------------------------*\
 #FOOTER
\*-----------------------------------------*/

.footer{
    position: relative;
    padding: 50px 10px;
    border-top:1px solid hsla(100, 100%,100%,0.2);
}

.go-top{
    position: absolute;
    background: var(--eerie-black-dark);
    top: 0;
    right: 5%;
    width:100px;
    transform:translateY(-50%);
    display:   flex;
    justify-content: center;
    align-items: center;

}
.go-top .arrow {
    position:relative;
    width:1px;
    height: 25px;
    background: var(--battleship-gray);
    border-color: var(--battleship-gray);
    transition: var(--dafault-transition);
}
.go-top:hover .arrow {
    background: var(--liver-chestnust);
    border: var(--liver-chestnust);
}

.go-top .arrow-head{
    position: absolute;
    top:  1px;
    left: -7px;
    width: 15px;
    height: 15px;
    border-width:1px 0 0 1px;
    border-style: solid;
    border-color: inherit;
    transform: rotate(45deg);
}

.go-top::after{
    content:'';
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:20px;
    border:1px solid transparent;
    transition:var(--default-transition);

}
.go-top:hover::after{
    border-color:var(--liver-chestnust);
    padding:25px;
}

.footer .copyright{
    color:var(--battleship-gray);
    font-size:var(--fs-5);
}

.copyright a {color:(--gainsboro);}