/*! ===> Global CSS Classes <=== */
*{
    scroll-padding-top: 74px;
}

:root {
    --montaserrat: "Montserrat", sans-serif;
    --nunito: "Nunito", sans-serif;
    --accent-color: #E65E77;
}

body {
    font-family: var(--nunito);
}

section {
    padding: 100px 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--montaserrat)
}

a {
    text-decoration: none;
    color: black;
}

img {
    width: 100%;
}

li {
    list-style-type: none;
}

.subtitle-width {
    max-width: 500px;
}

.subtitle-color {
    color: rgba(255, 255, 255, 0.75)
}

.accent-color {
    color: #E65E77;
}

/** ===> Fixed Btns <=== */

.gear-icon {
    top: 30%;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}

.scroll-top-btn {
    bottom: 5%;
    right: 1%;
    background-color: var(--accent-color);
    a{
        color: white;
    }
}


/** ===> Navbar <=== */

nav .nav-link {
    color: white;
    transition: 0.5s all;
}

nav .nav-link:hover {
    color: var(--accent-color);
}


nav .navbar-nav .nav-link.active {
    color: var(--accent-color);
}


/** ===> Header <=== */

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../Images/Home-bg.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .bouncing-btn {
        width: 30px;
        height: 50px;
        border-radius: 20px;
        border: 2px solid white;
        position: absolute;
        bottom: 10%;
        animation: bouncing 1s ease-out infinite;

        .btn-line {
            width: 4px;
            height: 15px;
            border-radius: 10px;
            background-color: white;
            margin: auto;
            transform: translateY(150%);
        }
    }
}

header h1::after {
    content: "|";
    animation: typing 15s ease-out infinite;
}

@keyframes typing {
    0% {
        content: "|";
    }

    1% {
        content: "|";
    }

    2% {
        content: "G|";
    }

    3% {
        content: "Gr|";
    }

    4% {
        content: "Gra|";
    }

    5% {
        content: "Grap|";
    }

    6% {
        content: "Graph|";
    }

    7% {
        content: "Graphi|";
    }

    8% {
        content: "Graphic|";
    }

    9% {
        content: "Graphic |";
    }

    10% {
        content: "Graphic D|";
    }

    11% {
        content: "Graphic De|";
    }

    12% {
        content: "Graphic Des|";
    }

    13% {
        content: "Graphic Desi|";
    }

    14% {
        content: "Graphic Desig|";
    }

    15% {
        content: "Graphic Design|";
    }

    16% {
        content: "Graphic Designe|";
    }

    17% {
        content: "Graphic Designer|";
    }

    18% {
        content: "Graphic Designer.|";
    }

    19% {
        content: "Graphic Designer.|";
    }

    20% {
        content: "Graphic Designer.|";
    }

    21% {
        content: "Graphic Designer|";
    }

    22% {
        content: "Graphic Designe|";
    }

    23% {
        content: "Graphic Design|";
    }

    24% {
        content: "Graphic Desig|";
    }

    25% {
        content: "Graphic Desi|";
    }

    26% {
        content: "Graphic Des|";
    }

    27% {
        content: "Graphic De|";
    }

    28% {
        content: "Graphic D|";
    }

    29% {
        content: "Graphic |";
    }

    30% {
        content: "Graphic|";
    }

    31% {
        content: "Graphi|";
    }

    32% {
        content: "Graph|";
    }

    33% {
        content: "Grap|";
    }

    34% {
        content: "Gra|";
    }

    35% {
        content: "Gr|";
    }

    36% {
        content: "G|";
    }

    37% {
        content: "|";
    }

    38% {
        content: "|";
    }

    39% {
        content: "|";
    }

    40% {
        content: "P|";
    }

    41% {
        content: "Ph|";
    }

    42% {
        content: "Pho|";
    }

    43% {
        content: "Phot|";
    }

    44% {
        content: "Photo|";
    }

    45% {
        content: "Photog|";
    }

    46% {
        content: "Photogr|";
    }

    47% {
        content: "Photogra|";
    }

    48% {
        content: "Photograp|";
    }

    49% {
        content: "Photograph|";
    }

    50% {
        content: "Photographe|";
    }

    51% {
        content: "Photographer|";
    }

    52% {
        content: "Photographer.|";
    }

    53% {
        content: "Photographer.|";
    }

    54% {
        content: "Photographer.|";
    }

    55% {
        content: "Photographer|";
    }

    56% {
        content: "Photographe|";
    }

    57% {
        content: "Photograph|";
    }

    58% {
        content: "Photograp|";
    }

    59% {
        content: "Photogra|";
    }

    60% {
        content: "Photogr|";
    }

    61% {
        content: "Photog|";
    }

    62% {
        content: "Photo|";
    }

    63% {
        content: "Phot|";
    }

    64% {
        content: "Pho|";
    }

    65% {
        content: "Ph|";
    }

    66% {
        content: "P|";
    }

    67% {
        content: "|";
    }

    68% {
        content: "|";
    }

    69% {
        content: "|";
    }

    70% {
        content: "K|";
    }

    71% {
        content: "Ke|";
    }

    72% {
        content: "Ker|";
    }

    73% {
        content: "Kerr|";
    }

    74% {
        content: "Kerri|";
    }

    75% {
        content: "Kerri |";
    }

    76% {
        content: "Kerri D|";
    }

    77% {
        content: "Kerri De|";
    }

    78% {
        content: "Kerri Deo|";
    }

    79% {
        content: "Kerri Deo.|";
    }

    80% {
        content: "Kerri Deo.|";
    }

    81% {
        content: "Kerri Deo.|";
    }

    82% {
        content: "Kerri Deo|";
    }

    83% {
        content: "Kerri De|";
    }

    84% {
        content: "Kerri D|";
    }

    85% {
        content: "Kerri |";
    }

    86% {
        content: "Kerri|";
    }

    87% {
        content: "Kerr|";
    }

    88% {
        content: "Ker|";
    }

    89% {
        content: "Ke|";
    }

    90% {
        content: "K|";
    }

    91% {
        content: "|";
    }

    92% {
        content: "|";
    }

    93% {
        content: "|";
    }

    94% {
        content: "|";
    }

    95% {
        content: "|";
    }
}

@keyframes bouncing {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-25px);
    }

    60% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}


/** ===> About Section <=== */

.about-icons .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid gray;
    transition: 0.3s all;
    cursor: pointer;
}

.about-icons .social-icon:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/** ===> Services Section <=== */

.service-inner h5 {
    position: relative;
    padding-bottom: 15px;
}

.service-inner h5::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    background-color: var(--accent-color);
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    transition: 0.5s all;
}


.service-inner:hover h5::after {
    width: 100px;
}

/** ===> Client Section <=== */


.carousel-indicators [data-bs-target] {
    width: 20px;
    height: 5px;
    border: unset;
    border-radius: 50px;
    background-color: var(--accent-color);
}

.carousel-indicators .active {
    width: 40px;
}

/** ===> Portfolio Section <=== */

.nav-pills .nav-link {
    color: black;
    font-size: 14px;
    border-radius: 20px;
    transition: 0.5s all;
}

.nav-pills .nav-link:hover {
    color: white;
    background-color: var(--accent-color);
}

.nav-pills .nav-link.active {
    background-color: var(--accent-color);
}

.portfolio-section .layer {
    opacity: 0;
    transition: 0.5s all;

    .layer-text {
        transform: translateY(100%);
        transition: 0.5s all;
    }
}

.portfolio-section .inner:hover .layer {
    opacity: 1;

    .layer-text {
        transform: translateY(0);
    }
}

.portfolio-section .inner img {
    transition: 0.5s all;
}

.portfolio-section .inner:hover img {
    scale: 1.1;
}

/** ===> Contact Section <=== */


.contact-section .btn {
    background-color: var(--accent-color);
    color: white;
    font-size: 14px;
}

.contact-section .form-control:focus {
    box-shadow: unset;
    border: 2px solid var(--accent-color);
}