/*
Theme Name: MarkenBuilder
Author: Arber Mirena
Version: 1.0
*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body,
html {
    padding: 0px !important;
    margin: 0px !important;
    transform: translate3d(0px, 0px, 0px);
    transition: all 1000ms ease;
}

.mosterrat {
    font-family: 'Mosterrat', sans-serif;
    font-size: 36px;
    color: transparent;
    -webkit-text-stroke: 1px black;
    background-color: transparent;
    -webkit-text-stroke: 0.6px rgb(255, 255, 255);
}


::-webkit-scrollbar {
    display: none;
}



#logo img {
    width: 211px !important;
    height: auto;
}

#scollParam {
    position: fixed;
    left: 1%;
    top: 50%;
    z-index: 9998;
    cursor: pointer;
}

.lines:hover  > div{
    background-color: white;
    height: 5px;
    width: 30px;
    
}

.lines{
    display: flex;
    flex-direction: column;
}
.lines > div{
    background-color: white;
    height: 2px;
    width: 30px;
    margin-bottom: 14px;
    transition: height 0.3s ease, width 0.3s ease, margin 0.3s ease; /* Smooth transition for height, width, and margin */
}

.nav {
    margin-left: 8%;
    margin-right: 8%;
}

body.menu-open {
    overflow: hidden;
}

.aos-animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s;
}

.aos-animate-on-scroll.aos-animate {
    opacity: 1;
}

#menu {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1; 
    left: 0;
    top: 0;  
    overflow-x: hidden; 
    transition: 0.5s; 
    justify-content: center;
    background-image: url('assets/menu.png');
}

#stickyNav{
    height: 0px !important;
}
.menu-item {
    text-decoration: none !important;
    color: white;
}

.menu-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
}

.menu-title:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid white;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
}

#menu.open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: auto;
    overflow-y: auto;
    font-size: 60px;
    text-decoration: none;
    z-index: 9999;
}

.menu-close {
    display: flex;
    justify-content: end;
    padding-right: 5%;
    font-size: 25px;
    padding-top: 2%;
}

#hero1 {
    background-image: url("assets/heroMain.png");
    background-color: #020415;
    height: 100vh;
    transform: translateY(0px);
    animation: fadeInUp 1s ease-out;
}

#hero2 {
    background: url("assets/frame2.svg");
    height: 100vh;
    transform: translateY(0px);
    animation: fadeInUp 1s ease-out;
}

#hero3 {
    background-image: url("assets/frame3.svg");
    background-color: #020415;
    height: 100vh;
    transform: translateY(0px);
    animation: fadeInUp 1s ease-out;
}

#hero4 {
    background-image: url("assets/frame5.svg");
    background-color: #020415;
    height: 100vh;
    transform: translateY(0px);
    animation: fadeInUp 1s ease-out;
}

#hero5 {
    background-image: url("assets/frame6.svg");
    background-color: #020415;
    height: 100vh;
    transform: translateY(0px);
    animation: fadeInUp 1s ease-out;
}


keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#hero1 {
    color: white;
    font-family: 'Montserrat';
    font-size: 22px;
}

#hero1 h4 {
    font-weight: bold;
    font-size: 60px;
    margin: 0px;
}

#hero1 h3 {
    font-weight: 300;
}

#hero1 h1 {
    font-weight: bold;
    font-size: 60px;
}

#hero2 {
    color: white;
    font-family: 'Montserrat';
    font-size: 22px;
}

#hero2 h4 {
    font-weight: bold;
    font-size: 60px;
    margin: 0px;
}

#hero2 h3 {
    font-weight: 300;
}

#hero2 h1 {
    font-weight: bold;
    font-size: 60px;
}

#hero3 {
    color: white;
    font-family: 'Montserrat';
    font-size: 22px;
}

#hero3 h4 {
    font-weight: bold;
    font-size: 60px;
    margin: 0px;
}

#hero3 h3 {
    font-weight: 300;
}

#hero3 h1 {
    font-weight: bold;
    font-size: 60px;
}


#hero4 {
    color: white;
    font-family: 'Montserrat';
    font-size: 22px;
}

#hero4 h4 {
    font-weight: bold;
    font-size: 60px;
    margin: 0px;
}

#hero4 h3 {
    font-weight: 300;
}

#hero4 h1 {
    font-weight: bold;
    font-size: 60px;
}

#hero5 {
    color: white;
    font-family: 'Montserrat';
    font-size: 22px;
}

#hero5 h4 {
    font-weight: bold;
    font-size: 60px;
    margin: 0px;
}

#hero5 h3 {
    font-weight: 300;
}

#hero5 h1 {
    font-weight: bold;
    font-size: 60px;
}

.section {
    transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
  }

#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 1%;
}

#AgnecyBody{
    background-image: url("assets/agencybg.png");
    height: 899vh;
    width: 100%;
    
}

#AgencyHero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    position: relative; 
}

#AgencyIntro {
    margin-top: 10%;
    height: 80vh;
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
    gap: 150px;
    justify-content: space-between;
    align-items: center;
    font-size: 60px;
    color: white;
}

line {
    transition: x2 0.3s ease; /* Add transition for smooth effect */
}

#AgencyImg{
    background-image: url(assets/picwrapper.png);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
}

#AgencyImg > img{
    transform: translate(50px, -20px);
}

#AgencyOutsource{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 20%;
}
#AgencyOutsource > .Outsource1 > #AgencyInfo{
    width: 40%;
}

#AgencyOutsource > #AgencyInfo{
    width: 40%;
}

.Outsource1{
    margin-bottom: 20%;
}
.ag-title{
    color: #338EFF;
    font-size: 50px;
    font-weight: 500;
}
.ag-desc{

    color: white;
    font-size: 30px;
}

.ag-title1{
    color: white;
    font-size: 50px;
    font-weight: 500;
}

.ag-desc1 {
    color: white;
    font-size: 24px;
    font-weight: 100;
}

.Outsource{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 10%;
}

.Outsource > #AgencyInfo{
    margin-right: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sticky-nav {
    position: sticky;
    top: 13px;
    z-index: 9998;
  }

#AgencyRate{
    margin-top: 30%;
}

#stars{
    display: flex;
    justify-content: center;
    align-items: center;
}

#stars > h3{
    font-size: 60px;
    color: white;
    margin: 0px;
    margin-right: 50px;
}

#ratetitle{
    text-align: center;
    margin-top: 20px;
    font-size: 40px;
    color: white;
    font-weight: 300;
}


.heroh3{
 color: white !important;
 font-size: 100px;
 padding-top: 15%;
}

.mousescroll{
    position: absolute;
    bottom: 10%;
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 575px) {

    .section>div {
        display: block !important;
    }

    .section2 {
        text-align: center;
        padding-top: 5%;
    }

    .heroimg img {
        height: 350px !important;
    }

    .heroimg {
        height: unset !important; 
        width: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}

/* Small devices */
@media (min-width: 576px) {
    .section>div {
        display: block !important;
    }

    .section2 {
        text-align: center;
        padding-top: 5%;
    }

    .heroimg img {
        height: 450px !important;
    }

   

}

/* Medium devices */
@media (min-width: 768px) {
    .section>div {
        display: block !important;
    }

    .section2 {
        text-align: center;
        padding-top: 5%;
    }

    .heroimg img {
        height: 450px !important;
    }
}

/* Large devices */
@media (min-width: 992px) {
    .heroimg img {
        height: 350px !important;
    }

    .typograp {
        margin-left: 60px;
    }
}

/* Extra large devices */
@media (min-width: 1200px) {
    .section>div {
        display: flex !important;
    }

    .section2 {
        text-align: left;
        padding-top: 0%;
    }

    .heroimg img {
        height: 500px !important;
    }

    .heroimg {
        height: 700px !important; 
        width: 700px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .typograp {
        margin-left: 0px;
    }

}