/* font and color  */
    :root {
        --font-1: "Exo", sans-serif;
        --font-2: "Albert Sans", sans-serif;
        --color-1: #f0991d;
        --color-2: #1F1F25;
        --color-3: #78787C;
        --color-4: #f6f6f6;
        --color-5: #222224;
        --color-6: #D9D9D9;
    }

    /* font and color end */

    /* common css  */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .w {
        width: 1240px;
        margin: 0 auto;
    }

    /* .w{width: 96%;margin: 0 2%;} */
    .fsb {
        display: flex;
        justify-content: space-between;
    }

    .fsa {
        display: flex;
        justify-content: space-around;
    }

    a {
        text-decoration: none;
    }

    .s5 {
        font-family: var(--font-2);
        font-size: 16px;
    }

    .a5 {
        background: var(--color-1);
        padding: 12px 25px;
        border-radius: 6px;
        font-size: 16px;
        border: none;
        outline: none;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        color: #fff;
        font-weight: 600;
        font-family: var(--font-2);
        width: 155px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .a5:hover {
        background-color: var(--color-3);
    }

    .hh5,
    .s6 {
        color: var(--color-1);
        font-family: var(--font-2);
        font-weight: 500;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
    }

    .s6 {
        color: #fff;
        background: var(--color-1);
        padding: 3px;
        border-radius: 2px;
        margin-right: 5px;
    }

    .s9 {
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 15px 0;
        display: inline-block;
    }

    .hg5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .h5 {
        font-size: 48px;
        font-family: var(--font-1);
        color: var(--color-2);
        margin: 25px 0;
    }

    .p5 {
        color: var(--color-3);
        font-family: var(--font-2);
        font-size: 16px;
        line-height: 1.7;
        font-weight: 500;
    }

    .a9 {
        background: #fff;
        border: 1px solid var(--color-1);
        border-radius: 0px;
        color: var(--color-2);
        width: fit-content !important;
        gap: 8px;
        transition: 0.3s;
    }

    .a9:hover {
        background: var(--color-3);
        transition: 0.3s;
        color: var(--color-2);
        border-color: transparent;
    }

    .i9 {
        width: 30px;
        height: 18px;
        transform: rotate(330deg);
    }

    /* common css end */

    /* header  */
    #d2 {
        background: var(--color-1);
    }

    #d3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .i1 {
        width: 20px;
        height: 20px;
    }

    .d4 {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 35%;
    }

    #d10 {
        width: 30%;
        justify-content: flex-end;
        align-items: center;
        display: flex;
    }

    .d5 {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 6px 0px;
    }

    #d6 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        padding: 10px 0;
    }

    #u1 {
        display: flex;
        list-style: none;
        /* gap: 20px; */
        gap: 40px;
        align-items: center;
    }

    #d7 {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* WhatsApp nav link styling */
    #whatsappLink {
        background: #25D366;
        color: #fff;
        padding: 16px 20px;
        border-radius: 6px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
        display: inline-block;
        line-height: 1;
        transition: background-color 0.15s ease, transform 0.08s ease;
    }

    #whatsappLink:hover,
    #whatsappLink:focus {
        background: #1eb84f;
        text-decoration: none;
        transform: translateY(-1px);
        outline: none;
    }

    #whatsappLink:focus {
        box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
    }

    #d8 {
        display: none;
    }

    .i3 {
        width: 25px;
        height: 30px;
    }

    /* dropdown arrow: use currentColor so it follows link hover color */
    .profile-menu .s3 {
        width: 18px;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        color: inherit;
    }

    .a4,
    .a6 {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #fff;
        font-size: 16px;
        font-family: var(--font-2);
        text-transform: uppercase;
        font-weight: 600;
        padding: 15px 0;
    }

    /* allow using .a4 on buttons without default button chrome */
    .a4 {
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .a4 {
        padding: 30px 0;
    }

    .a4:hover {
        color: var(--color-1);
        transition: 0.3s;
    }

    /* .a4:hover .s3 {
        transform: rotate(4deg);
    }

    .s3 {
        transform: rotate(147deg);
    } */

    .s1 {
        font-size: 14px;
        color: #fff;
    }

    .a1 {
        color: #fff;
        font-family: var(--font-2);
        font-size: 14px;
    }

    .s4 {
        color: #fff;
        font-weight: 600;
    }

    #d11 {
        justify-self: flex-start;
        display: flex;
    }

    .active_nav {
        color: var(--color-1);
    }

    .l1 {
        position: relative;
        overflow: hidden;
    }

    .u2 {
        display: flex;
        flex-direction: column;
        list-style: none;
        width: 220px;
        position: absolute;
        top: 40px;
        left: -20px;
        background: var(--color-2);
        border: 1px solid white;
        padding: 0;
        border-radius: 0 0 12px 12px;
        opacity: 0;
        transition: opacity 0.5s ease, top 0.5s ease;
        z-index: 25;
    }

    .u2 .l2:last-child {
        border-color: transparent;
    }

    .l2 {
        border-bottom: 1px solid rgba(31, 31, 37, 0.1);
    }

    .l1:hover .u2 {
        opacity: 1;
        top: 65px;
    }

    .l1:hover {
        overflow: visible;
    }

    /* allow submenu to open when JS adds an open class (for keyboard control) */
    .l1.open .u2 {
        opacity: 1;
        top: 65px;
    }

    .l1.open {
        overflow: visible;
    }

    .a6 {
        padding: 15px 20px;
        text-transform: capitalize;
    }

    .a6:hover {
        color: var(--color-1);
        transition: 0.3s;
    }

    #a8 {
        width: fit-content;
        height: fit-content;
    }

    .i2 {
        width: 250px;
    }

    #d1 {
        background-color: var(--color-2);
    }

    /* header end */

    /* footer  */
    #ft {
        background: var(--color-2) no-repeat 75px center;
    }

    .i26 {
        width: 18px;
        height: 18px;
    }

    .i28 {
        width: 40px;
        height: 40px;
    }

    #d36 {
        padding: 100px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .d27 {
        display: flex;
        flex-direction: column;
        width: 23%;
    }

    #d28 {
        width: 26%;
    }

    .s25 {
        color: #fff;
        margin: 0 0 15px;
        text-transform: capitalize;
        font-size: 24px;
    }

    .d33 {
        display: flex;
        flex-direction: column;
        margin-top: 35px;
    }

    .d34 {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 35px;
    }

    .d35 {
        display: flex;
        flex-direction: column;
    }

    .p25 {
        color: #fff;
        margin-top: 43px;
    }

    .d29 {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 25px;
    }

    .a26 {
        background: var(--color-5);
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .a26:hover {
        background: var(--color-1);
        transition: 0.3s;
    }

    .a27 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--color-6);
        font-family: var(--font-2);
        text-transform: capitalize;
        margin-bottom: 20px;
        transition: 0.3s;
    }

    .a27:hover,
    .a28:hover {
        color: var(--color-1);
        transition: 0.3s;
    }

    .s28 {
        transform: scaleX(1.2) scaleY(1.5);
    }

    .s27 {
        color: var(--color-6);
        font-family: var(--font-2);
    }

    .a28 {
        color: var(--color-6);
        font-family: var(--font-1);
        font-weight: 600;
        color: #fff;
        transition: 0.3s;
    }

    .d32 {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .hr28 {
        border: 0px;
        height: 2px;
        width: 10px;
        background: var(--color-1);
    }

    #hr25 {
        width: 40px;
    }

    #hr26 {
        width: 10px;
    }

    #hr27 {
        width: 5px;
    }

    #d37 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 25px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .i25 {
        width: 100%;
    }

    .i100 {
        width: 34px;
        height: 34px;
    }

    .d110 {
        width: 15%;
    }

    /* footer end */

    /* responsive  */
    @media screen and (max-width:1240px) {
        .w {
            width: 96%;
            margin: 0 2%;
        }
    }

    @media screen and (max-width: 1150px) {

        /* Header  */
        #u1 {
            display: none;
            position: absolute;
            flex-direction: column;
            z-index: 9;
            justify-content: center;
            align-items: center;
            top: 22.6%;
            left: 0;
            gap: 0;
            background-color: #1f1f259c;
            width: 100%;
        }

        #d8 {
            display: block;
        }

        .a4 {
            padding: 15px 0;
        }

        .d4 {
            display: none;
        }

        #d10,
        #d11 {
            width: 48%;
        }

        .profile-menu .u2 {
            position: static;
            top: auto;
            left: auto;
            width: 100%;
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
            margin: 0;
            opacity: 1 !important;
            display: none;
        }

        .profile-menu.open .u2 {
            display: flex;
            flex-direction: column;
        }

        /* indent submenu links on mobile */
        .profile-menu .a6 {
            padding: 12px 20px 12px 36px;
        }

        .profile-menu .a6:hover {
            color: var(--color-1);
            background: rgba(255, 255, 255, 0.02);
        }

        /* Footer  */

        #d36 {
            flex-wrap: wrap;
        }

        .d27 {
            width: 26%;
            margin-bottom: 15px;
        }

        #d36 {
            padding: 100px 0 20px;
        }
    }

    @media screen and (max-width: 750px) {

        /* Footer  */
        .d27 {
            width: 48%;
        }

        #d36 {
            padding: 40px 0 20px;
        }
    }

    @media screen and (max-width: 650px) {

        /* Header  */
        #d9 {
            display: none;
        }
    }

    @media screen and (max-width: 550px) {

        /* Header  */

        #u1 {
            top: 13%;
        }

        #d2 {
            display: none;
        }

        #whatsappLink {
            padding: 10px 7px;
            font-size: 12px;
        }

        #d7 {
            gap: 7px;
        }

        .i2 {
            width: 200px;
        }

        /* Footer  */

        .d27 {
            width: 100%;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #d28 {
            width: 100%;
        }

        .d33 {
            width: 100%;
            text-align: center;
            align-items: center;
        }

        /* Common  */
        .h5 {
            font-size: 30px;
        }
    }