.Main {
    background-image: url("https://res.cloudinary.com/ddsus8zy7/image/upload/v1716202901/banner_image_desk_efhnwx.png");
    background-size: cover;
    height: 500px;
    width: 98vw;
}


.Overview{
    text-align: center;
}
.item1 {
    grid-area: header;
}
.item2 {
    grid-area: menu;
}

.item3 {
    grid-area: main;
}

.item5 {
    grid-area: footer;
}

.grid-container {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'menu menu main main main main'
        'footer footer footer footer footer footer';
    /* gap: 10px; */
    /* padding: 10px; */
}

.item2 {
    display: flex;
    justify-content: flex-end;
    width: 250px;
    background-color: #f5f0e5;
    height: max-content;
    padding-bottom: 100px;
}

.sidebar {
    text-align: right;
    padding-top: 30px;
    background-color: #e4ded4;
    width: 70%;
    position: sticky; 
    
}

.nav-item {
    display: block;
    padding: 15px 30px; 
    
}

.sidebar a {
    color: #28231e;
    font-weight: bold;
}


h1,
h2,
body {
    margin: 0px;
    padding: 0px;
    font-family: 'FedraSansStdBook';
}

.heading-section {
    position: absolute;
    bottom: 45%;
    left: 7%;
    width: 30%;
    color: #060606;
    /* font-size: 28px; */
    /* line-height: 28px; */
}
.heading-mob{
    display: none;
}

.p-60 {
    padding: 60px;
}
.p-40{
    padding: 40px;
}

/* .color-size {
    font-size: 16px;
    color: #000;
} */

.sloped-line {
    width: 50px;
    height: 100%;
    background: linear-gradient(1.21deg, black 50%, transparent 50%);
}

.timings {
    background-color: #f6ce80;
    border-left: 8px solid #cd6727;

}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.font-16 {
    font-size: 16px;
}



.footerstyles {
    background-color: #D9D9D9;
    font-style: 14px;
    color: #000;
    line-height: 30px;
    text-align: center;
}

.parent {
        display: flex;
        flex-direction: column;
}

.container {
    max-width: 100%;
    background-color: #dfd4bf;
    box-sizing: border-box;
    transform: rotate(1.21deg);
    position: absolute;
    /* min-height: calc(100vh + 30px); */
    /* height: 318px; */
    width: 400px;
    margin: 0 24.5%;
}

.image-wrapper {
    max-width: 100%;
    width: 50%;
    height: auto;
    overflow: hidden;
    z-index: 2;
    position: relative;
    padding: 15px 10px 0px 10px;
    margin: auto;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    
}



a {
    color: #b95c23;
    text-decoration: none;
}

.mt-60 {
    margin-top: 60px;
}

.font-28 {
    font-size: 44px;
    color: #060606;

}

h2 {
    font-family: 'FedraSansStdMedium';
    color: #02026c;
}
.active{
     background-color: #fff;
     border-left: 10px solid #b95c23;
}

.deskImage{
    display: block;
}
.navStyles{
    position: sticky;
    overflow-y: auto;
    padding-bottom: 100px;
}
.heading-mob{
    display: none;
}
.heading-desk{
    display: block;
}

@media screen and (max-width: 768px) {
    .navStyles{
        position: fixed;
    }
    .navStyles-mob{
        overflow-y: hidden;
        padding-bottom: 20px;
        z-index: 100;
        white-space: nowrap;
    }
    .heading-mob{
        display: block;
        padding-bottom: 20px;
        background-color: #f7f4ef;
    }
    .heading-desk{
        display: none;
    }
    
    .font-28{
        font-size: 30px;
        padding-left: 20px;
    }
    
    .item2 {
        display: inline-block;
        justify-content: center;
        width: 100%;
        background-color: #e4ded4;
        height: 50px;
        padding-bottom: 5px;
    }
    
    .sidebar {
        text-align: center;
        padding-top: 15px;
        background-color: #e4ded4;
        width: auto;
        /* position: sticky;  */
    }

    .nav-item {
        display: inline;
        padding: 18px 15px; 
        font-size: 14px;
    }
    .sidebar a {
        color: #28231e;
        font-weight: normal;
    }
    .active{
        background-color: transparent;
        border-bottom: 2px solid #b95c23;
        border-left: none;
   }
    .no-padding-mob {
        padding: 0px;
    }

    .heading-section {
        bottom: 0;
        width: 100%;
        position: relative;
        padding-top: 10px;
        font-size: 30px;
        left: 0;

    }

    .Main {
        background-position: center;
    }

    .mt-60 {
        margin-top: 60px;
    }

    .p-60 {
        padding: 20px;
    }

    .container {
        /* height: 250px; */
        width: 85%;
        margin: 0 7%;
    }

    .image-wrapper {
        width: 90%;
    }

    .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header'
            'menu menu menu menu menu menu'
            'main main main main main main'
            'footer footer footer footer footer footer';
        gap: 0;
        padding: 0;
    }
    .footerstyles{
        text-align: left;
    }
   
}


@media screen and (min-width: 769px) and (max-width: 913px){

    .Main {
        background-position: center;
    }
    .heading-mob{
        display: block;
        background-color: #f7f4ef;
    }
    .heading-desk{
        display: none;
    }

    .heading-section {
       top: 0;
        width: 100%;
        position: relative;
        padding-top: 10px;
        left: 0%;
        
    } 
    .font-28 {
        font-size: 44px;
        padding-left: 25px  ;
        padding-bottom: 15px;
    
    }
    .item2 {
        display: inline-block;
        justify-content: center;
        width: 100%;
        background-color: #e4ded4;
        height: 50px;
        padding-bottom: 5px;
    }
    .active{
        background-color: transparent;
        border-bottom: 2px solid #b95c23;
        border-left: none;
   }
    .sidebar {
        text-align: center;
        padding-top: 15px;
        background-color: #e4ded4;
        width: auto;
        /* position: sticky;  */
    }

    .nav-item {
        display: inline;
        padding: 18px 15px; 
        font-size: 14px;
    }
    .sidebar a {
        color: #28231e;
        font-weight: normal;
    }
    .navStyles{
        position: fixed;
    }
    .navStyles-mob{
        overflow-y: hidden;
        /* padding-bottom: 20px; */
        z-index: 100;
        white-space: nowrap;
    }

    .container {
        /* height: 450px; */
        width: 85%;
        margin: 0 7%;
    }

    .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header'
            'menu menu menu menu menu menu'
            'main main main main main main'
            'footer footer footer footer footer footer';
        gap: 0;
        padding: 0;
    }

    .image-wrapper {
        width: 93%;
    }
    

}
@media screen and (min-width: 1024px) and (max-width: 1025px){
    .container{
        width: 350px;
        margin: 1px 20.5%;

    }
    .heading-section{
        top: 0;
        bottom: 0;
        width: 50%;
        margin-top: 20%;

    }
}

/* @font-face {
    font-family: 'poppins';
    src: url(Poppins-Regular.ttf);
} */


@font-face {
    font-family: 'FedraSansStdBook';
    src: url(Fedra-Sans-Std-Book.ttf);
}

@font-face {
    font-family: 'FedraSansStdMedium';
    src: url(Fedra-Sans-Std-Medium.ttf);
}