@font-face {
    font-family: 'gi_sans_display_bold';
    src: url('fonts/gisansdisplay-bold-webfont.woff2') format('woff2'),
         url('fonts/gisansdisplay-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_display_medium';
    src: url('fonts/gisansdisplay-medium-webfont.woff2') format('woff2'),
         url('fonts/gisansdisplay-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_display_regular';
    src: url('fonts/gisansdisplay-regular-webfont.woff2') format('woff2'),
         url('fonts/gisansdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_display_semibold';
    src: url('fonts/gisansdisplay-semibold-webfont.woff2') format('woff2'),
         url('fonts/gisansdisplay-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_text_bold';
    src: url('fonts/gisanstext-bold-webfont.woff2') format('woff2'),
         url('fonts/gisanstext-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_text_medium';
    src: url('fonts/gisanstext-medium-webfont.woff2') format('woff2'),
         url('fonts/gisanstext-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_text_regular';
    src: url('fonts/gisanstext-regular-webfont.woff2') format('woff2'),
         url('fonts/gisanstext-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gi_sans_text_semibold';
    src: url('fonts/gisanstext-semibold-webfont.woff2') format('woff2'),
         url('fonts/gisanstext-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

* {
  box-sizing: border-box;
}

body { font-family: 'gi_sans_text_regular'; font-size: 16px; color: #141414; overflow-x:hidden; }
header { background: #F9F9F9; width: 100%;height: 80px;display: flex;align-items: center;position: fixed;top: 0px;left: 0px;z-index: 99; }
.header_main { background:#F9F9F9; z-index:9; width: 100%; height: 80px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.header_right { display: flex; align-items: center; }
.nav_links { display: flex; align-items:center; }
.nav_links li { margin: 0px 15px; font-size: 13px; }
.nav_links li a { font-family: 'gi_sans_display_bold'; font-size: 13px; color: #141414; position: relative; display: inline-block; }
.nav_links li a:hover { font-weight: 700; }
.nav_links li a::before {
  content: attr(data-text);
  font-weight: 700;
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
}
.logo_godrej { margin-left: 20px; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }


main { margin-top: 80px; }
.section { margin-top: 100px; margin-bottom: 100px; }
body p { font-size: 16px; font-weight: normal; font-family: 'gi_sans_text_regular'; line-height: 24px; color: #141414; }
body h1 { font-size: 48px; font-family: 'gi_sans_display_regular'; font-weight: normal; text-transform: uppercase; }
body h2 { font-size: 48px; font-family: 'gi_sans_display_regular'; font-weight: normal; margin-bottom: 20px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #AAAAAA;
    border-radius: 30px;
    height: 42px;
    padding: 0px 25px;
    min-width: 116px;
    transition: 0.3s;
}
.button.white {
    border: 1px solid #FFF;
    color: #fff;
}
.button:hover {
    background: #141414;
    color: #fff;
    border: 1px solid #141414;
}

.button.h_white:hover {
    background: #fff;
    color: #141414;
    border: 1px solid #fff;
}

#HomeBanner {
    /*background: url("../images/home/main-banner.webp") no-repeat center;*/
    background-size: cover;
    height: calc(100vh - 80px);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

#HomeBanner p { color: #fff; font-size: 28px; line-height: 30px; font-family: 'gi_sans_display_regular'; font-weight: normal; padding: 12px 0px 25px 0px; }
.HomeBannerText {
    padding: 13vh 0 0 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 4;
}
.HomeBannerText h1 { margin-bottom:25px; }

.video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 80px);
}

.video-wrap video {
  width: 150%;
  height: 100%;
  object-fit: cover; /* fills full screen */
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner {
    position: relative;
}
.banner_text {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 10%;
    color: #fff;
}
.banner_text p { margin-top: 20px; color: #fff !important; font-family: 'gi_sans_display_regular'; }


.menu-toggle { width: 30px; height: 25px; position: relative; cursor: pointer; display: none; margin-right: 30px; }
.menu-toggle span { position: absolute; height: 3px; width: 100%; background: #2A2A2A; left: 0; transition: 0.3s ease; }

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 10px; }
.menu-toggle span:nth-child(3) { top: 20px; }

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 10px; }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: 10px; }


.dropdown_arrow {
    display: none;
    width: 10px;
    height: 10px;
    border-right: 3px solid #1C1B1F;
    border-bottom: 3px solid #1C1B1F;
    transform: rotate(45deg); /* pointing down */
    transition: transform 0.3s ease;
    cursor: pointer;
    position: absolute;
    right: 37px;
    top: 15px;
}

/* Rotated state (pointing up) */
.dropdown_arrow.active {
  transform: rotate(-135deg);
}

.show_mob { display: none; }

#Mobile_Menu { display: none; }

/* Mobile */
@media only screen and (max-width: 768px) {
    html.menu-open, body.menu-open {
        overflow: hidden !important;
    }
    #Mobile_Menu {
        position: fixed;
        left: 0px;
        top: 60px;
        width: 100%;
        height: calc(100vh - 60px);
        background: #fff;
        z-index: 99;
        padding-top: 40px;
        padding-bottom: 40px;
        overflow-y: auto;
    }

    #Mobile_Menu ul ul { display: none; width: 100%; }
    #Mobile_Menu ul li { position: relative; }

    #Mobile_Menu ul li ul li .dropdown_arrow {
        position: relative;
        left: 20px;
        top: 1px;
    }

    #Mobile_Menu ul > li.active > .dropdown_arrow {
        transform: rotate(-135deg);
        transition: 0.3s;
        top: 20px;
    }

    #Mobile_Menu ul > li > ul > li.active .dropdown_arrow {
        transform: rotate(-135deg);
        transition: 0.3s;
        top: 6px;
    }

    #Mobile_Menu > ul > li {
        padding: 15px 30px 15px 30px;
        position: relative;
    }
    #Mobile_Menu > ul > li > a {
        font-size: 20px;
        font-family: 'gi_sans_display_medium';
        font-weight: normal;
    }

    #Mobile_Menu > ul > li > ul { padding-top: 13px; }
    #Mobile_Menu > ul > li > ul > li > a {
        font-size: 14px;
        font-family: 'gi_sans_text_medium';
        font-weight: normal;
        display: inline-block;
        padding: 9px 0px;
    }
    #Mobile_Menu > ul > li > ul > li > ul { padding-bottom: 10px; }
    #Mobile_Menu > ul > li > ul > li > ul li a {
        font-size: 12px;
        font-family: 'gi_sans_text_regular';
        font-weight: normal;
        display: block;
        padding: 6px 0px;
    }

    .container { padding-left: 30px; padding-right: 30px; }
    .hide_mob { display: none !important; }
    .show_mob { display: block; }
    html, body { overflow-x: hidden; }
    .menu-toggle { display: block; }
    header { height: 60px; }
    .header_main { height: 60px; }
    header .logo { /*border-right: 1px solid #2A2A2A;*/ padding-right: 20px; }
    header .logo img, .logo_godrej img { width: auto; height: 24px; }
    main { margin-top: 60px; }

    .header_main .container { padding-right: 20px; }
    .header_right { padding-right: 15px; border-right: 1px solid #d8d8d8; }

    body h1 { font-size: 28px; line-height: 34px; }
    body h2 { font-size: 28px; line-height: 34px; }

    .banner_text p { font-size: 14px; line-height:20px; }


    .nav_links { display: none; padding: 30px 12px 0px 12px; background: #fff; position: fixed; left: 0px; top: 60px; width: 100vw; height: calc(100vh - 60px); z-index:999; }
    .nav_links > li { position: relative; margin: 30px 0px; }
    .nav_links > li a { font-size: 20px; font-family: 'gi_sans_display_medium'; }
    .dropdown_arrow { display: inline-flex; }
    /*.header_main { justify-content: flex-start !important; }*/
    h1, h2 { font-size: 28px; }
    #HomeBanner { /*background: url("../images/home/main-banner-mob.webp") no-repeat center; background-size: cover;*/ height: calc(100vh - 60px); }
    #HomeBanner p { font-size: 16px; padding:10px 0px 20px 0px; }
    .HomeBannerText { position: absolute; left: 0px; bottom: 10vh; width:100%; }
}