*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --global-nav-collective-height: calc(var(--r-globalnav-height) + var(--global-nav-ad-bar-height));
    --r-globalnav-height: 48px;
    --global-nav-ad-bar-height: 0px;
    --content-height: 569px;
    --sub-content-height: 500px;
    --dark: #050507;
    --light: #E3F0F8;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: #fff;
}

.headerNav{
    position: absolute;
    display: grid;
    place-items: center;
    height: 20vh;
    width: 100%;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
}

.navMenu{
	display: grid;
    align-items: center;
	grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    width: 100%;
    max-width: 1440px;
}


.hdmid{
	display: grid;
	height: 100%;
    z-index: 9999;
}

.hdLogo{
	display: grid;
    z-index: 9999;
    place-content: center;
    text-decoration: none;
}

.h1:hover{
    opacity: 1;
    transition: opacity 400ms;
}

h1 {
    font-family: "Montserrat";
    font-size: 32px;
    line-height: 1.08349;
    font-weight: 600;
    letter-spacing: -.002em;
    text-decoration: none;
    color: azure;
    cursor: pointer;
}

.main {
    position: relative;
    max-width: 2560px;
    margin: 0;
    margin-top: 0px;
    background: azure;
}

.hero {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /*background: rgba(164,200,186,0.6);
    background: linear-gradient(90deg, rgba(96,122,113,0.6) 0%, rgba(164,200,186,0.6) 35%, rgba(154,226,215,0.6) 100%);
    -webkit-backdrop-filter: saturate(180%) blur(0px);
    backdrop-filter: saturate(180%) blur(20px);*/
    background-image: linear-gradient(to right, #452c63, #38254d, #2b1d38, #1e1625, #100d12);    
}

.main-frame{
    position: relative;
    height: 80vh;
    top: 20vh;
}

.link {
    display: grid;
    height: 80vh;
    width: 100%;
    text-decoration: none;
    place-items: center;
}


.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 90%;
    height: 90%;
}

.cta-links {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 45% 55%;
    width: 100%;
    height: 100%;
    place-items: center;
    text-align: center;
    font-family: "Montserrat";
}

.title {
    display: grid;
    height: 100%;
    width: 80%;
    align-items: end;
    
}

.title h2 {
    font-size: 28px;
    line-height: 1.28349;
    font-weight: 600;
    letter-spacing: .05em;
    color: azure;
    margin-bottom: 10px;
    font-family: "Montserrat";
}

.desc {
    display: grid;
    height: 100%;
    width: 70%;
    align-items: top;
}

.desc h3 {
    font-size: 21px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: azure;
    margin-top: 10px;
    font-family: "Montserrat";
}


h2 {
    font-size: 48px;
    line-height: 1.08349;
    font-weight: 600;
    letter-spacing: -.002em;
}

h3 {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .009em;
    color: #f5f5f7;
}


.unit-image {
    display: grid;
    width: 80%;
    height: 80%;
    background: url(../media/img/sdv;jsdvk9u0-.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.creation {
    position: absolute;
    top: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: azure;
}

.frame2{
    position: relative;
    height: 100vh;
}

.link2 {
    display: grid;
    height: 100vh;
    width: 100%;
    text-decoration: none;
    place-items: center;
}

.content2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    place-items: center;
}

.cta-links2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 65% 5% 6% 10% 10%;
    width: 100%;
    height: 100%;
    place-items: center;
    text-align: center;
    font-family: "Montserrat";
}

.title2 {
    display: grid;
    width: 100%;
    height: 100%;
    background-image: url(../media/img/nk-TtL2UokqcIAWiWZoTAA.png.transform.vca-w350-2x.avif);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: 50%;
}

.ctaitem2{
    display: grid;
    width: 100%;
    height: 100%;
    color: black;
}

.ctaitem2 h2 {
    font-size: 20px;
    line-height: 1.28349;
    font-weight: 500;
    letter-spacing: .05em;
    color: black;
    margin-bottom: 10px;
    font-family: "Montserrat";
}

.title2 h2 {
    font-size: 28px;
    line-height: 1.28349;
    font-weight: 600;
    letter-spacing: .05em;
    color: black;
    margin-bottom: 10px;
    font-family: "Montserrat";
}

.desc2 {
    display: grid;
    height: 100%;
    width: 70%;
    align-items: top;
}

.desc2 h3 {
    font-size: 18px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: grey;
    margin-top: 10px;
    font-family: "Montserrat";
}

.ctamore {
    display: grid;
    width: 100%;
    height: 100%;
    align-items: center;
}

.ctamore h5{
    font-size: 16px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: grey;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}

.ctamorecreation {
    width: 100%;
    height: 100%;
}


h2 {
    font-size: 48px;
    line-height: 1.08349;
    font-weight: 600;
    letter-spacing: -.002em;
}

h3 {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: .009em;
    color: #f5f5f7;
}


.unit-image2 {
    display: grid;
    width: 100%;
    height: 100%;
    background-image: url(../media/img/02-secondary-feature-2880-3600.jpg.transform.vca-w2560-2x.avif);
    background-repeat: no-repeat;
    background-size: cover;
}


.gifts {
    position: absolute;
    top: 200vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 150vh;
    width: 100%;
    overflow: hidden;
    background: azure;
}

.frame3{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    height: 150vh;
    background: red;
    place-items: center;
}

.link3 {
    width: 100%;
    height: 100%;
    text-decoration: none;
    place-items: center;
    background: white;
}

.content3 {
    display: grid;
    grid-template-rows: 25vh 100vh 25vh;
    height: 100%;
    width: 100%;
    place-items: center;
}

.gifts-link-1 {
    display: grid;
    height: 100%;
    width: 100%;
    background: white;
    place-items: center;
}

.gifts-link-1 h2 {
    font-size: 28px;
    line-height: 0.28349;
    font-weight: 600;
    letter-spacing: .005em;
    color: black;
    font-family: "Montserrat";
}

.gifts-link-2 {
    height: 100%;
    width: 90%;
}

.unit-image3 {
    display: grid;
    width: 100%;
    height: 100%;
    background: url(../media/img/gift-banner-desktop-3480-1740.jpg.transform.vca-w2560-2x.avif);
    background-repeat: no-repeat;
    background-size: cover;
}

.gifts-link-3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    width: 100%;
    place-items: center;
}


.gl3-title h3 {
    font-size: 18px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: rgb(80, 80, 80);
    margin-top: 10px;
    font-family: "Montserrat";
}

.gl3-detail {
    display: grid;
    height: 100%;
    width: 100%;
    justify-items: center;
}

.gl3-detail h5{
    font-size: 16px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    color: rgb(120, 120, 120);
}

.categories {
    position: absolute;
    top: 350vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 150vh;
    width: 100%;
    overflow: hidden;
    background: grey;
}

.frame4{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    background: red;

}

.link4 {
    width: 100%;
    text-decoration: none;
    place-items: center;
    background: green;
}

.content4 {
    display: grid;
    grid-template-rows: 25vh 25vh 70vh 30vh;
    width: 100%;
    background: #E6E6E6;
    place-items: center;
}

.cat-link-1 {
    display: grid;
    height: 80%;
    width: 100%;
    align-items: end;
    justify-items: center;
}


.cat-link-1 h2 {
    font-size: 38px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: rgb(10, 10, 10);
    font-family: "Montserrat";
}

.cat-link-2 {
    display: grid;
    height: 80%;
    width: 100%;
    align-items: top;
    justify-items: center;
}


.cat-link-2 h5{
    font-size: 19px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: rgb(50, 50, 50);
}

.cat-link-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 100%;
    width: 100%;
}

.cat-link-3 > .catl {
    width: 100%;
    height: 100%;
    position: relative;
    border: solid 1px darkgray;
    display: grid;
    grid-template-rows: 80% 20%;
}

.cata .unit-image4 {
    width: 100%;
    height: 100%;
    background: url(../media/img/wedddiamond-w820-2x.avif);
    background-repeat: no-repeat;
    background-size: cover;
}

.catb .unit-image4 {
    width: 100%;
    height: 100%;
    background: url(../media/img/necklases-w350-2x.avif);
    background-repeat: no-repeat;
    background-size: cover;
}

.catc .unit-image4 {
    width: 100%;
    height: 100%;
    background: url(../media/img/earings-w350-2x.avif);
    background-repeat: no-repeat;
    background-size: cover;
}

.catl .cat-link-4{
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.catl .cat-link-4 h4 {
    font-size: 22px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    color: rgb(10, 10, 10);
    font-family: "Montserrat";

}

.cat-link-5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    width: 100%;
    height: 100%;
    background: #2b1d38;
}

.cat-link-5 h5{
    color: azure;
    font-size: 19px;
    line-height: 1.28349;
    font-weight: 300;
    letter-spacing: -.009em;
    font-family: "Montserrat";
}


@media screen and (orientation: portrait) {

    .content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100%;
        align-content: center;
    }

    .unit-image {
        align-self: center;
    }

    .content2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100%;
        align-content: center;
    }

    .unit-image {
        align-self: center;
    }

    .cat-link-3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .cat-link-3 > .catl {
        grid-template-rows: 100%;
        grid-template-columns: 1fr 1fr;
    }


}


@media screen and (max-width: 1400px) and (orientation: portrait) {


}

@media screen and (min-width: 1400px) {
   
}


@media screen and (max-width: 734px) and (min-width: 0px) {
    
}


@media screen and (max-width: 734px) and (min-width: 0px) and (orientation: portrait) {
    
}

@media screen and (max-width: 734px) and (min-width: 0px) and (orientation: landscape) {

    
}

@media screen and (max-width: 734px) and (min-width: 321px) and (orientation: portrait) {

    

}


@media screen and (max-width: 320px) and (min-width: 0px) and (orientation: portrait) {
    
}