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

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

/* Custom properties */

:root{
    font-family: 'Source Code Pro', monospace;
    --fw-reg: 300;
    --fw-bold: 900;
    --clr-light: #ede7e3;
    --bcg-light: #fff;
    --clr-dark:#303030;
    --clr-text: #64dfdf;
    --clr-decoration:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(92,37,111,1) 58%, rgba(128,0,255,1) 100%);

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
}

@media (min-width: 800px){
    :root{
    --fs-h1: 4.5rem;
    --fs-h2: 3.75rem;
    --fs-h3: 1.5rem;
    --fs-body: 1.125rem;
    }
}

/* Typography   */

h1,
h2,
h3{
    line-height: 1.1;
    margin: 0;

}

h1{
    font-size: var(--fs-h1)
}

h2{
    font-size: var(--fs-h2);
}

h3{
    font-size: var(--fs-h3)
}

.sectionTitleIntro{
    font-weight: 300;
}

strong{
    font-weight: bold;
    display: block;
}

.sectionSubtitle{
    margin: 0;
    font-size: var(--fs-h3);
    
}


/* Genreal Styles */

html {
    scroll-behavior: smooth;
}

body{
    background-color: var(--bcg-light);
    color: var(--clr-dark);
    font-size: var(--fs-body);
    line-height: 1.6;
    text-align: justify;
}

section{
    padding: 5em 2em;
}

img{
    
    margin: 0 auto;
    box-shadow: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25), 
                0.125em 0.125em 0.25em rgba(0, 0, 0, 0.15);

} 


a{
    color: inherit;
    text-decoration: none;   
    transition: transform .5s ease-in-out;
}

a:hover{
    text-decoration: var(--fw-bold);
    opacity: 0.7;
    color: var(--clr-text);
}




:focus{
    outline: 3px solid var(--clr-text);
    outline-offset: 3px;
}

.button{
    display: inline-block;
    width: 200px;
    height: 40px;
    padding: .5em 2.5em;
    background-color: #4F2065;
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    letter-spacing: 2px;
    font-weight: bold;
    transition: transform 200ms ease-in-out;
}

.button:hover{
    transform: scale(1.1);
}

@media(max-width:500px){
    section{
        padding-top:1em;
    }

}


/* Header */



header{
    background: var(--clr-decoration);
    position: fixed;
    z-index: 100;
    color: var(--clr-light);
}




.logo{
    width: 100px;
    color: var(--clr-text);
    font-weight: bold;
    font-size: 1.7em;
    font-family: 'Permanent Marker';
    padding-right: 20px;
    text-shadow: 0 0 1.5px var(--clr-light);
    transition: transform .5s ease-in-out;   
    transform: rotate3d(0,2,-1,25deg); 
    
}

.logo:hover, header ul a:hover,.navbar-nav a.active{
    transform: rotate3d(0,2,-1,25deg);
    color: var(--clr-text);
}

header a:focus {
    outline: 0;
    box-shadow: none!important;
}

@media(max-width: 768px){
    header{
        position: sticky;
        z-index: 100;
     
    }

    .logo:hover, header ul a:hover,.navbar-nav a.active{
        color: var(--clr-text);
        transform: none;
    }

    .linkedIn{
        margin-left: 10px;
    }

    
}


/*  ------------    Intro section  ----------------  */
/* .home{
    background-color: var(--clr-dark);
} */


.intro{
    font-weight: bold;
    color: black;
    position: relative;
    z-index: 20;
    top: -70px;  
}

.intro span{
 font-weight: 400;
 font-style: italic;
}



#profilePic{
    
    height: auto;
    width: 100%;
   
}

 
  
.myVideo{
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;   
    z-index: -1;
} 


.sectionSubIntro{

    padding: .25em 1em;
    background: var(--clr-decoration);
    color: white;
    font-family: sans-serif;
    
}



@media (min-width: 600px){
    .intro{
        height: 100vh;
        align-content: center;
        display: grid;
        width: max-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas: "img sectionTitleIntro" 
                             "img sectionSubtitle";
        grid-template-columns: min-content max-content;
    }

    .intro-img{
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }

 

    .sectionSubIntro{
        align-self: start;
        grid-column: -1/1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    }
}


@media(max-width: 500px){


    .intro{
  
        z-index: 20;
        top: 10px;  
    }
    
    
}


/* ----------------   About-Me   --------------- */


.aboutMe{
    margin: 0 auto;
    background-color: var(--clr-dark);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
}

@media(max-width:800px){
    
    .aboutMe{
         padding-top: 3em;
    }
}


@media(min-width:800px){

    .aboutMe{
        padding-top: 6em;
    }

}

.sectionTitleAbout{
    color: var(--clr-text);
    text-align: center;   
}

.sectionSubAbout{
    background: var(--clr-decoration);
    color: white;
    font-family: sans-serif;
    font-size: 1.1em;
    width: 100%;
    max-width: 600px;
    align-self: center;
    text-align: center;
    margin-top: 10px;
    padding: 5px;
}


.aboutMeBody{
    max-width: 600px;
    margin: 0 auto;
    text-align: justify;

}

.aboutMeBody p:first-line {
    text-indent:20px;
    text-align: justify;
}



@media (min-width: 1024px){

    .aboutMe{
        height: 100vh;
        padding-top: 9em;
    }
    .sectionSubIntro{
        bottom: 2em;
    }
}


/*------------------ My Skills ---------------       */


.mySkills{
    color: white;
    font-weight: bolder;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: none;
    position: relative;
    z-index: 10;
    background-color: var(--clr-dark);
 
}

@media(max-width:800px){
    
    .mySkills{
        padding-top: 3em;
    }
}


@media(min-width:800px){

    .mySkills{
        padding-top: 6em;
    }

}

.skillsSectionTitle{
    color: var(--clr-text);
    position: relative;
}

.skillsSectionTitle::after{
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    margin: 1em auto 1em;
    background-color: var(--clr-light);
    opacity: 0.25;
}


.skillsIntro{
    max-width: 60%;
    align-self: center;
}


.skillsContainer{
    margin: 0 auto;
    margin-bottom: 4em;
    display: flex;
    justify-content: space-between;
}

.techSkills{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 20px;
    padding: 20px 60px 0 0;
    border-right: 1px solid var(--clr-text);
}

.techSkills p{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin-top: 2px;
    overflow-wrap: wrap;
}

.otherLogo{
    justify-self: center;
}

.gridHeader{
    grid-column-start: 1; 
    grid-column-end: 3;
}

.techSkills h4{
    column-span: 2;
    padding-bottom: 10px;
}
.languages{
    padding: 20px 60px;
    border-right: 1px solid var(--clr-text);
}

.softSkills{
    padding: 20px 60px;
}

.languages small{
    color: var(--clr-text);
}

.skillsContainer p{
    font-style: italic;
}

.cvBtn{
    background-color: #145F5F;
    text-decoration: none;
    border: none;
    width: 80px;  
}

@media(max-width: 600px){

    .skillsContainer{
        flex-flow: column;
    }

    .techSkills{
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--clr-text);
    }
    
    .softSkills{
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--clr-text);
    }  

    .languages{
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--clr-text);
    }

}



/* ------------------   My Work -------------        */


.myWork{
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
    padding: 3em 2em 2em;
    position: relative;
    z-index: 10;
}


.myWork h2{
    margin-bottom: 30px;
    color: var(--clr-text);
}


.carousel-item{
    height: auto;
    padding: 2em;
} 
.carousel-item img{
    height: 40vh;
}

@media(max-width: 500px){
    .carousel-item img{
        max-height: 250px;
        max-width:250px;
    }
}

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
    top: 10px;
}

.carousel-caption p{
    font-style: italic;
}


.carousel-item img:hover{
    transform: scale(1.1);
    transition: transform 200ms ease-in-out;
    cursor: pointer; 
}

.carousel .button{
    display: inline-flex;
    width: 200px;
    height: 40px;
    text-align: justify;
    justify-content: center;
    align-content: center;
    margin-top: 10px;
}

@media(max-width:800px){
    
    .myWork{
        padding-top: 3em;
    }
}


@media(min-width:800px){

    .myWork{
        padding-top: 6em;
    }

}





/* ----------         TimeLine         ---------------- */

.experienceSection{
    background:white;
    position: relative;
    z-index: 10;
}
@media(max-width:800px){
    
    .experienceSection{
        padding-top: 3em;
    }
}


@media(min-width:800px){

    .experienceSection{
        padding-top: 6em;
    }

}

.expSectionTitle{
    color: #145F5F;
    position: relative;
    text-align: center;   
}

.expSectionTitle::after{
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    margin: 1em auto 1em;
    background-color: #145F5F;
    opacity: 0.25;
}


.main-timeline7
{
    overflow:hidden;
    position:relative
}

.main-timeline7 .timeline
{   width:50%;
    float:left;
    z-index:1;
    position:relative
}
.main-timeline7 .timeline:after,.main-timeline7 .timeline:before
{content:"";display:block;clear:both;
    background:var(--clr-decoration);
}

.main-timeline7 .timeline:before
{   content:"";
    width:40px;
    height:90%;
    background:var(--clr-decoration);
    position:absolute;
    top:10%;
    right:-20px
}

.main-timeline7 .timeline:last-child:before
{height:0}

.main-timeline7 .timeline-icon
{width:80px;height:80px;border-radius:50%;background:#727cb6;overflow:hidden;text-align:center;position:absolute;top:0;right:-40px;z-index:3}

.main-timeline7 .timeline-icon:before{content:"";width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid #727cb6;box-shadow:0 0 0 4px #a5afe4;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}

.main-timeline7 .timeline-icon i{font-size:35px;color:#303a3b;line-height:80px;z-index:1;position:relative}

.main-timeline7 .year{display:block;padding:0 60px 0 30px;font-size:30px;font-weight: bold; color:#145F5F;text-align:right;border-bottom:2px solid #303a3b;z-index:2;position:relative}

.main-timeline7 .year:before
{
    content:"";
    display:block;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#727cb6;
    border:5px solid #fff;
    box-shadow:0 0 0 4px #727cb6;margin:auto;position:absolute;bottom:-15px;left:4px}

.main-timeline7 .year:after
{
    content:"";
    border-left:10px solid #303a3b;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    position:absolute;
    bottom:-11px;
    left:50px
}

.main-timeline7 .timeline-content
{
    padding:18px 80px 18px 40px;
    text-align:left;
    position:relative;
    z-index:1   
} 


.main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before
{
    content:"";
    width:80px;
    height:150px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    top:-7%;
    right:15px;
    z-index:-10
}


.main-timeline7 .timeline-content:after{left:auto;right:-95px}

.main-timeline7 .timeline:last-child .timeline-content:after,.main-timeline7 .timeline:last-child .timeline-content:before{width:0;height:0}

.main-timeline7 .title{font-size:22px;font-weight:700;color:#727cb6;margin-top:0}

.main-timeline7 .description{font-size:15px;color:#7f8386;line-height:25px}

.main-timeline7 .timeline:nth-child(2){margin-top:140px}

.main-timeline7 .timeline:nth-child(even){margin-bottom:80px}

.main-timeline7 .timeline:nth-child(odd){margin:-140px 0 0}

.main-timeline7 .timeline:first-child,.main-timeline7 .timeline:last-child:nth-child(even){margin:0!important}

.main-timeline7 .timeline:nth-child(2n) .timeline-icon,.main-timeline7 .timeline:nth-child(2n):before
{
    right:auto;
    left:-20px;
    background:#008b8b;
}

.main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:-40px}

.main-timeline7 .timeline:nth-child(2n) .year{padding:0 30px 0 60px;text-align:left}

.main-timeline7 .timeline:nth-child(2n) .year:before{left:auto;right:3px}

.main-timeline7 .timeline:nth-child(2n) .year:after{border-left:none;border-right:10px solid #303a3b;right:50px}

.main-timeline7 .timeline:nth-child(2n) .timeline-content{padding:18px 40px 18px 60px;text-align:left}

.main-timeline7 .timeline:nth-child(2n) .timeline-content:before{left:-95px}

.main-timeline7 .timeline:nth-child(2n) .timeline-content:after{left:15px}

.main-timeline7 .timeline:nth-child(2n) .timeline-icon:before
{
    border-color:#e77e21;
    box-shadow:0 0 0 4px #f1a563;
}

.main-timeline7 .timeline:nth-child(2n) .year:before
{
    background:#e77e21;
    box-shadow:0 0 0 4px #e77e21
}

.main-timeline7 .timeline:nth-child(2n) .title{color:#e77e21}

.main-timeline7 .timeline:nth-child(3n) .timeline-icon,.main-timeline7 .timeline:nth-child(3n):before
{ background:var(--clr-decoration);}

.main-timeline7 .timeline:nth-child(3n) .timeline-icon:before{border-color:#008b8b;box-shadow:0 0 0 4px #50b5b4}

.main-timeline7 .timeline:nth-child(3n) .year:before{background:#008b8b;box-shadow:0 0 0 4px #008b8b}

.main-timeline7 .timeline:nth-child(3n) .title{color:#008b8b}

.main-timeline7 .timeline:nth-child(4n) .timeline-icon,.main-timeline7 .timeline:nth-child(4n):before
{
    background:var(--clr-decoration);
}

.main-timeline7 .timeline:nth-child(4n) .timeline-icon:before{border-color:#008b8b;box-shadow:0 0 0 4px #ed687c}

.main-timeline7 .timeline:nth-child(4n) .year:before{background:#ed687c;box-shadow:0 0 0 4px #ed687c}

.main-timeline7 .timeline:nth-child(4n) .title{color:#ed687c}

@media only screen and (max-width:990px){
    
    .main-timeline7 .timeline{width:100%}

    .main-timeline7 .timeline:nth-child(even),.main-timeline7 .timeline:nth-child(odd){margin:0}

    .main-timeline7 .timeline:before,.main-timeline7 .timeline:nth-child(2n):before{width:30px;height:100%;left:25px}

    .main-timeline7 .timeline-icon,.main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:0}

    .main-timeline7 .timeline:nth-child(2n) .year,.main-timeline7 .year{text-align:left;padding:0 30px 0 100px}

    .main-timeline7 .timeline:nth-child(2n) .year:before,.main-timeline7 .year:before{left:auto;right:4px}

    .main-timeline7 .year:after{left:auto;right:50px;border-right:10px solid #303a3b;border-left:none}

    .main-timeline7 .timeline-content .description{color:#666}

    .main-timeline7 .timeline-content,.main-timeline7 .timeline:nth-child(2n) .timeline-content{text-align:left;padding:18px 40px 18px 100px}

    .main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before{width:0;height:0}
}




/* --------------     Footer    ---------------- */

.contact{
    background: var(--clr-decoration);
    color: var(--clr-light);
    text-align: center;
    padding: 1.5em 0;
    font-size: var(--fs-h3);
    position: relative;
    z-index: 10;
}


.socialList{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 10px 0 0 0;
    padding: 0;
}

.socialItem{
    margin: 0 5px 5px 5px;
    padding: 0 10px 10px 5px;
}

@media(max-width:800px){
    
    .contact{
        padding-top: 3em;
    }
}



/* -------   Contact form  -------------------- */

.contact-form{
    background: #fff;
    margin-top: 10%;
    margin-bottom: 5%;
    width: 70%;
    color: #145F5F;
}


.contact-msg{
   color: #145F5F;
   position: relative;
   top: 50px;
}

.contact-form .form-control{
    border-radius:1rem;
}

.icon{
    position: relative;
    top: 40px;
    color: #391752;
}

.contact-form form .row{
    margin-bottom: -3%;  
}


.contact-form .btn{
    width: 150px;
    color: white;
    position: relative;
    top: 40px;
    background-color: #391752;
    border: none;
    transition: transform 200ms ease-in-out;
}

.contact-form .btn:hover{
    transform: scale(1.1);   
}

footer{
    display: flex;
    background-color:#2B1146;
    color: white;
    justify-content: center;
    align-content: center;
    padding: 12px;
    position: relative;
    z-index: 10;
}