/*------------*/
/*    misc      */
/*------------*/

.blank {
    height: 9rem;
}

.h100 {
    height: 100%;
    flex: 1;

}


.w66 {
    width: 66%;
}

.w100 {
    width: 100%;
}


/*------------*/
/*    font      */
/*------------*/

@font-face {
    font-family: beirut;
    src: url("/asset/fonts/Mj_Beirut-Light.ttf");
}

body * {
    font-family: beirut;


}

.input::placeholder {
    color: var(--colorone);
}

/*24px*/
.font13 {
    font-size: 1.3rem;
}

/*38px*/
.font24 {
    font-size: 2.4rem;
}


/*64px*/
.font4 {
    font-size: 4rem;
}


/*------------*/
/*    navbar   */
/*------------*/

.navbar {
    position: fixed;
    width: 100%;
    background-color: var(--clrthree);
    backdrop-filter: blur(0.3rem);


}

.logo {
    max-width: 4rem;
    min-height: 2rem;
    scale: 1 ;
    transition:0.3s ease-in;
}

.icon-image {
    max-width: 6rem;
    min-height: 6rem;
    scale: 1 ;
    transition:0.3s ease-in;
}


.pepoleimg {
    height:15rem;
    width:14rem;
}




.logo:hover {
    scale: 120%;
    transition: 0.3s ease-in;
}

.navbar-item {
    font-size: 1.3rem;
}
.navbar-item:visited {
  background-color: rgba(0, 0, 0, 0) !important;

}


.navbar-item:focus {
    background-color: rgba(19, 19, 19, 0) !important;
    color:var(--clrtwo) !important;
    font-size: 1.5rem;
    border-bottom: solid 0.2rem var(--colorone);
}

.textclrone {
    color: var(--colorone) !important;
}


.navbar-item {
    &::after {
        content: "";
        border-bottom: solid 0.1618rem var(--colorone);

        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s;
    }

    &:hover {
        &::after {
            transform-origin: center;
            transform: scaleX(1);
        }
    }

    @keyframes underline {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
}


.navbar-item:hover {

    background-color: rgba(255, 255, 255, 0);

}


/*------------*/
/*    colors      */
/*------------*/



:root {
    --colorone: #FFFFFF;
    --clrtwo: #ffd600;
    --clrthree: #353535;


}

.textclrone {
    color: var(--colorone) !important;
}



.bgclrone {
    background-color: var(--colorone);
}


.bgclrtwo {
    background-color: var(--clrtwo);
}

.textclrtwo {
    color: var(--clrtwo);
}

.bgclrthree {
    background-color: var(--clrthree);
}


/*------------*/
/*    borders and paddings and margins      */
/*------------*/


.homeelmargindesktop {
    margin-top: 1.3rem;
}

.whiteborderall {
    border: 0.13rem solid var(--colorone);
}

.blackborderall {
    border: 0.13rem solid var(--clrthree);
}

.borderrightandbotblack {
    border-right: 3px solid var(--clrthree);
    border-bottom: 3px solid var(--clrthree);
}

.borderrightandbotblack--white {
    border-right: 3px solid var(--colorone);
    border-bottom: 3px solid var(--colorone);
}

.bordertop {
    border-top: 0.1rem solid var(--colorone);
}

.borderbotclrthree {
    border-bottom: 0.3rem solid var(--clrthree);
}


/*------------*/
/*    home     */
/*------------*/

.flexrowmobile {
    flex-direction: column;
}

.homemaincontainer {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--clrthree);
    background-image: url("/asset/images/homebg1.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;

}

.footerbg {
    background-image: url("/asset/images/homebg1.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}


.homemaincontainernobg {
    display: flex;
    flex-direction: column;
    background-image: url("/asset/images/homebg1.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;




}


/*------------*/
/*    about     */
/*------------*/


.aboutcontainerone {
    border: 0.1rem solid var(--colorone);

    min-height: 66dvh;
  backdrop-filter: blur(0.3rem);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}



/*----------------*/
/*  animations    */
/*----------------*/


/* HTML: <div class="loader"></div> */
.myspinner {
    --c:no-repeat linear-gradient(#ffffff 0 0);
    background:
            var(--c),var(--c),var(--c),
            var(--c),var(--c),var(--c),
            var(--c),var(--c),var(--c);
    background-size: 16px 16px;
    animation:
            l32-1 1s infinite,
            l32-2 1s infinite;
}
@keyframes l32-1 {
    0%,100% {width:45px;height: 45px}
    35%,65% {width:65px;height: 65px}
}
@keyframes l32-2 {
    0%,40%  {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,  50% 50% }
    60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,  50% 50% }
}

.buttonhover svg {
    margin-right: 0;
    transition: 0.3s ease-in-out;
}
.buttonhover:hover svg {
    transition: 0.3s ease-in-out;
    margin-right:1.3rem ;

}


.borderanimation::before,
.borderanimation::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0.3rem solid var(--clrtwo);  /* Border size and color */
    transition: width 0.6s ease, height 0.3s ease; /* Smooth transition */
}

.borderanimation::before {
    top: 0;
    right: 0;
    border-left: none; /* Only show top and right borders */
    border-bottom: none;
}

.borderanimation::after {
    bottom: 0;
    left: 0;
    border-right: none; /* Only show bottom and left borders */
    border-top: none;
}

.borderanimation:hover::before {
    width: 50%;  /* Expand to half the width */
    height: 50%; /* Expand to half the height */
}

.borderanimation:hover::after {
    width: 50%;  /* Expand to half the width */
    height: 50%; /* Expand to half the height */
}



.borderanimationtwo::before,
.borderanimationtwo::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0.2rem solid var(--colorone);  /* Border size and color */

    transition: width 1s ease, height 0.3s ease; /* Smooth transition */
}

.borderanimationtwo::before {
    top: 0;
    right: 0;
    border-left: none; /* Only show top and right borders */
    border-bottom: none;
}

.borderanimationtwo::after {
    bottom: 0;
    left: 0;
    border-right: none; /* Only show bottom and left borders */
    border-top: none;
}

.borderanimationtwo:hover::before {
    width: 50%;  /* Expand to half the width */
    height: 100%; /* Expand to half the height */
}

.borderanimationtwo:hover::after {
    width: 50%;  /* Expand to half the width */
    height: 100%; /* Expand to half the height */
}




.scale {
    scale: 1;
    transition: 0.3s ease;
    img {
        border-radius: 0.1rem;
        transition: 0.3s ease;
    }
}

.scale:hover {
    scale: 1.05;
    transition: 0.6s ease;
}

.scale--h:hover {
    scale: 1.05;
   h4 {
       color: var(--clrtwo);
       transition: 0.3s ease;
   }
    img {
        border-radius: 50%;
        transition: 0.6s ease;
    }
    transition: 0.3s ease;
}


.iconanimation {
    scale: 1;
    transition: 0.3s ease;
    border-radius: 0.3rem;
}

.iconanimation:hover {
    scale: 1.3;
    border-radius: 50%;
    transition: 0.6s ease;


    svg {
        color: var(--clrtwo);
        transition: 0.3s ease;
    }

}



/*----------------*/
/*  modal    */
/*----------------*/


.modalcontainer {
border-radius: 0.6rem;
    width: 66%;
  min-height: 30rem;
    background-color: var(--colorone);
}

.footerlogo {
    width: 10rem;
    height: 10rem;
}


/*----------------*/
/*  responsive    */
/*----------------*/

@media screen and (min-width: 100px) and (max-width: 435px) {
    .w66 {
        width: 99%;
    }
    .logo {
        max-width: 3rem;
        min-height: 1rem;
        scale: 1 ;
        transition:0.3s ease-in;
    }
    .logo:hover {
        scale: 1;
    }
    .footerlogo {
        width: 6rem;
        height: 6rem;
    }

    .homeelmargindesktop {
        margin-top: 3em;
    }

    .flexrowmobile {
        flex-direction: row;
    }

    .font13{
        font-size: 1rem;
    }


}