body {
    /* background-image: url(office.jpeg);
    background-blend-mode: lighten; */
    background: linear-gradient(to right, pink, rgb(78, 133, 195), silver);
    border-radius: 10px;
    width: auto;
    height: auto;

}

.header {
    width: 100%;
    height: 80px;
    background-color: rgb(72, 50, 9);
    border-radius: 10px;
}

.header-img>img {
    width: 120px;
    height: 80px;
    border-radius: 1010px;
}

.header-property {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.header-property-divisions {
    display: flex;
    flex-wrap: wrap;
}

.header-property-divisions-1 {
    margin: 23px 10px 0px 5px;
}

.header-link-app {
    margin-bottom: 17px;
}

.header-title {
    margin-left: 10px;
}

.header-title-1 {
    color: rgb(180, 123, 18);
    font-size: 25px;
    margin-top: 15px;
    word-spacing: 5px;
    letter-spacing: 3px;
}

.header-title-2 {
    color: rgb(180, 163, 28);
    font-size: 18px;
    margin-top: 10px;
    word-spacing: 5px;
    letter-spacing: 3px;
}

.header-property-division-1 {
    display: flex;
    flex-wrap: wrap;
}

a>img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .header {
        height: auto;
        padding: 10px;
    }

    .header-img>img {
        width: 100px;
        height: auto;
    }

    .header-title-1 {
        font-size: 20px;
    }

    .header-title-2 {
        font-size: 16px;
    }

    .header-property {
        flex-direction: column;
        align-items: center;
    }

    .header-property-divisions {
        justify-content: center;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .header-title-1 {
        font-size: 18px;
    }

    .header-title-2 {
        font-size: 14px;
    }

    a>img {
        width: 30px;
        height: 30px;
    }
}

.index-background-main>img {
    width: 100%;
    height: 100%;
}

.index-picture>img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 8px;

}

/* nav bar */
.main-nav-bar {
    width: 100%;
    height: 40px;
    background-color: rgb(49, 34, 6);
    border-radius: 10px;
    margin-top: 7px;

}
.nav-size-extent{
    width: 100%;
    height: 60px;
}


.nav-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.nav-title>a {
    text-decoration: none;
    margin: 10px 20px;
    color: rgb(255, 250, 241);
    font-size: 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .nav-title>a {
        font-size: 16px;
        margin: 5px 10px;
    }

    .main-nav-bar {
        height: auto;
    }

    .nav-title {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .nav-title>a {
        font-size: 14px;
        margin: 5px;
    }
}

.markquee-div {
    width: 100%;
    height: 30px;
    font-size: 23px;
    color: rgb(255, 146, 5);
    background: linear-gradient(to right, rgb(13, 14, 13), rgb(136, 134, 106), rgb(150, 150, 175));
    border-radius: 10px;
    margin-top: 8px;
}


/* .video-div>video {
    margin-top: 8px;
    margin-left: 11.5%;
    padding-top: 28px;
    height: 500px;
    width: 1000px;
    display: flex;
    position: absolute;
    justify-items: center;
    align-items: center;
    top: 100px;
    z-index: 2;
    opacity: 0.5;
} */
.video-div > video {
    margin-top: 8px;
    margin-left: 11.5%;
    padding-top: 28px;
    height: 500px;
    width: 1000px;
    display: flex;
    position: absolute;
    justify-items: center;
    align-items: center;
    top: 100px;
    z-index: 2;
    opacity: 0.5;
}

/* Responsive styles */
@media (max-width: 768px) {
    .video-div > video {
        height: 300px; 
        width: 90%; 
        margin-left: 3%; 
        padding-top: 20px;
        top: 50px; 
    }
}

/* @media (max-width: 480px) {
    .video-div > video {
        height: 200px; 
        width: 95%; 
        margin-left: 2.5%; 
        top: 20px; 
    }
} */


.who-we-are>img {
    width: 100%;
    height: 542px;
    border-radius: 10px;
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

#edit-must>img {
    opacity: 80%;
}

/* paragraph */
.para1-div {
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

}

.common-div {
    background: linear-gradient(to right, rgb(175, 175, 228), rgb(233, 216, 213), rgb(95, 117, 126));
    border-radius: 15px;
}

.common-div-adjust {
    margin: 5px;
    padding: 10px 2px 10px 2px;
}

.para1-properties,
.para2-properties {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px;
}

.para1-text,
.para2-text {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    height: 250px;
    background: linear-gradient(to right, blue, tomato, purple);
    border: 2px solid pink;
    border-radius: 10px;
    margin: 5px;
}

#pr1 {
    color: rgb(37, 55, 2);
    background-color: rgba(215, 161, 95, 0.708);
    border-radius: 10px;
    margin: 2px;

}

#pr2 {
    color: rgba(24, 37, 44, 0.786);
    background-color: rgba(255, 251, 246, 0.844);
    border-radius: 10px;
    margin: 2px;
}

#pr3 {
    color: rgb(236, 180, 112);
    background-color: rgba(12, 140, 169, 0.79);
    border-radius: 10px;
    margin: 2px;

}

#pr4 {
    color: rgba(255, 255, 246, 0.863);
    background: linear-gradient(to right, rgba(255, 0, 43, 0.811), rgb(118, 86, 81), purple);
    border-radius: 10px;
    margin: 2px;

}

#pr5 {
    color: rgba(221, 207, 248, 0.975);
    background: linear-gradient(to right, rgba(0, 85, 128, 0.658), rgba(81, 100, 118, 0.813), rgba(46, 137, 41, 0.862));
    border-radius: 10px;
    margin: 2px;

}

#pr6 {
    color: rgb(236, 180, 112);
    background: linear-gradient(to right, rgba(159, 163, 165, 0.883), rgba(16, 100, 178, 0.993), rgba(149, 100, 222, 0.739));
    border-radius: 10px;
    margin: 2px;

}

#pr7 {
    color: rgba(249, 245, 240, 0.917);
    background: linear-gradient(to right, rgba(143, 221, 220, 0.81), rgba(142, 20, 190, 0.81), rgba(230, 225, 237, 0.97));
    border-radius: 10px;
    margin: 2px;

}


#pr8 {
    color: rgb(228, 215, 215);
    background: linear-gradient(to right, rgba(43, 122, 121, 0.763), rgba(170, 152, 12, 0.81), rgba(91, 84, 4, 0.97));
    border-radius: 10px;
    margin: 2px;

}

#pr9 {
    color: rgb(230, 173, 103);
    background: linear-gradient(to right, rgba(16, 17, 17, 0.81), rgba(20, 43, 190, 0.81), rgba(8, 143, 80, 0.97));
    border-radius: 10px;
    margin: 2px;

}

#pr10 {
    color: rgb(28, 31, 31);
    background: linear-gradient(to right, rgba(91, 98, 98, 0.959), rgba(242, 245, 238, 0.948), rgba(225, 237, 234, 0.738));
    border-radius: 10px;
    margin: 2px;

}

#pr11 {
    color: rgba(96, 245, 91, 0.917);
    background: linear-gradient(to right, rgba(143, 221, 220, 0.81), rgba(166, 38, 53, 0.81));
    border-radius: 10px;
    margin: 2px;

}

#pr12 {
    color: rgba(245, 162, 61, 0.917);
    background: linear-gradient(to right, rgba(142, 20, 190, 0.652), rgba(13, 24, 95, 0.712));
    border-radius: 10px;
    margin: 2px;

}

#pr13 {
    color: rgba(95, 56, 76, 0.917);
    background: linear-gradient(to right, rgba(172, 222, 240, 0.81), rgba(230, 225, 237, 0.97));
    border-radius: 10px;
    margin: 2px;

}

#pr14 {
    color: rgba(20, 194, 247, 0.989);
    background: linear-gradient(to right, rgba(79, 11, 1, 0.964), rgba(100, 110, 113, 0.81), rgba(100, 4, 234, 0.97));
    border-radius: 10px;
    margin: 2px;

}

#pr15 {
    color: rgba(243, 217, 21, 0.917);
    background: linear-gradient(to right, rgba(38, 47, 50, 0.81), rgba(187, 186, 187, 0.97));
    border-radius: 10px;
    margin: 2px;

}

#pr16 {
    color: rgba(250, 250, 250, 0.917);
    background: linear-gradient(to right, rgba(60, 149, 178, 0.955), rgba(44, 1, 30, 0.97));
    border-radius: 10px;
    margin: 2px;

}






.para1-img1>img,
.para2-img2>img {
    width: 520px;
    height: 250px;
    border: 2px solid rgba(99, 63, 4, 0.93);
    border-radius: 15px;
    flex-wrap: wrap;
}

.para-p1,
.para-p2 {
    text-align: justify;
    font-size: 18px;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
    letter-spacing: 3px;
}

.bold-text {
    font-weight: 100;
}

/* Contact information */
.contact {
    width: 100%;
    height: auto;
   
    background: linear-gradient(to right, rgba(60, 149, 178, 0.955), rgba(123, 56, 101, 0.97),rgb(210, 210, 126));
    border-radius: 10px;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}

.contact-texts {
    font-size: 25px;
    font-weight: 400;
    color: #fff;
}

.contact-info-address {
    margin-top: 10px;width: 25%;
}

.contact-info-address>p {
    color: #fff;
    font-weight: bold;
}
.contact-info-address>img {
    width: 80px;
    height: 80px;
    border-radius: 1010px;
}


.contact-text-1 {
    color: cornsilk;
    width: 100%;
    font-size: 20px;
    margin-right: 10px;
    letter-spacing: 3px;
    border-radius: 10px;
}

.contact-text-2 {
    color: rgb(250, 192, 150);
    font-size: 60px;
    font-weight: bolder;
    margin-top: 30px;
    letter-spacing: 5px;
    padding-left: 75px;
}

.contact-info-wishing {
    width: 50%;
}

.contact-info-nextpage {
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.previous>a,
.nextlink>a {
    max-width: 100px;
    color: rgb(208, 231, 207);
    font-size: 50px;
    margin: 3px;
    border: 2px solid rgb(11, 65, 105);
    background-color: rgb(147, 64, 20);
    border-radius: 200px;
    text-decoration: none;
}

.previous>a:hover {
    color: #fff;
    background-color: blue;
}

.nextlink>a:hover {
    color: #fff;
    background-color: green;
}

@media (max-width: 768px) {

    .para1-text,
    .para2-text {
        width: 100%;
        height: auto;
    }

    .para1-img1>img,
    .para2-img2>img {
        width: 100%;
        height: auto;
    }

    .para-p1,
    .para-p2 {
        font-size: 20px;
        padding: 10px;
    }

    .contact {
        height: auto;
        padding: 10px;
    }

    .contact-texts {
        font-size: 20px;
    }

    .previous>a,
    .nextlink>a {
        font-size: 25px;
        padding: 10px;
    }
}

@media (max-width: 480px) {

    .para-p1,
    .para-p2 {
        font-size: 18px;
    }

    .contact-text-2 {
        font-size: 25px;
    }

    .previous>a,
    .nextlink>a {
        font-size: 20px;
    }
}