@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Poppins:wght@300;500&family=Roboto&family=Source+Sans+Pro&family=Yantramanav:wght@500;700&display=swap');

*{
        margin: 0;
        padding: 0;
        text-decoration: none;
        box-sizing: border-box;
        font-family: 'Poppins',sans-serif;
        scroll-behavior: smooth;
        
}

section{
        padding: 100px;
}

.banner{
        position:relative;
        min-height: 100vh;
        background-size: cover;
        background-image: url('./img/bg3.jpg');
        background-position: center;
        display: flex;
        justify-content: space-between;
        align-items: center;

}

.banner h2{
        font-size: 2.5em;
        color: #ffffff;
        font-weight: 350;
        line-height: 1.5em;
}

.banner h2 span{
        font-size: 1.25em; 
        font-weight: 650;  
}

.gradient-text {
        /* Fallback: Set a background color. */
        background-color: rgb(255, 255, 255);
        
        /* Create the gradient. */
        background-image: linear-gradient(45deg, #48b8e8, #ffffff);
        
        /* Set the background size and repeat properties. */
        background-size: 100%;
        background-repeat: repeat;
      
        /* Use the text as a mask for the background. */
        /* This will show the gradient as a text color rather than element bg. */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
      }

.banner h3{
        font-size: 1.5em;
        color: #ffffff;
        font-weight: 450;
}

.banner h3 .autotype{
        color:#308eb6;
}

.btn{
        position: relative;
        background: #277da1;
        display: inline-block;
        color: white;
        margin-top: 15px;
        padding: 8px 25px;
        font-size: 16px;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 2px;
        font-weight: 450;
}

.btn:hover{
        background-color: white;
        color: #277da1;
}

header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 40px 80px;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: 0.5s;

}

header.sticky{
        background: #fff;
        padding: 20px 100px;
        box-shadow:0 5px 20px rgba(0,0,0,0.1) ;
}

header .logo{
        color: white;
        font-size: 20px;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 2.3px;
        font-family: 'Yantramanav', sans-serif;
}

header.sticky .logo{
        color: #111;

}

header ul{
        position: relative;
        display:flex;
}

header ul li{
        position: relative;
        list-style: none;
}

header ul li a{
        position: relative;
        display: inline-block;
        margin: 12px 12px ;
        text-decoration: none;
        color: white;
        font-family: 'Yantramanav', sans-serif;
        letter-spacing: 1.5px;
        font-weight: 600;
}

header.sticky ul li a{
        color: #111;
}

.nav li.active a{
        color: rgb(29, 99, 104);
        background-color: #046c81;
}

.heading{
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
        color: #111;
        
}

.heading h2{
        font-size: 50px;
        font-weight: 1200;
       
}

/* .about{
        background-size: cover;
        background-image: url('./img/whitebg.jpg');
        background-position: center;
} */

.about .heading h2{
        text-shadow: 0 12px 6px #dcd9d4,0 -2px 1px #fff;
}

/* .projects .heading h2{
        text-shadow: 0 12px 6px #5b5959,0 -2px 1px rgb(14, 13, 13);
} */

.heading hr{
        width:25%;
        margin:auto;
        background-color:#1d809e;
        height: 6px;
        border: none;
}

.content{
        display:flex;
        justify-content: space-between;
}
.cbox1{
        padding-right: 40px;
}

.cbox1 h3{
        font-size: 28px;
        margin-bottom: 10px;
        
}

.cbox1 p{
        font-size: 16px;
        
}

.w50{
        min-width: 40%;
        padding-left: 40px;
}

.profilepic{
        border-radius: 50%;
        max-width: 100%;
        box-shadow: 4px 7px 6px rgb(179, 171, 171);
}

.info{
        font-size: 16px;
        text-decoration: none;
        
}
.info li{
        list-style: none;
}

.social{
        /* margin: auto; */
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        display: flex;
}

.social a{
        width:40px;
        height:40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: rgb(255, 255, 255);
        cursor: pointer;
        margin: auto 2.5%;
        border-radius: 50%;
        background-color: rgb(0, 0, 0);
      
}

.social a:hover{
        background-color: #146486;
}

.rbtn .btn{
        background: #278caa;
        display: flex;
        justify-content: center;
        color: white;
        text-align: center;
        margin: 80px 30% 0px 30% ;
        padding: 8px 25px;
        font-size: 16px;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 2px;
        font-weight: 250;
}

.rbtn .btn:hover{
        background-color: rgb(0, 0, 0);
        color: #89cfee;
}

.idk{
        width:50%;
        margin:auto;
        background-color:#c7c7c7;
        height: 2px;
        border: none;
        margin-bottom: 20px;    
        
}

.timeline h1{
        font-size: 40px;
        font-weight: 800;  
        text-align: center;
        /* margin-top: -80px;
        margin-bottom: 30px; */
        background-size: cover;
        background-image: url('./img/whitebg.jpg');
        background-position: center;
        
}


.timeline{
        min-height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 100px 0;
        /* background-image: linear-gradient(to bottom, #ffffff, #f4f4f4, #e9e9e9, #dedede, #d3d3d3); */
        /* background-image: linear-gradient(to bottom, #ffffff, #f8f8f8, #f2f2f2, #ebebeb, #e5e5e5); */
        background-size: cover;
        background-image: url('./img/whitebg.jpg');
        background-position: center;
        
}

.wrapper{
        width: 80%;
        height: auto;
        max-width: 850px;
        margin: 0 auto;
        position: relative;
}

.wrapper ul{
        list-style: none;

}

.wrapper ul li{
        padding: 20px;
        background-color: #278caa;
        border-radius: 10px;
        margin-bottom: 20px;
}

.wrapper ul li:last-child{
        margin-bottom: 0;
}


.tc h2{
        font-size: 23px;
        line-height: 30px;
        margin-bottom: 6px;
        color: #000000;
}

.tc h3{
        font-size: 16px;
        line-height: 20px;
        color: #000000;
        margin-bottom: 15px;
        
}

.tc p{
        color:#fff;
        font-size: 14px;
}

.tc .date{
        margin-bottom: 10px;
        letter-spacing: 2px;
}


.heading.white{
        color: #fff;
}

.skills{
        /* background-color: #157a99; */
        background-image: linear-gradient(to bottom, #015969, #046c81, #0a778f, #11819d, #1b97b9);
        width: 100%;
        height: auto;
        padding: 80px 13%;
        /* background-color: rgba(0,0,0,0.080); */
        
}
/* .skills .heading h2{
        text-shadow: 0 10px 6px #525a6d,0 -2px 1px rgb(107, 107, 107);
} */

.skills hr{
        width:25%;
        margin:auto;
        background-color:#000000;
        height: 6px;
        border: none;
        margin-bottom: 20px;
}

.skills .row{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-column-gap:50px;
        grid-row-gap:20px;
}

.skills .item .in{
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
}

.progress{
        width: 100%;
        height:10px;
        position: relative;
        background-color: rgb(160, 160, 160);
        border-radius: 25px;
        margin-top:5px ;
}

.progress span{
        width: 50%;
        height: 100%;
        position: absolute;
        background-color:rgb(33, 32, 32) ;
        border-radius: 25px;
}

.progress .cpp{
        width:80%;
        animation: cpp 3s;
}

@keyframes cpp{
        0%{
                width:0;
        }
        100%{
                width: 80%;
        }
}

.progress .py{
        width:90%;
        animation: py 3s;
}

@keyframes py{
        0%{
                width:0;
        }
        100%{
                width: 90%;
        }
}

.progress .java{
        width:65%;
        animation: java 3s;
}

@keyframes java{
        0%{
                width:0;
        }
        100%{
                width: 65%;
        }
}

.progress .ml{
        width:85%;
        animation: ml 3s;
}

@keyframes ml{
        0%{
                width:0;
        }
        100%{
                width: 85%;
        }
}

.progress .html{
        width:90%;
        animation: html 3s;
}

@keyframes html{
        0%{
                width:0;
        }
        100%{
                width: 90%;
        }
}

.progress .db{
        width:80%;
        animation: db 3s;
}

@keyframes db{
        0%{
                width:0;
        }
        100%{
                width: 80%;
        }
}

.progress .dl{
        width:80%;
        animation: dl 3s;
}

@keyframes dl{
        0%{
                width:0;
        }
        100%{
                width: 80%;
        }
}

.progress .gd{
        width:75%;
        animation: gd 3s;
}

@keyframes gd{
        0%{
                width:0;
        }
        100%{
                width: 75%;
        }
}

/* Timeline container */
.exp-timeline {
        position: relative;
        max-width: 800px; 
        margin: 0 auto;
        padding: 20px;
}

.exp-timeline::after {
        content: "";
        background-color:#aeadad; 
        width: 2px;
        height: 100%;
        top: 0; 
        left: 5%; 
        transform: translateX(-50%);
        position: absolute;
}

.timeline-event {
        position: relative;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #fff; 
        left: 10%;
}

.timeline-event::before {
        content: "";
        position: absolute;
        background-color:#046c81; 
        width: 30px; 
        height: 1px; 
        border-radius: 50%; 
        left: -55px; 
        top: 40%;
        transform: translateY(-50%); 
        z-index: 1; 
}

.timeline-event:last-child::after {
        display: none;
}

.company-details {
        display: flex;
        align-items: center;
}

.company-logo {
        width: 50px; 
        height: 50px;
        margin: 15px;

}

.company-name {
        color: #000000c3;
        font-family: 'opensans-regular', sans-serif;
}

.timeline-event-content {
        margin-left: 10px;
}

.timeline-event-title {
        font-size: 1.2em;
        margin-bottom: 5px;
        color: #097689;
}

.timeline-event-date {
        color: #ccc;
        font-size: 0.9em;
        font-family: 'opensans-regular', sans-serif;
        margin-bottom: 25px;
}

.timeline-event-description {
        line-height: 1.5;
        font-family: 'opensans-regular', sans-serif;

}



.projects{
        background: black;
}

.projects hr{
        width:25%;
        margin:auto;
        background-color:#1d728c;
        height: 6px;
        border: none;
}

.projects .content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
}

.projects .content .pbox{
        padding: 40px 20px;
        background-color: #222;
        color: #fff;
        max-width: 340px;
        margin: 20px;
        text-align: center;
        transition: 0.5s;
        border-radius: 15px;
        /* box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.168),
                15px 15px 15px rgba(0,0,0,0.1); */
                /* inset -50px -50px 50px rgba(255, 255, 255, 0.2),
                inset 50px 50px 50px rgba(0,0,0,0.1); */
}

.projects .content .pbox:hover{
        background-color: #146486;

}

.projects .content .pbox img{
        max-width: 80px;
}

.projects .content .pbox h3{
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
}

.pbox .ic a{
        width:25px;
        height:25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: rgb(255, 255, 255);
        cursor: pointer;
        /* margin-right: 20px; */
        border-radius: 50%;
        /* margin-left: 30px; */
        margin: 5px;
}

.pbox .ic a:hover{
        color:#000000;
}

.activities .a-content{
        /* display: flex; */
        justify-content: center;
        /* flex-wrap: wrap; */
        flex-direction: column;
        align-content: center;
        align-items: center;
}
.activities .a-content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
}

.activities .a-content .abox{
        padding: 20px 20px;
        background-color: #146486;
        color: #fff;
        /* width: 25%;
        height: 175px; */
        max-height: 400px;
        max-width: 900px;
        margin: 20px;
        text-align: center;
        transition: 0.5s;
        border-radius: 15px;
        box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.111),
                15px 15px 15px rgba(0,0,0,0.1);
                inset: -50px -50px 50px rgba(255, 255, 255, 0.2),
                inset 50px 50px 50px rgba(0,0,0,0.1);
}

.activities .a-content .abox:hover{
        background-color: #000000;

}

.activities .a-content .abox img{
        max-width: 80px;
}

.activities .a-content .abox h4{
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
}

.abox .ic a{
        width:25px;
        height:25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: rgb(255, 255, 255);
        cursor: pointer;
        /* margin-right: 20px; */
        border-radius: 50%;
        /* margin-left: 30px; */
        margin: 5px;
}

.abox .ic a:hover{
        color:#000000;
}

.slider{
        max-width: 1120px;
        width: 100%;
        padding: 40px 0px;
}

.scontent{
        margin: 40px;
        overflow: hidden;
}

.card{
        border-radius: 20px;
        background-color: #000000;
        color: rgb(255, 255, 255);
        /* width: 320px; */
}

.cardc{
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;

}
.title{
        font-size: 20px;
        font-weight: 400;
        margin: 10px;
}

.cardc p{
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px; 
}

.cardc a{
        color: #0a778f;
}

.cardc a:hover{
        color: #fff;
}

.points{
        padding: 10px;
        color:rgb(175, 173, 173);
        margin: auto;
        width: 92%;
}
.points li{
        align-items: center;
        text-align: center;
        justify-content: center;
}

.sbtn{
        color: #000000;
        transition: color 0.3s ease;

}

.sbtn:hover{
        color: #015969;
        
}

.swiper-pagination-bullet{
        background-color: #11819d;
        opacity: 1;
}

.swiper-pagination-bullet-active{
        background-color: #000000;
}



.contact{
   background-color: rgba(0,0,0,0.080);
   max-height: 120vh;     
}

.contact .rows{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(240px,auto));
        grid-gap:1.5rem;
        margin-top: 4rem;
}

.contact .rows .entry{
        text-align: center;
        padding: 20px 30px;
}

.contact p{
        color: #377c99;
}

.contact a{
        color:#34cde1;
}

.contact a:hover{
        color:#111
}

@media only screen and (min-width:768px){

        .wrapper::before{
                content: '';
                position: absolute;
                height: 100%;
                width: 2px;
                left:50%;
                transform: translateX(-50%);
                background-color: #000000;
        }
        .wrapper ul li{
                width: 50%;
                margin-bottom: 50px;
                position: relative;
        }

        .wrapper ul li:nth-child(odd){
                float: left;
                clear:right;
                transform: translateX(-30px);
        }

        .wrapper ul li:nth-child(even){
                float: right;
                clear:left;
                transform: translateX(30px);
        }
        .wrapper ul li::after{
                content: '';
                position: absolute;
                height: 20px;
                width: 20px;
                background-color: #000000;
                border-radius: 50%;
                top: 0;
        }

        .wrapper ul li:nth-child(odd)::after{
                transform: translateX(50%, -50%);
                right:-39px;
        }

        .wrapper ul li:nth-child(even)::after{
                transform: translateX(-50%, -50%);
                left:-39px;
        }

        .tc .date{
                position: absolute;
                top: -30px;
                color: #797978;
        }



}

@media(max-width: 991px){
        header,
        header.sticky{
                padding: 20px 50px;
                z-index: 1000;
        }

        .menu{
                position: fixed;
                top: 100px;
                left: -100%;
                display: block;
                padding: 100px 50px;
                text-align: center;
                width: 100%;
                height: 100vh;
                background: #fff;
                transition: 0.5s;
                z-index: 999;
                border-top: 1px solid rgba(0,0,0,0.2);
        }

        .menu.active{
                left:0;
        }

        header ul li a{
                color: #111;
                font-size: 24px;
                margin: 10px;
        }

        .toggle{
                width: 40px;
                height: 40px;
                background: url("./img/menu.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 30px;
                cursor: pointer;
        }

        .toggle.active{
                background: url("./img/close.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 25px;
                cursor: pointer;
        }

        header.sticky .toggle{
                filter: invert(1);
        }

        section{
                padding: 100px 50px;
        }
        .banner{
                padding: 150px 50px 100px;
        }

        .banner h2{
                font-size: 2em;
        }

        .banner h3{
                font-size: 1em;
        }

        .btn{
                margin-top: 10px;
                padding: 10px 20px;
                font-size: 16px;
        }

        .content{
                flex-direction: column;
        }

        .w50{
                margin-bottom: 20px;
        }

        .projects .content .pbox{
                margin: 10px;
        }
        .activities .a-content .abox{
                margin: 10px;
        }

        .social{
                margin: auto 3.5%;
                align-items: center;
                justify-content: center;
                
        }
}

@media (max-width :600px){
        header,
        header.sticky{
                padding: 20px 20px;
        }

        .banner{
                padding: 150px 20px 100px;
        }

        section{
                padding: 100px 20px;
        }

        .social{
                margin: auto 3.5%;
                align-items: center;
                justify-content: center;
                
        }
        .skills .row{
                width: 100%;
                display: grid;
                grid-template-columns: repeat(1,1fr);
                grid-column-gap:50px;
                grid-row-gap:20px;
        }

        .heading h2{
                font-size: 35px;
                font-weight: 1200;
               
        }
        

}