html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body{
    font-family: 'Oswald', 'Open Sans', sans-serif;
    background:  #ffffff;
}

sup {
    vertical-align: super;
    font-size: 18px;
}

.main-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}
section{
    display: flex;
    flex-direction: column;
    /* background:#e9e9e8; */
    margin: 5px 10px 5px 10px;
}
/* Header */
header{
    background:#35393c;
    align-items: center;
    color: #fff;
    padding: 20px 0 20px;
    font-size: 18px;
    font-weight: 300;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999;
}

.header-container{
    display: flex;
    flex-direction: row;
    width:96%;
    margin: 0 auto;
    justify-content:space-between;
}
 
.topnav {
    display: flex;
    flex-direction: row;
    width: auto;
    overflow: hidden;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
    margin-top: 3px;
  }
  
  .topnav a {
    color: #FAF7EB;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 17px;
    align-items: center;
  }
  
  .topnav a.icon {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  
  .topnav a:hover {
    color:#DBBD7F;
    font-size: 18px;
  }
  
  .topnav a.active {
    color:#DBBD7F;
  }
/* header close */

/* Home page */

/* banner section 1*/
.banner-container{
    display: flex;
    flex-direction: row;    
    width:80%;
    margin: 0 auto;
    justify-content:space-between;
}
.banner-bg{
    margin-top: 88px;
    background: #214261 url(../images/main-banner-bg.jpeg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 56px 6.395348837% 88px;
    position: relative;
    text-align: center;
}
.banner-info{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.banner-Jitendra{
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
}
.current-position{
    font-size: 16px;
    font-weight: 100;
    color: #ffc324;
}
.current-experience{
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 300;
    margin: 40px 0 40px;
}
.banner-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.button-workabout{
    display: flex;
    width: 200px;
    height: 40px;
    border-radius: 8px;
    /* border: 1px solid #e1dcdc; */
    background: content-box;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: #faf1e6;
    margin: 0px 10px 0px;
  }
.button-workabout a{
    text-decoration: none;
    color: black; 
  }
.button-workabout:hover {
    color:#ffc324;
    background: #ffc324;
    text-decoration: none;
} 
.biobutton:active {
    color:#ffc324;
    background: #91560e;
    text-decoration: none;
}
.mypic{
        width: 300px;
        height: auto;
}      
.banner-myimg{
    display: flex;
    align-items: center;
    border-left: 10px solid #ffffff;
    border-bottom: 10px solid #ffffff;
    border-radius: 10px 10px 10px;
    width: 300px;
    height: 300px;
    margin: 17px 0 0 0;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    text-align: center;
}
/* banner close */

/* experiences 3 point section 2 */
.myexperiences-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content:space-between;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    color: #ffffff;
}
.myexperiences-bg1{
    display: flex;
    flex-direction: column;
    background: #fece42;
    width: 30%;
    justify-content: center;
    align-items: center;
    padding: 3.3%;
    background: #2b4766 url(../images/recent-posts@2x.jpeg) no-repeat;
    background-size: cover;
    position: relative;
    margin-right: 1%;
    
}
.myexperiences-bg2{
    display: flex;
    flex-direction: column;
    background: #dfdfdf;
    width: 30%;
    justify-content: center;
    align-items: center;
    padding: 3.3%;
    background: #2b4766 url(../images/follow-bg.png) no-repeat;
    background-position: 50%;
    background-size: cover;
    position: relative;
    margin-right: 1%;
}
.myexperiences-bg3{
    display: flex;
    flex-direction: column;
    background: #315c67;
    width: 30%;
    justify-content: center;
    align-items: center;
    padding: 3.4%;
    height: 400px;
    background: #2b4766 url(../images/bg-star-chart.jpeg) no-repeat;
    background-position: 50%;
    background-size: cover;
    position: relative;
}
.myexperiencesheading{
    font-size: 28px;
    font-weight: 400;
    color: cornsilk;
    margin: 40px 0 20px;

}
/* experiences 3 point section 2 close */
.agile-container{
    display: flex;
    flex-direction: row;
    width:80%;
    margin: 0 auto;
    z-index: 99;
    justify-content:flex-end;
    color: #214261;
}
.agilephilosophy{
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 40px 0 40px;
}
.agileScript{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 20px 0 0px 0;
}
.agileScript .aginicons{
    margin: 10px 0 0 0;
    padding-right: 20px;
}
.agileheading{
    font-size: 28px;
    font-weight: 400;
}
.agileuxresearch{
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 10px;
}
.headingevents{
    font-size: 22px;
    font-weight: 400;
}
.headingeventsinfo{
    font-size: 16px;
    font-weight: 400;
}
/* Animation */

.circle-container {
    background-size: 161px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .big-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .big-circle img {
    animation: big-spin 180s linear infinite;
  }
  
  .about-circle {
    height: 100%;
    width: 100%;
    /* 709.678 / 672 */
    right: -73.80952381%;
    /* 496/672 */
    top: -20px;
    position: absolute;
  }
  .about-circle img {
    animation: big-spin 120s linear infinite;
  }
  
  .talks-circle {
    width: 48.8372093%;
    left: -25.58139535%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .talks-circle img {
    animation: big-spin 160s linear infinite;
    width: 100%;
  }
  
  @keyframes big-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.design-talks {
    display: flex;  
    /* flex-direction: column; */
    background: #DBBD7F url(../images/tiny-moon.png) bottom right no-repeat;
    background-size: 161px;
    height: auto;
    justify-content: flex-end;
    position: relative;
  }
/* experiences 3 point section 2 */



/* WHAT I DO start section */

.whatido-container{
    display: flex;
    flex-direction: column;    
    width:80%;
    margin: 0 auto;
    align-items: center;
}
.whatido-bg{
    background: #e6e6e6 url(../images/designthinking04.jpg);
    color: bisque;
    background-size: cover;
    
}
.whatihaveheading{
    font-size: 28px;
    font-weight: 400;
    margin: 30px 0 30px;

}
.whatmyexperience-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 40px;
}
.whatmykeyexpebox{
    display: flex;
    flex-direction: column;
    height:auto; 
    width: 32%;
    border: 1px solid #e1e1e1;
    margin: 20px 0 0 0;
    border-radius: 20px;
    background: #ffffff;
}
.whatmykeyeinfo{
    width: 90%;
    height: 160px;
    margin: 15px;
    color: #000000;
}
.whatimyexptital{
    font-size: 20px;
    font-weight: 400;
    color: #d5c14e;
    z-index: 999;
}

.whatmykeyexperiecne-bg{
    background: #504a43;
}

.studiesWritingDetails {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 32%;
    border: 1px solid #1b3039;
    margin: 20px 0 0 0;
    border-radius: 20px;
}
/* WHAT I DO close */

/* Section project start */
.myproject-container{
    display: flex;
    flex-direction: column;    
    width:80%;
    margin: 0 auto;
}
.myproject-bg{
    background: #2b4766 url(../images/recent-posts@2x.jpeg) no-repeat;
    background-size: cover;
    position: relative;
    background-position: center;
    padding: 5px 0 40px;
    position: relative;
    text-align: center;
}
.recentprojects{
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 40px;
}
.myrecentprojects{
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 300;
    margin: 20px 0 40px;
}

.posts-container {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.posts-container li {
    align-self: stretch;
    background: #FAF7EB;
    margin: 0 0 30px 0;
    position: relative;
    width: 31.22362869%;
    list-style: none;
}
.posts-container li a {
    color: #214261;
    display: block;
    text-decoration: none;
    filter: grayscale(100%);
}
.posts-container li a:hover {
    display: block;
    text-decoration: none;
    filter: grayscale(0%);
}
.posts-container img {
    display: block;
    opacity: 0.95;
    transition: all 0.1s ease-in-out;
    width: 95%;
    
    margin: 10px;
  
}
.prjectname{
    color: #214261;
    display: block;
    text-align: center;
    padding: 20px;
    z-index: 999999;
}
.readcasestudy{
    background: #DBBD7F;
    color: #214261;
    display: block;
    text-align: center;
    padding: 15px 0 15px;
}
.morecasestudies{
    font-size: 20px;
    color: #ffffff;
}
.morecasestudies a{
    color: #ffffff;
    padding: 20px 0 20px;
    text-decoration: none;
}
.morecasestudies a:hover{
    color: #cacd90;
    padding: 20px 0 20px;
    text-decoration: none;
}
/* Section project close */

/*  Latest Thinking section start */

.designthinking-container{
    display: flex;
    flex-direction: column;    
    width:80%;
    margin: 0 auto;
    align-items: center;
    color: #ffffff;
}
.designthinking-bg{
    background: #DBBD7F url(../images/follow-bg.png);
    /* background-position: 50%; */
    padding: 10px 0px 50px; 
}
    
.designthinkingHeading {
    font-size: 28px;
    font-weight: 400;
    margin: 30px 0 20px;
}
.writing-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.designthinking1box{
    display: flex;
    flex-direction: row;
    width: 63%;
    border: 1px solid #3d465c;
    border-radius: 10px;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 300;
    background: #504a43;
    padding: 20px;
    margin: 15px 0 15px;
    height: 202px
}
.designthinkabout{
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
}
.designthinkingsubtital{
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 10px;
}
.designthinktital{
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}
.designthinkinginfo {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 300;
    margin: 0px 0 10px;
}
.designthinkanimation{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.readarticle{
    font-size: 16px;
    font-weight: 400;
    margin: 20px 0;
}
.readarticle a{
    color: #ffffff;
    text-decoration: none;
}
.readarticle a:hover{
    color: #ffc324;
    text-decoration: none;
}

.readmybio{
    font-size: 18px;
    font-weight: 400;
    margin: 40px 0;
}
.readmybio a{
    font-size: 18px;
    font-weight: 400;
    margin: 40px 0;
    color: #ffffff;
    text-decoration: none;
}
.readmybio a:hover{
    font-size: 18px;
    font-weight: 400;
    margin: 40px 0;
    color: #ffc324;
    text-decoration: none;
}
.aboutexp-img{
    width: 190px;
    height: 190px;
    border-radius: 240px;
    overflow: hidden;
    box-shadow: 2px 2px 24px rgb(0 0 0 / 40%);
    margin: 10px 0 10px 10px;
}
.aboutcarrer-img{
    width: 300px;
    height: 190px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 24px rgb(0 0 0 / 40%);
    margin: 10px 0 10px 10px;
}


.designthink5box{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 29%;
    border: 1px solid #3d465c;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 300;
    background: #504a43;
    padding: 20px;
    margin: 15px 0 15px;
    height: 202px  
}

.designthinkconnect{
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px;
}
.work-profile-links {
    display: flex;
    flex-direction: column;
    /* display: block;
    padding: 0;
    margin: 0; */
}
.work-profile-links li {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 300;
}
.work-profile-links li a {
    display: block;
    /* height: 20px; */
    line-height: 30px;
    padding: 4px 16px 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
}
/* .work-profile-links a, a:link {
    color: #4de079;
    text-decoration: none;
} */
.work-profile-links li a:hover {
    background: rgba(0,0,0,0.3);
  }






/* Latest Thinking section close */
/* Home page Close */

/* contact  */
.contact-container{
    display: flex;
    flex-direction: column;    
    width:80%;
    margin: 0 auto;
    align-items: center;
    padding: 30px 0 30px 0;
}
.contact-bg{
    background: #e5e5ec;
}

/* contact close */

/* footer  */
.footer-container{
    display: flex;
    flex-direction: row;    
    width:96%;
    margin: 0 auto;
    justify-content:space-between;
    padding-bottom: 30px;
}
footer{
    background:#35393c;
    align-items: center;
    color: #fff;
    padding: 20px 0 20px;
    font-size: 18px;
    font-weight: 300;
   
}
footer a{
    color:#FAF7EB;
    font-size: 18px;
    font-weight: 300;
    text-decoration: none;
}
footer a:hover{
    color:#ffc324;
    text-decoration: none;
}

.footer-container ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    color: #ffffff;
  }
  
.footer-container li {
    display: inline;
    margin: 8px;
    padding: 8px;
    text-decoration: none;

  }
/* footer close */

.sp2022{
    padding: 20px 0px;
}

/* page Bio */
.bio-container {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
.bio-bg{
    background: #4e4e4d;
    /* background: #dbbd7f; */
    margin-top: 88px;
}
.bio{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 30px 0px 30px 0;
}
.bioleft{
    display: flex;
    flex-direction: column;
    width: 30%;
    color: #ffffff;;
}
.bioright{
    display: flex;
    flex-direction: column;
    width: 70%;
}

.bio-img {
    width: 300px;
    height: 300px;
    border-radius: 240px;
    overflow: hidden;
    box-shadow: 2px 2px 24px rgb(0 0 0 / 40%);
    margin-bottom: 20px;
}
.bio-img img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.bio-experiences {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.biobutton{
    display: flex;
    width: 200px;
    height: 40px;
    border-radius: 8px;
    /* border: 1px solid #e1dcdc; */
    background: content-box;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    background: rgb(250, 241, 230);
    color: #242424;
  }
.biobutton a{
    text-decoration: none;
    color: black; 
  }
.biobutton:hover {
    color: #4b3804;
    background: #ffc324;
    text-decoration: none;
} 
.jitendra{
    font-size: 20px;
    line-height: 28px;
    margin:20px 0 0px;
    color: #ffffff;
    font-weight: 300;
}
.jitendra-heading{
    font-size: 24px;
    font-weight: 500;
}

.experienceContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.skillContainer{
    display: flex;
    flex-direction: row;
    background: #62625d;
    /* background: #856c32; */
    border-radius: 8px;
    margin: 10px 0 0px;
    padding: 20px 20px 20px 0px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    justify-content: space-between;
    color: #ffffff;
}

.skilIcons{
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin: 9px 20px 0 20px;

}
.skilIconscontent{
    display: flex;
    font-size: 16px;
    font-weight: 400;
}
.experience-heading{
    font-size: 20px;
    color: #f1f10c;
    font-weight: 400;
}

/* History */ 
.bioyears{
    font-size: 14px;
    font-weight: 200;
    color: #ffc324;
}
.compnay-experience{
    font-size: 18px;
    font-weight: 400;
    color: antiquewhite;
}
.bioworkhistory{
    display: flex;
    flex-direction: column;
    width: 400px;
}

.workHistory{
    margin-top: 20px;
}
.timeline {
    position: relative;
    margin: 0 auto;
}
.history-exp{
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    margin: 0px 0px 20px 10px;
}
.designthink-exp{
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    margin: 0px 0px 20px 0px;
}
.bioheading{
    font-size: 16px;
    font-weight: 400;
}
.biocontent{
    font-size: 14px;
    font-weight: 200;
    letter-spacing:.5px;
} 
.timeline::after {
    content: '';
    position: absolute;
    width: 5px;
    background-color:#8b92a7;
    top: 0;
    bottom: 46px;
    left: 28px;
    margin-left: -3px;
  }
  
  /* Container around content */
.container {
    padding: 0px 0px 0px 50px;
    position: relative;
    background-color: inherit;

  }
  
  /* The circles on the timeline */
.container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #292624;
    top: 0px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
.left {
    left: 0;
  }
  
  /* Place the container to the right */
.right {
    left: 0;
    margin-top: -18px;
  }
  
  /* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    /* border-width: 10px 10px 10px 0; */
    border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
.right::after {
    left: 10px;
  }
  
  /* The actual content */
.content {
    padding: 0px 20px 45px 10px;
    position: relative;
    border-radius: 4px;
  }


  /* Jitendra About */
.bioaboutexperience{
    display: flex;
    flex-direction: column;
    width: 70%;
}
  .resumeRightSide{
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 0px 10px 20px 10px;
    
}

/* contact me */
.contactme{
    color: #282828;
    font-size: 24px;
    font-weight: 400;
    margin: 0px 0px 20px 0px;
}
.contactmehire{
    color: #000000;
    font-size: 16px;
    font-weight: 300;
    margin: 0px 0px 0px 0px;
}
.socalmediaicon a{
    opacity: 0.50;
}
.socalmediaicon a:hover{
    opacity: 0.80;
}
.spemail{
    margin-bottom: 10px;
    
}
.spemail a{
    color: #1a1a19;
    text-decoration: none;
}
.spemail a:hover{
    color: #1243ae;
    text-decoration: none;
}
/* contact me close */

/* page bio close */

/* media */
@media (min-width: 320px) and (max-width: 767px){
    /* header */
    .header-container {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .topnav a {
        color: white;
        padding: 3px 10px;
        text-decoration: none;
        font-size: 15px;
        align-items: center;
      }
    /* header close */

    /* homepage start */

    /* banner section */
    .banner-container{
        display: flex;
        flex-direction: row;    
        width:100%;
        margin: 0 auto;
        justify-content:space-between;
    }
    .banner-bg{
        margin-top: 88px;
        background: #214261 url(../images/main-banner-bg.jpeg) no-repeat;
        background-size: cover;
        background-position: center;
        padding: 60px 4.395348837% 50px;
        position: relative;
        text-align: center;
    }
    .banner-Jitendra{
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
    }
    .current-position{
        font-size: 15px;
        font-weight: 100;
        color: #ffc324;
    }
    .current-experience{
        font-size: 17px;
        line-height: 30px;
        color: #ffffff;
        font-weight: 300;
        margin: 40px 0 40px;
    }
    
    /* experiences 3 point section */
    .myexperiences-container{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content:space-between;
        text-align: center;
        font-size: 20px;
        font-weight: 300;
        color: #ffffff;
    }
    .myexperiences-bg1{
        display: flex;
        flex-direction: column;
        background: #fece42;
        width: 94%;
        justify-content: center;
        align-items: center;
        padding: 3.3%;
        background: #2b4766 url(../images/recent-posts@2x.jpeg) no-repeat;
        background-size: cover;
        position: relative;
        margin-bottom: 10px;
        
    }
    .myexperiences-bg2{
        display: flex;
        flex-direction: column;
        background: #dfdfdf;
        width: 94%;
        justify-content: center;
        align-items: center;
        padding: 3.3%;
        background: #2b4766 url(../images/follow-bg.png) no-repeat;
        background-position: 50%;
        background-size: cover;
        position: relative;
        margin-bottom: 10px;
    }
    .myexperiences-bg3{
        display: flex;
        flex-direction: column;
        background: #315c67;
        width: 94%;
        justify-content: center;
        align-items: center;
        padding: 3.4%;
        height: 400px;
        background: #2b4766 url(../images/bg-star-chart.jpeg) no-repeat;
        background-position: 50%;
        background-size: cover;
        position: relative;
    }
    .myexperiencesheading{
        font-size: 28px;
        font-weight: 400;
        color: cornsilk;
        margin: 40px 0 20px;
    }
    /* Agile */

    .agile-container{
        display: flex;
        flex-direction: row;
        width:90%;
        margin: 0 auto;
        z-index: 99;
        justify-content:flex-end;
    }
    .agilephilosophy{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 40px 0 40px;
    }

    /* Agile close */

    /* WHAT I DO start section */

    .whatido-container{
        display: flex;
        flex-direction: column;    
        width:94%;
        margin: 0 auto;
        align-items: center;
    }
    .whatmyexperience-container{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .whatmykeyexpebox{
        display: flex;
        flex-direction: column;
        height:auto; 
        width: 100%;
        border: 2px solid #152c5b;
        margin: 20px 0 0 0;
        border-radius: 10px;
        background: #dfdfdf;
    }
    .whatmykeyeinfo{
        width: 90%;
        height: 180px;
        margin: 15px;
        color: #000000;
    }
    /* WHAT I DO close */

    /* Section project start */
    .myproject-container{
        display: flex;
        flex-direction: column;    
        width:90%;
        margin: 0 auto;
    }

    .myprojectcasestudy{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        justify-content: space-between;
    }
    .projectstudy{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        justify-content: space-between;
    }
    .projectstudy .casestudy {
        align-self: stretch;
        background: #FAF7EB;
        margin: 0 0 20px;
        position: relative;
        width: 98%;
    }

    /* Section project close */
    .posts-container {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: column;
    }
    .posts-container li {
        align-self: stretch;
        background: #FAF7EB;
        margin: 0 0 30px 0;
        position: relative;
        width: 98.22362869%;
        list-style: none;
    }

    /* design thinking */

    .designthinking-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        align-items: center;
        color: #ffffff;
    }
    .writing-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
    }
    .designthinking1box {
        display: flex;
        flex-direction: column;
        width: 87%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 10px;
        margin: 15px 0 15px;
    }
  
    .designthink5box {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 87%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 10px;
        margin: 15px 0 15px;
        /* height: 202px; */
    }



    /* homepage close */

    /* page bio */
    .bio-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    .bio {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding-top: 20px;
    }

    .bioleft{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0px;
    }
    .bioright{
        display: flex;
        flex-direction: column;
        width:95%;
        margin: 0px 0px 20px 10px;
    }

    .bio-img {
        width: 200px;
        height: 200px;
        border-radius: 240px;
        overflow: hidden;
        box-shadow: 2px 2px 24px rgb(0 0 0 / 40%);
        margin-bottom: 20px;
    }
    .bio-img img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
    
    .biobutton{
        display: flex;
        width: 200px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e1dcdc;
        background: content-box;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        background: rgb(250, 241, 230);
    }
    .biobutton a{
        text-decoration: none;
        color: black; 
    }
    .biobutton:hover {
        color:bisque;
        background: bisque;
        text-decoration: none;
    } 
    .history-exp{
        margin-left: 10px;
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
    }
    .jitendra{
        font-size: 14px;
        line-height: 18px;
        color: #ffffff;
        margin: 10px 0 0px 0px;
        font-weight: 300;
    }
    .jitendra-heading{
        font-size: 18px;
        font-weight: 400;
    }
    .designthink-exp{
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
        margin: 0px 0px 20px 0px;
    }
  


    /* page bio */
    .contact-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        align-items: center;
        padding: 30px 0 30px 0;
    }
    .contactmehire {
        font-size: 12px;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
        flex-direction: column-reverse;
        align-items: center;
    }
    .footer-container li {
        display: inline;
        margin: 10px 0 10px;
        padding: 8px;
        text-decoration: none;
    }

}
@media (min-width: 768px) and (max-width: 1024px) {
    .header-container {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .footer-container {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    /* page bio */
    .bio-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    .bio-img {
        width: 200px;
        height: 200px;
        border-radius: 240px;
        overflow: hidden;
        box-shadow: 2px 2px 24px rgb(0 0 0 / 40%);
        margin-bottom: 20px;
    }
    .bio-img img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
    .jitendra {
        font-size: 16px;
        line-height: 22px;
        color: #ffffff;
        margin: 10px 20px 0 20px;
        font-weight: 300;
    }
    .experienceContainer {
        display: flex;
        flex-direction: column;
        width: 93%;
        justify-content: center;
        margin-left: 20px;
    }
    .whatido-container{
        display: flex;
        flex-direction: column;    
        width:98%;
        margin: 0 auto;
        align-items: center;
    }
    .whatmykeyeinfo{
        width: 90%;
        height: 180px;
        margin: 15px;
        color: #000000;
    }
    .myproject-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }
    .designthinking-container {
        display: flex;
        flex-direction: column;
        width: 94%;
        margin: 0 auto;
        align-items: center;
        color: #ffffff;
    }
    .designthinking1box {
        display: flex;
        flex-direction: row;
        width: 61.6%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 20px;
        margin: 15px 0 15px;
        height: 202px;
    }
    .readmybio {
        font-size: 18px;
        font-weight: 400;
        margin: 22px 0;
    }
    .designthink5box {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 28%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 20px;
        margin: 15px 0 15px;
        height: 202px;
    }
    /* page bio */
}

@media (min-width: 1280px) and (max-width: 800px) {
    .header-container {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .footer-container {
        display: flex;
        flex-direction: row;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    /* page bio */
    .bio-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    .jitendra {
        font-size: 16px;
        line-height: 22px;
        color: #ffffff;
        margin: 10px 20px 0 0px;
        font-weight: 300;
    }
    .experienceContainer {
        display: flex;
        flex-direction: column;
        width: 97%;
        justify-content: center;
    }
    /* page bio */

    .whatido-container{
        display: flex;
        flex-direction: column;    
        width:98%;
        margin: 0 auto;
        align-items: center;
    }
    .myproject-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

    .designthinking-container {
        display: flex;
        flex-direction: column;
        width: 94%;
        margin: 0 auto;
        align-items: center;
        color: #ffffff;
    }
    .designthinking1box {
        display: flex;
        flex-direction: row;
        width: 61.6%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 20px;
        margin: 15px 0 15px;
        height: 202px;
    }
    .readmybio {
        font-size: 18px;
        font-weight: 400;
        margin: 22px 0;
    }
    .designthink5box {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 28%;
        border: 1px solid #3d465c;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 300;
        background: #504a43;
        padding: 20px;
        margin: 15px 0 15px;
        height: 202px;
    }
  }


    
/* ------------------------ font---------------------- */

/* Roboto */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Thin.woff2') format('woff2'),
        url('fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Black.woff2') format('woff2'),
        url('fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* fontsOswald */
@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-ExtraLight.woff2') format('woff2'),
        url('fonts/Oswald-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-Medium.woff2') format('woff2'),
        url('fonts/Oswald-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-Regular.woff2') format('woff2'),
        url('fonts/Oswald-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-Light.woff2') format('woff2'),
        url('fonts/Oswald-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}