html,*{padding: 0;margin: 0;}
:root
{
    --Text-color:#fff;
    --Bg-color:#1a1414;
    --body-background:#acaba0ab;
    --Colred:orange;
    --Orangered:orangered;
}

/* Star Global Variables */
.countainer{max-width: 90%;margin: 0 auto};
.colred{color: var(--Colred);}
.flex,
.flex-column,
.flex-center,
.flex-between,
.flex-around,
.flex-evenly{display: flex;align-items: center;}
.flex-between{justify-content: space-between;}
.flex-around{justify-content: space-around;}
.flex-evenly{justify-content: space-evenly;}
.flex-column{flex-direction: column;}

a{text-align: none;color: var(--Text-color);}
.my-1{margin: 1rem auto;}
.my-2{margin: 2rem auto;}
.gap-8{gap: .8rem;}
.gap-1{gap: 1rem;}
.gap-2{gap: 2rem;}
.text-center{text-align: center;}
.orangred{color: var(--Orangered);}
.scroller-y::-webkit-scrollbar{background: transparent;width: 6px;border-radius: 20px;}
.scroller-y::-webkit-scrollbar-thumb{background: transparent;width: 6px;border-radius: 20px;}
.scroller-x::-webkit-scrollbar{background: transparent;height: 6px;border-radius: 20px;}
.scroller-x::-webkit-scrollbar-thumb{background: transparent;height: 6px;border-radius: 20px;}
.button{padding: 12px 20px;border-radius: 8px;cursor: pointer;color: var(--Text-color);background: var(--Bg-color);font-weight: bold;transition: .3s;}
.button:hover{background-color: var(--Text-color);color: var(--Bg-color);font-weight: bold;}
body
{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    min-height:100vh;
    min-height:100dvh;
    width: 100vw;
    background: var(--body-background);
    color: var(--bg-color);
    overflow-x: hidden;
    scroll-behavior: smooth;
}
/* End Global Variables */
.logo a{text-decoration: none;}
.logo a b{color: var(--Orangered);}
nav{display: flex;align-items: center;justify-content: space-between;margin: .5rem auto;}
ul
{
    display: flex;
    align-items: center;
    gap: 1rem;
}

nav ul{display: flex;align-items: center;gap: 1rem;}
nav ul li{list-style: none;}
nav ul li a{color: var(--Bg-color)!important;text-decoration: none;font-weight: 500;}
.inner-ttitle{font-size: 3.6rem;}

.inner-buttons .button{box-shadow: .3rem .3rem 0 0 red;}
.inner-buttons .button:hover{box-shadow: .3rem .3rem 0 0 var(--Bg-color);}
.inner-ttitle{font-size: 3.6rem;}

main
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: fit-content;
}

.col-2 .main-img
{
    position: relative;
    height: 20rem;
    width: 25rem;
    border:solid 1px #000;
}
.lawer-avatar
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}
.bubble
{
    padding:.8rem .4rem;
    width: 17rem;
    /* background: #0000003a; */
    background: var(--Text-color);
    margin-top: .4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
}

.bubble:nth-child(2){top: 20%;left: -30%;}
.bubble:nth-child(3){top: 45%;right: -10%;}
.bubble:nth-child(4){bottom: -10%;left: -10%;}

.bubble-alt{white-space: nowrap;}
.bubble-icon
{
   height: 2.7rem;
   width: 2.7rem;
   border-radius: 50%;
}


/* Start Styling the footer  */
footer
{
    position:relative;
    margin-top: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-left:50%;
}
.footer--inner
{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 40rem;
    margin: 0 auto;
}
.footer--inner strong{font-size: 1.7rem;}
hr{height: 10rem;width: .2rem;background-color: #000;}
.explore-btn{color: var(--Orangered);}

/* End Styling the footer  */

/* !Start Customizing the styles */
.s-btn{display: none;}
@media screen and (max-width:644px)
{
    ul
    {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        -webkit-backdrop-filter: blur(80px);
        backdrop-filter: blur(80px);
        z-index: 100;
        object-fit: cover;
    }
    ul li a{font-weight: bolder;color:var(--Text-color)}
    ul li.s-btn{
        position: absolute;
        top: 0;
        right: 0;
        height: 1.8rem;
        width: 1.8rem;
        margin: .5rem;
        border-radius: 50%;
        border: solid 1px #000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--Text-color);
        background-color :var(--bg-color);
    }
}
@media screen and(max-width:770px) {
    main
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-direction: column;
        background: red;
    }
    .col-2 .main-img
    {
        max-width: 100%;
        max-height: 70vh;
        max-height: 70dvh;
        object-fit: contain;
        border:solid 1px #000;
    }
}
@media screen and (min-width:768px){
    footer
    {
        position: absolute;
        bottom: .4rem;
        width: 90%;
        left: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* !End Customizing the styles */