@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&display=swap');

:root {
    --color1: #0076cb;
    --color2: #f58731;
    --color3: #034d83;
}

* {
        font-family: "Outfit", serif;
        .mulish{
            font-family: "Mulish",serif;
        }
        .container {
            max-width: 1420px !important;
            padding: 0px;
        }
        .high-l {
            color: rgb(245, 135, 49);
        }
    }
    
.navbar-brand{
    width: 50%;
}

.navbar-toggler {
    height: 50px;
    width: 50px;
    background: rgb(245, 247, 249) !important;
    border-radius: 100% !important;
}

.btn {
    color: rgb(255, 255, 255) !important;
    padding: 8px 30px !important;
    background: var(--color1) !important;
    border-radius: 65px !important;
    border-width: initial !important;
    border-style: none !important;
    border-color: initial !important;
    border-image: initial !important;
}
.btn-2 {
    fill: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    box-shadow: 0px 6px 15px -3px var(--color1);
    border-radius: 65px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 8px 30px !important;
    background: var(--color1) !important;
}

.btn-3 {
    color: var(--color1) !important;
    padding: 8px 30px !important;
    background: transparent !important;
    border-radius: 65px !important;
    border: 1px solid var(--color1) !important;
}

.hero {
    background-color: rgb(246, 243, 238);
    background-blend-mode: multiply;
    .m-title {
        font-size: 28px;
        line-height: 40px;
        & .prosper {
            color: rgb(245, 135, 49);
        }
    }
    .s-title {
        font-size: 20px;
    }
}

.title {
    font-size: 26px;
    line-height: 37px;
    font-weight: 700;
}

.services {
    background-color: rgb(34, 34, 34);
    padding: 70px;
}

.srvice-c {
    & .d-grid {
        grid-template-columns: 1fr;
        color: rgb(255, 255, 255);
    }
    #ser {
        border-width: 1px;
        border-style: solid;
        border-color: rgb(121, 120, 120);
        border-image: initial;
        padding: 15px 20px;
    }
    & .h-btn {
        display: none;
    }
    & .img-fluid {
        width: 50px;
    }
    .num {
        background-color: rgb(121, 120, 120);
        margin-right: 5px;
        padding: 8px;
        border-radius: 100%;
    }
}

footer {
    background-color: rgb(34, 34, 34);
    color: rgb(255, 255, 255);

    .f-text {
        font-size: 20px !important;
        width: 100%;
    }
    .icon {
        height: 50px;
        width: 50px;
        margin-right: 5px;
        border-radius: 100%;
        background: rgb(255, 255, 255);
        img {
            width: 10%;
        }
    }
    .d-grid {
        padding-top: 50px;
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}

#ser:hover {
    cursor: pointer;
    background-color: var(--color3);
    transition: 300ms;
    .h-btn {
        display: block;
    }
}




/* desktop */

@media screen and (min-width: 768px) {
    .navbar-brand {
        width: 20%;
        img {
            width: 90%;
        }
    }
    .hero {
        .m-title {
            font-size: 70px;
            line-height: 95px;
            width: 65%;
        }
    }
    .title {
        font-size: 56px;
        line-height: 80px;
        font-weight: 600;
    }
    .full-stack .d-grid {
        grid-template-columns: 1fr 1fr;
    }
    .srvice-c {
        & .d-grid {
            grid-template-columns: 1fr 1fr;
            color: rgb(255, 255, 255);
        }
    }

    footer {
        background-color: rgb(34, 34, 34);
        color: rgb(255, 255, 255);
    
        .f-text {
            font-size: 25px !important;
            width: 70%;
        }
        .icon {
            height: 50px;
            width: 50px;
            margin-right: 5px;
            border-radius: 100%;
            background: rgb(255, 255, 255);
            & img {
                width: 15%;
            }
        }
        & .d-grid {
            padding-top: 50px;
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
}