*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
:root{
    --bg-home-rgba:rgba(0,0,0,0.5);
    --progress-bar-bg:#cde1f8;
    --main-color:rgb(0, 120, 255);
    --progress-height:0.7rem;
    --section-color:#1e1e1e;
    --layer:rgba(0,120,255,0.7);
    --layer-2:rgba(0,120,255,0.75);
    --white-color:#fff;
    --font-size-rem:0.9rem;
    --color-4e4e4e:#4e4e4e;
    --font-weight-600:600;
    --font-weight-500:500;
}
html{
    font-size: 16px;
    scroll-behavior: smooth;
}
/* start navbar */
.navb .nav-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0.15rem;
    bottom: 0;
    left:1rem;
    background-color: #fff;
    visibility: hidden;
    transition: all 0.4s ease-in-out; 
}
.navb .nav-link:hover:before,.navb .active:before{
    visibility: visible;
    width: 50%;
}
.dropdown-content,.dropend-content{
    display: none;
    z-index: 1;
}
.dropdown-content a {
    font-size: var(--font-size-rem);
    color: var(--color-4e4e4e);
}
.dropdown-content a:hover{
    color:var(--main-color);
    background-color: var(--white-color)
} 
.dropdown-hover:hover .dropdown-content,.dropend:hover .dropend-content {
    display: block;
}
.dropend {
    display: inline-block;
}
/* end navbar */
/* start home page */
#home,.sec-4,.sec-6,.contact-sec{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.home-title{
    font-weight:var(--font-weight-600);
    font-size: 4.5rem;
}
.rgba-bg{
    background-color:var(--bg-home-rgba)
}
.home-layer h2::after {
    content: "|";
    animation-name: typing;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
/* keyframes home page */
@keyframes typing{
    0%{content:"D|"}
    2%{content:"De|"}
    4%{content:"Des|"}
    6%{content:"Desi|"}
    8%{content:"Desig|"}
    10%{content:"Design|"}
    12%{content:"Designe|"}
    14%{content:"Designer|"}
    14.5%{content:"Designe|"}
    15%{content:"Design|"}
    15.5%{content:"Desig|"}
    16%{content:"Desi|"}
    16.5%{content:"Des|"}
    17%{content:"De|"}
    19%{content:"Dev|"}
    21%{content:"Deve|"}
    23%{content:"Devel|"}
    25%{content:"Develo|"}
    27%{content:"Develop|"}
    29%{content:"Develope|"}
    30%{content:"Developer|"}
    30.5%{content:"Develope|"}
    31%{content:"Develop|"}
    31.5%{content:"Develo|"}
    32%{content:"Devel|"}
    32.5%{content:"Deve|"}
    33%{content:"Dev|"}
    33.5%{content:"De|"}
    34%{content:"D|"}
    34.5%{content:"|"}
    36.5%{content:"F|"}
    38.5%{content:"Fr|"}
    40.5%{content:"Fre|"}
    42.5%{content:"Free|"}
    44.5%{content:"Freel|"}
    46.5%{content:"Freela|"}
    48.5%{content:"Freelan|"}
    50.5%{content:"Freelanc|"}
    52.5%{content:"Freelance|"}
    54.5%{content:"Freelancer|"}
    55.5%{content:"Freelance|"}
    56.5%{content:"Freelanc|"}
    57.5%{content:"Freelan|"}
    58.5%{content:"Freela|"}
    59.5%{content:"Freel|"}
    60.5%{content:"Free|"}
    61.5%{content:"Fre|"}
    62.5%{content:"Fr|"}
    63.5%{content:"F|"}
    64.5%{content:"|"}
    66.5%{content:"P|"}
    68.5%{content:"Ph|"}
    70.5%{content:"Pho|"}
    72.5%{content:"Phot|"}
    74.5%{content:"Photo|"}
    76.5%{content:"Photog|"}
    78.5%{content:"Photogr|"}
    80.5%{content:"Photogra|"}
    82.5%{content:"Photograp|"}
    84.5%{content:"Photograph|"}
    86.5%{content:"Photographe|"}
    88.5%{content:"Photographer|"}
    89.5%{content:"Photographe|"}
    90.5%{content:"Photograph|"}
    91.5%{content:"Photograp|"}
    92.5%{content:"Photogra|"}
    93.5%{content:"Photogr|"}
    94.5%{content:"Photog|"}
    95.5%{content:"Photo|"}
    96.5%{content:"Phot|"}
    97.5%{content:"Pho|"}
    98.5%{content:"Ph|"}
    98.5%{content:"P|"}
    99.5%{content:"|"}
    100%{content:"|"}
}
/* mediaQuries navbar and home title */
@media screen and (max-width:992px){
.home-title{
    font-weight: var(--font-weight-500);
    font-size: 3.5rem
}
.navb .nav-link:hover:before ,.navb .active:before {
    visibility: hidden;
}
.hover-bg-white{
    background-color: var(--white-color);
    height: 88vh;
}
.black-text,.bi-chevron-down {
    color:var(--section-color);
    font-size: var(--font-size-rem);
    padding-left:1rem;
    font-weight: var(--font-weight-600);
}
.black-text:hover{
    color: var(--main-color);
}
.dropend-content{
    left:100%;
    top:0;
}
} 
/* end home page */
/* start ABOUT section */
.border-shadow{
    box-shadow: 0 0.06rem 0.25rem 0.06rem rgba(0,0,0,0.2)
}
.item-sec2{
    font-weight: var(--font-weight-600);
    color: var(--section-color);
    font-size: 1.1rem;
}
.img-item{
    width:80%;
}
.h2-border::before{
    content: "";
    position: absolute;
    height: 0.2rem;
    width: 6.5rem;
    bottom: -0.6rem;
    background-color: var(--main-color);
}
.text-color{
    color: var(--color-4e4e4e)
}
.progress-bar{
    background-color: var(--progress-bar-bg);
}
.bg-progress,.progress-bar{
    height:var(--progress-height);
}
@media screen and (max-width:600px){
    .img-item{
        width:45%;
    }  
}
/* end ABOUT section */
/* start SERVICES section */
.sec3-header{
    font-size: 3rem;
    color: var(--section-color);
    font-weight: var(--font-weight-500);
}
.h3-line{
    width: 2.5rem;
    height: 0.3rem;
    background-color: var(--main-color);
}
.item-sec3 h2{
    font-weight: var(--font-weight-500);
    font-size: 1.4rem;
    color: var(--section-color);
}
.icon-border{
    height: 100px;
    width: 100px;
    box-shadow: 0 0 0 0.6rem var(--main-color);
}
.icon-border,.icon-border-1{
    font-size: 2rem;
}
.item-sec3:hover .icon-border{
    background-color: var(--main-color);
    transition: all 0.5s ease;
}
.item-sec3:hover .icon-border,.icon-border-1{
    box-shadow: 0 0 0 0.6rem var(--progress-bar-bg);
    color:var(--white-color);
}
/* end SERVICES section */
/* start SECTION-4 */
.icon-border-1{
    height: 60px;
    width: 60px;
}
.layer{
    background-color: var(--layer);
}
.item-sec4 h2{
    font-weight: var(--font-weight-500);
    color: var(--section-color);
}
/* end SECTION-4 */
/* start PORTFOLIO section */
.item-sec5:hover img{
    transform: scale(1.3);
    transition: all 1s;
}
.sec5-font-1{
    color: var(--main-color);
}
.sec5-font-1,.sec5-font-2{
    font-size: 0.8rem; 
}
.sec5-font-2{
    color: var(--color-4e4e4e)
}
.border-shadow-2{
    box-shadow: 0 0.9rem 0.5rem -0.6rem rgba(0,0,0,0.1);
}
/* end PORTFOLIO section */
/* start SECTION-6 */
.border-shadow-3{
    box-shadow: 0 0 1rem 0.05rem rgba(0,0,0,0.2) inset;
}
.carousel-indicators [data-bs-target] {
    width:0.9rem;
    height:0.9rem;
    border-radius: 50%;
}
/* end SECTION-6 */
/* start BLOG section */
.black-text-1 {
    color:var(--section-color);
    transition: all 0.6s ease-in-out;
}
.black-text-1:hover{
color: var(--main-color);
}
.image-width img{
    width:22%;
}
.main-color{
    background-color:var(--main-color);
}
/* end BLOG section */
/* start CONTACT section */
.font-input{
    font-size: var(--font-size-rem);
}
.btn{
    font-size: 1.2rem;
}
.btn:hover{
    box-shadow: 0 0 0.2rem 0.4rem var(--progress-bar-bg); 
    opacity: 0.6;
    border:none;
    transition: all 0.5s ease-in-out;
}
.icon-border-2{
    height: 40px;
    width: 40px;
    box-shadow: 0 0 0 0.15rem var(--main-color);
}
.icon-border-2:hover{
    box-shadow: 0 0 0 0.15rem var(--progress-bar-bg);
    color:var(--white-color);
    background-color: var(--main-color);
    transition: all 0.5s ease-in-out;
}
/* end CONTACT section */
/* footer */
.layer-2{
    background-color: var(--layer-2);
}
/* end footer */

