*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
:root{
    --verylightshade:lightblue;
    --lightshade: #5d95d5 ;
    --middark: #954535;
    --opp: #003c7b;
    --darkshade: #000366 ;
    --border: 3px solid green;
    --backgroud:#EADDCA;
    }
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--backgroud);
    color: var(--opp);
    height: 100%;
    width: 100%;
}
/* for desktop  */
/*  navbar logo home legal about contact */
@media screen and (min-width:739px) { 
    
    nav#navigation-bar {
        width: 100%;
        height: 9vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-left: 0;       
        margin: 0;
        gap: 10vw;
        position: fixed;
        top: 0;
        z-index: 1;
        background-color:var(--middark);     
    }
    /* logo */
        nav#navigation-bar p {
            display: flex;
            color: white;
            font-size: 3vw;
            
        }

    nav#navigation-bar>div.navigation-links {
        display: flex;
        flex-direction: row;
        gap: 1em;
        justify-content: start;
        align-items:center ;
        margin: 0;
        padding: 0;
    }
    nav#navigation-bar>div.navigation-links a {
        width: 4em;
        height: 1.5em;
        border: none;
        font-size: 1.5vw; 
        text-decoration: none; 
        text-align: center;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        background-color:var(--middark);       
        color:white;
    }
    nav#navigation-bar>div.navigation-links a:hover {
        background-color:var(--backgroud) ;
        color: var(--middark);
        border-radius: 4px;
        cursor: pointer;
        transition-delay: .2s;
    }
     /* =================dropdown menu, header items content */
    div#media-menu{
        width: 100%; 
        height: 5vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        background-color: white;    
        position: fixed;
        top: 9vh;    
        z-index: 1;
    }
    div#media-menu>a.media-btn {
        display: none;
    }
    div#media-menu>a.media-btn1 {
        display: none;
    }
    div#media-menu>a.blink {
        display: none;
    }
    header#menu-header{
        width: 100%;
        height: 5vh;
        position: sticky;
        top: 14vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: white;
        z-index: 1;
    }
    header nav#menu-list{
        display: flex;
        flex-direction: row;
        gap: 1em;
        justify-content: center;
        align-items: center;
    }
           /* dropdwon */

    header#menu-header>nav#menu-list>div.dropdown>a.dropdown-button{
        text-decoration: none;
        border: none;
        background-color: white;
        color: black;
        font-size: 1.4vw;
        width: 6.7em;
        cursor: pointer;
    }
    abbr[title] {
        border-bottom: none !important;
        cursor: inherit !important;
        text-decoration-line: none !important;     
    }
    
    header#menu-header>nav#menu-list>div.dropdown>a.dropdown-button:hover{
        background-color:var(--verylightshade);
        color: black;
        cursor: pointer;
    }
    .contant {
        position: absolute;
        display: none;
        box-shadow: 5px 5px 20px var(--lightshade);
    }
    header>nav>.dropdown>.contant>a.menu-list-button {
        text-decoration: none;
        border: none;
        background-color: white;
        color: black;
        font-size: 1.3vw;
        padding: .2em .4em;
        width: 8em;
        cursor: pointer;
        text-align: left;
        text-transform: capitalize; 
    }
    header>nav>.dropdown>.contant>a.menu-list-button:hover{
        background-color:var(--verylightshade);
        color: black;
        cursor: pointer; 
    }
    header#menu-header>nav#menu-list>div.dropdown {
        display: inline-block;
        text-decoration: none;
    }
    header#menu-header>nav#menu-list>div.dropdown>div.contant a {
        display: block; 
    }
    header#menu-header>nav#menu-list>div.dropdown:hover div.contant {
        display: block;
    }
    /* main container */
    /* div in index.html where all files are pulled by javascritp */
    div#contentContainer{
        top: 15vh;
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    /* in content.html */
    div.iframe-container {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
        align-items: center;
    }
/* middle content start */
div.iframe-container>section.middle-contant {
    width: 68vw;
    display: flex;
    flex-direction: column;
    margin: 0 4em;
    justify-content: center;
    align-items: center;
}
div.iframe-container>section.middle-contant>section.title {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: center;
    padding: 0;
    margin: 0;
}
div.iframe-container>section.middle-contant>section.title>article>h1 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 2.5vw;
    font-weight: 300;
    color: black;
}
div.iframe-container>section.middle-contant>section.title>p.refTitle{
    text-align: center;
        text-transform: capitalize;
        font-size: 1.1rem;
        word-spacing: .3em;
        font-weight: 300;
        color: black;
}
div.iframe-container>section.middle-contant>section.listing-poiter>article>p.para {
    text-align: center;
    font-size: 1.4vw;
    padding: .5em 0;
    color: black;
}
div.iframe-container>section.middle-contant>section.listing-poiter>article>p>a {
    text-align: center;
    text-decoration: none;
    font-weight: bolder;
    color:red;
}
/* ifram container detailproduct desplay in grid on top */
div#mainPageAdvertisement{
        gap: 2em; 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 4em;
        justify-content: center;
    }
    div.iframe-container>div#mainPageAdvertisement>section.left-adv-box{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 2vw;
        box-shadow: 5px 5px 20px var(--middark);
        cursor: pointer;
    }
    div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>img {
        width: 100%;
        border-radius: 2vw;
        overflow:hidden;
    }
    div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top{
        display:grid;
        align-items: center;
    }
    div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>h4{
        font-size: 1.6vw;
        text-align: center;
        font-weight: 300;
        color: black;
        text-transform: capitalize;
    }
    div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>p{
        font-size: 1.3vw;
        text-align: center;
        color: black;
        text-transform: capitalize;
    }
/* aside left end */

/* product dislay items in div container using seperate nenulists.css file*/

/* ===================================================================
                hero for  policies / about / contact pages 
=====================================================================*/ 
div.hero>button.btn_konkani_class  {
        width: 8em;
        height: 1.6em;
        border: none;
        font-size: 1.5vw;
        text-decoration: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        background-color: var(--middark);
        border-radius: 6px;
        cursor: pointer;
        color: white;
    }
div.hero { 
        display: flex;
        flex-direction: column;
        gap: .4rem;
        position: relative;
        padding: 1em 10em;
    }
    div.hero article  h3, em { 
        color: var(--opp);
    }
    div.hero article p{ 
        color: black;
        font-size: 1rem;  
        line-height: 1.4;  
        word-spacing: 10px;
        text-align: justify;
    }
    footer{
        width: 100%;
        height: 5vh;
        font-size: 1rem;
        text-align: center;
        padding: .5em;
        background-color: var(--middark);
        color: white;
    }
}
/* ======media quary from 0px to 738px mobile ================= */
@media screen and (max-width:738px)
{
nav#navigation-bar {
            width: 100vw;
            height: 9vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0;
            gap: 0;
            position: fixed;
            top: 0;
            z-index: 1;
            background-color:var(--middark);
        }
        nav#navigation-bar p {
            display: inline-block;
            color: white;
            font-size: 8vw;
        }
        nav#navigation-bar>div.navigation-links {
            display: flex;
            flex-direction: row;
            gap: .5em;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        nav#navigation-bar>div.navigation-links a {
            width: 4em;
            height: 1.2em;
            border: none;
            font-size: 4.5vw;
            text-decoration: none;
            text-align: center;
            text-transform: capitalize;
            background-color:var(--middark);
            color: white;
        }
        nav#navigation-bar>div.navigation-links a:hover {
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition-delay: .2s;
        }
/* =================dropdown menu, header items content  */
        header#menu-header {
            display: none;
        }
        header>nav#menu-list {
            display: none;
        }
        div#media-menu {
            width: 100vw;
            height: 4vh;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            text-decoration: none;
            background-color: white;
            position: fixed;
            top: 9vh;
            z-index: 1;
        }
        div#media-menu a.media-btn {
            width: 8.4em;
            height: 1.2em;
            display: block;
            background-color: white;
            font-size: 4.5vw;
            text-align: center;
            text-transform: capitalize;
            text-decoration: none;
            color: black;
            cursor: pointer;
            border: none;
        }
        div#media-menu a.media-btn1 {
            width: 12em;
            height: 1.2em;
            display: block;
            background-color: white;
            font-size: 4.5vw;
            text-align: center;
            color: var(--opp);
            text-transform: capitalize;
            text-decoration: none;
            cursor: pointer;
            border: none;
        }
        #media-menu:hover #menu-header {
            width: 100%;
            height: 33vh;
            display: flex;
            position: absolute;
            top: 4vh;
        }
        #media-menu:hover #menu-list {
            top: 15vh;
            width: 40%;
            height: 20em;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            padding: 0 1.2em;
            z-index: 1;
            overflow: hidden;
        }
        #media-menu:hover div.dropdown {
            width: 10em;
            height: 1.5em;
            display: flex;
            overflow: hidden;
        }
        #media-menu:hover div.dropdown>a.dropdown-button {
            width: 8em;
            height: 1.3em;
            display: block;
            font-size: 4vw;
            text-align: center;
            text-transform: capitalize;
            text-decoration: none;
            cursor: pointer;
            border: none;
            background-color: white;
            color: black;
        }
        abbr[title] {
            border-bottom: none !important;
            cursor: inherit !important;
            text-decoration-line: none !important;
        }
        div.contant {
            position: absolute;
            display: none;
        }
        div.dropdown:hover div.contant {
            left: 9.5em;
            width: 40%;
            height: 20em;
            position: absolute;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #media-menu:hover div.contant a.menu-list-button {
            margin-top: .1em;
            width: 7.5em;
            height: 1.5em;
            display: block;
            font-size: 4vw;
            text-align: center;
            text-transform: capitalize;
            text-decoration: none;
            cursor: pointer;
            background-color: white;
            color: black;
        }   
/* ========================================================
                container aside blocked iframe content
=========================================================== */           
        div.iframe-container {
            width: 100%;
            position: relative;
            top: 110px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1em;
        } 
        div.iframe-container>section.middle-contant {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: .4em;
        }
        div.iframe-container>section.middle-contant>section.title {
            display: flex;
            flex-direction: column;
            gap: .5em;
            align-items: center;
            padding: 0;
            margin: 0;      
        }
        div.iframe-container>section.middle-contant>section>article>h1 {
            font-size: 6vw;
            text-align: center;
            font-weight: 400;
            color: black;
        }
        div.iframe-container>section.middle-contant>section.title>p.refTitle {
            width: 71vw;
            text-align: center;
            text-transform: capitalize;
            font-size: 1rem;
            font-weight: 500;
            color: black;    
        }
        div.iframe-container>section.middle-contant>section.listing-poiter>article>p.para {
            font-size: 4.2vw;
            text-align: center;
            color: black;
            padding: 0 1.5em
        }
        div.iframe-container>section.middle-contant>section.listing-poiter>article>p.para>a {
            text-decoration: none;
            color: red;
        }
/* =========  ifram container detailproduct desplay in grid  on top =========*/
        div#mainPageAdvertisement {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1.5em;
            padding: 0 3.5em;
}
        div.iframe-container>div#mainPageAdvertisement>section.left-adv-box {
            width: 64vw;
            display: flex;
            align-items: center;
            border-radius: 3vw;
            box-shadow: 5px 5px 20px var(--middark);
            cursor: pointer;
        }
        div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
        }
        div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>img {
            width: 100%;
            display: flex;
            align-self: center;
            border-radius: 3vw;
            overflow: hidden;
        }
        div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>h4 {
            font-size: 4.5vw;
            text-align: center;
            font-weight: 400;
            color: black;
            text-transform: capitalize;
        }
        div.iframe-container>div#mainPageAdvertisement>section.left-adv-box>div.left-top>p {
            font-size: 3vw;
            text-align: center;
            color: black;
            text-transform: capitalize;
        }
        /* ===================================================================
            navbar menus links legal / about / contact pages 
        =================================================================*/
        div.hero>button.btn_konkani_class {
            width: 80vw;
            height: 2em; 
            border: none;
            font-size: 5vw;
            text-decoration: none;
            text-align: center;
            align-items: center;
            justify-content: center;
            text-transform: capitalize;
            background-color: var(--middark);
            border-radius: 6px;
            cursor: pointer;
            color: white;
        }
        div.hero {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 1em;
            justify-content: center;
            top: 100px;
            padding: 1vw 10vw;
        }
        div.hero article {
            align-self: start;
        }
        div.hero article h3 , em{
            color: var(--opp);
        }
        article>p.whatsapp {
            display: flex;
            flex-direction: row;
            gap: 2em;
            margin-top: .5em;
            align-items: center;
        }
        div.hero article p img {
            border-radius: 1em;
        }
        div.hero article p {
            color: var(--opp);
            font-size: 4vw;
            line-height: 1.6;
            text-align: justify;
            word-spacing: 1vw;
        }
/* product dislay items in div container using menulist.css file seperally*/
        footer{
            position: relative;
            width: 100%;
            text-align: center;
            background-color: var(--middark);
            color: var(--backgroud);
        }
    }