/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
/*------------------------------------------------------------------------------------------------
global style
------------------*/
/* define custom css variable */
:root {
	--bg-black-900:   #000000;
	--bg-black-100:   #dddddd;
	--bg-black-50 :   #eff0f4;
	--bg-opacity: rgba(255,255,255,0.5);
	--text-black-900 :#000000;
	--text-black-700 :#555555;
	--text-black-600 :#666666;
	--text-black-300 :#bbbbbb;
	--outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
	--outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
	--inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8; 
    --inner-shadow-0: inset 0 0 0 #d0d0d0, inset 0 0 0 #f8f8f8;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
}
/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #555;
}

::-webkit-scrollbar-thumb:hover {
    background: #00cdac
}
/* all similar content styling codes */
section {
    padding: 100px 0;
}
.largest {
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .services, .skills, .portfolio, .contact, footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content, 
.services .serv-content,
.skills .skills-content,
.portfolio-section .section,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;

}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
     border-radius: 35px;
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 22px;
    color: #00cdac;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
     border-radius: 35px;
}

/* navbar styling */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky{
    padding: 15px 0;
    background: #00cdac;
}
.navbar .largest{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .Mylogo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.navbar .Mylogo a span{
    color: #00cdac;
    transition: all 0.3s ease;
	padding-right: 20px;
}
.navbar .Mylogo a span i:hover{
    color: #fff;
    background: #00cdac;
    border-radius: 5px;
}
.navbar.sticky .Mylogo a span{
    color: #fff;

}

.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: #00cdac;
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* menu btn styling */
.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background: #00cdac;
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}


/* ---------  shadow  ---------- */
body .hidden-scrolling{
    overflow-y: hidden;
}

*:not(i){
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
:before,:after{
    box-sizing: border-box;
}

a{
    text-decoration: none;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
    max-width: 100%
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.justify-content-betwen{
    justify-content: space-between;
}

.outer-shadow {
    box-shadow: var(--outer-shadow);
}
.inner-shadow{
    box-shadow: var(--inner-shadow);
}
.hover-in-shadow {
    position: relative;
    z-index: 1;

}
.hover-in-shadow:hover{
    box-shadow: var(--outer-shadow-0);
}
.hover-in-shadow:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    z-index: -1;
}
.hover-in-shadow:hover:after {
    box-shadow: var(--inner-shadow);
}


/* home section styling */
.home{
    display: flex;
    background-image: linear-gradient(161deg, rgba(121, 121, 121, 0.02) 0%, rgba(121, 121, 121, 0.02) 16.667%,rgba(193, 193, 193, 0.02) 16.667%, rgba(193, 193, 193, 0.02) 33.334%,rgba(177, 177, 177, 0.02) 33.334%, rgba(177, 177, 177, 0.02) 50.001000000000005%,rgba(5, 5, 5, 0.02) 50.001%, rgba(5, 5, 5, 0.02) 66.668%,rgba(229, 229, 229, 0.02) 66.668%, rgba(229, 229, 229, 0.02) 83.33500000000001%,rgba(211, 211, 211, 0.02) 83.335%, rgba(211, 211, 211, 0.02) 100.002%),linear-gradient(45deg, rgba(223, 223, 223, 0.02) 0%, rgba(223, 223, 223, 0.02) 14.286%,rgba(70, 70, 70, 0.02) 14.286%, rgba(70, 70, 70, 0.02) 28.572%,rgba(109, 109, 109, 0.02) 28.572%, rgba(109, 109, 109, 0.02) 42.858%,rgba(19, 19, 19, 0.02) 42.858%, rgba(19, 19, 19, 0.02) 57.144%,rgba(180, 180, 180, 0.02) 57.144%, rgba(180, 180, 180, 0.02) 71.42999999999999%,rgba(63, 63, 63, 0.02) 71.43%, rgba(63, 63, 63, 0.02) 85.71600000000001%,rgba(87, 87, 87, 0.02) 85.716%, rgba(87, 87, 87, 0.02) 100.002%),linear-gradient(337deg, rgba(142, 142, 142, 0.02) 0%, rgba(142, 142, 142, 0.02) 20%,rgba(164, 164, 164, 0.02) 20%, rgba(164, 164, 164, 0.02) 40%,rgba(203, 203, 203, 0.02) 40%, rgba(203, 203, 203, 0.02) 60%,rgba(228, 228, 228, 0.02) 60%, rgba(228, 228, 228, 0.02) 80%,rgba(54, 54, 54, 0.02) 80%, rgba(54, 54, 54, 0.02) 100%),linear-gradient(314deg, rgba(187, 187, 187, 0.02) 0%, rgba(187, 187, 187, 0.02) 12.5%,rgba(170, 170, 170, 0.02) 12.5%, rgba(170, 170, 170, 0.02) 25%,rgba(214, 214, 214, 0.02) 25%, rgba(214, 214, 214, 0.02) 37.5%,rgba(187, 187, 187, 0.02) 37.5%, rgba(187, 187, 187, 0.02) 50%,rgba(190, 190, 190, 0.02) 50%, rgba(190, 190, 190, 0.02) 62.5%,rgba(6, 6, 6, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 75%,rgba(206, 206, 206, 0.02) 75%, rgba(206, 206, 206, 0.02) 87.5%,rgba(171, 171, 171, 0.02) 87.5%, rgba(171, 171, 171, 0.02) 100%),linear-gradient(300deg, rgba(243, 243, 243, 0.01) 0%, rgba(243, 243, 243, 0.01) 12.5%,rgba(209, 209, 209, 0.01) 12.5%, rgba(209, 209, 209, 0.01) 25%,rgba(179, 179, 179, 0.01) 25%, rgba(179, 179, 179, 0.01) 37.5%,rgba(3, 3, 3, 0.01) 37.5%, rgba(3, 3, 3, 0.01) 50%,rgba(211, 211, 211, 0.01) 50%, rgba(211, 211, 211, 0.01) 62.5%,rgba(151, 151, 151, 0.01) 62.5%, rgba(151, 151, 151, 0.01) 75%,rgba(16, 16, 16, 0.01) 75%, rgba(16, 16, 16, 0.01) 87.5%,rgba(242, 242, 242, 0.01) 87.5%, rgba(242, 242, 242, 0.01) 100%),linear-gradient(6deg, rgba(31, 31, 31, 0.02) 0%, rgba(31, 31, 31, 0.02) 20%,rgba(193, 193, 193, 0.02) 20%, rgba(193, 193, 193, 0.02) 40%,rgba(139, 139, 139, 0.02) 40%, rgba(139, 139, 139, 0.02) 60%,rgba(14, 14, 14, 0.02) 60%, rgba(14, 14, 14, 0.02) 80%,rgba(122, 122, 122, 0.02) 80%, rgba(122, 122, 122, 0.02) 100%),linear-gradient(279deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%,rgba(160, 160, 160, 0.02) 14.286%, rgba(160, 160, 160, 0.02) 28.572%,rgba(23, 23, 23, 0.02) 28.572%, rgba(23, 23, 23, 0.02) 42.858%,rgba(60, 60, 60, 0.02) 42.858%, rgba(60, 60, 60, 0.02) 57.144%,rgba(149, 149, 149, 0.02) 57.144%, rgba(149, 149, 149, 0.02) 71.42999999999999%,rgba(4, 4, 4, 0.02) 71.43%, rgba(4, 4, 4, 0.02) 85.71600000000001%,rgba(50, 50, 50, 0.02) 85.716%, rgba(50, 50, 50, 0.02) 100.002%),linear-gradient(109deg, rgba(124, 124, 124, 0.03) 0%, rgba(124, 124, 124, 0.03) 12.5%,rgba(61, 61, 61, 0.03) 12.5%, rgba(61, 61, 61, 0.03) 25%,rgba(187, 187, 187, 0.03) 25%, rgba(187, 187, 187, 0.03) 37.5%,rgba(207, 207, 207, 0.03) 37.5%, rgba(207, 207, 207, 0.03) 50%,rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 62.5%,rgba(118, 118, 118, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 75%,rgba(89, 89, 89, 0.03) 75%, rgba(89, 89, 89, 0.03) 87.5%,rgba(96, 96, 96, 0.03) 87.5%, rgba(96, 96, 96, 0.03) 100%),linear-gradient(329deg, rgba(35, 35, 35, 0.02) 0%, rgba(35, 35, 35, 0.02) 20%,rgba(246, 246, 246, 0.02) 20%, rgba(246, 246, 246, 0.02) 40%,rgba(118, 118, 118, 0.02) 40%, rgba(118, 118, 118, 0.02) 60%,rgba(245, 245, 245, 0.02) 60%, rgba(245, 245, 245, 0.02) 80%,rgba(140, 140, 140, 0.02) 80%, rgba(140, 140, 140, 0.02) 100%),linear-gradient(90deg, hsl(314,0%,31%),hsl(314,0%,31%));
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .largest {
    margin: auto 0 auto 30px;
}
.home .home-content .paragraph-1 {
    font-size: 27px;
    margin-top: 25px;
    color: #D0D0D0;
}
.home .home-content .paragraph-2 {
    font-size: 60px;
    font-weight: 600;
    margin: 8px 0;
    margin-left: -3px;
   color: #D0D0D0;
}

.home .home-content .paragraph-3 {
   font-size: 30px;
    margin: 8px 0;
   color: #D0D0D0;
}
.home .home-content .paragraph-3 span {
    color: #00cdac;
    font-weight: 500;
}
.home .home-content a {
    display: inline-block;
    background: #00cdac;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #00cdac;
    transition: all 0.3s ease;
}
.home .home-content a:hover {
    color: #00cdac;
    background: none;
}
.home .home-img{
    flex:0 0 50%;
    max-width: 50%;
    padding: 0 15px;
     position: absolute;
  top: 53%; left: 60%; 
  transform: translate(0%, -50%); 
}
.home .home-img .img-box{
    max-width: 450px;
    display: block;
    margin: auto;
    border-radius: 50%;
    padding: 15px;
}
.home .home-img .img-box img{
    width: 100%;
    border-radius: 50%;
    border: 10px solid transparent;
}
.home .home-img .img-box {
--inner-shadow: inset 3px 3px 3px #00cdac, inset -3px -3px 3px;
--outer-shadow: 3px 3px 3px #00cdac, -3px -3px 3px #00cdac;
}

/*---------------------
      about section
----------------------*/
.about{
	padding: 80px 0 0;
	min-height: 100vh;
   background-image: linear-gradient(135deg, transparent 0%, transparent 6%,rgba(71, 71, 71,0.04) 6%, rgba(71, 71, 71,0.04) 22%,transparent 22%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 20%,rgba(71, 71, 71,0.04) 20%, rgba(71, 71, 71,0.04) 47%,transparent 47%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 24%,rgba(71, 71, 71,0.04) 24%, rgba(71, 71, 71,0.04) 62%,transparent 62%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 73%,rgba(71, 71, 71,0.04) 73%, rgba(71, 71, 71,0.04) 75%,transparent 75%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}


/*--- about section styling --- */
.about .title::after{
    content: "who i am";
}
.about .about-content .left{
    width: 36%;
}
.about .about-content .left img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
}
.about .about-content .right{
    width: 60%;
}
.about .about-content .right .text{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}
.about .about-content .right .text span{
    color: #00cdac;
}
.about .about-content .right p{
    font-size: 19px;
    text-align: justify;
    color: var(--text-black-600);
    margin-bottom: 10px;

}
.about .about-content .right a{
    display: inline-block;
    background: #00cdac;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid #00cdac;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: #00cdac;
    background: none;
}
/*--------------------------------------*/
@keyframes fadeInTop{
    0%{
        opacity: 0;
        transform: translateY(-25px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
/*--------------------------------------*/
.about .about-tabs{
    padding: 60px 15px 50px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
.about .about-tabs .tab-item{
    display: inline-block;
    margin: 0 5px 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-size: 16px;
    color: var(--text-black-600);
    font-weight: 500;
    text-transform: capitalize;
}
.about .about-tabs .tab-item:hover:not(.active){
    opacity: 0.6;
}
.about .about-tabs .tab-item.active{
    color: #00cdac;
}
.about .tab-content{

    flex:0 0 100%;
    max-width: 100%;
    display: none;
}
.about .tab-content.active{
    display: block;
    animation: fadeInTop 0.5s ease;
}

.about .skills{
    padding: 0 0 40px;
}
.about .skills .skill-item{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
    margin-bottom: 40px;

}
.about .skills .skill-item p{
    font-size: 16px;
    color: var(--text-black-600);
    text-transform: capitalize;
    margin: 0 0 10px;

}
.about .skills .skill-item .capability{
    height: 20px;
    border-radius: 10px;
    position: relative;

}
.about .skills .skill-item .capability-task{
    background-color:#00cdac;
    height: 6px;
    left: 7px;
    top: 7px;
    position: absolute;
    border-radius: 10px;
}
.about .skills .skill-item .capability-task span{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black-600);
    margin-top: -40px;
}
.about .education,
.about .experience{
    padding-bottom: 80px;

}
.about .timeline{
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
}
.about .timeline:before{
    content: '';
    width: 1px;
    height: 100%;
    left: 50%;
    top:0;
    background-color:var(--bg-black-100);
    position: absolute;
}
.about .timeline .timeline-item{
 flex:0 0 100%;
 max-width: 100%;
 padding: 0 15px;
}
.about .timeline .timeline-item:nth-child(odd){
    padding-right: calc(50% + 50px);
    text-align: right;
}
.about .timeline .timeline-item:nth-child(even){
    padding-left: calc(50% + 50px);
}
.about .timeline .timeline-item-inner{
    padding: 30px;
    border-radius: 5px;
    position: relative;
}
.about .timeline .timeline-item-inner:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 1px;
    background-color:var(--bg-black-100);
    top: 37px;
    z-index: -1;
}
.about .timeline .timeline-item:nth-child(odd) .timeline-item-inner:before{
    right: -30px;
}
.about .timeline .timeline-item:nth-child(even) .timeline-item-inner:before{
    left: -30px;
}
.about .timeline .timeline-item-inner .icon{
    height: 40px;
    width: 40px;
    background-color: var(--bg-black-50);
    text-align: center;
    border: 1px solid var(--bg-black-100);
    line-height: 40px;
    border-radius: 50%;
    font-size: 16px;
    color: #00cdac;
    position: absolute;
    top: 18px;
}
.about .timeline .timeline-item:nth-child(odd) .icon{
    right:-70px;
}
.about .timeline .timeline-item:nth-child(even) .icon{
    left:-70px;
}
.about .timeline .timeline-item-inner span{
    font-weight: 500;
    color: #00cdac;
    display: block;
    margin: 0 0 10px;
    text-transform:capitalize;   
}
.about .timeline .timeline-item-inner h3{
    font-size: 20px;
    color: var(--text-black-700);
    font-weight: 600;
    margin: 0 0 5px;
    text-transform: capitalize;
}
.about .timeline .timeline-item-inner h4{
    font-size: 16px;
    font-style: italic;
    color: var(--text-black-600);
    margin: 0;
}
.about .timeline .timeline-item-inner p{
    font-size: 16px;
    color: var(--text-black-600);
    line-height: 26px;
    margin:15px 0 0;   
}

/*-------------------------
 services section styling
 ----------------------- */

.services {
    color:#fff;
   background-image: linear-gradient(161deg, rgba(121, 121, 121, 0.02) 0%, rgba(121, 121, 121, 0.02) 16.667%, rgba(193, 193, 193, 0.02) 16.667%, rgba(193, 193, 193, 0.02) 33.334%, rgba(177, 177, 177, 0.02) 33.334%, rgba(177, 177, 177, 0.02) 50.001000000000005%, rgba(5, 5, 5, 0.02) 50.001%, rgba(5, 5, 5, 0.02) 66.668%, rgba(229, 229, 229, 0.02) 66.668%, rgba(229, 229, 229, 0.02) 83.33500000000001%, rgba(211, 211, 211, 0.02) 83.335%, rgba(211, 211, 211, 0.02) 100.002%),
   linear-gradient(45deg, rgba(223, 223, 223, 0.02) 0%, rgba(223, 223, 223, 0.02) 14.286%, rgba(70, 70, 70, 0.02) 14.286%, rgba(70, 70, 70, 0.02) 28.572%, rgba(109, 109, 109, 0.02) 28.572%, rgba(109, 109, 109, 0.02) 42.858%, rgba(19, 19, 19, 0.02) 42.858%, rgba(19, 19, 19, 0.02) 57.144%, rgba(180, 180, 180, 0.02) 57.144%, rgba(180, 180, 180, 0.02) 71.42999999999999%, rgba(63, 63, 63, 0.02) 71.43%, rgba(63, 63, 63, 0.02) 85.71600000000001%, rgba(87, 87, 87, 0.02) 85.716%, rgba(87, 87, 87, 0.02) 100.002%),
   linear-gradient(337deg, rgba(142, 142, 142, 0.02) 0%, rgba(142, 142, 142, 0.02) 20%, rgba(164, 164, 164, 0.02) 20%, rgba(164, 164, 164, 0.02) 40%, rgba(203, 203, 203, 0.02) 40%, rgba(203, 203, 203, 0.02) 60%, rgba(228, 228, 228, 0.02) 60%, rgba(228, 228, 228, 0.02) 80%, rgba(54, 54, 54, 0.02) 80%, rgba(54, 54, 54, 0.02) 100%),
   linear-gradient(314deg, rgba(187, 187, 187, 0.02) 0%, rgba(187, 187, 187, 0.02) 12.5%, rgba(170, 170, 170, 0.02) 12.5%, rgba(170, 170, 170, 0.02) 25%, rgba(214, 214, 214, 0.02) 25%, rgba(214, 214, 214, 0.02) 37.5%, rgba(187, 187, 187, 0.02) 37.5%, rgba(187, 187, 187, 0.02) 50%, rgba(190, 190, 190, 0.02) 50%, rgba(190, 190, 190, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 75%, rgba(206, 206, 206, 0.02) 75%, rgba(206, 206, 206, 0.02) 87.5%, rgba(171, 171, 171, 0.02) 87.5%, rgba(171, 171, 171, 0.02) 100%),
   linear-gradient(300deg, rgba(243, 243, 243, 0.01) 0%, rgba(243, 243, 243, 0.01) 12.5%, rgba(209, 209, 209, 0.01) 12.5%, rgba(209, 209, 209, 0.01) 25%, rgba(179, 179, 179, 0.01) 25%, rgba(179, 179, 179, 0.01) 37.5%, rgba(3, 3, 3, 0.01) 37.5%, rgba(3, 3, 3, 0.01) 50%, rgba(211, 211, 211, 0.01) 50%, rgba(211, 211, 211, 0.01) 62.5%, rgba(151, 151, 151, 0.01) 62.5%, rgba(151, 151, 151, 0.01) 75%, rgba(16, 16, 16, 0.01) 75%, rgba(16, 16, 16, 0.01) 87.5%, rgba(242, 242, 242, 0.01) 87.5%, rgba(242, 242, 242, 0.01) 100%),
   linear-gradient(6deg, rgba(31, 31, 31, 0.02) 0%, rgba(31, 31, 31, 0.02) 20%, rgba(193, 193, 193, 0.02) 20%, rgba(193, 193, 193, 0.02) 40%, rgba(139, 139, 139, 0.02) 40%, rgba(139, 139, 139, 0.02) 60%, rgba(14, 14, 14, 0.02) 60%, rgba(14, 14, 14, 0.02) 80%, rgba(122, 122, 122, 0.02) 80%, rgba(122, 122, 122, 0.02) 100%),
   linear-gradient(279deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%, rgba(160, 160, 160, 0.02) 14.286%, rgba(160, 160, 160, 0.02) 28.572%, rgba(23, 23, 23, 0.02) 28.572%, rgba(23, 23, 23, 0.02) 42.858%, rgba(60, 60, 60, 0.02) 42.858%, rgba(60, 60, 60, 0.02) 57.144%, rgba(149, 149, 149, 0.02) 57.144%, rgba(149, 149, 149, 0.02) 71.42999999999999%, rgba(4, 4, 4, 0.02) 71.43%, rgba(4, 4, 4, 0.02) 85.71600000000001%, rgba(50, 50, 50, 0.02) 85.716%, rgba(50, 50, 50, 0.02) 100.002%),
   linear-gradient(109deg, rgba(124, 124, 124, 0.03) 0%, rgba(124, 124, 124, 0.03) 12.5%, rgba(61, 61, 61, 0.03) 12.5%, rgba(61, 61, 61, 0.03) 25%, rgba(187, 187, 187, 0.03) 25%, rgba(187, 187, 187, 0.03) 37.5%, rgba(207, 207, 207, 0.03) 37.5%, rgba(207, 207, 207, 0.03) 50%, rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 75%, rgba(89, 89, 89, 0.03) 75%, rgba(89, 89, 89, 0.03) 87.5%, rgba(96, 96, 96, 0.03) 87.5%, rgba(96, 96, 96, 0.03) 100%),
   linear-gradient(329deg, rgba(35, 35, 35, 0.02) 0%, rgba(35, 35, 35, 0.02) 20%, rgba(246, 246, 246, 0.02) 20%, rgba(246, 246, 246, 0.02) 40%, rgba(118, 118, 118, 0.02) 40%, rgba(118, 118, 118, 0.02) 60%, rgba(245, 245, 245, 0.02) 60%, rgba(245, 245, 245, 0.02) 80%, rgba(140, 140, 140, 0.02) 80%, rgba(140, 140, 140, 0.02) 100%),
   linear-gradient(90deg, hsl(314, 0%, 31%), hsl(314, 0%, 31%));
}
.services .title::before {
    background: #fff;
}
.services .title::after{
    background: #111;
    content: "what i provide";
}
.services .serv-content .card {
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover {
    background:  #00cdac;;
}
.services .serv-content .card .box {
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box {
    transform: scale(1.05);
}
.services .serv-content .card i {
    font-size: 50px;
    color:  #00cdac;;
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i {
    color: #fff;
}
.services .serv-content .card .text {
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/*---------------------------------
        portfolio
 --------------------------------*/
 .portfolio-section{
	 padding: 80px 0 80px;
	 min-height: 100vh;
     background-image: linear-gradient(135deg, transparent 0%, transparent 6%,rgba(71, 71, 71,0.04) 6%, rgba(71, 71, 71,0.04) 22%,transparent 22%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 20%,rgba(71, 71, 71,0.04) 20%, rgba(71, 71, 71,0.04) 47%,transparent 47%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 24%,rgba(71, 71, 71,0.04) 24%, rgba(71, 71, 71,0.04) 62%,transparent 62%, transparent 100%),linear-gradient(45deg, transparent 0%, transparent 73%,rgba(71, 71, 71,0.04) 73%, rgba(71, 71, 71,0.04) 75%,transparent 75%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
 }
 .portfolio-section .title::after {
 	content: "Lastest Works";
 }
 
 .portfolio-section .section-title{
	 margin-bottom: 40px;
 }
 
 .portfolio-section .portfolio-filter{
	 padding: 0 15px;
	 flex:0 0 100%;
	 max-width: 100%;
	 text-align: center;
	 margin-bottom: 20px;
 }
 .portfolio-section .filter-item{
	 display: inline-block;
	 margin: 0 5px 10px;
	 padding: 5px 10px;
	 border-radius: 30px;
	 cursor:pointer;
	 font-weight: 500;
	 color: var(--text-black-600);
	 text-transform: capitalize;
	 font-size: 16px;
	 transition: all 0.3s ease;
 }
 .portfolio-section .filter-item:hover:not(.active){
	 opacity: 0.6;
 }

  .portfolio-section .filter-item.active{
	  color: #00cdac;
  }
  .portfolio-section .portfolio-item{
	  flex: 0 0 33.33%;
	  max-width: 33.33%;
	  padding: 15px;
	  display: flex;
	  flex-wrap: wrap;
  }
   .portfolio-section .portfolio-item.hide{
   	display: none;
   }
   .portfolio-section .portfolio-item.show{
   	display: block;
   	animation: fadeInTop 0.5s ease;
   }

  .portfolio-section .portfolio-item-inner{
	  padding: 15px;
	  border-radius: 5px;
	  cursor: pointer;
	  width: 100%;
  }
  .portfolio-section .portfolio-item-img img{
	  border-radius: 5px;
	  width: 100%;
	 transition: all 0.3s ease;
  }
  .portfolio-section .portfolio-item-inner:hover .portfolio-item-img img{
	   transform: translateY(-25px);
   }
  .portfolio-section .portfolio-item-img{
	  position: relative;
  }

   .portfolio-section .portfolio-item-img .view-project{
	   text-transform: capitalize;
	   font-size: 16px;
	   font-weight: 500;
	   color: #00cdac;
	   transition: all 0.3s ease;
	   position: absolute;
	   left: 0;
	   bottom: -4px;
	   transform: translateY(-5px);
	   z-index: -1;
	   opacity: 0;
   }
   .portfolio-section .portfolio-item-inner:hover .view-project{
	   transform: translateY(0px);
	    opacity: 1;
   }
    .portfolio-section .portfolio-item-details{
	   display: none; 
   }
   
    .portfolio-section .portfolio-item-inner p{
		font-size: 16px;
		margin: 10px 0 0;
		color: var(--text-black-600);
		text-transform: capitalize;
	}
	
	/*-------------------------------------------
	                 portfolio popup
    -------------------------------------------*/
	.portfolio-popup{
		background-color:var(--bg-black-50);
		position: fixed;
		left:0;
		top:0;
		width:100%;
		height: 100%;
		z-index: 1000;
		overflow-y: scroll;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}
	.portfolio-popup.open{
		visibility: visible;
		opacity: 1;
	}
	.portfolio-popup .pp-loader{
		position: fixed;
		left: 0;
		top:0;
		height: 100%;
		width: 100%;
		z-index: 1005;
		background-color: var(--bg-opacity);
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
		opacity: 0;
	}
     .portfolio-popup .pp-loader .active{
     	visibility: visible;
     	opacity: 1;
     }
    .portfolio-popup .pp-loader div{
    	height: 40px;
    	width: 40px;
    	border:3px solid #00cdac;
    	border-radius: 50%;
    	border-right: 3px solid transparent;
    	animation: spin 2s linear infinite;
    }

	.portfolio-popup .pp-details{
		max-width: 1350px;
		width: calc(85% + 30px);
		margin: auto;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: all 0.5s ease;
	}
	.portfolio-popup .pp-details.active{
		opacity: 1;
	}
	.portfolio-popup .pp-details-inner{
		padding: 30px 0;
	}
	.portfolio-popup .pp-title{
		padding: 0 15px;
	}
	.portfolio-popup .pp-title h2{
		font-size: 28px;
		color: var(--text-black-900);
		text-transform: capitalize;
		font-weight: 600;
		margin: 0 0 5px;
	}
	.portfolio-popup .pp-title p{
		font-size: 14px;
		font-weight: 600;
		color: var(--text-black-600);
		margin: 0 0 15px;
		border-bottom: 1px solid var(--text-black-900);
		padding-bottom: 10px;
	}
	.portfolio-popup .pp-title p span{
		font-weight: 400;
		text-transform: capitalize;
	}
	.portfolio-popup .pp-project-details h3{
		font-size: 20px;
		font-weight: 600;
		color: var(--text-black-700);
		margin: 0 0 15px;
		text-transform: capitalize;
	}
	
	.portfolio-popup .description{
		flex: 0 0 65%;
		max-width: 65%;
		padding: 0 15px;
	}
	.portfolio-popup .description p{
		font-size: 16px;
		color: var(--text-black-600);
		line-height: 26px;
		margin: 0;
	}
	.portfolio-popup .info{
		flex: 0 0 35%;
		max-width: 35%;
		padding: 0 15px;
	}
	.portfolio-popup .info ul li{
		display: block;
		margin-bottom: 10px;
		font-weight: 600;
		color: var(--text-black-600);
		font-size: 16px;
	}
	.portfolio-popup .info ul li span{
		font-weight: 400;
	}
	.portfolio-popup .info ul li a{
		color: var(--skin-color);

	}
	.portfolio-popup .info ul li:last-child{
		margin-bottom: 0;
	}

	.portfolio-popup .separator{
		height: 1px;
		width: 100%;
		display: block;
		background-color:var(--text-black-600);
	}
	.portfolio-popup .pp-img{
		max-width:100%;
		width: auto;
		height: auto;
		padding: 10px;
		border-radius: 5px;
	}
	.portfolio-popup .pp-main{
		min-height: 100vh;
		max-width: 1350px;
		width: 85%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.portfolio-popup .pp-main-inner{

		padding: 70px 0 50px;
		position: relative;
	}
	.portfolio-popup .pp-project-details-btn{
		position: absolute;
		left: 0;
	    border-radius: 30px;
		font-size: 16px;
		font-weight: 500;
		color: #00cdac;
		top: 15px;
		height: 40px;
		line-height: 40px;
		transition: all 0.3s ease;
		padding-left: 10px;
		padding-right: 10px;
	}
	.portfolio-popup .pp-project-details-btn i{
		margin-left: 4px;
		
	}
	.portfolio-popup .pp-project-details-btn:after{
		border-radius: 30px;
	}
	.portfolio-popup .pp-close{
		position: absolute;
		right: 0;
		border-radius: 50%;
		height: 40px;
		width: 40px;
		top: 15px;
		text-align: center;
		line-height: 35px;
		font-size: 35px;
		color: var(--text-black-600);
		cursor: pointer;
		transition: all 0.3s ease;
	}
	.portfolio-popup .pp-close:after{
		border-radius: 50%;
	}
	.portfolio-popup .pp-counter{
		position: absolute;
		right: 0;
		height: 40px;
		line-height: 40px;
		bottom: 5px;
		font-size: 16px;
		color: var(--text-black-600);
	}
	.portfolio-popup .pp-prev,
	.portfolio-popup .pp-next{
		position: fixed;
		top: 50%;
		height: 40px;
		width: 40px;
		text-align: center;
		font-size: 20px;
		cursor: pointer;
		z-index: 1010;
		color: var(--text-black-900);
		transition: all 0.3s ease;
		opacity: 0.5;
	}
	.portfolio-popup .pp-prev:hover,
	.portfolio-popup .pp-next:hover{
		opacity: 1;
	}
	.portfolio-popup .pp-prev i,
	.portfolio-popup .pp-next i{
		line-height: 40px;
	}
	.portfolio-popup .pp-prev i{
		transform: rotate(180deg);
	}
	.portfolio-popup .pp-prev {
		left: 15px;
	}
	.portfolio-popup .pp-next {
		right: 15px;
	}

	/* contact section styling */
    .contact {
    background-image: linear-gradient(161deg, rgba(121, 121, 121, 0.02) 0%, rgba(121, 121, 121, 0.02) 16.667%,rgba(193, 193, 193, 0.02) 16.667%, rgba(193, 193, 193, 0.02) 33.334%,rgba(177, 177, 177, 0.02) 33.334%, rgba(177, 177, 177, 0.02) 50.001000000000005%,rgba(5, 5, 5, 0.02) 50.001%, rgba(5, 5, 5, 0.02) 66.668%,rgba(229, 229, 229, 0.02) 66.668%, rgba(229, 229, 229, 0.02) 83.33500000000001%,rgba(211, 211, 211, 0.02) 83.335%, rgba(211, 211, 211, 0.02) 100.002%),linear-gradient(45deg, rgba(223, 223, 223, 0.02) 0%, rgba(223, 223, 223, 0.02) 14.286%,rgba(70, 70, 70, 0.02) 14.286%, rgba(70, 70, 70, 0.02) 28.572%,rgba(109, 109, 109, 0.02) 28.572%, rgba(109, 109, 109, 0.02) 42.858%,rgba(19, 19, 19, 0.02) 42.858%, rgba(19, 19, 19, 0.02) 57.144%,rgba(180, 180, 180, 0.02) 57.144%, rgba(180, 180, 180, 0.02) 71.42999999999999%,rgba(63, 63, 63, 0.02) 71.43%, rgba(63, 63, 63, 0.02) 85.71600000000001%,rgba(87, 87, 87, 0.02) 85.716%, rgba(87, 87, 87, 0.02) 100.002%),linear-gradient(337deg, rgba(142, 142, 142, 0.02) 0%, rgba(142, 142, 142, 0.02) 20%,rgba(164, 164, 164, 0.02) 20%, rgba(164, 164, 164, 0.02) 40%,rgba(203, 203, 203, 0.02) 40%, rgba(203, 203, 203, 0.02) 60%,rgba(228, 228, 228, 0.02) 60%, rgba(228, 228, 228, 0.02) 80%,rgba(54, 54, 54, 0.02) 80%, rgba(54, 54, 54, 0.02) 100%),linear-gradient(314deg, rgba(187, 187, 187, 0.02) 0%, rgba(187, 187, 187, 0.02) 12.5%,rgba(170, 170, 170, 0.02) 12.5%, rgba(170, 170, 170, 0.02) 25%,rgba(214, 214, 214, 0.02) 25%, rgba(214, 214, 214, 0.02) 37.5%,rgba(187, 187, 187, 0.02) 37.5%, rgba(187, 187, 187, 0.02) 50%,rgba(190, 190, 190, 0.02) 50%, rgba(190, 190, 190, 0.02) 62.5%,rgba(6, 6, 6, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 75%,rgba(206, 206, 206, 0.02) 75%, rgba(206, 206, 206, 0.02) 87.5%,rgba(171, 171, 171, 0.02) 87.5%, rgba(171, 171, 171, 0.02) 100%),linear-gradient(300deg, rgba(243, 243, 243, 0.01) 0%, rgba(243, 243, 243, 0.01) 12.5%,rgba(209, 209, 209, 0.01) 12.5%, rgba(209, 209, 209, 0.01) 25%,rgba(179, 179, 179, 0.01) 25%, rgba(179, 179, 179, 0.01) 37.5%,rgba(3, 3, 3, 0.01) 37.5%, rgba(3, 3, 3, 0.01) 50%,rgba(211, 211, 211, 0.01) 50%, rgba(211, 211, 211, 0.01) 62.5%,rgba(151, 151, 151, 0.01) 62.5%, rgba(151, 151, 151, 0.01) 75%,rgba(16, 16, 16, 0.01) 75%, rgba(16, 16, 16, 0.01) 87.5%,rgba(242, 242, 242, 0.01) 87.5%, rgba(242, 242, 242, 0.01) 100%),linear-gradient(6deg, rgba(31, 31, 31, 0.02) 0%, rgba(31, 31, 31, 0.02) 20%,rgba(193, 193, 193, 0.02) 20%, rgba(193, 193, 193, 0.02) 40%,rgba(139, 139, 139, 0.02) 40%, rgba(139, 139, 139, 0.02) 60%,rgba(14, 14, 14, 0.02) 60%, rgba(14, 14, 14, 0.02) 80%,rgba(122, 122, 122, 0.02) 80%, rgba(122, 122, 122, 0.02) 100%),linear-gradient(279deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%,rgba(160, 160, 160, 0.02) 14.286%, rgba(160, 160, 160, 0.02) 28.572%,rgba(23, 23, 23, 0.02) 28.572%, rgba(23, 23, 23, 0.02) 42.858%,rgba(60, 60, 60, 0.02) 42.858%, rgba(60, 60, 60, 0.02) 57.144%,rgba(149, 149, 149, 0.02) 57.144%, rgba(149, 149, 149, 0.02) 71.42999999999999%,rgba(4, 4, 4, 0.02) 71.43%, rgba(4, 4, 4, 0.02) 85.71600000000001%,rgba(50, 50, 50, 0.02) 85.716%, rgba(50, 50, 50, 0.02) 100.002%),linear-gradient(109deg, rgba(124, 124, 124, 0.03) 0%, rgba(124, 124, 124, 0.03) 12.5%,rgba(61, 61, 61, 0.03) 12.5%, rgba(61, 61, 61, 0.03) 25%,rgba(187, 187, 187, 0.03) 25%, rgba(187, 187, 187, 0.03) 37.5%,rgba(207, 207, 207, 0.03) 37.5%, rgba(207, 207, 207, 0.03) 50%,rgba(206, 206, 206, 0.03) 50%, rgba(206, 206, 206, 0.03) 62.5%,rgba(118, 118, 118, 0.03) 62.5%, rgba(118, 118, 118, 0.03) 75%,rgba(89, 89, 89, 0.03) 75%, rgba(89, 89, 89, 0.03) 87.5%,rgba(96, 96, 96, 0.03) 87.5%, rgba(96, 96, 96, 0.03) 100%),linear-gradient(329deg, rgba(35, 35, 35, 0.02) 0%, rgba(35, 35, 35, 0.02) 20%,rgba(246, 246, 246, 0.02) 20%, rgba(246, 246, 246, 0.02) 40%,rgba(118, 118, 118, 0.02) 40%, rgba(118, 118, 118, 0.02) 60%,rgba(245, 245, 245, 0.02) 60%, rgba(245, 245, 245, 0.02) 80%,rgba(140, 140, 140, 0.02) 80%, rgba(140, 140, 140, 0.02) 100%),linear-gradient(90deg, hsl(314,0%,31%),hsl(314,0%,31%));
    color: #fff;
    }
    .contact .title::before {
    background: #fff;
    }
	.contact .title::after {
		content: "get in touch";
        background: #111;
	}

	.contact .contact-content .column {
		width: calc(50% - 30px);
	}

	.contact .contact-content .text {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.contact .contact-content .left p {
		text-align: justify;
	}

	.contact .contact-content .left .icons {
		margin: 10px 0;
	}

	.contact .contact-content .row {
		display: flex;
		height: 65px;
		align-items: center;
	}

	.contact .contact-content .row .info {
		margin-left: 30px;
	}

	.contact .contact-content .row i {
		font-size: 25px;
		color: #00cdac;
	}

	.contact .contact-content .info .head {
		font-weight: 500;
	}

	.contact .contact-content .info .sub-title {
		color: #00cdac;
	}

	.contact .right form .fields {
		display: flex;
	}

	.contact .right form .field,
	.contact .right form .fields .field {
		height: 45px;
		width: 100%;
		margin-bottom: 15px;
	}

	.contact .right form .textarea {
		height: 80px;
		width: 100%;
	}

	.contact .right form .name {
		margin-right: 10px;
	}

	.contact .right form .email {
		margin-left: 10px;
	}

	.contact .right form .field input,
	.contact .right form .textarea textarea {
		height: 100%;
		width: 100%;
		border: 1px solid lightgrey;
		border-radius: 6px;
		outline: none;
		padding: 0 15px;
		font-size: 17px;
		font-family: 'Poppins', sans-serif;
		transition: all 0.3s ease;
	}

	.contact .right form .field input:focus,
	.contact .right form .textarea textarea:focus {
		border-color: #b3b3b3;
	}

	.contact .right form .textarea textarea {
		padding-top: 10px;
		resize: none;
	}

	.contact .right form .button {
		height: 47px;
		width: 170px;
	}

	.contact .right form .button button {
		width: 100%;
		height: 100%;
		border: 2px solid #00cdac;
		background: #00cdac;
		color: #fff;
		outline: none;
		font-size: 20px;
		font-weight: 500;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.contact .right form .button button:hover {
		color: #00cdac;
		background: none;
	}

     /* footer section styling */
    .foot{
       
        padding-top: 45px;
        color: #fff;
        text-align: center;
    }
    .foot span a{
        color: #00cdac;
        text-decoration: none;
    }
    .foot span a:hover{
        text-decoration: underline;
    }
    .foot .social-links{
        margin-top: 20px;
        text-align: center;
    }
    .foot .social-links a{
        display: inline-block;
        height: 40px;
        width: 40px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        margin: 0 4px;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    .foot .social-links a i{
        line-height: 40px;

    }
    .foot .social-links a:after{
        border-radius: 50%;
         background-color: #00cdac;
    }

    .foot .social-links a:hover{
        color:#fff;
    }

/*-------------------------------------
     responsive media query start
-------------------------------------*/
	
    @media (max-width: 1300px) {
		.home .largest {
			margin-left: 0px;
		}
	}

	@media (max-width: 1104px) {
		.about .about-content .left img {
			height: 350px;
			width: 350px;
		}
	}

     @media (max-width: 1085px) {
        .home .home-content .paragraph-2 {
         font-size: 55px;
         }
     }

	@media (max-width: 991px) {
		.largest {
			padding: 0 50px;
		}
	}

	@media (max-width: 947px) {
		.menu-btn {
			display: block;
			z-index: 999;
		}

		.menu-btn i.active:before {
			content: "\f00d";
		}

		.navbar .menu {
			position: fixed;
			height: 100vh;
			width: 100%;
			left: -100%;
			top: 0;
            background: linear-gradient( 135deg,#928dab,#00cdac);
			text-align: center;
			padding-top: 80px;
			transition: all 0.3s ease;
		}

		.navbar .menu.active {
			left: 0;
		}

		.navbar .menu li {
			display: block;
		}

		.navbar .menu li a {
			display: inline-block;
			margin: 20px 0;
			font-size: 25px;
		}
        .navbar .menu li a:hover{
            color: #555;
        }
       
        .home .home-content {
            top: 68%;
            flex: 0 0 65%;
            max-width: 100%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .home .home-content .paragraph-1 {
            font-size: 27px;
            margin-top: 55px;
        }

        .home .home-content .paragraph-2 {
            font-size: 43px;
            font-weight: 400;
        }

        .home .home-content .paragraph-3 {
            font-size: 24px;
            margin: 8px 0;
        }
        .home .home-img {
            flex: 0 0 50%;
            max-width: 100%;
            /* padding: 0 15px; */
            position: absolute;
            top: -33%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .home .home-img .img-box {
            max-width: 450px;
            min-width: 250px;
            display: block;
            margin: auto;
            border-radius: 50%;
            padding: 13px;
        }
        
        .home .home-img .img-box img {
            width: 100%;
            border-radius: 50%;
            border: 5px solid transparent;
        }

		.home .home-content a {
			font-size: 23px;
			padding: 10px 30px;
		}

		.largest {
			max-width: 930px;
		}

		.about .about-content .column {
			width: 100%;
		}

		.about .about-content .left {
			display: flex;
			justify-content: center;
			margin: 0 auto 60px;
		}

		.about .about-content .right {
			flex: 100%;
		}

		.skills .skills-content .column,
		.contact .contact-content .column {
			width: 100%;
			margin-bottom: 35px;
		}

		.services .serv-content .card {
			width: calc(50% - 10px);
			margin-bottom: 20px;
		}
	}

    @media (max-width: 825px) {
        .home .home-content .paragraph-2 {
            font-size: 36px;
            margin-bottom: 18px;
        }
        .home .home-content .paragraph-3 {
            font-size: 20px;
        }
        
    }
	@media (max-width: 690px) {
        .menu-btn {
            color:black;
        }
        section.home {
            display: none;
        }

        .about .about-content .right .text{
             font-size: 22px;
        }
		.largest {
			padding: 0 23px;
		}
        .home .home-content .paragraph-1 {
            font-size: 22px;
        }
        .home .home-content .paragraph-2 {
            font-size: 26px;
            margin-bottom: 18px;
        }
        .home .home-content .paragraph-3 {
            font-size: 20px;
        }
		.home .home-content a {
			font-size: 20px;
		}
        .home .home-img .img-box {
            min-width: 220px;
        }
		.services .serv-content .card {
			width: 100%;
		}	
	}

	@media (max-width: 500px) {
		.home .home-content .paragraph-1 {
            font-size: 18px;
        }
        .home .home-content .paragraph-2 {
            font-size: 22px;
        }
        .home .home-content .paragraph-3 {
            font-size: 16px;
        }
        .home .home-img .img-box {
            min-width: 180px;
        }
        .home .home-content a {
            font-size: 16px;
        }
		.about .about-content .right .text,
		.skills .skills-content .left .text {
			font-size: 19px;
		}

		.contact .right form .fields {
			flex-direction: column;
		}

		.contact .right form .name,
		.contact .right form .email {
			margin: 0;
		}

		.scroll-up-btn {
			right: 15px;
			bottom: 15px;
			height: 38px;
			width: 35px;
			font-size: 23px;
			line-height: 38px;
		}
	}
    @media (max-width: 418px) {
        section {
            min-width: 300px;
        }
        .home .home-content .paragraph-1 {
            font-size: 18px;
            margin-top: 20px;
        }
        .home .home-content .paragraph-2 {
            font-size: 15px;
        }
        .home .home-content .paragraph-3 {
           font-size: 14px;
        }
        .home .home-img {
           padding: 0 8px;
           top: -50%;
        }
        .home .home-img .img-box {
            min-width: 140px;
            padding: 6px;
        }
        .home .home-img .img-box img {
            border: 0px solid transparent;
        }
    
        .home .home-content a {
            font-size: 14px;
        }
    }
    @media (max-width: 305px){
        .Mylogo{
            display: none;
        }
        }
        

    @media (max-width: 275px){
        .home .home-content {
            padding-bottom: 35px;
            bottom: -151px;
            position: relative;
            left: 69%;
            text-align: center;
        }
    }
   
	@media(max-width: 991px) {

		.portfolio-section .portfolio-item {
			flex: 0 0 50%;
			max-width: 50%;
		}

	@media(max-width: 767px) {

		.portfolio-popup .description,
		.portfolio-popup .info,
		.portfolio-section .portfolio-item,
		.about .skills .skill-item,
		.home .home-content {
			flex: 0 0 100%;
			max-width: 100%;
		}
		
		
		.about .timeline .timeline-item:nth-child(odd) {
			padding-right: 15px;
			text-align: left;
			padding-left: 75px;
		}

		.about .timeline .timeline-item:nth-child(even) {
			padding-left: 75px;
		}

		.about .timeline:before {
			left: 35px;
		}

		.about .timeline .timeline-item:nth-child(odd).icon {
			right: auto;
			left: -60px;
		}

		.about .timeline .timeline-item:nth-child(even).icon {
			left: -60px;
		}

		.about .timeline .timeline-item {
			margin-bottom: 40px;
		}

		.about .timeline .timeline-item:last-child {
			margin-bottom: 0;
		}

		.about .timeline .timeline-item:nth-child(odd).timeline-item-inner:before {
			left: 30px;
			right: auto;
		}

	}     
}