*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: 'Quicksand', sans-serif;

    list-style: none;

    text-decoration: none;

    scroll-behavior: smooth;
}
 
:root{

    --bg-color: #020312;

    --text-color: #fff;

    --main-color: #eb4a4a;

    --second-color: gray;

    --other-color: #12141c;

    --h1-font: 5.2rem;

    --h2-font: 3.5rem;

    --p-font: 1.1rem;
}
body{

    background: var(--bg-color);

    color: var(--text-color);
}
header{

    position: fixed;

    right: 0;

    top: 0;

    width: 100%;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: transparent;

    padding: 22px 16%;

    border-bottom: 1px solid transparent;

    transition: all .40s ease;
}
.navbar{

    display: flex;
}
.navbar a{

    color: var(--text-color);

    font-size: var(--p-font);

    font-weight: bold;

    padding: 10px 25px;

    margin: 0 2px;

    border-radius: 0.5rem;

    transition: all .40s ease;
}
.navbar a:hover{

    background: var(--main-color);

    color: var(--text-color);
}

#menu-icon{

    font-size: 36px;

    color: var(--text-color);

    z-index: 10001;

    cursor: pointer;

    display: none;
}
 
section{

    padding: 160px 16% 90px;
}
.home{

    height: 100vh;

    width: 100%;

    position: relative;

    /* background: url(../img/bg1.jpg); */

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}
/* .home-text{

    margin-left: 60%;
} */

.home-text h1{

    margin: 15px 0;

    font-size: var(--h1-font);

    font-weight: bold;

    line-height: 1.1;

    letter-spacing: 2px;
}
span{

    color: var(--main-color);
}

.home-text h4{

    color: var(--main-color);

    font-size: 24px;

    font-weight: 600;
}

.home-text h3{

    font-size: 24px;

    font-weight: 600;

    margin-bottom: 3rem;
}
.btn{

    display: inline-block;

    padding: 14px 40px;

    border-radius: 0.5rem;

    font-size: 17px;

    font-weight: 500;

    background: var(--main-color);

    color: var(--text-color);

    border: 1px solid var(--main-color);

    transition: all .40s ease;
}
.btn:hover{

    transform: scale(1.01) translateY(-5px);

    background: transparent;

    border: 1px solid var(--main-color);
}
 
header.sticky{

    padding: 10px 16%;

    background: var(--bg-color);

    border-bottom: 1px solid #0e1630;
}
.about{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    align-items: center;

    gap: 2rem;
}

.about-text h4{

    margin: 10px 0;

    color: var(--main-color);

    font-size: 20px;

    font-weight: 600;
}

.about-text h2{

    font-size: var(--h2-font);
}
.about-text p{

    color: var(--second-color);

    font-size: var(--p-font);

    line-height: 30px;

    margin-bottom: 2rem;
}
 
.about-gri{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, auto));

    align-items: center;

    gap: 1rem;

    margin-bottom: 3rem;
}

.about-in h5{

    font-size: 22px;

    font-weight: 600;
}
.about-img img{

    height: auto;

    width: 100%;

    max-width: 460px;
}
 
.main-text{

    text-align: center;
}

.main-text h2{

    font-size: var(--h2-font);

    margin-bottom: 10px;
}

.main-text h4{

    color: var(--main-color);

    font-size: 24px;

    font-weight: 600;
}
.services-content{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, auto));

    align-items: center;

    text-align: center;

    gap: 2rem;

    margin-top: 5rem;
}
.box{

    padding: 45px;

    background: #12141c;

    border-top: 5px solid transparent;

    border-radius: 0.5rem;

    transition: all .40s ease;

    cursor: pointer;
}

.box h3{

    font-size: 24px;

    font-weight: 600;

    margin: 15px 0;

    transition: all .40s ease;
}
.box p{

    color: var(--second-color);

    font-size: var(--p-font);

    line-height: 30px;
}
.box:hover{

    transform: scale(1.01) translateY(-5px);

    border-top: 5px solid var(--main-color);
}

.box:hover h3{

    color: var(--main-color);
}
 
.portfolio-content{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, auto));

    align-items: center;

    gap: 2rem;

    margin-top: 5rem;
}
.row img{

    height: auto;

    width: 100%;

    border-radius: 0.5rem;

    margin-bottom: 1.5rem;
}
.row{

    padding: 25px;

    background: #12141c;

    border-radius: 0.5rem;

    transition: all .40s ease;
}
.main-row{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 1rem;
}

.row h3{

    font-size: 25px;

    font-weight: 700;
}

.row h6{

    color: var(--main-color);

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 1px;
}

.row-icon i{

    font-size: 21px;
}
.row:hover{

    transform: scale(1.01) translateY(-5px);

    cursor: pointer;
}
 
.contact{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    align-items: center;

    gap: 3rem;
}

.contact-text h4{

    margin: 15px 0;

    color: var(--main-color);

    font-size: 20px;

    font-weight: 600;
}

.contact-text h2{

    font-size: var(--h2-font);
}
.contact-text p{

    color: var(--second-color);

    font-size: var(--p-font);

    line-height: 30px;

    margin-bottom: 2rem;
}
.contact-list{

    margin-bottom: 3rem;
}
.contact-list li{

    margin-bottom: 10px;

    display: block;
}
.contact-list li a{

    display: block;

    color: var(--second-color);

    font-size: var(--p-font);

    font-weight: 600;

    transition: all .40s ease;
}
.contact-list li a:hover{

    transform: scale(1.01) translateY(-5px);

    color: var(--main-color);
}
.contact-icons i{

    height: 40px;

    width: 40px;

    background: #12141c;

    border-radius: 0.5rem;

    color: var(--main-color);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    margin-right: 10px;

    transition: all .40s ease;
}
.contact-icons i:hover{

    transform: scale(1.01) translateY(-5px);

    color: var(--text-color);

    background: var(--main-color);
}
 
/* .contact-form form{

    position: relative;
}
.contact-form form input,
form textarea{

    border: none;

    outline: none;

    width: 100%;

    padding: 18px;

    background: #12141c;

    color: var(--text-color);

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 0.5rem;

    border-radius: 0.5rem;
}
.contact-form textarea{

    resize: none;

    height: 220px;
}
.contact-form form .send{

    display: inline-block;

    font-size: 17px;

    font-weight: 500;

    background: var(--main-color);

    color: var(--text-color);

    width: 190px;

    transition: all .40s ease;

    cursor: pointer;
} */
 
.last-text p{

    text-align: center;

    padding: 15px;

    color: var(--second-color);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 1px;
}

.top{

    position: fixed;

    bottom: 2.1rem;

    right: 2.1rem;
}

.top i{

    color: var(--text-color);

    background: var(--main-color);

    font-size: 20px;

    padding: 10px;

    border-radius: 0.5rem;
}
 

@media (max-width: 1325px){

    header{

        padding: 16px 3%;

    }

    header.sticky{

        padding: 8px 3%;

    }

    section{

        padding: 130px 3% 60px;

    }
}
 

@media (max-width: 970px){

    :root{

        --h1-font: 4.2rem;

      --h2-font: 2.9rem;

      --p-font: 1rem;

    }

    section{

        padding: 70px 3% 60px;

    }

    .home{

        height: 85vh;

    }

    .about{

        grid-template-columns: 1fr;

    }

    .about-img{

        text-align: center;

    }

    .contact{

        grid-template-columns: 1fr;

    }
}
 

@media (max-width: 830px){

    #menu-icon{

        display: block;

    }

    .navbar{

        position: absolute;

        top: -600px;

        right: 0;

        left: 0;

        display: flex;

        flex-direction: column;

        background: #12141c;

        text-align: left;

        transition: all .40s ease;

    }

    .navbar a{

        display: block;

        padding: 1rem;

        margin: 1rem;

    }

    .navbar.active{

        top: 100%;

    }

    :root{

        --h1-font: 3.7rem;

      --h2-font: 2.7rem;

    }
}
 
.back-video{

    position: absolute;

    right: 0;

    bottom: 0;

    z-index: -1;
}
 

@media (min-aspect-ratio: 16/10){

    .back-video{

        width: 110%;

        height: auto;

    }
}

@media (max-aspect-ratio: 16/10){

    .back-video{

        width: auto;

        height: 100%;

    }
}
 
img{

    height:150px;

    width: 150px;
}
 

.tech-skills h2{

    font-size: var(--h2-font);

    text-align: center;
}
 
.skills{

    box-sizing: border-box;
}
 
.diff-skills::after {

    content: "";

    display: table;

    clear: both;
}
 
.skill-item{

    float: left;

    width: 14.28%;

    height: 90%;

    padding: 8px;
} 
 

 @media (max-width:660px){

    .skill-item img{

        height:90%;

        width:90%;

    }

    .tech-skills h2{

        font-size: var(--h2-font);

    }
}
 
/* Technical Skills CSS */
*{

    padding: 0;

    margin: 0;

   box-sizing: border-box; 

   font-family: 'Roboto', sans-serif;
}
 
.inner{

    padding-top: 20px;
}
 
.Tech_header{

    text-align: center;

    color: #fff;

    padding: 1rem;

    position: relative;
}
 
.Tech_header::after{

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    height: 4px;

    width: 100px;

    background-color: #eb4a4a;

    border-radius: 2px;
}
 
.Tcontainer{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    justify-content: center;

    align-items: center;

    text-align: center;

    grid-gap: 1rem;

    padding: 1rem 80px;

    font-size: 1.2rem;
}
 
.skill-box{

    padding: 1rem;

    color: #ddd;

    cursor: pointer;
}
 
.skill-box:hover > .skill-title:after, .skill-box:hover > .skill-title:before{

    width: 35px;
}
 
.skill-box:hover .tech_img{

    transform: translateY(-10px);
}
 
.skill-title{

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0.5rem;

    margin-bottom: 0.5rem;

    position: relative;
}
 
.skill-title:after{

    content: '';

    position: absolute;

    bottom: 0;

    right: 50%;

    width: 0;

    height: 4px;

    border-radius: 2px 0 0 2px;

    background-color: #eb4a4a;

    transition: .5s;
}
 
.skill-title:before{

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 4px;

    border-radius: 0 2px 2px 0;

    background-color: #eb4a4a;

    transition: .5s;
}
 
.tech_img{

    width: 90px;

    height: 90px;

    position: relative;

    border-radius: 45px;

    background-color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .5s;
}
 
.tech_img:after{

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 90px;

    background: rgba(100, 100, 100, 0.5);

    border-radius: 45px 0 0 45px;
}
 

.skill-title h3{

    color: #fff;

    margin-top: 0.5rem;
}
 

.skill-icon{

    width: 50px;

    height: 50px;

    z-index: 2;
}
 

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

    .Tcontainer{

        grid-template-columns: repeat(2, 1fr);

        padding: 2rem 50px;

    }
}

     

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

    .Tcontainer{

        grid-template-columns: 1fr;

    }
}