

.frontpage {
    background: linear-gradient(
        to left, rgb(165, 37, 14),
                 rgb(0, 140, 255) 
                 );
    height: 100dvh;
    display: flex;
    flex-flow: nowrap column;
    align-items: stretch;
    justify-content: stretch;
}


.frontpage > * {
    flex: 1 1 0;
}


.frontpage h2 {
    text-align: center;
    font-size: 12vw;
    color: white;
    padding:10dvh;
    font-weight: bold;
    text-shadow: 2px 2px 10px black, -10px -10px 10px black;
    background: rgba(255, 255, 255,.5);
    backdrop-filter: hue-rotate(180deg);
    }



.frontpage p {
    padding-top: 3vh;
    font-size: 3vh;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
    /*text-decoration: underline overline 2px rgb(0, 0, 0) dashed;
    text-underline-offset: -2.65rem; */

    /*font background gradient color */
    background: linear-gradient(
        to right,
        rgb(165, 248, 165),
        rgb(245, 251, 186)
    );

    background-clip: text;
    color: transparent;
    
    /* text outline */
    -webkit-text-stroke: 1px rgb(61, 61, 58);
}

/* Welcome Page */



.welcome-wrapper{
    box-sizing: border-box;
    min-height: 98vh ;
    min-width: 98vw ;
    font-size: ;
    font-family: Englebert;


    /*background pattern */
    background: 
    repeating-linear-gradient(
    90deg,
    rgba(144, 227, 255,1),
    rgba(144, 227, 255,1) 10px,
    rgba(76,208,224,1) 10px, 
    rgba(76,208,224,1) 20px),
    
    repeating-linear-gradient(
    180deg,
    transparent,
    transparent 10px,
    rgba(76,208,224,1) 10px, 
    rgba(76,208,224,1) 20px);

    background-blend-mode: color;

    /*Parallax Scrolling */
    background-size: 200px 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


    /*grid details */
    display: grid;
    grid-template-columns: auto .5fr 1fr 1fr .5fr auto ;
    grid-template-rows: repeat(12, minmax(fit-content, 1fr));
    grid-auto-flow: ;
    grid-auto-rows: auto;
    gap: 2rem;
    justify-content: ;
    align-items: ;
    justify-items: ;

}

.welcome-wrapper-segments {
    border: 2px solid rgb(162, 227, 235) ;
    background: rgb(114, 216, 234);
    box-shadow: 0px 0px 10px rgb(0, 0, 0);
    position: relative;
    border-top-right-radius: 50px;
    clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 70px, 100% 100%, 0 100%);
    
    display: grid;
    grid-template-columns:;
    grid-template-rows: subgrid;
    grid-auto-flow: ;
    grid-auto-rows: ;
    grid-auto-columns: ;
    gap:;
    grid-column: ;
    grid-row: ;
    align-items: ;
    justify-content: ;
}

.welcome-wrapper-segments h2::after{
    content: "";
    position:absolute;
    display: block;
    width:70px;
    height:70px;
    background:  rgb(161, 236, 250);
    top:0;
    right:0;
    border-bottom-left-radius:50px ;
}


.welcome-wrapper-segments h2{
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    color:#fffeff;
    font-size: 1.5vmax;
     -webkit-text-stroke: 0px rgb(255, 255, 255);
     /*writing-mode:sideways-lr; */
     letter-spacing: .5rem;
     background: linear-gradient(to left, rgb(255, 0, 76), rgb(9, 51, 240));
     display: block;
     line-height: 4rem;;
     margin:auto 0px;
     padding: 1rem 0rem;
     border: .18vmax solid whitesmoke;
     outline: .18vmax solid whitesmoke;
     outline-offset: -.6vmax;
     z-index: 10;
    
}

.welcome-wrapper-segments .photo{
  background-image:
    url(https://admin.onlyinyourstate.com/wp-content/uploads/sites/2/2023/05/2023-04-28.jpg);
 height: 90vh;
 width: 90vw;
 margin: 2vh auto;
 color: rgb(8, 8, 8);
 text-shadow:  0px 0px 9px rgb(254, 255, 255);
 text-align: center;
 font-weight: bold;
 font-size: 3vmax;
 position: relative;
}


.welcome-wrapper-segments .photo p{
 position: relative;
 padding-top: 5vh;
 z-index: 2;
}

.welcome-wrapper-segments .photo::after{
content: " ";
background-color: transparent;
height: 94%;
position:absolute;
inset:3%;
backdrop-filter: blur(5px);
border-radius: 10px;
box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);
border: 0px solid #537549;
}

.welcome-wrapper-segments h2:hover, .welcome-wrapper-segments h2:focus{
    cursor: pointer;
    filter: contrast(200%) contrast(180%);


}



.welcome{
    /*grid-area: welcome; */
    background: lightgoldenrodyellow;
    grid-column: 2 / span 4;
    grid-row: 2/ span 2;

}


.Featured{
    /*grid-area: featured ; */
    background: lightgray ;
    grid-column: 2 / span 4;
    grid-row: span 2;

}


.upcoming{
    /*grid-area: upcoming; */
    background: tomato;
    grid-column: 2 / span 4;
    grid-row: span 3;

}


.latest{
    /*grid-area: latest ; */
    background: lightblue;
    grid-column: 2 / span 4;
    grid-row: span 2;

}

.tourism{
    /*grid-area: tourism; */
    background: lightgreen;
    grid-column: 2 / span 4;
    grid-row: span 2;

}

.business{
    /*grid-area: business; */
    background: lightseagreen;
    grid-column: 2 / span 4;
    grid-row: span 2;

}

.services{
    /*grid-area: services; */
    background: lightcoral;
    grid-column: 3 / span 2;
    grid-row: span 2;
    margin-bottom: 3rem;

}