:root{
    --main-font: 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    --main-color:#0078FF;
}
/* Home section */
section.home-section{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../imges/hero-bg.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
.my-navbar li{
    padding-left: 25px;
}
.my-navbar{
    background-color: rgba(0, 0, 0, 0.9);
}
.my-navbar>.container>a{
    font-size: 28px;
    font-family: var(--main-font);
    text-transform: capitalize;
}
.my-navbar a:hover,
.my-navbar .navbar-brand:focus, .navbar-brand:hover,
.my-navbar .nav-link:focus, .nav-link:hover,
.my-navbar .navbar-nav .nav-link.active, .navbar-nav .nav-link.show
{
    color: white;
}
.my-navbar a{
    color: white;
    text-transform: uppercase;
    font-family: var(--main-font);
    font-weight: 600;
    position: relative;
    width: fit-content;
}
.my-navbar a::before{
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: white;
    transition: all 1s;
}
.my-navbar .navbar-nav li:nth-child(1) a::before{
    width: 100%;
}
.my-navbar li:hover a::before{
    width: 100%;
}
.my-navbar .dropdown li a {
    color: black;
}
.my-navbar .navbar-toggler-icon{
    background-image: none;
    color: white;
}
.navbar-toggler:focus{
    box-shadow: none;
}
/* end nav bar */
/* Header section */
.header-content>h1{
    font-size: 48px;
    color: white;
    position: relative;
    text-align: center;
}
.header-content{
    position: relative;
}
.header-content>span{
    opacity: 0;
    width: 5px;
    height: 26px;
    padding: 2px;
    border-left: 3px solid white;
    font-size: 24px;
    position: absolute;
    top: 104%;
    left: 65%;
    animation: header-opacity 20s infinite;
}
.header-content>h1::after{
    content: "D";
    text-wrap: nowrap;
    font-size: 24px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    animation: header-changes 20s infinite;
}

/* End of Header section */


/* End of home section */
.about-section .card-container 
.card-body p span{
    font-family: var(--main-font);
    font-size:17.6px;
    font-weight: 600;
}
.skills-container>.skill-header>h2{
    font-size: 17.6px;
}
/* Article Section*/
.article-header>h2{
    font-family: var(--main-font);
    font-size: 32px;
    font-weight: 500;
    width: fit-content;
    margin: 0;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.article-header>h2::after{
    margin-top: 20px;
    content: "";
    position: absolute;
    width: 68%;
    height: 3px;
    background-color: var(--main-color);
    left: 0;
    bottom: 0;
}
.figure-1,
.figure-2,
.figure-3{
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    color: #4E4E4E;
}

.large-screen{
    width: 100%;
}
.about-section .card-container
.figure-large{
    width: 50%;
}
/* End of About section */
/* ******************** */

/* Services-section */
.services-header-container>h2{
    font-family: var(--main-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 57.6px;
}
.services-header-container>p{
    position: relative;
    font-family: var(--main-font);
    font-weight: 400;
    color: #212529;
    padding-bottom: 15px;
}
.services-header-container>p::after{
    content: "";
    position: absolute;
    width: 10%;
    height: 4px;
    background-color: var(--main-color);
    top: 110%;
    left: 50%;
    transform: translateX(-50%)
}

.figure-container{
    width: fit-content;
    border-radius: 50%;
    border: 7px solid var(--main-color);
    transition: all 0.5s;
}
.tracks-card-container>.card{
    box-shadow: 0  0px 15px 1px rgba(0, 0, 0, 0.1);
}
.card-header>h3{
    font-family: var(--main-font);
    font-size: 22.4px;
    font-weight: 500;
    text-transform:uppercase;
}
.card-body text-center>p{
    font-family: var(--main-font);
    line-height: 24px;
    font-weight: 400;
    color: #4E4E4E;
}
.services-tracks>
.tracks-card-container>.card:hover .figure-container{
    background-color: var(--main-color);
    border:7px solid #cde1f8;
}
.services-tracks>
.tracks-card-container>
.card:hover .figure-container>i{
    color: white;
}
/*End of Services-section */
/* ********************** */
/* Years -Experience-section */
.years-experience{
    background-image: linear-gradient(rgba(0, 120, 255,0.7),rgba(0, 120,255,0.7)),url(../imges/counters-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
}
.years-experience-container>.card{
    background-color: transparent;
}
.years-experience-container>.card>figure{
    width: fit-content;
}
.years-experience-container>.card .card-logo{
    margin: 0;
}
.years-experience-container>.card .card-logo{
    border-radius: 50%;
    border: 8px solid #cde1f8;
}
.years-experience-container>.card .card-logo>i{
    padding: 30px;
    color: white;
}
.years-experience-container>.card .card-logo>i.fa-user-group{
    padding: 37px 35px;
    transform: scale(1.7);
}
.years-experience-container>.card .card-body>span{
    font-size: 32px;
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 48px;
    color: white;
} 
.years-experience-container>.card .card-body>p{
    font-family: var(--main-font);
    font-weight: 400;
    text-transform: capitalize;
    margin-top: 5px;
    color: white;
}
/* end of Years -Experience-section */
/* ******************************** */
/* portfolio-section */
.portfolio-header-container>h2{
    font-family: var(--main-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 57.6px;
    margin-bottom: 5px;
}
.portfolio-header-container>p{
    font-family: var(--main-font);
    line-height: 24px;
    font-weight: 400;
    color: #4E4E4E;
    position: relative;
    margin: 10px 0;
    padding-bottom: 20px;
}
.portfolio-header-container>p::after{
    content: " ";
    position: absolute;
    width: 10%;
    height: 5px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-color);
    
}
.portfolio-cards .card{
    box-shadow: 0 5px 2px 1px rgba(0,0,0,0.1);
}
.portfolio-cards .card>figure{
    overflow: hidden;
}
.portfolio-cards .card>figure>img{
    transition: all 1s;
}
.portfolio-cards .card>figure>img:hover{
    transform: scale(1.3);
}
.portfolio-cards .card-body>a{
    background-color: transparent;
    border-radius: 50%;
    border: 4px solid var(--main-color);
}
.portfolio-cards .card-body>a>i{
    color: var(--main-color);
    transform: scale(1.6);
}
.portfolio-cards .card-body>p>span{
    color: var(--main-color);
}
.portfolio-section-container .btn-close{
    background-image: none;
    background: transparent;
    border: 0px solid transparent;
}
.portfolio-section-container .btn-close>i{
    color: white;
}
.portfolio-section-container 
.modal-header .btn-close{
    margin: 0;
    margin-left: auto;
    padding: 0;
}
.portfolio-section-container
button, input, optgroup, select, textarea{
    line-height: 0;
}
.portfolio-section-modals
.modal{
--bs-modal-bg:none;
--bs-modal-border-color:none;
} 
/*End of portfolio-section */
/* ****************** */
/* Carousel Section */
.carousel-section{
    background-image: linear-gradient(rgba(0, 120, 255,0.7),rgba(0, 120, 255,0.7)),url(../imges/overlay-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.carousel-content>figure>img{
    border-radius: 50%;
}
.carousel-section .carousel>
.carousel-control-next.next,
.carousel-control-prev.prev{
    top: 100%;
    bottom: 0;
    width: 90%;
}
.carousel-section .carousel
.carousel-control-next-icon.next-icon,
.carousel-control-prev-icon.prev-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    background-image: none;
}

.carousel-section figcaption>h2{
    font-size: 22.4px;
    font-weight: 600;
    margin: 10px 0;
    color: white;
}
.carousel-section figcaption>p{
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    color: white;
}
.carousel-img2{
    width: 34%;
}
.carousel-change-w{
    width: 50%;
}
/* End of Carousel Section */
/* *********************** */
/* Blog-section */
.blog-header-container>h2{
    font-family: var(--main-font);
    font-size: 48px;
    font-weight: 700;
}
.blog-header-container>p{
    color: #4E4E4E;
    position: relative;
    padding-bottom: 20px;
    margin: 10px 0;
}
.blog-header-container>p::after{
    content: "";
    position: absolute;
    width: 10%;
    height: 6px;
    background-color: var(--main-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.blog-cards .card-body>span{
    background-color: var(--main-color);
    transform: translateY(-50%);
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11.2px;
}
.card-footer-img>figure{
    width: 20%;
}
.card-footer-img>figure>img{
    border-radius: 50%;
}
/*End of Blog-section */
/* *********************** */
/*  Get in touch section */
.get-in-touch-form-section{
    background-image: linear-gradient(rgba(0, 120, 255,1),rgba(0, 120, 255,1)),url(../imges/overlay-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 5px 2px 2px rgba(0, 0, 0, 0.3);
}
.get-in-form{
    box-shadow:0 0px 5px 1px rgba(0,0,0,0.1);
}
.get-in-form input{
    border: 1px solid rgba(128, 128, 128,0.2);
}
.get-in-form textarea{
    border: 1px solid rgba(128, 128, 128,0.2);
}
.form-button>button{
    background-color: #0062d3;
}
.form-header>h2,
.touch-header>h2{
    position: relative;
    font-size: 32px;
    padding-bottom: 15px;
}
.form-header>h2::after,
.touch-header>h2::after
{
    content: "";
    position: absolute;
    width: 30%;
    height: 4px;
    left: 0;
    bottom: 0;
    background-color: var(--main-color);
}
.touch-text>p{
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    color: #4E4E4E;
}
.touch-cotact-us i{
    color: var(--main-color);
}
.icon-2,
.icon-1,
.icon-3,
.icon-4{
    border-radius: 50%;
    border: 3px solid var(--main-color);
}
/* End of Get in touch section */
/* *************************** */
/* Footer-section */
.footer-section{
    position: relative;
    background-color: var(--main-color);
}
.footer-to-home{
    position: fixed;
    bottom: 2%;
    right: 2%;
    border-radius: 50%;
    background-color: var(--main-color);
}
.footer-to-home i{
    padding: 10px 12px;
    color: white;
}
/*End of Footer-section */




@keyframes header-opacity {
    8.9%{opacity: 0;}
    9%{opacity: 0;
        left: 65%;
    }
    10%{opacity: 1;
        left: 65%;
    }
    11%{opacity: 0;
        left: 65%;
    }
    12%{opacity: 1;
        left: 65%;
    }
    13%{opacity: 0;
        left: 65%;
    }
    14%{opacity: 1;
        left: 65%;
    }
    15%{opacity: 0;
        left: 65%;
    }
    15.1%{opacity: 0;}
    15.1%{opacity: 0;}
    16%{opacity: 0;}

    34%{opacity: 0;
        left: 65%;
    }
    35%{opacity: 1;
        left: 65%;
    }
    36%{opacity: 0;
        left: 65%;
    }
    37%{opacity: 1;
        left: 65%;
    }
    38%{opacity: 0;
        left: 65%;
    }
    39%{opacity: 1;
        left: 65%;
    }
    40%{opacity: 0;
        left: 65%;
    }
    40.1%{opacity: 0;
        left: 65%;
    }
    41%{opacity: 0;}
    
    60%{opacity: 0;
        left: 70%;}
    61%{opacity: 1;
        left: 70%;}
    62%{opacity: 0;
        left: 70%;}
    63%{opacity: 1;
        left: 70%;}
    64%{opacity: 0;
        left: 70%;}
    65%{opacity: 1;
        left: 70%;}
    66%{opacity: 0;
        left: 70%;}
    66.1%{opacity: 0;}
    67%{opacity: 0;}
    83%{opacity: 0;
        left: 63%;
    }
    84%{opacity: 1;
        left: 63%;
    }
    85%{opacity: 0;
        left: 63%;
    }
    86%{opacity: 1;
        left: 63%;
    }
    87%{opacity: 0;
        left: 63%;
    }
    88%{opacity: 1;
        left: 63%;
    }
    89%{opacity: 0;
        left: 63%;
    }
    89.5%{opacity: 0;
        left: 63%;
    }
    90%{opacity: 0;}
}


@keyframes header-changes {
/* Developer */
0%    { content: "D|"; }
1%    { content: "De|"; }
2%    { content: "Dev|"; }
3%    { content: "Deve|"; }
4%    { content: "Devel|"; }
5%    { content: "Develo|"; }
6%    { content: "Develop|"; }
7%    { content: "Develope|"; }
8%    { content: "Developer"; }
9%    { content: "Developer"; }
10%   { content: "Developer"; }
11%   { content: "Developer"; }
12%   { content: "Developer"; }
13%   { content: "Developer"; }
14%   { content: "Developer"; }
15%   { content: "Developer"; }
16%   { content: "Develope|"; }
17%   { content: "Develop|"; }
18%   { content: "Develo|"; }
19%   { content: "Devel|"; }
20%   { content: "Deve|"; }
21%   { content: "Dev|"; }
22%   { content: "De|"; }
23%   { content: "D|"; }
/* Freelancer */
24%   { content: "F|"; }
25%   { content: "Fr|"; }
26%   { content: "Fre|"; }
27%   { content: "Free|"; }
28%   { content: "Freel|"; }
29%   { content: "Freela|"; }
30%   { content: "Freelan|"; }
31%   { content: "Freelanc|"; }
32%   { content: "Freelance|"; }
33%   { content: "Freelancer"; }
34%   { content: "Freelancer "; }
35%   { content: "Freelancer "; }
36%   { content: "Freelancer "; }
37%   { content: "Freelancer "; }
38%   { content: "Freelancer "; }
39%   { content: "Freelancer "; }
40%   { content: "Freelancer "; }
41%   { content: "Freelance|"; }
42%   { content: "Freelanc|"; }
43%   { content: "Freelan|"; }
44%   { content: "Freela|"; }
45%   { content: "Freel|"; }
46%   { content: "Free|"; }
47%   { content: "Fre|"; }
48%   { content: "Fr|"; }
49%   { content: "F|"; }
50%   { content: "P|"; }
51%   { content: "Ph|"; }
52%   { content: "Pho|"; }
53%   { content: "Phot|"; }
54%   { content: "Photo|"; }
55%   { content: "Photog|"; }
56%   { content: "Photogr|"; }
57%   { content: "Photogra|"; }
58%   { content: "Photograph|"; }
59%   { content: "Photographe|"; }
60%   { content: "Photographer|"; }
61%   { content: "Photographer"; }
62%   { content: "Photographer"; }
63%   { content: "Photographer"; }
64%   { content: "Photographer"; }
65%   { content: "Photographer"; }
66%   { content: "Photographer"; }
67%   { content: "Photographe|"; }
68%   { content: "Photograph|"; }
69%   { content: "Photogra|"; }
70%   { content: "Photogr|"; }
71%   { content: "Photog|"; }
72%   { content: "Photo|"; }
73%   { content: "Phot|"; }
74%   { content: "Pho|"; }
75%   { content: "Ph|"; }
/* Designer */
76%   { content: "D|"; }
77%   { content: "De|"; }
78%   { content: "Des|"; }
79%   { content: "Desi|"; }
80%   { content: "Desig|"; }
81%   { content: "Design|"; }
82%   { content: "Designe|"; }
83%   { content: "Designer|"; }
84%   { content: "Designer"; }
85%   { content: "Designer"; }
86%   { content: "Designer"; }
87%   { content: "Designer"; }
88%   { content: "Designer"; }
89%   { content: "Designer"; }


90%   { content: "Designe|"; }
91%   { content: "Design|"; }
92%   { content: "Desig|"; }
93%   { content: "Desi|"; }
94%   { content: "Des|"; }
95%   { content: "De|"; }
96%   { content: "D|"; }


}