html body {
    margin: 0;
    padding:0;
    height:100%;
    overflow-x:hidden;
    scroll-behavior: smooth;
    
    
}

img {
    max-width: 100%;
}

body {
    margin:0;
    padding:0;
}

.navbar {
    width:100%;
    height:60pt;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    background-color:#d19e2b;
    box-sizing: border-box;

}

.navbar ul {
    display:flex;
    margin:0;
    padding:0;
    list-style: none;
    width:100%;
    justify-content: space-evenly;

}

.navbar ul li {
    font-family:"dunbar-tall", sans-serif;
    font-weight:700;
    font-size:18px;
    color:#000;
    cursor: pointer;
    flex:1;
    text-align: center;

}



.container {
    width:100%;
    height:300%;
    margin: 0 0 0 0;
    background-color:#000;
}

.aboutcontainer {
    width:100%;
    height:200%;
    margin: 0 0 0 0;
    background-color:#d19e2b;
}

.contactcontainer {
    width:100%;
    height:200%;
    margin: 0 0 0 0;
    background-color:#dfd9c3;
}



.graphicsicon {
    width: 7vh;
    height:40pt;
    margin: 20px 0 0 20px;
    position:fixed;
    background-image: url(../images/beige-icon.png);
    background-size:contain;

}




.graphicstop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #b71007;
    justify-content: space-between;

}


.marketingicon {
    width: 7vh;
    height:40pt;
    margin: 20px 0 0 20px;
    position:fixed;
    background-image: url(../images/beige-icon.png);
    background-size:contain;

}




.marketingtop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #b71007;
    justify-content: space-between;

}



.designicon {
    width: 7vh;
    height:40pt;
    margin: 20px 0 0 20px;
    position:fixed;
    background-image: url(../images/beige-icon.png);
    background-size:contain;

}




.designtop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #b71007;
    justify-content: space-between;

}

.designmenu {
    flex:1;
    display:flex;
    justify-content: space-evenly;
}
.designmenu ul {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;

}

.designmenu ul li {
    margin: 0 15px;
    font-size: 18px;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    color:#dfd9c3;
    cursor: pointer;
    flex:1;
    text-align: center;
}

.top {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #d19e2b;
    justify-content: space-between;

}

.menu {
    flex:1;
    display:flex;
    justify-content: space-evenly;
}
.menu ul {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;

}

.menu ul li {
    margin: 0 15px;
    font-size: 18px;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    color:#dfd9c3;
    cursor: pointer;
    flex:1;
    text-align: center;
}



.abouticon {
    width: 7vh;
    height:40pt;
    background-image: url(../images/beige-icon.png);
    background-size:contain;
    background-repeat: no-repeat;
    margin-right: 20px;

}

.icon {
    width: 7vh;
    height:40pt;
    background-image: url(../images/black-zula.png);
    background-size:contain;
    background-repeat: no-repeat;
    margin-right: 20px;

}


.abouttop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #b71007;
    justify-content: space-between;

}

.aboutmenu {
    flex:1;
    display:flex;
    justify-content: space-evenly;
}
.aboutmenu ul {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;

}

.aboutmenu ul li {
    margin: 0 15px;
    font-size: 18px;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    color:#dfd9c3;
    cursor: pointer;
    flex:1;
    text-align: center;
}
.servicestop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #d19e2b;
    justify-content: space-between;

}

.servicesmenu {
    flex:1;
    display:flex;
    justify-content: space-evenly;
}
.servicesmenu ul {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;

}

.servicesmenu ul li {
    margin: 0 15px;
    font-size: 18px;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    color:#dfd9c3;
    cursor: pointer;
    flex:1;
    text-align: center;
}
.servicesicon {
    width: 7vh;
    height:40pt;
    background-image: url(../images/red-icon.png);
    background-size:contain;
    background-repeat: no-repeat;
    margin-right: 20px;

}

.main {
    width:100%;
    min-height: 300vh;
    float:left;
    background-image:url(../images/background-main.png);
    background-repeat:no-repeat;
    background-position: center;
    background-size:cover;
    margin:0;

    

}

.bottom {
    width:55%;
    height: 40pt;
    float:left;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14pt;
    color:#dfd9c3;
    margin: 140px 10px 0px 430px;

}


.toptwo {
    width:93.5%;
    height:60pt;
    margin: 0 0 0 0;
    float:left;
}



.maintwo {
    width:100%;
    height:73vh;
    float:left;
    margin: 100px 0 0 0;
}
.middletwo {
    width:100%;
    height: 15vh;
    float:left;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 80pt;
    color:#d19e2b;
    margin: 950px 0px 0px 760px;


}

.pagetwoimage {
    width:100%;
    height:200vh;
    background-image: url(../images/zula-index-background.png);
    background-size: cover;
    margin: 0px 0 0 0;
    float:left;
    position: relative;

}


.pagetwotext {
    width:45%;
    height:70vh;
    float:right;
    margin: 140px 60px 0 0;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size:14pt;
    color:#dfd9c3;
    line-height:1.8;
    
}

.topthree {
    width:93.5%;
    height:120pt;
    float:right;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-weight: 900;
    font-size: 80pt;
    color:#d19e2b;
    margin: -50px 0px 0px 100px;



}

.middlethree {
    width:50%;
    height:20vh;
    margin: 80px 0 0 100px;
    float:left;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14pt;
    color:#dfd9c3;
    line-height:1.8;
}
.middlebox {
    width:20%;
    height:40vh;
    background-color: #d19e2b;
    margin: -300px 0 0 0;
    float:right;

}


.marketingbox {
    width:20%;
    height:10vh;
    background-image: url(../images/marketing-logo.png);
    background-position: center;
    background-size: cover;
    position:absolute;
    top:-10px;
    left:500px;
    z-index:10;
    margin:2250px 0 0 0;
    cursor:pointer;

}


.graphicsbox .graphicstitle  {
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50pt;
    color:#dfd9c3;
    margin: 0 0 0 100px;

}

.graphicsbox {
    width:20%;
    height:10vh;
    background-image: url(../images/graphics-logo.png);
    background-position: center;
    background-size: cover;
    position:absolute;
    top:-10px;
    left:50px;
    z-index:10;
    margin:2250px 0 0 0;

}

.graphicsmain {
    width:100%;
    height:100vh;
    background-image:url(../images/graphicsmain.png);
    background-position: center;
    background-size: cover;
}

.marketingmain {
    width:100%;
    height:100vh;
    background-image:url(../images/marketingmain.png);
    background-position: center;
    background-size: cover;
}

.designmain {
    width:100%;
    height:100vh;
    background-image:url(../images/design.png);
    background-position: center;
    background-size: cover;
}

.marketingbox .marketingtitle {
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50pt;
    color:#dfd9c3;
    float:right;
    margin: 0 100px 0 0;
}

.aboutmain {
    width:100%;
    height:300vh;
    float:left;
    background-image:url(../images/about-background.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center;
    margin:0 0 0 0;
    position: relative;
}

.cursorone {
    width:80px;
    height:80px;
    background-image: url(../images/cursor.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top:2150px;
    left:1300px;
    z-index: 10;
}

.cursortwo {
    width:80px;
    height:80px;
    background-image: url(../images/cursor.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top:2250px;
    left:1300px;
    z-index: 10;
}

.email {
    width:30%;
    height:10vh;
    text-align: right;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25pt;
    color:#dfd9c3;
    margin: 2160px 0 0 850px;
}

.email a {
    text-decoration: none;
    color: #dfd9c3;
    
}

.phonenumber {
    width:30%;
    height:10vh;
    text-align: right;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25pt;
    color:#dfd9c3;
    margin: 20px 0 0 850;
    

}

.phonenumber a {
    text-decoration: none;
    cursor: pointer;
    color: #dfd9c3;
}




.servicesmain {
    width:100%;
    height:200vh;
    float:left;
    background-image:url(../images/servicesmain.png);
    background-size:cover;
    background-repeat:no-repeat;
    

}



.workmain {
    width:100%;
    height:700vh;
    float:left;
    background-image:url(../images/workmain.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center;
    margin:0 0 0 0;
    position: relative;
}

.workicon {
    width: 7vh;
    height:40pt;
    background-image: url(../images/black-zula.png);
    background-size:contain;
    background-repeat: no-repeat;
    margin-right: 20px;

}


.worktop {
    width:100%;
    height: 60pt;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
    background-color: #d19e2b;
    justify-content: space-between;

}

.workmenu {
    flex:1;
    display:flex;
    justify-content: space-evenly;
}
.workmenu ul {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;

}

.workmenu ul li {
    margin: 0 15px;
    font-size: 18px;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    color:#dfd9c3;
    cursor: pointer;
    flex:1;
    text-align: center;
}

.vertical-menu {
    list-style: none;
    margin: 660px 0 0 600px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.vertical-menu li a {
    text-decoration: none;
    font-family: "dunbar-tall", sans-serif;
    font-weight: 700;
    font-size: 70px;
    color: #dfd9c3;
    padding: 5px 10px;
    display: block;
    line-height: 3.4;

}

.vertical-menu li a:hover {
    color: #fff;
    border-radius: 4px;
}

.pyra {
    width:79%;
    height:80vh;
    background-image: url(../images/pyra.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    margin: 1465px 0 0 160px;
    cursor: pointer;
}

.bgm {
    width:79%;
    height:80vh;
    background-image: url(../images/BGM.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    margin: 2230px 0 0 160px;
}

.magazine {
    width:79%;
    height:80vh;
    background-image: url(../images/magazine.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    margin: 2985px 0 0 160px;
}

.pyramain {
    width:100%;
    height:500vh;
    background-image:url(../images/pyramain.png) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.bgmmain {
    width:100%;
    height:550vh;
    background-image:url(../images/bgmmain.png) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.magazinemain {
    width:100%;
    height:660vh;
    background-image:url(../images/magazinemain.png) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.home {
    width:79%;
    height:80vh;
    background-image: url(../images/home.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    margin: 3740px 0 0 160px;
}
.homemain {
    width:100%;
    height:430vh;
    background-image:url(../images/homemain.png) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.fishing {
    width:79%;
    height:80vh;
    background-image: url(../images/fishing.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    margin: 4510px 0 0 160px;
}
.fishingmain {
    width:100%;
    height:460vh;
    background-image:url(../images/fishingmain.png) ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

@media (max-width:768px) {

}

/* ============================================
   MOBILE — MAKE BACKGROUND IMAGES RESPONSIVE
   (Keeps your exact VH layout spacing)
   ============================================ */

   @media (max-width: 768px) {

    /* Global fix: all background images scale properly */
    .main,
    .maintwo,
    .pagetwoimage,
    .aboutmain,
    .servicesmain,
    .workmain,
    .pyramain,
    .bgmmain,
    .magazinemain,
    .homemain,
    .fishingmain,
    .graphicsmain,
    .marketingmain,
    .designmain {
        background-size: contain !important;   /* preserve proportions */
        background-repeat: no-repeat !important;
        background-position: top center !important;
        width: 100vw !important;
    }

    /* If any image appears cut off, switch "contain" → "cover" individually */

    /* Ensure containers never exceed screen width */
    body, html {
        overflow-x: hidden !important;
    }

    /* Fix huge left/right margins pushing things off-screen */
    * {
        max-width: 100%;
    }

    /* Cursor icons scaled down but keep their position */
    .cursorone,
    .cursortwo {
        width: 50px;
        height: 50px;
        left: 70vw !important; /* same relative on mobile */
    }

    /* Email + phone stay right aligned and proportional */
    .email,
    .phonenumber {
        width: 100%;
        margin-left: 0 !important;
        text-align: right;
        padding-right: 20px;
        font-size: 16pt;
    }
}