@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');

:root {
        --blue: #494eff;
        --indigo: #6610f2;
        --purple: #710bb8;
        --pink: #e84d85;
        --red: #e53344;
        --orange: #ff8b2b;
        --yellow: #edd101;
        --green: #329f56;
        --teal: #22c9a6;
        --cyan: #0a9cb4;
        --white: #fff;
        --gray: hsla(0, 0%, 100%, 0.6);
        --gray-dark: hsla(0, 0%, 100%, 0.8);
        --primary: #fff;

        --margin-sides: 5rem;
        --header-ht: 5rem;
}

* {
        margin: 0;
        padding: 0;

        color: #fff;

        text-decoration: none;
        text-transform: none;
        list-style: none;
}

html {
        scroll-behavior: smooth;
}

body {
        width: 100%;
        background-color: #000;
        font-family: 'Montserrat', sans-serif;
        overflow: hidden;
}

/* ------------------------------------- header ------------------------------ */
header {
        padding: 1rem 0;
        margin: 0 var(--margin-sides);
        position: fixed;
        height: var(--header-ht);
        width: 100%;
        display: flex;
        justify-content: start;
}

.logo {
        width: 3rem;
        height: 3rem;
        background-image: url('/assets/images/ms-logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;

        cursor: pointer;
}

/* ----------------------- nav bar ------------------------ */
nav {
        width: 25%;
        position: fixed;
        top: 5rem;
        left: 75%;
        right: auto;

        display: flex;
        flex-direction: row;
}

nav>ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
}

nav>ul>li {
        padding-left: 2rem;
        padding-top: .375rem;
        padding-bottom: .375rem;
        font-size: 17.5px;
        font-size: 1.25rem;
        font-weight: 700;
}

nav>ul>li>a {
        color: var(--primary);

        padding: 0.375rem 0 0.375rem 2rem;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
}

.slno {
        margin-right: 0.5rem;
        width: 1.75rem;
        font-weight: 400;
        font-size: 1rem;
}

.mail-id a:hover {
        cursor: pointer;
        text-decoration: underline;
}

.mail-id a {
        text-transform: none;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
}

/* --------------------------------- common section and container -------------------------- */
.container {
        margin: 0 var(--margin-sides);
}

.section {
        width: 75%;
        padding-top: calc(var(--header-ht));
        height: calc(100vh - var(--header-ht));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

h2 {
        font-size: 4rem;
        margin-bottom: 4rem;
        text-transform: uppercase;
}

.section-footer {
        margin: 1.5rem 0;
}

.section-next {
        display: inline-block
}

.section-next:hover {
        color: #fff
}

.section-next:hover .section-next-icon {
        -webkit-animation: next-icon-bounce .365s ease-in-out 2;
        animation: next-icon-bounce .365s ease-in-out 2
}

@keyframes next-icon-bounce {
        0% {
                -webkit-transform: translate(0);
                transform: translate(0)
        }

        50% {
                -webkit-transform: translateY(5px);
                transform: translateY(5px)
        }

        to {
                -webkit-transform: translate(0);
                transform: translate(0)
        }
}

.section-next-counter {
        margin-right: .75rem;
        font-size: 12.25px;
        font-size: .875rem;
        color: hsla(0, 0%, 100%, .4)
}

.section-next-label {
        margin-right: .75rem;
        font-size: 10.5px;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase
}

.section-next-icon {
        display: inline-block;
        width: 35px;
        width: 2.5rem;
        height: 14px;
        height: 1rem;
        margin-bottom: -.625rem;
        background: rgba(0, 0, 0, 0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40.743' height='17.966'%3E%3Cstyle%3E%3C/style%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-272.157 -1036.73)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M294.686 1044.529l8.754 8.754 8.754-8.754' style='animation:bounce .25s ease infinite'/%3E%3Cpath id='path-2' d='M313.385 1053.424V1038.6H282.1' transform='translate(-9.946 -.872)'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50%/100% 100%
}

/* --------------------------------- section 01 -------------------------------- */
.section-01 {
        height: calc(100vh - var(--header-ht)*2);
        padding-top: calc(var(--header-ht)*2);
}

.section-01 img {
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        border: 2px solid #fff;
        margin-bottom: 4rem;
}

.section-01 h1 {
        position: relative;
        font-size: 5rem;
        padding-bottom: 1.75rem;
        margin-bottom: 2rem;
}

.section-01 h1::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.3rem;
        width: 6rem;
        border-bottom: 2px solid #fff;
}

.section-01 p {
        line-height: 1.5rem;
        font-weight: 700;
        text-transform: uppercase;
}

/* --------------------------------- section 01 -------------------------------- */
.section-02 p {
        margin-bottom: 1rem;
        font-size: 1.25rem;
        line-height: 1.5em;
}

/* --------------------------------- services -------------------------------- */
.services {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
}

.card {
        flex: 1;
        min-width: 30%;
}

.card-number {
        margin-bottom: 1rem;
        font-size: 4rem;
        color: hsla(0, 0%, 100%, .4);
}

.card-number::before {
        content: "#";
}

.card-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
}

.card-text {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
}