:root{
    
    --black:#000;
    --white:#fff;
    --dark-navy: #10193a;
    --light-navy: #162d57;
    --header-bg:#ececec;
    --copyright-bg: #bbbbbb;

    --breakpoint-sm: 600px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1376px;

    
    --main-bg: #f5f5f5;
    --dark-bg:#0d1b35;
    --white: #ffffff;
    --btn-blue: #12377c;
    --btn-text: #e7e7e7;
    --btn-blue-light: #325096;
    --catalogue-bg:#D1D3D7;
    --input-fields:#e2e5e7;
    --tie-red:#c73140;


    --color-primary: #6f6af8;
    --color-primary-light:hsla(242, 91%, 69%, 0.18);
    --color-primary-variant: #5854c7;
    --color-red: #da0f3f;
    --color-red-light: hsl(346,87%,46%,15%);
    --color-white:#f2f2fe;

    --transition: all 300ms ease;

    --container-width-lg:74%;
    --container-width-md: 88%;
    --form-width:40%;

    --card-border-radius-1:0.3rem;
    --card-border-radius-2:0.5rem;
    --card-border-radius-3:0.8rem;
    --card-border-radius-4:2rem;
    --card-border-radius-5:5rem;
   
    --logo-font:"Italianno", cursive;   
    --main-font: "Inter Tight", sans-serif;
    --header-font: "Titillium Web", sans-serif;
}

/*==================================================================================================
                                                GENERAL CSS
====================================================================================================*/

*{
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    appearance: 0;
    list-style: none;
    text-decoration: none;
}
html {
    overflow-x: hidden;
}
body{
    font-family: var(--main-font);
    line-height: 1.6;
    color: var(--dark-navy);
    overflow-x: hidden;
    background: var(--main-bg);
    font-size: 1.2rem;
}
.container {
    width: var(--container-width-lg);
    max-width: 1800px;
    margin-inline: auto;
}
section{
    margin-top: 3rem;
    width: 100vw;
}

h1,h2,h3,h4,h5{
    
    line-height: 1.3;
}
h1{
    font-size: 3rem;
    margin: 1rem 0rem;
}
h2{
    font-size: 1.8rem;
    margin: 1rem 0rem;
}
h3{
    font-size: 1.6rem;
    margin: 0.8rem 0 0.5rem;
}
h4{
    font-size: 1rem;
}

a{
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

img{
    display: block;
    width: 100%;
    object-fit: cover;
}

.empty__section{
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 29vh;
    margin-top: 10rem;
    width: 100vw;
}

/* ------------------COMMON BUTTON------------------- */

.more__contents{
    text-align: center;
    justify-content: center;
}

.more__contents div{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: right;
    margin: .5rem;
}

.common__btn a{
    color: var(--btn-text);
    background: var(--btn-blue);
    padding: 1rem;
    border-radius: 1rem;
}
.common__btn a:hover{
    background: var(--btn-blue-light);
}


/*==================================================================================================
                                             NAVIGATION BAR
====================================================================================================*/
.open__nav-btn,
.close__nav-btn{
    display: none;
}


nav {
    color: var(--dark-bg);
    background: var(--main-bg);
    width: 100vw;
    height: 4.5rem;
    position: fixed;
    top: 0;
    z-index: 10;
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
}

nav button {
    display: none;
}

.nav__container {
    display: grid;
    height: 100%;
    align-items: center;
    grid-template-columns: repeat(2,auto);
}
.navigation__bar{
    text-align: end;
    display: inline;
}


.nav__logo {
    font-family: var(--logo-font);
    font-size: 2.7rem;
    font-weight: 600;
    margin: auto 0;
}

.nav__items{
    display: flex;
    align-items: center;
    gap: 4rem;
    margin: auto 0;
}


/*==================================================================================================
                                             PROFILE INTRO
====================================================================================================*/


.profile__container{
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    margin: 18vh auto 0;
    border-radius: 5rem 0.5rem;
    padding: 2rem 0;
    min-height: 70vh;
}

.profile__para{
    width: 30rem;
}

.profile__para h2{
    color: var(--btn-blue-light);
    font-size: 2.5rem;
}

.profile__para span{
    font-size: 6rem;
    line-height: 4.5rem;
}

.profile__para p{
    margin-top: 2rem;
}

.profile__img{
    max-width: 25rem;
}
#profile__para__sl{
    display: none;
}



/*==================================================================================================
                                             FOOTER
====================================================================================================*/
footer{
    margin-top: 5rem;
    background: var(--header-bg);
    width: 100vw;
}
.footer__container{
    padding: 3rem 0;
    display: grid;
}

.footer__sections{
    display: grid;
    grid-template-columns: 20rem auto auto auto;
    justify-content: space-between;
}

.footer__section div{
    margin-right: 4rem;
}

.footer__about h2{
    margin-bottom: 1rem;
}
.footer__about p{
    width: 20rem;
}

.footer__links{
    display: flex;
    flex-wrap: wrap;
}

footer .more__links{
    margin-right: 0;
}


.copyright__section{
    text-align: center;
    background: var(--copyright-bg);
    margin: auto 0;
    justify-content: center;
    align-content: center;
    height: 4rem;
}

/*==================================================================================================
                                             SOCIAL MEDIA LOGO
====================================================================================================*/


.social__container{
    margin: auto 1rem;
    font-size: 3rem;
}

.social__container a{
    margin-top: 1rem;
}

.social__image{
    color: var(--btn-blue);
    display: inline-flex;
}

.facebook__logo:hover{
    color: #1877F2;
}
.social__image a{
    display: flex;
    flex-direction: column;
}


.instagram__logo:hover{
    color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.linkedin__logo:hover{
    color: #0077B5;
}




/*==================================================================================================
                                             Animation On enter
====================================================================================================*/


@keyframes enter {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  [data-animate] {
    --stagger: 0;
    --delay: 120ms;
    --start: 0ms;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    [data-animate] {
      animation: enter 0.6s both;
      animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
    }
  }
  
  [data-animation-controller='false'] [data-animate] {
    animation: none;
  }
  .slide-enter-content {
    counter-reset: enter-count;
  }
  
  .slide-enter-content > p {
    --stagger: 0;
    --delay: 150ms;
    --start: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
  }
  
  .slide-enter-content > p {
    counter-increment: enter-count;
    --stagger: counter(enter-count);
  }

  .slide-enter-content > * {
    --stagger: 0;
    --delay: 150ms;
    --start: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
  }




/* =================================================================================================================
====================================================================================================================
                                    ABOUT PAGE                                                                      
==================================================================================================================== */

.about__section{
    margin-top: 5rem;
}

.about__section-one{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.about__section-one h1{
    width: 20rem;
}
.about__headline h3{
    color: var(--btn-blue);
}
.about__section-one img{
    width: 25rem;    
}
.about__section-one .social__container{
    text-align: center;
}
.about__section-one .social__container a{
    margin-left: 1rem;
}

.about__description{
    padding: 1rem 3rem;
    border-left: 4px solid var(--btn-blue);
}
.about__description button{
    margin-top: 1rem;
}

.my__achievements ul{
    margin-top: 1rem;
    padding: 1rem 3rem;
}
.my__achievements ul li {
    list-style: disc;
}
.my__achievements>h1{
    border-left: 4px solid var(--btn-blue);
    padding: 1rem 3rem;
}

.about__expertise h1{
    padding: 1rem 3rem;
    border-left: 4px solid var(--btn-blue);
}
.about__expertise .skills__{
    padding: 0.4rem 3rem;
}
.about__expertise .skills__ ul li{
    list-style: disc;
}



/* ================================ SKILL PROGRESS BAR=========================== */








/* =======================================MEDIA QUARRY=============================================*/


/*==================================================================================================
                                             BIG TAB DEVICES
====================================================================================================*/

@media screen and (max-width: 1376px){
    .nav__items{
        gap: 2rem;
    }


    /* ==============FOOTER============================== */
    
    .footer__sections{
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }

    .footer__section div{
        justify-content: space-between;
        margin: 0;
    }

    .footer__about h2{
        margin-bottom: 1rem;
        text-align: center;
    }
    .footer__about p{
        width: 100%;
    }

    .footer__links{
        display: flex;
        flex-wrap: wrap;
    }
    

}


  @media screen and (max-width: 1024px){
   
   
    /*===================GENERAL======================*/
    .container{
        width: var(--container-width-md);
    }
    h2 {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    h5{
        font-size: 0.8rem;
    }


    /* ======================================================
                            NAV BAR
        ======================================================*/

    
    
    nav button {
        display: inline-block;
        font-size: 1.5rem;
        background: transparent;
        color: var(--dark-bg);
        cursor: pointer;

    }

    nav button#close__nav-btn{
        display: none;
    }
    .nav__container{
        position: relative;
    }
    .nav__items{
        position: absolute;
        flex-direction: column;
        top: 100%;
        right: 0;
        width: 12rem;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        display: none;
    }

    .nav__items li {
        width: 100%;
        height: 4.5rem;
        display: flex;
        align-items: center;
        box-shadow:  10px 10px 20px rgba(0, 0, 0, 0.3);
        background: var(--main-bg);
        border-top: 1px solid var(--color-bg);
        animation: animateDropdown 750ms ease forwards;
        opacity: 0;
        transform-origin: top;
    }
    .nav__items li:nth-child(2){
        animation-delay: 100ms;
    }
    .nav__items li:nth-child(3){
        animation-delay: 200ms;
    }
    .nav__items li:nth-child(4){
        animation-delay: 300ms;
    }
    .nav__items li:nth-child(5){
        animation-delay: 400ms;
    }
    .nav__items li:nth-child(6){
        animation-delay: 500ms;
    }

    
    /*===================== NAV DROPDOWN ANIMATION ===============*/

    @keyframes animateDropdown {
        0% {
            transform: rotatex(90deg);
        }
        100% {
            transform: rotatex(0deg);
            opacity: 1;
        }
    }

    .nav__items li a {
        border-radius: 0;
        width: 100%;
        height: 100%;
        background: var(--main-bg);
        padding: 0 2rem;
        display: flex;
        align-items: center;
    }
    


    /* ========= PROFILE SECTION================================ */
    .intro__section{
        min-height: 86vh;
    }
    .profile__container{
        margin: 8vh auto 0;
    }

    .social__image{
        display: inline;
        justify-content: center;
    }

    .social__image a{
        display: inline;
        margin-right: 0.5rem;
        
    }
    .social__container{
        text-align: center;
    }
    
/* =========================================================== */






}



/*==================================================================================================
                                             MID TAB DEVICES
====================================================================================================*/




@media screen and (max-width: 768px){
    .profile__para{
        display: none;
        color: var(--dark-bg);
    }

    #profile__para__sl{
        display: block;
    }


}


/*==================================================================================================
                                             SMALL DEVICES
====================================================================================================*/


@media screen and (max-width: 600px){
    
    .profile__para{
        width: 100%;
    }
    
    .profile__para h2{
        color: var(--btn-blue-light);
        font-size: 2.5rem;
    }
    
    .profile__para span{
        font-size: 4rem;
        line-height: 3.5rem;
    }



    /* ======================ABOUT============================== */



.about__description{
    padding: 0rem 1rem;
}
.about__description button{
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.my__achievements ul{
    margin-top: 1rem;
    padding: 1rem 2rem;
}
.my__achievements ul li {
    list-style: disc;
}
.my__achievements>h1{
    padding: 0rem 1rem;
}

.about__expertise h1{
    padding: 0rem 1rem;
}
.about__expertise .skills__{
    padding: 0.4rem 1rem;
}


}