@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Poppins;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*-------------------
|       MAIN        |
------------------- */
#main{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #C1A5AC;
}

#part1{
    height: 100%;
    width: 26%;
}

#part2{
    position: relative;
    height: 100%;
    width: 68%;
    background-color: rgb(145, 231, 231);
    background-image: url(https://images.unsplash.com/photo-1741006727915-d25215fdaf04?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: center 40%;
}

#overlay{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.205);
}

#part3{
    height: 100%;
    width: 6%;
}

#text-div{
    position: absolute;
    width: 410px;
    left: 7%;
    top: 50%;
    transform: translate(0, -50%);
}

#text-div>h1{
    font-size: 95px;
    letter-spacing: 2px;
    line-height: 76px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
/*-------------------
|     SMALL DIV     |
------------------- */
#small-image-div{
    width: 300px;
    height: 400px;
    background-image: url(https://plus.unsplash.com/premium_photo-1667520043080-53dcca77e2aa?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
}

/* ----------------
| Vertical Text   | 
------------------*/
#vertical-text{
    position: absolute;
    transform: rotate(90deg);
    z-index: 999;
    right: -15%;
    top: 43%;

}
#vertical-text h1{
    z-index: 999;
    letter-spacing: 4px;
    font-size: 60px;
    opacity: 0.6;
    color: transparent;
    font-weight: 700;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
    text-transform: uppercase;
}

/* ----------------
|       NAV       | 
------------------*/

#nav{
    position: absolute;
    width: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    left: 5%;
    top: 5%;
}
#nav img{
    height: 80px;
}
#nav h5{
    font-size: 25px;
    font-weight: 600;
}
#nav h5 a {
    color: #fff;
    text-decoration: none;
}

/* ----------------
|     FOOTER      | 
------------------*/
#footer {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 1000;
}
#footer a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 1px;
}
#footer a:hover {
    color: #fff;
}
#footer .separator {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 4px;
}

/* ----------------
| RESPONSIVENESS  | 
------------------*/
@media (max-width: 1024px) {
    #text-div > h1 { font-size: 75px; line-height: 65px; }
    #text-div { width: 350px; }
    #small-image-div { width: 250px; height: 350px; right: 4%; }
    #vertical-text { right: -20%; }
    #vertical-text h1 { font-size: 50px; }
}

@media (max-width: 768px) {
    #nav { width: auto; gap: 30px; }
    #text-div > h1 { font-size: 55px; line-height: 50px; }
    #text-div { width: 250px; left: 5%; }
    #small-image-div { width: 200px; height: 280px; right: 5%; }
    #vertical-text { right: -30%; }
    #vertical-text h1 { font-size: 40px; }
}

@media (max-width: 480px) {
    #nav img { height: 50px; }
    #nav h5 { font-size: 18px; }
    #nav { gap: 15px; top: 4%; left: 5%; }
    #text-div > h1 { font-size: 35px; line-height: 38px; }
    #text-div { width: 180px; top: 40%; }
    #small-image-div { width: 130px; height: 180px; right: 5%; top: 65%; }
    #vertical-text { right: -40%; top: 45%; }
    #vertical-text h1 { font-size: 25px; }
    #footer a { font-size: 12px; }
    #footer .separator { display: none; } /* Hide the pipe visually on mobile */
    #footer .phone { display: block; margin-top: 4px; } /* Stack the phone number under the link */
}