@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Open Sans font family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*********************************/
/* GENERAL REUSABLE COMPONENTS */
/*********************************/
.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 3.2rem;
}

.grid-center-v {
    align-items: center;

}

.grid {
    display: grid;
    row-gap: 9.6rem;
    column-gap: 0;
}

.grid:not(:last-child) {
    margin-bottom: calc(1/16*96rem);
}

.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid-item-justify-e {
    justify-self: end;
}
.grid-item-justify-s {
    justify-self: start;
}

/**************************************/
    /* GOOGLE ICONS DEFAULT CSS */
/**************************************/

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/**************************************/
    /* GENERAL CSS */
/**************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: "Spinnaker", sans-serif; */
    /* font-family: "Quicksand", sans-serif; */
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    
}

html, body {
    font-size: 55%;
    /* font-size: 55%; */
    /* position: relative; */

    /* due to testimonials there is a scrollbar
     * for the x direction therefore to remove it
     * overflow-x: hidden;
     * the below mention property */
    overflow-x: hidden;

    /* for smooth scrolling */
    scroll-behavior: smooth;
    /* transition: all 0.5s; */
    /* max-width: 100vw; */
}

.heading-1 {
    font-weight: 500;
    color: var(--primary-color);
    letter-spacing: 0.75px;
    font-size: 6.2rem;
    line-height: 6.6rem;
    margin-bottom: 3.2rem;
    
    font-family: "Spinnaker", sans-serif;
}

.heading-2 {
    font-weight: 500;
    color: var(--primary-color);
    letter-spacing: 0.75px;
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    font-family: "Spinnaker", sans-serif;
}

.heading-3 {
    font-weight: 400;
    color: var(--primary-color);
    letter-spacing: 0.75px;
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    font-family: "Spinnaker", sans-serif;
}

strong {
    font-weight: 700;
}

.margin-bottom-md {
    margin-bottom: calc(1/16*48rem) !important;
}

.d-none {
    display: none !important;
}




/* TEMPORORY */

.hide {
    opacity: 0;
    pointer-events: none;
    visibility: none;
}

.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.reveal-opacity {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.reveal {
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Slightly moved down */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

/* Class to reveal text */
.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}